zhangjing/xuan_wechat
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

新增分享,找回密码,实名认证,签约

Browse Source
This commit is contained in:
唐明明
2023-08-25 14:04:31 +08:00
parent 32cc588ae7
commit 0f7c37d548
106 changed files with 2130 additions and 1313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
pages/pay/index.js
View File

@@ -9,20 +9,104 @@ Page({
* 页面的初始数据
*/
data: {
total : "0.00",
orderNo : "",
modelId : "",
modelType : "",
payType : "",
can : {
coin : 0,
wechat : 0,
},
loding : false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
const params = JSON.parse(decodeURIComponent(options.params));
console.log(params)
const { order_id, order_type, order_no } = JSON.parse(decodeURIComponent(options.params))
wx.showLoading({
title: '加载中...',
mask : true
})
wx.$api.pay.info({ order_id, order_type }).then(res => {
let { can, total, model_type, model_id } = res.data
this.setData({
orderNo : order_no,
payType : res.data.default,
modelId : model_id,
modelType : model_type,
total,
can
})
wx.hideLoading()
})
},
/**
* 生命周期函数--监听页面显示
* 选择支付方式
*/
onShow() {
onPayType(e){
let { value } = e.detail
this.setData({
payType: value
})
},
/**
* 立即支付
*/
onPay(){
this.setData({
loding: true
})
switch (this.data.payType) {
case 'wechat':
this.wechatPay()
break;
case 'coin':
wx.showToast({
title: '支付方式暂未开放',
icon : 'none'
})
this.setData({
loding: false
})
break;
}
},
/**
* 微信支付
*/
wechatPay(){
wx.login({
success: wxCode => {
let { code } = wxCode;
wx.$api.pay.wechatPay({
order_type : this.data.modelType,
order_id : this.data.modelId,
type : "mini",
code : code
}).then(res => {
let { wechat, trade_id } = res.data
let wechatObj = JSON.parse(wechat)
wx.requestPayment({
nonceStr : wechatObj.nonceStr,
package : wechatObj.package,
paySign : wechatObj.paySign,
timeStamp: wechatObj.timeStamp,
signType : wechatObj.signType,
success : () => {
wx.redirectTo({
url: './success/success?trade_id=' + trade_id,
})
}
})
}).finally(() => {
this.setData({
loding: false
})
})
}
})
}
})

47
pages/pay/index.wxml
View File

@@ -1,23 +1,38 @@
<view class="payTop">
<view class="payTop-time">支付有效期为10分钟，请尽快支付</view>
<view class="payTop-price"><text>￥</text>199.00</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 class="content">
<view class="info">
<view class="title">实付金额</view>
<view class="price"><text>￥</text>{{total}}</view>
<view class="no">订单号{{orderNo}}</view>
</view>
<!-- 选择支付方式 -->
<view class="radio-title">选择支付方式</view>
<view class="radio-group">
<radio-group bindchange="onPayType">
<label class="radio-flex" wx:if="{{can.wechat == 1}}">
<view class="radio-text">
<image class="radio-icon" src="/static/pay/wechat.png"></image>
<text>微信支付</text>
</view>
<radio class="radio-radio" value="wechat" color="#da2b54" checked="{{payType == 'wechat'}}"/>
</label>
<label class="radio-flex" wx:if="{{can.coin == 1}}">
<view class="radio-text">
<image class="radio-icon" src="/static/pay/coin.png"></image>
<text>自选额度</text>
</view>
<radio class="radio-radio" value="coin" color="#da2b54" checked="{{payType == 'coin'}}"/>
</label>
</radio-group>
<view class="radio-lay" wx:if="{{loding}}"></view>
</view>
<!-- 支付 -->
<view class="pay">
<button class="pay-btn" size="default" disabled="{{loding}}" loading="{{loding}}" bind:tap="onPay">立即支付</button>
</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}}">
<view class="pack-center pages-hint grey">
<image src="/static/icons/loadingGif.gif"></image>
<view>疯狂加载中...</view>
</view>

100
pages/pay/index.wxss
View File

@@ -1,86 +1,22 @@
page {
background-color: #f4f4f6;
}
.payTop {
text-align: center;
padding: 140rpx 0;
}
.content{ background: white; min-height: 100vh; padding: 0 30rpx; }
.info{ padding:100rpx 50rpx; text-align: center; border-bottom: solid 1rpx #f7f8f9; }
.title{font-weight: bold; line-height: 40rpx;}
.price{ font-weight: bold; font-size: 80rpx; padding: 30rpx 0; line-height: 80rpx; }
.price text{ font-size: 80%; }
.no{ font-size: 28rpx; color: gray; line-height: 40rpx; }
.payTop-price {
font-weight: 600;
font-size: 78rpx;
line-height: 70rpx;
padding: 20rpx 0 0;
}
/* 支付方式 */
.radio-title{ font-weight: bold; font-size: 30rpx; padding: 30rpx; }
.radio-group{ padding: 0 30rpx; position: relative; }
.radio-flex{ display: flex; align-items: center; justify-content: space-between; padding: 30rpx 0; border-bottom: solid 1rpx #f7f8f9; }
.radio-text{ display: flex; align-items: center; font-size: 30rpx; }
.radio-icon{ width: 58rpx; height: 58rpx; border-radius: 10rpx; margin-right: 30rpx; }
.radio-radio{ transform: scale(.8) }
.radio-lay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.payTop-price text {
font-size: 36rpx;
}
/* 支付 */
.pay{ margin-top: 100rpx; }
.pay-btn[size="default"]{ width: 100%; height: 100rpx; line-height: 100rpx; background: #da2b54; color: white; padding: 0; border-radius: 50rpx; font-size: 32rpx; }
.pay-btn[size="default"][disabled]{ opacity: .5; background: #da2b54; color: white;}
.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: #da2b54;
height: 100%;
text-align: center;
color: #FFFFFF;
border-radius: 10rpx;
}
.btn.active {
background-color: #cacaca;
}
.grey {
background-color: #f9f9f9;
z-index: 99999;
}

58
pages/pay/success/success.js Normal file
View File

@@ -0,0 +1,58 @@
var getNum = 0
Page({
/**
* 页面的初始数据
*/
data: {
loding : true,
success: true
},
/**
* 生命周期函数--查询支付信息
*/
onLoad(e){
if(!e.trade_id){
wx.showToast({
title: '参数错误，请联系系统管理员',
icon : 'none'
})
}
this.getPayState(e.trade_id)
getNum = 0
},
/**
* 查询支付结果
*/
getPayState(trade_id){
wx.$api.pay.payState(trade_id).then(res => {
console.log(res.data.is_paid)
let { is_paid } = res.data
if(is_paid){
this.setData({
success: true,
loding : false
})
return
}
if(!is_paid && getNum >= 3){
this.setData({
success: false,
loding : false
})
return
}
getNum++
this.getPayState(trade_id)
}).catch(err => {
console.log(err)
})
},
/**
* 返回
*/
onBack(){
wx.navigateBack()
}
})

4
pages/pay/success/success.json Normal file
View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "支付结果"
}

21
pages/pay/success/success.wxml Normal file
View File

@@ -0,0 +1,21 @@
<view class="success">
<block wx:if="{{loding}}">
<image class="loding" src="/static/icons/refresh_loding.gif" mode="widthFix"></image>
<view class="text">查询支付结果中...</view>
</block>
<block wx:else>
<image class="icon" wx:if="{{success}}" src="/static/icons/success_icon.png" mode="widthFix"></image>
<image class="icon" wx:else src="/static/icons/fali_icon.png" mode="widthFix"></image>
<view class="title">{{success ? '支付成功' : '支付失败'}}</view>
<view class="text">
<text wx:if="{{success}}">订单支付，可在【我的】中查询订单</text>
<text wx:else>暂未查询到您的订单支付信息
如已扣款请稍后前往【我的】查询订单</text>
</view>
<view class="idcard-btn">
<button size="default" bind:tap="onBack">返回</button>
</view>
</block>
</view>

11
pages/pay/success/success.wxss Normal file
View File

@@ -0,0 +1,11 @@
.success{ height: 90vh; width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.loding{ width: 42rpx; height: 42rpx; margin-bottom: 50rpx; }
.icon{ width: 128rpx; height: 128rpx; margin-bottom: 40rpx; }
.title{ font-size: 50rpx; font-weight: bold; line-height: 50rpx; margin-bottom: 30rpx; color: #333; }
.text{ font-size: 30rpx; color: gray; margin-bottom: 100px; text-align: center; line-height: 50rpx; }
.idcard-btn{ padding: 50rpx 60rpx; width: 100vw; box-sizing: border-box; }
.idcard-btn button[size='default']{ background: #da2b54; width: 100%; height: 90rpx; border-radius: 45rpx; color: white; line-height: 90rpx; padding: 0; font-size: 32rpx; }