[水感应客户端最新]

pages/pay/index.js

@@ -0,0 +1,111 @@
+ /*
+ * 手太欠
+ * 愿这世界都如故事里一样 美好而动人~
+ */
+
+Page({
+    data: {
+        payCode     : '',  // code获取openid
+        openId      : '',  // openid
+        orderNo     : '',  // 订单编号
+        total       : '',  // 订单金额
+        paySuccess  : false, // 兑换成功显示
+        disabled    : true
+    },
+
+    onLoad(options) {
+        this.setData({
+            orderNo : options.order_no,
+            total   : options.total
+        })
+    },
+
+    onShow() {
+        wx.login({
+            success: res => {
+                this.setData({
+                    payCode: res.code
+                })
+
+                // 获取openid
+                this.openInfo()
+            }
+        })
+    },
+
+    /**
+     * openid
+     */
+    openInfo() {
+        wx.$api.auth.codeOpenid({code: this.data.payCode}).then(res => {
+            this.setData({
+                openId: res.data
+            })
+        }).catch(err => {})
+    },
+
+    /**
+     * 确认支付
+     */
+    payBtn() {
+        wx.showLoading({
+            title: '支付中...',
+            mask : true
+        })
+        let that = this
+        wx.$api.mall.mallPay(this.data.orderNo,{type: 'miniapp', openid: this.data.openId}).then(res=>{
+            wx.hideLoading()
+            this.setData({
+                disabled: false
+            })
+            let payInfo = JSON.parse(res.data.wechat)
+            wx.requestPayment({
+                timeStamp: payInfo.timeStamp,
+                nonceStr : payInfo.nonceStr,
+                package  : payInfo.package,
+                paySign  : payInfo.paySign,
+                signType : payInfo.signType,
+                success  : res=>{
+                    if(res.errMsg == "requestPayment:ok"){
+                        wx.showToast({
+                            title: '支付成功',
+                            icon: 'none',
+                            duration: 2000,
+                            //显示透明蒙层，防止触摸穿透
+                            mask:true,
+                            success: function () {
+                                that.setData({
+                                    paySuccess: true
+                                })
+                                setTimeout(()=>{
+                                    wx.redirectTo({
+                                        url: '/pages/order/index?state=paid'
+                                    })
+                                },3000)
+                            }
+                        })
+                    }
+                },
+                fail  : err=>{
+                    wx.showToast({
+                        title: '支付失败',
+                        icon: 'none',
+                        duration: 500,
+                        //显示透明蒙层，防止触摸穿透
+                        mask:true,
+                        success: function () {
+                            that.setData({
+                                paySuccess: true
+                            })
+                            setTimeout(()=>{
+                                wx.redirectTo({
+                                    url: '/pages/order/index?state=unpay'
+                                })
+                            },3000)
+                        }
+                    })
+                }
+            })
+        }).catch(err => {});
+    }
+})

pages/pay/index.json

@@ -0,0 +1,4 @@
+{
+    "usingComponents": {},
+    "navigationBarTitleText": "支付订单"
+}

pages/pay/index.wxml

@@ -0,0 +1,23 @@
+<view class="payTop">
+    <view class="payTop-time">支付有效期为10分钟，请尽快支付</view>
+    <view class="payTop-price"><text>￥</text>{{total}}</view>
+    <view class="payTop-text">微信支付</view>
+</view>
+
+<view class="payWay">
+    <view class="payWay-item">
+        <image class="payWay-img" src="https://cdn.shuiganying.com/images/2023/04/04/70400072de51a3157d9ead602eb3a294.png"></image>
+        <view class="payWay-name">微信支付</view>
+        <image class="payWay-icon" src="https://cdn.shuiganying.com/images/2023/04/04/2d9eed259c7a73b4d2aa4d496dbfa8a4.png"></image>
+    </view>
+</view>
+
+<view class="footer">
+    <view bindtap="payBtn" class="btn" wx:if="{{disabled}}">确认支付</view>
+    <view class="btn active" wx:else>确认支付</view>
+</view>
+
+<view class="pack-center pages-hint grey" wx:if="{{paySuccess}}">
+    <image src="/static/icons/loadingGif.gif"></image>
+    <view>疯狂加载中...</view>
+</view>

pages/pay/index.wxss

@@ -0,0 +1,86 @@
+page {
+    background-color: #f4f4f6;
+}
+
+.payTop {
+    text-align: center;
+    padding: 140rpx 0;
+}
+
+.payTop-price {
+    font-weight: 600;
+    font-size: 78rpx;
+    line-height: 70rpx;
+    padding: 20rpx 0 0;
+}
+
+.payTop-price text {
+    font-size: 36rpx;
+}
+
+.payTop-time,
+.payTop-text {
+    font-size: 28rpx;
+    color: #666666;
+}
+
+.payWay {
+    padding: 0 30rpx;
+    box-sizing: border-box;
+}
+
+.payWay-item {
+    background-color: #ffffff;
+    border-radius: 15rpx;
+    padding: 25rpx 30rpx;
+    box-sizing: border-box;
+    display: flex;
+    line-height: 74rpx;
+    font-size: 34rpx;
+    position: relative;
+}
+
+.payWay-img {
+    width: 74rpx;
+    height: 74rpx;
+    margin-right: 20rpx;
+}
+
+.payWay-icon {
+    width: 42rpx;
+    height: 42rpx;
+    position: absolute;
+    right: 30rpx;
+    top: 40rpx;
+}
+
+
+/* 按钮 */
+.footer {
+    width: 100%;
+    height: 100px;
+    background-color: #f4f4f6;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 9;
+    padding: 20px 20px 50rpx;
+    box-sizing: border-box;
+}
+
+.btn {
+    line-height: 54px;
+    background-color: #3b7cff;
+    height: 100%;
+    text-align: center;
+    color: #FFFFFF;
+    border-radius: 10rpx;
+}
+.btn.active {
+    background-color: #cacaca;
+}
+
+.grey {
+    background-color: #f9f9f9;
+    z-index: 99999;
+}