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="8" offset="6">
            <div class="card_body">
              <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>
              <view>
                <text class="text-white text-sm">{{ item.title2 }}</text>
              </view>
            </div>
          </van-col>

          <van-col span="5" offset="4">
            <div class="card_body">

              <view>
                <text class="text-white text-sm">价格</text>
              </view>
              <view>
                <text class="text-white mine_min">{{ item.price }}</text>
              </view>
              <img src="https://img.shuimuai.com/web/btn_seedetil_2.png" class="check_detail" alt=""
                   @click="card_action_show = 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>


    <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="8" offset="6">
            <div class="card_body">
              <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>
              <view>
                <text class="text-white text-sm">{{ item.title2 }}</text>
              </view>
            </div>
          </van-col>

          <van-col span="5" offset="4">
            <div class="card_body">

              <view>
                <text class="text-white text-sm">价格</text>
              </view>
              <view>
                <text class="text-white mine_min">{{ item.price }}</text>
              </view>
              <img src="https://img.shuimuai.com/web/btn_seedetil_2.png" class="check_detail" alt=""
                   @click="card_action_show = 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.discount">
          <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">
          <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} from "../../../requests/orders";

var $this
export default {
  name: "uc_recharge_container",
  components: {},
  data() {
    return {
      order: {},
      order_confirm: false,
      card_action_show: 1,
      err_show: false,
      success_show: false,
      //时间卡列表
      time_cards: [],
      //次卡列表
      frequency_card: [],
      //用户信息
      userinfo: {},
      //  选中的充值卡
      selection_card: {},
      //支付信息
      payment_info: {}
    }
  },
  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()
    },
    // 打开充值成功窗口
    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
      }
      createOrder($params).then((res) => {
          let $data = res.data
          let $payment = $data.data
          $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"
      })
    }
  }
  ,
  mounted() {
    $this.get_card_list()
    $this.userinfo = wx.getStorageSync('userinfo')
  },
  created() {
    $this = this;
  },
  onLoad() {
  },
  onUnload() {
    $this.close_success_pop()
  }
}
</script>

<style scoped>
@import "index.css";
</style>