yitisheng-mini-app/pages/zyb/vip/checkoutCounter.vue

<!--收银台 页面
-->
<script>
import ImagesConstant from "@/common/ImagesConstant";
import StaticConstant from "@/common/StaticConstant";
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'

let request = new Request()
export default {
  name: "checkoutCounter",
  components: {},
  computed: {
    ImagesConstant() {
      return ImagesConstant
    },
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      orderCode:'',//订单号
      totalAmount:'',//金额
    }
  },
  onLoad(e) {
    if (e.orderCode) {
      this.orderCode = e.orderCode
      this.getOrderDetail()
    }
  },
  methods: {
    getOrderDetail() {
      request.get(ApiConstant.VIP.orderDetail, {orderCode:this.orderCode}).then(r => {
        console.log(r)
        if (r.success) {
          this.signStr = r.result.orderSign
          this.totalAmount = parseFloat(r.result.totalAmount)/100
        }else{
          uni.showToast({title:r.message, icon: "none"});
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    goto(url) {
      uni.navigateTo({
        url: url
      })
    },
    paySubmit(){
      if (!this.signStr) {
        uni.showToast({title: '获取订单异常!', icon: "none"});
        return
      }
      let sign = JSON.parse(this.signStr);
      // 仅作为示例，非真实参数信息。
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: sign.timeStamp,
        nonceStr: sign.nonceStr,
        package: sign.package,
        signType: sign.signType,
        paySign: sign.paySign,
        success: function (res) {
          console.log('success:' + JSON.stringify(res));
          console.log('支付成功!')
          setTimeout(function () {
            uni.showToast({title:'支付成功', icon: "none"});
            let userInfo=uni.getStorageSync('userInfo')
            userInfo.vipFlag = true
            uni.setStorageSync('userInfo',userInfo)
            setTimeout(function () {
              //回到首页
              uni.switchTab({
                url: '/pages/zyb/home'
              });
            }, 2000)
          }, 1000)
        },
        fail: function (err) {
          console.log('取消支付')
          console.log('fail:' + JSON.stringify(err));
        }
      });
    }
  }
}
</script>

<template>
  <view class="background-white">
    <view class="border-top"></view>
    <view style="padding: 0 40rpx">
      <view class="card">
        <text class="z-h6">使用须知</text>
        <view class="text-body">
          <text class="text-item">适用考生：艺术类考生</text>
          <text class="text-item">使用专业类别：省内统考</text>
          <text class="text-item">适用批次：艺考类本科及专科批。</text>
          <text class="text-item">适用范围：河南省</text>
        </view>
      </view>
      <view class="card">
        <text class="z-h6">如何使用</text>
        <view class="text-body">
          <text class="text-item">下单购买后或激活VIP卡密之后，可在小程序端登录使用，解锁所有VIP功能。</text>
        </view>
      </view>
      <view class="card">
        <text class="z-h6">开通提示</text>
        <view class="text-body">
          <text class="text-item">1、高考出分前，可填写模拟成绩体验产品，专业成绩/文化成绩/专业类别信息每日可修改5次。</text>
          <text class="text-item">2、出分后，仅可修改1次信息，将模拟信息修改为最终成绩。</text>
          <text class="text-item">3、使用过程中，有任何疑问请及时反馈！</text>
        </view>
      </view>
    </view>
  </view>
  <view class="bottom">
    <view class="flex padding30">
      <view class="flex-item-3">
        <view style="color: #df4e44;line-height: 120rpx">
          <text>￥</text>
          <text class="font-weight-600 font-size-big2">{{totalAmount}}</text>
        </view>
      </view>
      <view class="flex-item-7">
        <view @click="paySubmit" style="line-height:90rpx;float: right" class="padding10-30 background-red2 font-size-medium radius60">
          <view class="white">立即支付</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.card {
  border-bottom: 2rpx solid #f5f6f8;
  padding: 0 30rpx 30rpx 30rpx;
}

.card .z-h6 {
  margin: 50rpx 0 30rpx 0;
}

/*使用须知 start*/
.text-body {
  margin-top: 30rpx;
}

.text-body .text-item {
  display: flex;
  justify-items: left;
  font-size: 26rpx;
  color: #999999;
  line-height: 50rpx;
}

/*使用须知 end*/

/*底部 start*/
.bottom {
  border-top: 1rpx solid #f5f6f8;
  position: fixed;
  bottom: 0;
  height: 180rpx;
  width: 100%;
  background-color: white;
}
/*底部 end*/
</style>