zhangsiye/mini/layout/index.vue

<template>
  <view class="layout" :style="[customStyle]">
    <slot />
    <get-user-info v-model="showInfo" @success="handleGetUserSuccess" />
    <get-user-phone v-model="showPhone" />
    <tab />
  </view>
</template>

<script>
/**
 * @param getUserInfo 显示获取用户信息弹窗
 * @param getPhone 显示获取手机号弹窗
 */
import GetUserInfo from 'components/GetUserInfo'
import GetUserPhone from '../components/GetUserPhone/index'
import { mapState } from 'vuex'
import Tab from './componets/tab'
export default {
  name: 'Layout',
  components: {
    Tab,
    GetUserPhone,
    GetUserInfo
  },
  props: {
    getUserInfo: {
      type: Boolean,
      default: false
    },
    getPhone: {
      type: Boolean,
      default: false
    },
    customStyle: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      showInfo: false,
      showPhone: false
    }
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      userInfo: state => state.user.info
    }),
    isLogin() {
      return !!this.token
    }
  },
  watch: {
    getUserInfo(val) {
      this.showInfo = val
    },
    getPhone(val) {
      this.showPhone = val
    }
  },
  async mounted() {
    await this.login()
    this.checkUserInfo()
  },
  methods: {
    // 登录
    async login() {
      if (!this.$api.user.isLogin()) {
        await this.$api.user.login().then(res => {
          const { token, user } = res.data
          this.$store.dispatch('user/token', token)
          this.$store.dispatch('user/info', user)
          this.checkUserInfo()
          this.$jump({
            type: 'reload'
          })
        })
      }
    },
    // 检查用户信息
    checkUserInfo() {
      if (!this.token) return
      if (!this.userInfo || !this.userInfo.nickname) {
        this.showInfo = true
      } else if (!this.userInfo.phone_num) {
        this.showPhone = true
      }
    },
    // 获取用户信息成功
    handleGetUserSuccess() {
      if (this.userInfo && !this.userInfo.phone_num) {
        this.showPhone = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  // 这里可以定义背景色
    .layout{
      padding-bottom: 116rpx;
      position: relative;
    }
</style>