小程序支付流程组件封装及使用
效果
目录
html
付款详情
{{money}}元
转账汇款(推荐使用)
余额支付
微信支付
确认支付
请输入交易密码
忘记密码？找回并完成支付
less
.flex {
display: flex;
justify-content: space-between;
align-items: center;
/* flex-wrap: wrap; */
}
.flex_l {
display: flex;
justify-content: flex-start;
align-items: center;
}
.pay {
font-size: 30rpx;
color: #333;
// 支付方式
.pay_type {
// height: 700rpx;
width: 100%;
.title {
font-size: 36rpx;
color: rgba(12, 11, 11, 1);
height: 110rpx;
line-height: 110rpx;
text-align: center;
border-bottom: 1rpx solid #E5E5E5;
}
.money {
font-size: 56rpx;
color: rgba(12, 11, 11, 1);
margin: 45rpx 0;
text-align: center;
text {
font-size: 30rpx;
}
}
.item {
padding-left: 250rpx;
height: 100rpx;
&.active {
background-color: #FEDFE0;
}
image {
width: 44rpx;
height: 44rpx;
margin-right: 30rpx;
}
text {
font-size: 20rpx;
color: #FC5E62;
margin-left: 20rpx;
}
}
.button {
margin: 40rpx 24rpx;
height: 88rpx;
line-height: 88rpx;
background: rgba(252, 94, 98, 1);
border-radius: 44rpx;
text-align: center;
font-size: 36rpx;
color: rgba(255, 255, 255, 1);
}
}
// 密码
.box {
height: 959rpx;
.title {
height: 106rpx;
width: 100%;
border-bottom: 1rpx solid #e5e5e5;
font-size: 36rpx;
text-align: center;
position: relative;
line-height: 104rpx;
>image {
position: absolute;
width: 22rpx;
height: 39rpx;
top: 37rpx;
left: 24rpx;
}
}
.tip {
color: #5EB4FC;
font-size: 30rpx;
text-align: center;
}
}
.input_row {
width: 690rpx;
margin: 0 auto;
height: 98rpx;
position: relative;
display: flex;
align-items: center;
border: 1rpx solid #e2e2e2;
border-radius: 20rpx;
margin-top: 50rpx;
}
.input_row .pwd_item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
border-right: 1rpx solid #e2e2e2;
position: relative;
}
.pwd_item:nth-last-of-type(1) {
border-right: 0;
}
.pwd_item text {
width: 30rpx;
height: 30rpx;
border-radius: 30rpx;
background-color: #555;
}
.forget_pwd {
float: right;
margin: 30rpx;
width: 100rpx;
text-align: right;
font-size: 24rpx;
color: #ff7800;
}
/* 文本输入框位置: 设置到左边隐藏 */
.input_control {
position: relative;
left: -300rpx;
bottom: 0;
width: 100rpx;
height: 37rpx;
}
}
js
// components/pay/payType.js
const app = getApp()
const request = require('../../utils/request.js')
Component({
/**
* 组件的属性列表
*/
properties: {
money: String, //金额
pay_num: {
type: String, //支付方式数量 1 微信 2 转账 微信 3 转账 微信 余额
observer: function (newVal, oldVal) {
// 属性值变化时执行 可省略
if (newVal == 1) {
this.setData({
payType: 3
})
} else if (newVal == 2) {
this.setData({
payType: 1
})
}
}
},
order_id: String, //订单id
source: String, //支付来源 1-订单 2-充值 3-打赏 4-交保证金
deposit_id: String, //保证金id
goods_id: String, //商品id，用于交完保证金跳转
userId: String, //被打赏的用户id
circle_id: String, //被打赏的圈子id
},
/**
* 组件的初始数据
*/
data: {
imgurl: app.globalData.imgurl, //全局img路径
payType: 1, // 支付方式 1转账 2余额 3微信
show: true, //支付方式
showPsd: false, //密码
codeVal: '', //六位密码
payFocus: true, //密码框聚焦
},
/**
* 组件的方法列表
*/
methods: {
// 点击三种支付方式 1转账 2余额 3微信
getPayType(e) {
let type = e.currentTarget.dataset.type
this.setData({
payType: type
})
},
// 点击确认支付
goPay() {
if (this.data.payType == 1) {
wx.navigateTo({
url: `/pages/transfer/transfer?type=${this.data.pay_num}&money=${this.data.money}&order_id=${this.data.order_id}&source=${this.data.source}`
})
} else if (this.data.payType == 2) {
// 首先判断是否设置支付密码
request('user/getPaypassword', {}, 1).then(data => {
if (!data.have_paypassword) {
wx.showModal({
title: '去设置密码',
content: '设置密码后才能完成余额支付',
confirmColor: "#FC5E62",
success(res) {
if (res.confirm) {
wx.navigateTo({
url: '/pages/set/resetPsd/resetPsd'
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
} else {
this.setData({
show: false, //支付方式
showPsd: true, //密码
})
}
})
} else {
// 微信支付
request('WxPay/wechatPay', {
order_id: this.data.order_id, //订单id——订单支付
type: this.data.source, //1-订单 2-充值 3-打赏 4-交保证金
total_money: this.data.money,
deposit_id: this.data.deposit_id, // 保证金id
user_id: this.data.userId //被打赏人id
}, 1).then(data => {
console.log(data);
let _this = this
// 调取微信支付
wx.requestPayment({
timeStamp: data.data.timeStamp,
nonceStr: data.data.nonceStr,
package: data.data.package,
signType: data.data.signType,
paySign: data.data.paySign,
success: function (res) {
console.log(res);
_this.onClose()
if (_this.data.source == 1) { //1-订单
console.log(11111111111111111111);
wx.navigateBack({
delta: 1, // 回退前 delta(默认为1) 页面
})
} else if (_this.data.source == 2) { // 2-充值
wx.navigateBack({
delta: 1, // 回退前 delta(默认为1) 页面
})
} else if (_this.data.source == 3) { //3-打赏
// 生成打赏记录
request('circle/addAward', {
circleId: _this.data.circle_id,
awardUserId: _this.data.userId,
money: _this.data.money
}).then(data => {
console.log(data) // 成功回调
wx.showToast({
title: '打赏成功',
icon: 'none', //如果要纯文本，不要icon，将值设为'none'
duration: 2000
})
})
} else if (_this.data.source == 4) { //4-交保证金
wx.redirectTo({
url: "/pages/goods_detail/goods_detail?goods_id=" + this.data.goods_id
})
}
},
fail(res) {
console.log(res);
}
})
}).catch(res => {
wx.showToast({
title: res.msg,
icon: 'none', //默认值是success,就算没有icon这个值，就算有其他值最终也显示success
duration: 2000, //停留时间
})
_this.triggerEvent('close');
})
}
},
// 关闭支付方式
onClose() {
this.setData({ show: false });
this.triggerEvent('close');
},
// 关闭密码
onClosePsd() {
this.setData({
show: true,
showPsd: false
});
},
// 输入密码监听
inputPwd: function (e) {
this.setData({
codeVal: e.detail.value
});
if (e.detail.value.length == 6) {
this.setData({
show: false,
showPsd: false,
payFocus: false
})
// 调取余额支付接口
request('Pay/balancePay', {
paypassword: this.data.codeVal,
order_id: this.data.order_id
}, 1).then(data => {
// 支付成功
wx.showToast({
title: '支付成功',
icon: '', //默认值是success,就算没有icon这个值，就算有其他值最终也显示success
duration: 2000, //停留时间
})
setTimeout(function () {
wx.redirectTo({
url: '/pages/my/order/order?index=2'
})
}, 2000)
}).catch(res => {
wx.showToast({
title: res.msg,
icon: 'none', //默认值是success,就算没有icon这个值，就算有其他值最终也显示success
duration: 2000, //停留时间
})
this.triggerEvent('close');
})
}
},
//获取输入密码焦点
getFocus() {
this.setData({ payFocus: true });
},
// 点击忘记密码，去设置
toSetPwd() {
wx.navigateTo({
url: '/pages/set/resetPsd/resetPsd'
})
}
}
})
页面调用组件
{
"usingComponents": {
"pay": "/components/pay/payType"
},
"navigationBarTitleText": "报名提交保证金"
}
报名，提交保证金