program/src/components/index/personal.vue

<template>
  <div id="personal">
    <!--    用户信息-->
    <div class="userinfo">
      <van-row class="padding">
        <van-col span="3" offset="2">
          <view class="cu-avatar radius lg" :style="'background-image:url('+userinfo.portrait+');'"></view>
        </van-col>
        <van-col span="12" offset="1">
          <div class="flex flex-direction align-start justify-start">
            <div>
              <text class="text-black text-bold">{{ userinfo.user_name }}</text>
            </div>
            <div class="flex justify-between align-center">
              <button class="cu-btn sm round level_btn">
                <template v-if="userinfo.level == 0">
                  普通会员
                </template>
                <template v-if="userinfo.level == 1">
                  体验会员
                </template>
                <template v-if="userinfo.level == 2">
                  黄金会员
                </template>
                <template v-if="userinfo.level == 3">
                  普通会员
                </template>
                <template v-if="userinfo.level == 4">
                  钻石会员
                </template>
                <template v-if="userinfo.level == 5">
                  创客代理
                </template>
                <template v-if="userinfo.level == 6">
                  区域代理
                </template>
                <template v-if="userinfo.level == 7">
                  合伙人
                </template>
                <template v-if="userinfo.level == 8">
                  店员
                </template>
                <template v-if="userinfo.level == 9">
                  店长
                </template>

              </button>
              <view class="text-xs padding-left">有效期至 2020.11.11</view>
            </div>
          </div>
        </van-col>
        <van-col span="5">
          <view class="text" @click="to_user_center">
            <text class="cuIcon-people"></text>
            <text class="under_line">会员中心</text>
          </view>
        </van-col>
      </van-row>
      <van-row class="padding">
        <view style="opacity: 0;">
          <van-col span="4" class="lg" offset="2">
            <text class="cuIcon-selection"></text>
            积分:
          </van-col>
          <van-col span="8">
            <text class="text-white text-bold text-xxl jifen">{{ userinfo.experience }}</text>
          </van-col>
        </view>

      </van-row>
      <van-row>
        <van-col span="6" offset="2">
          <div class="flex flex-direction align-center">

            <text class="text-xxl">{{ userinfo.playtime }}</text>
            <text class="font-sm">可用时长（分钟）</text>
          </div>
        </van-col>
        <van-col span="6" offset="2">
          <div class="flex flex-direction align-center">

            <text class="text-xxl">{{ userinfo.coupon }}</text>
            <text class="font-sm">优惠券/码</text>
          </div>
        </van-col>
        <van-col span="6" offset="2">
          <div class="flex flex-direction align-center">

            <text class="text-xxl">{{ userinfo.experience }}</text>
            <text class="font-sm">次卡</text>
          </div>
        </van-col>
      </van-row>
    </div>

    <!--    领券弹窗-->
    <van-popup :show="first" :close-on-click-overlay="false" custom-class="pop">
      <div class="quan_container">
        <van-row gutter="10">
          <van-col span="14" offset="1">
            <div class="padding-top-sm">
              <text class="title">
                水母会员次卡体验券1张
              </text>
            </div>
            <div>
              <text class="subtitle">
                2020.09.21 13:00之前领取有效
              </text>
            </div>

            <view class="padding-tb">
              <text class="time">
                10
              </text>
              <text class="time_text">
                分钟
              </text>
            </view>
          </van-col>
          <van-col span="5" offset="4" class="" @click="get_ticket">
            <view class="get_ticket_text">领取</view>
          </van-col>
        </van-row>


      </div>
    </van-popup>

    <!--    窗口弹出-->
    <van-popup :show="pop_show" @close="close_pop" round :close-on-click-overlay="false">
      <div class="err_container flex flex-direction align-center justify-around">
        <view>
          <text class="title">
            您当前剩余时间不足
          </text>
        </view>
        <view>
          <text class="sub-title">
            请充值后进行游戏
          </text>
        </view>
        <img src="https://img.shuimuai.com/web/sign_notimeJfish.png" class="err_img" alt="">
        <button class="cu-btn lg bg-primary text-white" @click="to_recharge">立即充值</button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {userDetail} from "../../requests/user";

var $this
export default {
  name: "personal",
  data() {
    return {
      userinfo: {
        portrait: 'https://img.shuimuai.com/weixintouxiang.png',
        user_name: "小疯兔屁屁",
        phone: "15627202057",
        experience: "0",
        playtime: 0,
        validity_time: "0",
        coupon: "0",
        level: 0,
        nick_name: ""
        //判断是否第一次进入小程序 1为是第一次 0为非第一次

      },
      first: 0,
      pop_show: false
    }
  },
  methods: {
    get_ticket() {
      this.userinfo.first = 0
      console.log('获取体验券');
    },
    close_pop() {
      this.pop_show = false
    },
    //跳转充值中心
    to_recharge() {
      mpvue.navigateTo({
        url: "/pages/user_center/recharge/main"
      })
    },
    //跳转用户中心
    to_user_center() {
      mpvue.navigateTo({
        url: "/pages/user_center/main"
      })
    }
  },
  mounted() {
    //获取用户信息
    //获取用户信息
    userDetail().then((res) => {
      let $data = res.data
      //判断如果是第一次登录就 弹出领取体验卡
      $this.userinfo = $data.data
      // if ($this.userinfo.login_time == 0) {
      //   $this.first = true
      // } else if ($this.userinfo.play_time == 0) {
      //   $this.pop_show = true
      // }
      $this.$store.commit('set_userinfo', $data.data);
    })


  },
  created() {
    $this = this
  }
}
</script>


<style scoped>
.userinfo {
  background-image: url("https://img.shuimuai.com/huiyuankadiban.png");
  background-position: center;
  background-size: 100% 100%;
  width: 95%;
  height: 181px;
  margin: 0px auto;

}

#personal {
  width: 100%;
  position: relative;
  top: -60px;
  z-index: 3;
}

.level_btn {
  background-color: #E3A000;
}

.jifen {
  position: absolute;
  top: 73px;
}

.font-sm {
  font-size: 10px;
}

.quan_container {
  background-image: url("https://img.shuimuai.com/web/index_item_quan.png");
  background-position: center;
  background-size: 100% 100%;
  width: 340px;
  height: 115px;
}

/*标题*/
.quan_container .title {
  font-size: 15px;
  font-weight: 400;
  color: #030000;
  line-height: 24px;

}

/*子标题*/
.quan_container .sub-title {
  font-size: 10px;
  font-weight: 400;
  color: #030000;
  line-height: 24px;

}

/*分钟数*/
.quan_container .time {
  font-size: 36px;
  font-weight: 400;
  color: #030000;
  line-height: 24px;
}

/*分钟二字*/
.quan_container .time_text {
  font-size: 12px;
  font-weight: 400;
  color: #030000;
  line-height: 24px;
}

/*领取二字*/
.quan_container .get_ticket_text {
  font-size: 18px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 24px;
  margin: 45px 0px;
}

/*弹窗模块*/
.err_container {
  width: 260px;
  height: 300px;
  border-radius: 5px;
}

/*标题*/
.err_container .title {
  font-size: 20px;
  font-weight: bold;
  color: #4C4C4C;
  line-height: 24px;
}

/*子标题*/
.err_container .sub-title {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #4B4B4B;
  line-height: 24px;
}

.err_img {
  width: 73px;
  height: 83px;
}
</style>
<style>
.pop {
  background-color: rgba(255, 255, 255, 0) !important;
}
</style>