更新

MrShi

2025-02-25 9dfc54bf6e0fdb3c746815707487c6ae50e98905

 bicycle/pages/paymentPage/paymentPage.vue

@@ -1,6 +1,23 @@
<template>
   <view class="zf">
		
      <view class="zf_time">支付剩余时间 <u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm"></u-count-down></view>
      <view class="zf_price">¥{{info.price}}</view>
      <view class="zf_tc">骑行套餐</view>
      <view class="zf_list">
         <view class="zf_list_row">
            <view class="zf_list_row_left">
               <image src="@/static/icon/ic_wechat@2x.png" mode="widthFix"></image>
               <text>微信支付</text>
            </view>
            <view class="zf_list_row_icon">
               <image src="@/static/icon/ic_choose@2x.png" mode="widthFix"></image>
            </view>
         </view>
      </view>
      <view class="tcx_footer" @click="pay">
         <viwe class="tcx_footer_button">确认支付</viwe>
         <view style="padding-bottom: env(safe-area-inset-bottom)"></view>
      </view>
   </view>
</template>

@@ -8,8 +25,46 @@
   export default {
      data() {
         return {
				
            id: null,
            info: null
         };
      },
      onLoad(options) {
         this.id = options.id
         this.getDesc()
      },
      methods: {
         async getDesc() {
            let res = await this.$u.api.discountDetail({ id: this.id })
            if (res.code === 200) {
               this.info = res.data
            }
         },
         async pay() {
            let res = await this.$u.api.createDiscountOrderPay({ discountId: this.id })
            if (res.code === 200) {
               wx.requestPayment({
                  timeStamp: res.data.timeStamp,
                  nonceStr: res.data.nonceStr,
                  package: res.data.packageVal,
                  signType: res.data.signType,
                  paySign: res.data.paySign,
                  success (res) {
                     if (res.errMsg = 'requestPayment:ok') {
                        uni.showToast({ title: '充值成功', icon: 'success', duration: 2000 });
                        uni.reLaunch({
                           url: '/pages/index/index'
                        });
                     } else {
                        uni.showToast({ title: '未支付', icon: 'error', duration: 2000 });
                     }
                  },
                  fail(err) {
                     uni.showToast({ title: '未支付', icon: 'error', duration: 2000 });
                  }
               })
            }
         }
      }
   }
</script>
@@ -17,5 +72,100 @@
<style lang="scss" scoped>
   .zf {
      width: 100%;
      padding: 0 30rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      flex-direction: column;
      .zf_time {
         display: flex;
         align-items: center;
         font-weight: 400;
         font-size: 26rpx;
         color: #01B6AD;
         margin-top: 60rpx;
         /deep/ .u-count-down__text {
            font-weight: 400;
            font-size: 26rpx;
            color: #01B6AD;
            margin-left: 10rpx;
         }
      }
      .zf_price {
         font-weight: 600;
         font-size: 60rpx;
         color: #111111;
         margin-top: 20rpx;
      }
      .zf_tc {
         font-weight: 400;
         font-size: 26rpx;
         color: #666666;
         margin-top: 20rpx;
      }
      .zf_list {
         width: 100%;
         display: flex;
         flex-direction: column;
         .zf_list_row {
            width: 100%;
            height: 108rpx;
            background: rgba(1,182,173,0.06);
            border-radius: 20rpx;
            box-sizing: border-box;
            border: 3rpx solid #01B6AD;
            margin-top: 60rpx;
            padding: 0 30rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .zf_list_row_left {
               display: flex;
               align-items: center;
               image {
                  width: 40rpx;
                  height: 40rpx;
                  margin-right: 20rpx;
               }
               text {
                  font-weight: 400;
                  font-size: 30rpx;
                  color: #222222;
               }
            }
            .zf_list_row_icon {
               width: 40rpx;
               height: 40rpx;
               image {
                  width: 100%;
                  height: 100%;
               }
            }
         }
      }
      .tcx_footer {
         padding: 0 20rpx;
         box-sizing: border-box;
         position: fixed;
         bottom: 0;
         left: 0;
         width: 100%;
         display: flex;
         flex-direction: column;
         z-index: 999;
         .tcx_footer_button {
            width: 100%;
            height: 96rpx;
            line-height: 96rpx;
            text-align: center;
            background: #01B6AD;
            box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(1,182,173,0.24);
            border-radius: 46rpx;
            font-weight: 500;
            font-size: 32rpx;
            color: #FFFFFF;
            margin-bottom: 20rpx;
         }
      }
   }
</style>