wechat/src/pages/user/mainPage/userCenter/index.vue

<template>
  <div class="mainPage">
    <div class="loading" v-if="isLoading">
      <div @click="bindMobile">请绑定手机号</div>
    </div>
    <div v-else>
      <div class="userTop_view" >
        <div class="gradient_bg"></div>
        <div class="zIndex_bg"></div>
        <div class="userAvatar_Border">
          <div class="userAvatar">
            <img :src='AccountInfo.headimgurl' alt="" width="100%" height="100%">
          </div>
        </div>
        <div class="uesr-info">
          <div class="user-name">{{user.Name}}</div>
          <div class="mobile">{{user.Phone}}</div>
        </div>
      </div>
      <div class="vip-privilege flex-h">
        <div class="flex-item privilege-item" @click="toCoupons">
          <div class="img-box">
            <img src="../../../../common/icon/userCenter-icon-1.png" width="100%" height="100%" alt="">
          </div>
          <span>优惠券</span>
          <span>2张未使用</span>
        </div>
        <div class="flex-item privilege-item" @click="toCard">
          <div class="img-box">
            <img src="../../../../common/icon/userCenter-icon-2.png" width="100%" height="100%" alt="">
          </div>
          <span>卡券</span>
          <span>2张未使用</span>
        </div>
        <div class="flex-item privilege-item" @click="toVip">
          <div class="img-box">
            <img src="../../../../common/icon/userCenter-icon-3.png" width="100%" height="100%" alt="">
          </div>
          <span>VIP卡</span>
          <span>￥200 <i class="iconfont icon-jiantou-right" style="font-size: 0.1rem;"></i></span>
        </div>
      </div>

      <div class="userCenter-menu">
        <div class="menu-item flex-h" @click="toLessonOrder">
          <span>课程订单</span>
          <i class="iconfont icon-jiantou-right"></i>
        </div>
        <div class="menu-item flex-h" @click="toGoodsOrder">
          <span>商品订单</span>
          <i class="iconfont icon-jiantou-right"></i>
        </div>
        <div class="menu-item flex-h">
          <span>体检报告</span>
          <i class="iconfont icon-jiantou-right"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: actions } = createNamespacedHelpers('userCenter')
export default {
  name: '',
  data () {
    return {
      user: {},
      isLoading: true
    }
  },
  computed: {
    ...mapState({
      userInfo: x => x.userCenter.userInfo,
      org: x => x.app.orgId
    })
  },
  components: {

  },
  mounted () {
    this.getUserInfo({ org: this.org }).then(() => {
      if (this.userInfo != 406) {
        this.user = this.userInfo.customer
        this.AccountInfo = JSON.parse(this.user.AccountInfo)
        this.headimgurl = this.AccountInfo.headimgurl
        this.isLoading = false
      }
    })
  },
  methods: {
    ...actions(['getUserInfo']),
    toLessonOrder () {
      this.$router.push({ name: 'lessonOrder' })
    },
    toVip () {
      this.$router.push({ name: 'vip' })
    },
    toCard () {
      this.$router.push({ name: 'card' })
    },
    toCoupons () {
      this.$router.push({ name: 'coupons' })
    },
    bindMobile () {
      this.$router.push({ name: 'bindMobile' })
    },
    toGoodsOrder () {
      this.$router.push({ name: 'orderList' })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import 'page.scss';
</style>