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

<template>
  <div class="mainPage">
    <div>
      <div class="userTop_view" >
        <div class="gradient_bg"></div>
        <div class="zIndex_bg"></div>
        <div class="userAvatar_Border">
          <div class="userAvatar">
            <img :src='headimgurl' alt="" width="100%" height="100%">
          </div>
        </div>
        <div class="uesr-info">
          <div class="user-name">{{user.Name}}</div>
          <div class="mobile" v-if="user.Phone">{{user.Phone}}</div>
          <div class="mobile" v-else @click="bindMobile">绑定手机号</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>{{Nums.couponnum || 0}}张未使用</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>{{Nums.cardsnum || 0}}张未使用</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>￥{{(Nums.account || {}).Amount || 0}} <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" @click="toBodyCheck">
          <span>体检报告</span>
          <i class="iconfont icon-jiantou-right"></i>
        </div>
        <div class="menu-item flex-h" @click="toLuckdraw">
          <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: {}
    }
  },
  computed: {
    ...mapState({
      userInfo: x => x.userCenter.userInfo,
      org: x => x.app.orgId,
      Nums: x => x.userCenter.Nums
    })
  },
  components: {

  },
  mounted () {
    this.getUserInfo({ org: this.org }).then(() => {
      this.user = this.userInfo.customer
      this.AccountInfo = JSON.parse(this.user.AccountInfo)
      this.headimgurl = this.user.Headimgurl
    })
    this.getNum()
  },
  methods: {
    ...actions(['getUserInfo', 'getNum']),
    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' })
    },
    toBodyCheck () {
      window.location.href = `${window.location.origin}/c-v2/bodyCheck.html#/`
    },
    toLuckdraw () {
      // ^参数约定为97
      let userid = this.userInfo.customer.CustomerId
      let num = Math.floor(Math.random() * 10 + 1) * 100 + Math.floor(Math.random() * 10 + 1) * 10 + Math.floor(Math.random() * 10 + 1)
      num = num >= 1000 ? 999 : num
      userid = parseInt(`${userid}${num}`) ^ 97
      window.location.href = `${window.location.origin}/game/luckdraw/#/lotteryList?from=${userid}`
    }
  }
}
</script>

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