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">
        <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_2.png" class="check_detail" alt=""
                     @click="changeCardShow(item.goods_id)"
                >
              </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">
        <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_2.png" class="check_detail" alt=""
                   @click="changeCardShow(item.goods_id)"
              >

            </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">立即充值</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="cancel_recharge">取消支付</button>
          <button class="cu-btn  bg-primary text-white lg" @click="repay">再次支付</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: ""
    }
  },
  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() {
      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('fail', res)
          $this.close_order_confirm()
          $this.err_show = true
        }
      })
    },
    to_index() {
      mpvue.reLaunch({
        url: "/pages/index/main"
      })
    },
    // 成功支付
    success_pay() {
      // 支付成功后得回调方法
      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.close_order_confirm()
                  $this.err_show = true
                }
              })
            },
            (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>