gamemall/src/pages/buyvip.wpy

<style lang="less">
  .one-product{
    display: flex;
    border: 1rpx solid #e5e5e5;
    border-radius: 5rpx;
    margin-left: 40rpx;
    margin-right: 40rpx;
    width: 670rpx;
    text-align: center;
    height: 100rpx;
    justify-items: center;
    align-items: center;
    margin-top: 20rpx;
  }
  .price {
    width: 70%;
    border-right: 1rpx solid #e5e5e5;
    height: 100%;
    position:relative;
    display: flex;
  }
  .price-txt {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
  }
  .product-name {
    width: 30%;
    font-size: 15px;
  }
  .delete-txt{
    text-decoration: line-through;
  }
  .red-txt {
    color: #ee3333;
  }
  .selected {
    border: 4rpx solid #f85;
  }
  .product_img {
    width: 750rpx;
  }

</style>
<template>
  <view class="container">
    <image class="product_img" mode="widthFix" src="{{vip_img}}"/>
    <view class="one-product {{currentType === 'vip'? 'selected' : ''}}" @tap="selectType('vip')">
      <view class="price">
        <view class="price-txt delete-txt"> 原价{{vip_price/100}}元 </view>
        <view class="price-txt red-txt">折扣价{{vip_discount/100}}元</view>
      </view>
      <view class="product-name">终身</view>
    </view>
    <view class="one-product {{currentType === 'vip_month'? 'selected' : ''}}" @tap="selectType('vip_month')">
      <view class="price">
        <view class="price-txt delete-txt"> 原价{{month_price/100}}元 </view>
        <view class="price-txt red-txt">折扣价{{month_discount/100}}元</view>
      </view>
      <view class="product-name">一个月</view>
    </view>

  </view>
  <gameBottomBar :config.sync="bottomActionCfg" @bottomMainTap.user="bottomMainTap"
                 @bottomSecondTap.user="bottomSecondTap"/>
</template>
<script>
  import wepy from 'wepy';
  import http from '../utils/http';
  import jcEvent from '../common/jc-event';
  import gameBottomBar from '../components/game-bottom-bar';
  import cfg from '../mixins/cfg';

  export default class BuyVipPage extends wepy.page {
    mixins = [cfg];
    config = {
      navigationBarTitleText: '购买VIP'
    };
    components = {
      gameBottomBar: gameBottomBar
    };
    data = {
      gid: '',
      bottomActionCfg: {
        hide: false,
        mainBtnIconClass: 'icon-cart',
        mainBtnTitle: '购买',
        secondBtnIconClass: 'icon-forbid',
        secondBtnTitle: '取消'
      },
      tid: '',
      currentType: 'vip',
      vip_price: 5000,
      vip_discount: 3000,
      month_price: 1500,
      month_discount: 1000,
      vip_img: 'http://h5games-al.kingsome.cn/emulator/v1.0.7/assets/vip.jpg'

    };
    methods = {
      selectType(type) {
        this.currentType = type;
      },
      bottomMainTap(e) {
        console.log('bottomMainTap');
        this.buy(this.currentType)
      },
      bottomSecondTap(e) {
        console.log('bottomSecondTap');
        let self = this;
        wepy.navigateBackMiniProgram({
          extraData: {
            type: self.currentType,
            event_type: 'pay_result',
            success: false
          }
        })
      }
    };

    onLoad(params) {
      this.gid = decodeURIComponent(params.gid);
    }
    onShow() {
      this.vip_price = this.$getPrice('vip_price');
      this.vip_discount = this.$getPrice('vip_discount');
      this.month_price = this.$getPrice('month_price');
      this.month_discount = this.$getPrice('month_discount');
      this.vip_img = this.$getPrice('vip_img');
      this.$apply();
    }
    buy(type) {
      let self = this;
      let account = wepy.getStorageSync('account');
      wepy.showLoading({
        title: '支付中'
      })
      http.post('/api/emulated/pre_pay', { gid: '', type: type, open_id: account.openid })
        .then(res => {
          console.log(res.data);
          if (res.errcode === 0) {
            let payResult = res.data;
            self.tid = res.tid;
            wx.requestPayment({
              'timeStamp': payResult.timeStamp,
              'nonceStr': payResult.nonceStr,
              'package': payResult.package,
              'signType': 'MD5',
              'paySign': payResult.paySign,
              complete: (res) => {
                wepy.hideLoading();
                if (res.errMsg === 'requestPayment:ok') {
                  console.log('支付成功')
                  self.queryOrder();
                } else if (res.errMsg === 'requestPayment:fail cancel' || res.errMsg === 'requestPayment:cancel') {
                  wepy.showToast({
                    title: '用户取消支付',
                    icon: 'none',
                    duration: 2000
                  })
                } else {
                  console.log('支付失败');
                  let msg = res.errMsg.replace('requestPayment:fail', '')
                  wepy.showToast({
                    title: msg,
                    icon: 'none',
                    duration: 2000
                  })
                }
              }
            })
          }
        })
        .catch(err => {
          console.log('err update game history');
        });
    }
    async queryOrder() {
      let self = this;
      try {
        let res = await http.post('/api/emulated/query_order', {tid: this.tid});
        if (res.errcode === 0 && res.result === 1) {
          wepy.navigateBackMiniProgram({
            extraData: {
              type: self.currentType,
              event_type: 'pay_result',
              success: true
            }
          })
        }
      } catch (err) {
        console.log(err);
        wepy.showToast({
          title: '支付失败',
          icon: 'none',
          duration: 2000
        })
      }
    }
  }
</script>