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

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

    <!--    标题-->
    <div class="title flex padding align-center">
      <div class="line margin-right"></div>
      <text>会员升级</text>
    </div>

    <!--    黄金会员-->
    <div
      v-for="(item,index) in time_cards"
      :key="index"
    >
      <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">分钟</text>
              </view>
              <view>
                <text class="text-white text-sm">{{ item.title1 }}</text>
              </view>

            </div>
          </van-col>

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

              <view>
                <text class="text-white text-sm">价格</text>
              </view>
              <view class="text-center">
                <text class="text-white mine_min">{{ item.price }} <text class="text-white text-sm">&yen;</text> </text>
              </view>
              <view class="text-center">
                <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="desc"
          v-html="item.content"
        >

        </view>

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

    <div class="title flex padding align-center">
      <div class="line margin-right"></div>
      <text>体验次卡</text>
    </div>
    <!--  体验次卡-->
    <div
      v-for="(item,index) in frequency_card"
      :key="index"
    >

      <div
        class="normal vip"
        @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">次</text>
              </view>
              <view>
                <text class="text-white text-sm">{{ item.title1 }}</text>
              </view>

            </div>
          </van-col>

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

              <view>
                <text class="text-white text-sm">价格</text>
              </view>
              <view class="text-center">
                <text class="text-white mine_min">{{ item.price }} <text class="text-white text-sm">&yen;</text> </text>
              </view>
              <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
              >

            </div>
          </van-col>

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

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

        </view>

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

    <!--    确认订单 弹窗-->
    <van-popup
      :show="order_confirm"
      @close="close_order_confirm"
      round
      closeable
    >
      <div class="order_confirm padding">
        <view>
          <text class="text-sm text-gray">已选商品&emsp;水母星球-{{ selection_card.goods_name }}</text>
          <br>
        </view>
        <view>
          <text class="text-sm text-gray">商品价格&emsp;{{ selection_card.price }}元</text>
          <br>

        </view>
        <view>
          <text class="text-sm text-gray">支付方式&emsp;微信支付</text>
          <br>

        </view>

        <view v-if="selection_card.goods_id < 4">
          <text class="text-sm text-gray">折扣&emsp;{{ selection_card.discount }}</text>
          <br>
        </view>
        <view class="order_price_container">
          <text class="text-sm text-gray">实付(元)&emsp;</text>
          <text class="mine_min">{{ selection_card.price * selection_card.discount }}</text>
        </view>
        <button
          class="cu-btn bg-primary lg text-white recharge_button"
          @click="success_pay"
          :disabled="btn_disabled"
        >立即充值</button>
      </div>
    </van-popup>

    <!--    充值失败-->
    <van-popup
      :show="err_show"
      @close="close_err_pop"
      round
      :close-on-click-overlay="false"
    >
      <div class="err_container flex flex-direction align-center justify-around">
        <view>
          <text class="title">
            充值失败，请再次尝试
          </text>
        </view>
        <img
          src="https://img.shuimuai.com/web/sign_notimeJfish.png"
          class="err_img"
          alt=""
        >
        <div class="button_group flex justify-around">
          <button
            class="cu-btn bg-gray text-white lg"
            @click="close_err_pop"
          >取消支付</button>
          <button
            class="cu-btn  bg-primary text-white lg"
            @click="repay"
            :disabled="btn_disabled"
          >再次支付</button>
        </div>
      </div>
    </van-popup>

    <!--    充值成功-->
    <van-popup
      :show="success_show"
      @close="close_success_pop"
      round
      :close-on-click-overlay="false"
    >
      <div class="err_container flex flex-direction align-center justify-around ext_container">
        <img
          src="https://img.shuimuai.com/web/boyya.png"
          class="boy_logo"
          alt=""
        >
        <view>
          <text class="title">
            充值成功
          </text>
        </view>
        <view
          class="sub-title"
          v-if="selection_card.goods_id < 4"
        >
          <text class="text-gray">
            {{ selection_card.goods_name }},请到实体店店员处领取邀请卡
          </text>
        </view>
        <div class="button_group flex justify-around">
          <!--          <button class="cu-btn bg-gray text-white lg" @click="close_success_pop">以后再填</button>-->
          <!--          <button class="cu-btn  bg-primary text-white lg" @click="to_write_address">填写地址</button>-->
          <button
            class="cu-btn  bg-primary text-white lg"
            @click="to_index"
          >充值成功</button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { goodsCardList } from "../../../requests/goods";
import { createOrder, deleteOrder } from "../../../requests/orders";

var $this;
export default {
  name: "uc_recharge_container",
  components: {},
  data() {
    return {
      order: {},
      order_confirm: false,
      card_action_show: 0,
      err_show: false,
      success_show: false,
      //时间卡列表
      time_cards: [],
      //次卡列表
      frequency_card: [],
      //用户信息
      userinfo: {},
      //  选中的充值卡
      selection_card: {},
      //支付信息
      payment_info: {},
      //订单编号
      order_sn: "",
      btn_disabled: false,
    };
  },
  watch: {},
  methods: {
    //弹出确认订单
    open_order_confirm($item) {
      $this.order_confirm = true;
      $this.selection_card = $item;
    },
    //关闭确认订单
    close_order_confirm() {
      $this.order_confirm = false;
    },
    //关闭充值失败窗口
    close_err_pop() {
      $this.err_show = false;
    },
    //取消充值
    cancel_recharge() {
      $this.close_err_pop();

      deleteOrder($this.order_sn).then(
        (res) => {
          let $res = res.data;
        },
        (err) => {
          console.log("删除订单错误", err);
        }
      );
    },
    // 打开充值成功窗口
    open_success_window() {
      $this.success_show = true;
    },
    //关闭充值成功窗口
    close_success_pop() {
      $this.success_show = false;
    },
    //再次付款
    repay() {
      $this.btn_disabled = true;
      let $payment = $this.payment_info;
      wx.requestPayment({
        timeStamp: $payment.timeStamp,
        nonceStr: $payment.nonceStr,
        package: $payment.package,
        signType: $payment.signType,
        paySign: $payment.sign,
        success(res) {
          //支付成功
          console.log("success支付成功调用:", res);
          //关闭确认订单窗口
          $this.close_order_confirm();
          $this.close_success_pop();
          //打开成功充值窗口
          $this.open_success_window();
        },
        fail(res) {
          console.log("success支付失败调用:", res);

          $this.cancel_recharge();
          $this.close_order_confirm();
          $this.err_show = true;
        },
        complete() {
          $this.btn_disabled = false;
        },
      });
    },
    to_index() {
      mpvue.reLaunch({
        url: "/pages/index/main",
      });
    },
    // 成功支付
    success_pay() {
      $this.btn_disabled = true;

      // 支付成功后得回调方法
      let $params = {
        goods_id: $this.selection_card.goods_id,
        buy_num: 1,
      };

      wx.login({
        success(res1) {
          console.log("微信登陆", res1.code);
          let $code = res1.code;
          $params["js_code"] = $code;
          createOrder($params).then(
            (res) => {
              let $data = res.data;
              let $payment = $data.data;
              $this.order_sn = $payment["sn"];
              $this.payment_info = $payment;
              wx.requestPayment({
                timeStamp: $payment.timeStamp,
                nonceStr: $payment.nonceStr,
                package: $payment.package,
                signType: $payment.signType,
                paySign: $payment.sign,
                success(res) {
                  //支付成功
                  console.log("success", res);
                  //关闭确认订单窗口
                  $this.close_order_confirm();
                  $this.close_success_pop();
                  //打开成功充值窗口
                  $this.open_success_window();
                },
                fail(res) {
                  console.log("fail", res);
                  $this.cancel_recharge();
                  $this.close_order_confirm();
                  $this.err_show = true;
                },
                complete() {
                  $this.btn_disabled = false;
                },
              });
            },
            (err) => {
              console.log(err);
            }
          );
        },
      });

      //  接收回调方法后弹出支付成功
    },
    //跳转填写地址
    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"];
        $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]["bg"] = "normal";
          $this.frequency_card[$index]["price"] = Math.round($val["price"]);
        });
      });
    },
    to_orderlist() {
      mpvue.navigateTo({
        url: "/pages/user_center/orders/main",
      });
    },
    //  切换显示
    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");
  },
  created() {
    $this = this;
  },
  onLoad() {},
  onUnload() {
    $this.close_success_pop();
    $this.close_err_pop();
  },
};
</script>

<style scoped>
.uc_recharge_container {
  padding: 0px 10px;
}

.mine {
  width: 354px;
  height: 93px;
  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: 40px;
}

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

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

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

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

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

.normal {
  background-image: url("https://img.shuimuai.com/web/frame_cika.png");
}

.card_body {
  padding: 5px 0px;
}

.check_detail {
  width: 73px;
  height: 22px;
}

.desc {
  width: 324px;
  /*height: 128px;*/
  margin: 10px auto;
  font-size: 10px;
  color: #6b6b6b;
}

.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);
}
</style>