wx-miniapp/src/pages/WoDe/index.vue

<template>
  <view class="page WoDe">

    <!-- 背景 -->
    <view class="Bg">
      <image mode="widthFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/wodebeijingtu.png"></image>
      <view class="centerLabel">
        <view class="flex-h">
          <view class="Icon">
            <image mode="widthFix" :src="IconUrl"></image>
          </view>
          <view class="flex-item">
            <navigator url="../SignIn/index" hover-class="other-navigator-hover" class="SiginIn" v-if="UserInfo === null || UserInfo.Phone === undefined || UserInfo.Phone === null">立即登录</navigator>
            <text v-else>{{UserInfo.Name}}</text>
            <text v-if="!(UserInfo === null || UserInfo.Phone === undefined || UserInfo.Phone === null)">{{UserInfo.Phone}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- tab -->
    <view class="TabList">
      <navigator url="./MyActivityList/index" hover-class="other-navigator-hover" class="flex-h">
        <view>
          <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/iconhuodong.png"></image>
        </view>
        <text class="flex-item">我的活动</text>
        <text class="iconfont iconjiantouright"></text>
      </navigator>
      <navigator url="./MyRecommed/index" hover-class="other-navigator-hover" class="flex-h">
        <view>
          <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/wodeicon1.png"></image>
        </view>
        <text class="flex-item">我的推荐</text>
        <text class="iconfont iconjiantouright"></text>
      </navigator>
      <!-- <navigator url="./Feedback/index" hover-class="other-navigator-hover" class="flex-h">
        <view>
          <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/wodeicon2.png"></image>
        </view>
        <text class="flex-item">意见反馈</text>
        <text class="iconfont iconjiantouright"></text>
      </navigator> -->
    </view>

    <!-- 授权头像获取弹窗 -->
    <GetUserIcon @UserInfoChange="UserInfoChange"></GetUserIcon>

  </view>
</template>

<script>
import GetUserIcon from '../../components/GetUserIcon/index'
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
export default {
  name: 'WoDe',
  data () {
    return {
      IconUrl: 'https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/morentouxiang.png',
    }
  },
  computed: {
    ...mapUserState({
      UserInfo: x => x.UserInfo // 用户信息
    })
  },
  components: {
    GetUserIcon
  },
  created () {
    this.$authed(() => {
      this.Init()
    })
  },
  methods: {
    ...mapUserActions([
      'MainSignIn' // 获取用户信息
    ]),
    ...mapUserMutations([
      'EditUserInfo' // 编辑用户信息
    ]),
    Init () { // 初始化
      if (this.UserInfo === null && this.UserInfo.Phone === undefined && this.UserInfo.Phone === null) {
        this.IconUrl = this.UserInfo.Icon
      }
    },
    UserInfoChange () {
      this.IconUrl = this.UserInfo.Icon
      console.log(this.IconUrl, '1`````')
    }
  }
}
</script>

<style lang="scss">
@import "page.scss";
</style>