program/src/pages/user_center/recharge/index.vue

<template>
  <div class="uc_recharge_container margin-bottom-xl">
    <!--    头部卡片-->
    <div class="mine padding">
      <div class="flex justify-between">
        <view>
          <text class="gray">当前剩余时长（分钟）</text>
        </view>
        <view @click="to_orderlist">
          <text class="cuIcon-calendar"></text>
          <text class="under_line">我的订单</text>
        </view>
      </div>
      <view>
        <text class="mine_min">{{ userinfo.play_time }}</text>
      </view>
    </div>

  <div v-if="userinfo.level==11">
    <!--    标题-->
    <div class="title flex padding-left align-center margin-top-xl margin-bottom">
      <div class="line margin-right-xs "></div>
      <text class="titles">家庭VIP</text>
    </div>

    <!--    黄金会员-->
    <div
      v-for="(item,index) in time_cards"
      :key="index"
      class="margin-bottom"
    >
      <div
        class="vip"
        :class="item.bg"
        @click="changeCardShow(item.goods_id)"
      >
        <van-row>
          <van-col
            span="10"
            offset="6"
          >
            <div
              class="card_body"
              style="padding-top:14px;"
            >
              <view>
                <!-- <text class="mine_min  text-white">{{ item.play_time }}</text> -->
                <text class="text-white">&nbsp;分钟</text>
              </view>
              <view>
                <text class="text-white text-sm subGrey">{{ item.title1 }}</text>
              </view>

            </div>
          </van-col>

          

          <van-col
            span="6"
            offset="1"
          >
            <div class="card_body">

              <view class="price">
                <text class="text-white text-sm">价格</text>
              </view>
              <view class="text-center">
                <text class="text-white mine_min_litt"><text class="text-white text-sm">￥</text>{{ item.price }}</text>
              </view>
              <view class="text-center">
                <button
                 :class="index==0?'monthly_btn_bg': index==1?'seasonly_btn_bg':'yearly_btn_bg'"
                  class="check_detail text-white cu-btn round"
                  v-if="card_action_show == item.goods_id">
                  收起详情
                 </button>
                 <button
                 :class="index==0?'monthly_btn_bg': index==1?'seasonly_btn_bg':'yearly_btn_bg'"
                  class="check_detail text-white cu-btn round"
                  v-else>
                  查看详情
                 </button>
                <!-- <img
                  src="https://img.shuimuai.com/web/btn_seedetil_1%402x.png"
                  class="check_detail"
                  alt=""
                  v-if="card_action_show == item.goods_id"
                >
                <img
                  src="https://img.shuimuai.com/web/btn_seedetil_2.png"
                  class="check_detail"
                  alt=""
                  v-else
                > -->
              </view>

            </div>
          </van-col>

        </van-row>
      </div>

      <view v-if="card_action_show == item.goods_id">

        <!--    描述-->
        <view class="flex justify-center">
        <view
          class="desc"
          v-html="item.content"
        >

        </view>
        </view>

        <!--    购买按钮-->
        <div class="buy_button">
          <button
            class="cu-btn lg bg-orange text-center margin yellowButt"
            @click="to_confirm_vip(item)"
          >购买{{item.goods_name}}</button>
        </div>
      </view>
    </div>


    <div class="title flex padding-left align-center margin-top-lg margin-bottom">
      <div class="line margin-right-xs"></div>
      <text class="titles">专注时间包</text>
    </div>
    <!--  体验次卡-->
    <div
      v-for="(item,index) in frequency_card"
      :key="index"
      class="margin-bottom"
    >

      <div
        class="vip"
        :class="item.bgBott"
        @click="changeCardShow(item.goods_id)"
      >
        <van-row>
          <van-col
            span="10"
            offset="6"
          >
            <div
              class="card_body"
              style="padding-top:14px;"
            >
              <view>
                <text class="mine_min" :class="index==0?'relax_text':'hard_text'">{{ item.play_time }}</text>
                <text :class="index==0?'relax_text':'hard_text'">&nbsp;分钟</text>
              </view>
              <view>
                <text class="text-white text-sm subGrey">{{ item.title1 }}</text>
              </view>

            </div>
          </van-col>

          <van-col
            span="6"
            offset="1"
          >
            <div class="card_body">

              <view class="price">
                <text class="text-white text-sm">价格</text>
              </view>
              <view class="text-center">
                <text class="text-white mine_min_litt">{{ item.price }}</text>
              </view>
               <view class="text-center">
                 <button
                 :class="index==0?'relax_btn_bg':'hard_btn_bg'"
                  class="check_detail text-white cu-btn round"
                  v-if="card_action_show == item.goods_id">
                  收起详情
                 </button>
                 <button
                 :class="index==0?'relax_btn_bg':'hard_btn_bg'"
                  class="check_detail text-white cu-btn round"
                  v-else>
                  查看详情
                 </button>
              <!-- <img
                src="https://img.shuimuai.com/web/btn_seedetil_1%402x.png"
                class="check_detail"
                alt=""
                v-if="card_action_show == item.goods_id"
              > -->
              <!-- <img
                src="https://img.shuimuai.com/web/btn_seedetil_2.png"
                class="check_detail"
                alt=""
                v-else
              > -->
              </view>

            </div>
          </van-col>

        </van-row>
      </div>
      <view v-if="card_action_show == item.goods_id">

        <!--    描述-->
        <view class="flex justify-center">
        <view
          class="desc"
          v-html="item.content"
        >

        </view>
        </view>

        <!--    购买按钮-->
        <div class="buy_button">
          <button
            class="cu-btn lg bg-orange text-center margin yellowButt"
            @click="to_confirm_time(item)"
          >购买{{
            item.goods_name
            }}
          </button>
        </div>
      </view>
    </div>
  </div>

  <div class="text-center scan_wrap" v-else>
    <span>请扫包装盒中的VIP会员卡二维码</span>
    <button class="text-white cu-btn round scan_btn" @click="to_scan">扫描</button>
  </div>

  <!-- 购买vip提示弹窗 -->
  <van-popup
      :show="vip_err_show"
      @close="close_err_pop"
      round
    >
      <div class="err_container flex flex-direction align-center justify-around padding-top-xl padding-lr-sm">
        <div v-text="cant_buy_vip" class="padding-lr-lg text-lg text-black" style="line-height:28px"></div>

        <div class="button_group flex justify-around">
          <button
            class="cu-btn bg-gray text-white lg margin-right-lg btnFail"
            @click="close_err_pop"
          >取消</button>
          <button
            class="cu-btn  bg-primary text-white lg btnFail"
            @click="to_confirm(buy_vip_item)"
          >确认</button>
        </div>
      </div>
    </van-popup>
  
<!-- 不能购买时间弹窗 -->
  <van-popup
    :custom-style='cant_buy_popup'
    :show="is_cant_buy"
    :round="true" 
    @close="onClosePopup">

      <div v-text="cant_buy_time"></div>

  </van-popup>
  <van-toast id="van-toast"/>
  </div>
</template>

<script>
import Toast from "../../../../static/vant/toast/toast";
import { goodsCardList } from "../../../requests/goods";
import { createOrder, deleteOrder } from "../../../requests/orders";
import { vipCode, check_vip } from "../../../requests/vip";

var $this;
export default {
  name: "uc_recharge_container",
  components: {},
  data() {
    return {
      order: {},
      card_action_show: 0,
      //时间卡列表
      time_cards: [],
      //次卡列表
      frequency_card: [],
      //用户信息
      userinfo: {},
      //  选中的充值卡
      selection_card: {},
      // vip购买提示弹窗
      vip_err_show:false,
      cant_buy_vip:"",
      buy_vip_item:{},
      // 不可购买时间弹窗
      is_cant_buy: false,
      cant_buy_time:"",
      cant_buy_popup: `height:120px;
            width:70%;
            display:flex;
            padding:10px;
            flex-direction:column;
            justify-content:center;
            align-items:center
      `,
    };
  },
  watch: {},
  methods: {
    to_confirm_vip($item) {
      check_vip(1).then((res) => {
        console.log("vip", res);

        let $res = res.data
        if ($res.code == 0) {
          $this.to_confirm($item)

        }else {
          $this.cant_buy_vip = $res.errmsg
          $this.buy_vip_item = $item
          $this.vip_err_show = true;
        }
      });
    },
    //确认订单
    to_confirm_time($item) {
      // 判断家庭VIP是否过期
      check_vip(2).then((res) => {
        console.log("vip", res);
        
        let $res = res.data
        if ($res.code == 0) {
          $this.to_confirm($item)

        } else {
          $this.cant_buy_time = $res.errmsg
          $this.is_cant_buy = true;
        }
      });
    },
    // 支付通用
    to_confirm($item){
      console.log("data", $item);
      //实付
      if ($item.coupon.type == 3) {
        $item["total_price"] =
          Math.round($item.price * $item.coupon.discount * 100) / 100;
      } else if ($item.coupon.type == 2) {
        $item["total_price"] =
          Math.round(($item.price - $item.coupon.reduce) * 100) / 100;
      } else if ($item.coupon.type == 4) {
        $item["total_price"] =
          Math.round(($item.price - $item.coupon.random) * 100) / 100;
      } else {
        $item["total_price"] =
          Math.round($item.price * $item.discount * 100) / 100;
      }
      //减多少
      if ($item.coupon.type == 3) {
        $item["reduce"] =
          Math.round(
            ($item.price - $item.price * $item.coupon.discount) * 100
          ) / 100;
      } else if ($item.coupon.type == 2) {
        $item["reduce"] = $item.coupon.reduce;
      } else if ($item.coupon.type == 4) {
        $item["reduce"] = $item.coupon.random;
      }
      // $item["total_price"] = ($item.price * $item.discount).toFixed(2);
      if ($item.goods_id == 1) {
        $item["add_price"] = 20;
        $item["add_month"] = "一";
      } else if ($item.goods_id == 2) {
        $item["add_price"] = 30;
        $item["add_month"] = "三";
      } else if ($item.goods_id == 3) {
        $item["add_price"] = 30;
        $item["add_month"] = "三";
      }
      $this.selection_card = $item;
      var data = JSON.stringify($item);
      mpvue.navigateTo({
        url: "/pages/user_center/confirmPay/main?data=" + data,
      });
    },
    onClosePopup() {
      $this.is_cant_buy = false;
    },
    close_err_pop(){
      $this.vip_err_show = false;
    },
    //跳转填写地址
    to_write_address() {
      mpvue.navigateTo({
        url: "/pages/user_center/address/list/main",
      });
    },
    // 获取充值卡列表
    get_card_list() {
      goodsCardList().then((res) => {
        let $data = res.data.data;
        $this.time_cards = $data.time_card;
        let $bg = ["gold", "platina", "diamond"];
        let $bgBott = ["normal", "oneMonth"];
        $this.time_cards.forEach(($val, $index) => {
          $this.time_cards[$index]["bg"] = $bg[$index];
          $this.time_cards[$index]["price"] = Math.ceil($val["price"]);
        });
        $this.frequency_card = $data.frequency_card;
        $this.frequency_card.forEach(($val, $index) => {
          $this.frequency_card[$index]["bgBott"] = $bgBott[$index];
          $this.frequency_card[$index]["price"] = Math.round($val["price"]);
        });
      });
    },
    to_orderlist() {
      mpvue.navigateTo({
        url: "/pages/user_center/orders/main",
      });
    },
    // 扫描会员卡
    to_scan() {
      wx.scanCode({
        onlyFromCamera: true,
        success(res) {
          let $data = res;
          if ($data.result) {
            // console.log($data.result)
            let url = decodeURIComponent($data.result);
            let $code = url.match(/\?code=(.*)/);

            // 会员码
            let $vip_code = $code[1];

            vipCode($vip_code).then((res) => {
              let $res = res.data;
              console.log("vipcode", $res);

              if ($res.code == 0) {
                mpvue.navigateTo({
                  url: "/pages/index/main",
                });
              } else {
                Toast.fail($res.errmsg);
              }
            });
          }
        },
      });
    },
    //  切换显示
    changeCardShow($id) {
      // console.log($id);
      if ($this.card_action_show == $id) {
        $this.card_action_show = 0;
      } else {
        $this.card_action_show = $id;
      }
    },
  },
  mounted() {
    $this.get_card_list();
    $this.userinfo = wx.getStorageSync("userinfo");
  },
  onShow() {
    $this.get_card_list();
    $this.is_cant_buy = false
    $this.vip_err_show = false;
  },
  created() {
    $this = this;
  },
  onLoad() {},
  onUnload() {
    // $this.close_success_pop();
    // $this.close_err_pop();
  },
};
</script>

<style scoped>
.mine {
  width: 330px;
  height: 84px;
  background: rgba(242, 243, 255, 0.6);
  box-shadow: 0px 3px 7px 0px rgba(159, 159, 159, 0.84);
  border-radius: 0px 0px 11px 11px;
  margin: 0px auto;
}

.mine_min {
  font-size: 36px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

.mine_min_litt {
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

.line {
  width: 4px;
  height: 16px;
  background: #5d4db8;
}

/* 扫描 */
.scan_wrap {
  width: 100%;
  height: 100px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.scan_btn {
  width: 90%;
  height: 40px;
  background: #4a73ef;
  border-radius: 40px;
}

/*会员*/
.vip {
  width: 345px;
  height: 103px;
  background-position: center;
  background-size: 100% 100%;
  margin: 0px auto;
}

.gold {
  background-image: url("https://img.shuimuai.com/bg_monthly_vip.png");
}

.platina {
  background-image: url("https://img.shuimuai.com/bg_seasonly_vip.png");
}

.diamond {
  background-image: url("https://img.shuimuai.com/bg_yearly_vip.png");
}

.normal {
  background-image: url("https://img.shuimuai.com/bg_relaxly_time.png");
}
.oneMonth {
  background-image: url("https://img.shuimuai.com/bg_hardly_time.png");
}

.card_body {
  padding: 3px 0px;
}

.check_detail {
  width: 90px;
  height: 28px;
}

/* 家庭VIP */
.monthly_btn_bg {
  background: #ec7945;
}

.seasonly_btn_bg {
  background: #1c6cda;
}

.yearly_btn_bg {
  background: #5959f8;
}

.btnFail{
  width: 146px;
  height: 44px;
}

.err_container {
  width: 344px;
  height: 312px;
}

/* 专注时间包颜色 */
.relax_text {
  color: #eb7d07;
}

.hard_text {
  color: #4ca8eb;
}

.relax_btn_bg {
  background: #e87f12;
}

.hard_btn_bg {
  background: #2f9ae8;
}

.desc {
  width: 324px;
  /* height: 128px; */
  margin: 10px auto;
  font-size: 10px;
  color: #6b6b6b;
  line-height: 18px;
}
.titles {
  font-size: 15px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #010101;
}
.buy_button {
  text-align: center;
}

.order_confirm,
.err_container {
  width: 344px;
  height: 312px;
}

.order_price_container {
  margin-top: 110px;
}

/*充值按钮*/
.recharge_button {
  position: absolute;
  bottom: 20px;
  width: 90%;
}

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

.err_img {
  width: 73px;
  height: 83px;
}

.button_group {
  width: 100%;
}

/*子标题*/
.err_container .sub-title {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #4b4b4b;
  width: 200px;
}

.boy_logo {
  width: 167px;
  height: 184px;
}

.ext_container {
  height: 320px;
  /*background-image: url("https://img.shuimuai.com/web/boyya_bg.png");*/
  /*background-size: 100% 100%;*/
  /*background-position: center;*/
  background-color: rgba(255, 255, 255, 0);
}
.under_line {
  margin-left: 5px;
  font-size: 12px;
  font-family: PingFang;
  font-weight: 400;
  text-decoration: underline;
  color: #000000;
}
.gray {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #6d6d6d;
}
.title {
  margin-left: -8px;
}
.subGrey {
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.8;
}
.price {
  margin: 3px 0 0 3px;
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}
.yellowButt {
  width: 320px;
  height: 40px;
  background: linear-gradient(-90deg, #e1a268 0%, #f7cfaa 100%);
  border-radius: 40px;
  margin-bottom: 27px;
}
</style>
<style>
</style>