shuimu-planet/src/components/index/cards.vue

<script>
import {reload_userinfo} from "../../utils/user";

let $this;
export default {
  name: "UserCard",
  data() {
    return {
      userinfo: {
        //判断是否第一次进入小程序 1为是第一次 0为非第一次
      },
      invite_code: 0,
    };
  },
  methods: {
    //跳转页面
    pageTo($page) {
      mpvue.navigateTo({
        url: "/pages/" + $page + "/main",
      });
    }
  },
  mounted() {
    $this.invite_code = wx.getStorageSync("code");
    reload_userinfo($this);
  },
  created() {
    $this = this;
  },
  onPullDownRefresh() {
    reload_userinfo($this);
  },
};
</script>

<template>
  <div id="personal">
    <!-- 用户信息 -->
    <div :class="{ userinfoYellow: userinfo.isActive, userinfoGrey: userinfo.isntActive}">
      <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"
                      :class="{ level_btn_yellow: userinfo.isActive, level_btn_grey: userinfo.isntActive }">
                {{ userinfo.level_name }}
              </button>
              <view class="text-xs padding-left" v-if="userinfo.level*1 === 11">有效期至
                {{ userinfo["validity_time_formatted"] }}
              </view>
            </div>
          </div>
        </van-col>
        <van-col span="5">
          <view class="text" @click="pageTo('user_center')">
            <text class="cuIcon-people"></text>
            <text class="under_line">会员中心</text>
          </view>
        </van-col>
      </van-row>
<!--      <van-row class="padding">-->
<!--        <view style="opacity:1">-->
<!--          <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-lg">{{ invite_code }}</text>-->
<!--          </van-col>-->
<!--        </view>-->
<!--      </van-row>-->
      <van-row class="bottom-info">
        <van-col span="6" offset="1">
          <div class="flex flex-direction align-center">
            <text class="text-xxl">{{ userinfo.play_time }}</text>
            <text class="font-sm">可用时长(分钟)</text>
          </div>
        </van-col>
        <van-col span="7" offset="2" @click="pageTo('coupons')">
          <div class="flex flex-direction align-center text-link">
            <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>
    <view class="text-center font-sm" v-if="userinfo.level >= 3 && userinfo.level <= 7">
      <text class="text-gray">今日专注力免费训练时长还有：
        <text class="text-yellow">{{ userinfo.free_time }}</text>
      </text>
    </view>
    <van-toast id="van-toast"/>
  </div>
</template>

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

.userinfoGrey {
  background-image: url("https://img.shuimuai.com/pic_grey.png");
  background-position: center;
  background-size: 100% 100%;
  width: 99%;
  height: 173px;
  margin: 0px auto;
}

#personal {
  width: 100%;
  position: relative;
  top: -95px;
  z-index: 3;
}
.bottom-info{
  display: block;
  margin-top:35px;
}

.level_btn_yellow {
  background-color: #e3a000;
}

.level_btn_grey {
  background-color: #909090;
}

.font-sm {
  font-size: 10px;
}
.text-link{
  color: #4B3AB0;
}
</style>