program/src/components/index/personal.vue

<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 == 11">有效期至 {{ userinfo['validity_time_formatted'] }}</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: 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>
        <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="to_coupons">
          <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>

    <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-popup
      :show="twenty&first"
      :close-on-click-overlay="false"
      custom-class="pop"
      overlay
      z-index="99"
    >
      <div class="quan_container padding-top-xl ">
        <view class="margin-top-xl flex justify-center">
            <text class="title" >水母会员次卡体验券1张</text>
        </view>
        <view class="flex justify-center margin-top">
            <text class="text-xs">{{userinfo.certainTime}}&nbsp;当天领取有效</text>
        </view>
        <div class="flex justify-center margin-top" >
            <view class="flex justify-center quan_container_lil">
              <div style="display: flex;align-items: baseline">
                <text class="experience time">{{ gift_time }}</text>
                <text class="time_text margin-left-xs">次</text>
              </div>  
            </view>
        </div>
      </div>  
      <view class="flex justify-center margin-top-xl">
         <button class="cu-btn get_btn text-white" @click="get_ticket">领取</button>
      </view>

    </van-popup> -->

    <!--    外发领券弹窗-->
    <van-popup
      :show="is_outShow"
      :close-on-click-overlay="false"
      custom-class="pop"
      overlay
      z-index="99"
    >
      <div class="quan_container padding-tb-xl">
          <view class="margin-top-xl flex justify-center">
              <text class="title">{{outCouponData.name}}</text>
          </view>
          <view class="flex justify-center margin-top">
              <text class="text-xs" v-if="outCouponData.validity_time.type==1">{{outCouponData.validity_time.time_format}}&nbsp;之前领取有效</text>
              <text class="text-xs" v-else>{{outCouponData.validity_time.start_time_format}}&nbsp;至&nbsp;{{outCouponData.validity_time.end_time_format}}&nbsp;之前领取有效</text>
          </view>
            <!-- 核销 -->
            <view class="flex justify-center margin-top" v-if="outCouponData.type==1">
              <div class="flex justify-center quan_container_lil">
                <div style="display: flex;align-items: baseline">
                 <text class="hexiao time margin-right-xs">{{ outCouponData.discount.time }}</text>
                 <text class="time_text" v-if="outCouponData.discount.type==0">分钟</text>
                 <text class="time_text" v-else>次</text>
                </div> 
              </div>
            </view>
           <!-- 满减 -->
            <view class="flex justify-center margin-top" v-if="outCouponData.type==2">
              <div class="flex justify-center quan_container_lil">
                <div style="display: flex;align-items: baseline">
                  <text class="time_text">满</text>
                  <text class="manjian time margin-lr-xs">{{ outCouponData.discount.full }}</text>
                  <text class="time_text">减</text>
                  <text class="manjian time margin-left-xs">{{ outCouponData.discount.reduce }}</text>
                </div>  
              </div>   
            </view>
            <!-- 折扣 -->
            <view class="flex justify-center margin-top" v-if="outCouponData.type==3">
              <div class="flex justify-center quan_container_lil">
                <div style="display: flex;align-items: baseline">
                  <text class="time_text">打</text>
                  <text class="discount time margin-lr-sm">{{ outCouponData.discount.discount*10 }}</text>
                  <text class="time_text">折</text>
                </div>
              </div>  
            </view>
            <!-- 随机 -->
            <view class="flex justify-center margin-top" v-if="outCouponData.type==4">
              <div class="flex justify-center quan_container_lil">
                <div style="display: flex;align-items: baseline">
                  <text class="time_text">随机</text>
                  <text class="random time margin-lr-xs">{{ outCouponData.discount.start }}</text>
                  <text class="time_text">至</text>
                  <text class="random time margin-lr-xs">{{ outCouponData.discount.end }}</text>
                  <text class="time_text">元</text>
                </div> 
              </div>  
            </view>
       </div>
       <view class="flex justify-center margin-top-xl">
          <button class="cu-btn get_btn text-white" @click="get_coupon">领取</button>
       </view>

      
    </van-popup>

    <!--    窗口弹出-->
    <van-popup :show="pop_show" @close="close_pop" round>
      <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>
    <van-toast id="van-toast"/>

  </div>
</template>

<script>
import { userUpdateLoginTime } from "../../requests/user";
import {
  couponReceiveFirst,
  couponReceiveFirstID,
  outputCoupon,
  couponReceive,
  outCardCoupon,
} from "../../requests/coupons";
import Toast from "../../../static/vant/toast/toast";
import { reload_userinfo } from "../../utils/user";
import { timestampTwoNum } from "../../utils/index";
import user_store from "@/store/index";

var $this;
export default {
  name: "personal",
  data() {
    return {
      userinfo: {
        //判断是否第一次进入小程序 1为是第一次 0为非第一次
      },
      first: false,
      pop_show: false,
      receive: 0,
      invite_code: false,
      // twenty: false,
      // 外发
      output: false,
      is_outShow: false,
      outCouponData: {
        type: Number,
        validity_time: {
          type: Number,
        },
        discount: {
          type: Number,
        },
      },
      // gift_time: Number
    };
  },
  methods: {
    //会员日注册领取体验卡
    // get_ticket() {
    //   if ($this.receive == 0) {
    //     $this.receive += 1;
    //     console.log($this.receive);
    //     $this.first = false;
    //     let params
    //     couponReceiveFirstID().then((res)=>{
    //       let resData = res.data.data
    //       params={
    //         ID: resData.coupon_category_id,
    //         start_time: resData.validity_time.start_time,
    //         end_time: resData.validity_time.end_time,
    //       }
    //       couponReceiveFirst(params).then((res) => {
    //         let $res = res.data;
    //         if ($res.code == 0) {
    //            $this.first = false;
    //            userUpdateLoginTime().then((res) => {
    //             let $res = res.data;
    //             $this.userinfo["login_time"] = $res.data;
    //             $this.$store = user_store.setters.set_userinfo($this.userinfo);
    //             wx.setStorageSync("is_first", false);
    //             reload_userinfo($this);
    //           });
    //           Toast.success($res.errmsg);
    //         } else {
    //            Toast.fail($res.errmsg);
    //         }
    //       });
    //     })
    //   }
    // },
    //领取外发卡券
    get_coupon() {
      wx.setStorageSync("is_out", false);
      couponReceive($this.outCouponData)
        .then((res) => {
          let $res = res.data;
          if ($res.code == 0) {
            Toast.success({
              message: $res.errmsg,
              duration: 800,
              onClose() {
                reload_userinfo($this);
              },
            });
            $this.is_outShow = false;
          } else {
            Toast.fail({
              message: $res.errmsg,
              duration: 800,
            });
            $this.is_outShow = false;
          }
        })
        .catch((err) => {
          console.log("错误", err);
        });
    },
    //修改第一次登录状态
    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",
      });
    },
    to_coupons() {
      mpvue.navigateTo({
        url: "/pages/coupons/main",
      });
    },
    change_login_status() {
      $this.$emit("change_login_status");
    },
    // 外发通用数据处理
    handle_coupon_data(res) {
      if (res.data.code == 0) {
        let $newData = res.data.data;
        $newData.validity_time["start_time_format"] = timestampTwoNum(
          $newData.validity_time["start_time"]
        );
        $newData.validity_time["end_time_format"] = timestampTwoNum(
          $newData.validity_time["end_time"]
        );
        $newData.validity_time["time_format"] = timestampTwoNum(
          $newData.validity_time["time"]
        );

        $this.outCouponData = $newData;
        console.log("外发数据：", $this.outCouponData);
        $this.is_outShow = true;
      } else {
        wx.setStorageSync("is_out", false);
        $this.output = false;
      }
    },
    // 获取不同外发券
    check_output_coupon() {
      //外发
      $this.output = wx.getStorageSync("is_out");
      reload_userinfo($this);

      //获取外发数据
      if ($this.output == true) {
        // 判断外发哪种券
        if (wx.getStorageSync("is_other") == false) {
          outputCoupon().then((res) => {
            handle_coupon_data(res)
          });
        } else {
          outCardCoupon().then((res) => {
            handle_coupon_data(res)
          });
        }
      }
    },
  },
  mounted() {
    $this.first = wx.getStorageSync("is_first");
    $this.invite_code = wx.getStorageSync("code");

    $this.check_output_coupon();

    //判断是否每月20号
    // let day = new Date().getDate();
    // if (day == 20) {
    //   wx.setStorageSync("is_twenty", true);
    //   couponReceiveFirstID().then((res)=>{
    //     console.log('体验次卡',res.data.data.discount.time)
    //     $this.gift_time = res.data.data.discount.time
    //   })
    // } else {
    //   wx.setStorageSync("is_twenty", false);
    // }
    // $this.twenty = wx.getStorageSync("is_twenty");
    // console.log("可以领注册体验券吗", $this.first & $this.twenty);
  },
  onShow() {
    $this.check_output_coupon();
  },
  created() {
    $this = this;
  },
  onPullDownRefresh() {
    reload_userinfo($this);
  },
};
</script>


<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;
}

.level_btn_yellow {
  background-color: #e3a000;
}

.level_btn_grey {
  background-color: #909090;
}
.jifen {
  position: absolute;
  top: 73px;
}

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

.quan_container {
  background-image: url("https://img.shuimuai.com/pic_getCoupon2.png");
  background-position: center;
  background-size: 100% 100%;
  width: 270px;
  height: 235px;
  padding-left: 5px;
}
.quan_container_lil {
  background-image: url("https://img.shuimuai.com/pic_getCouponlil.png");
  background-position: center;
  background-size: 100% 100%;
  width: 185px;
  height: 56px;
  display: flex;
  align-items: center;
}
/*标题*/
.quan_container .title {
  font-size: 15px;
  font-weight: bold;
  color: #222222;
  font-family: Microsoft YaHei;
  margin: 6px 0 -5px 0;
}

/*副标题*/
.quan_container .sub-title {
  font-size: 10px;
  font-weight: 400;
  font-family: Microsoft YaHei;
  color: #030000;
}

/*分钟数*/
.quan_container .time {
  font-weight: bold;
  color: #6858c4;
}
.hexiao,
.discount,
.experience {
  font-size: 36px;
}
.random {
  font-size: 19px;
}
.manjian {
  font-size: 24px;
}
/*分钟二字*/
.quan_container .time_text {
  font-size: 12px;
  font-weight: 400;
  color: #6858c4;
}

/* 领取按钮 */
.get_btn {
  width: 119px;
  height: 31px;
  background: #6858c4;
  border-radius: 15px;
}
/*弹窗模块*/
.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>