wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

订单和余额第三方支付开发

Browse Source
pifa
wangdong 7 months ago
parent 8258b1c1e3
commit 8d8b462eb9
3 changed files with 165 additions and 42 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 11
      App.vue
  2. 104
      pages/checkout/cashier/index.vue
  3. 92
      pages/wallet/recharge/index.vue

11
App.vue
Unescape View File

@ -24,7 +24,16 @@
// 获取商城基础信息 // 获取商城基础信息
this.getStoreInfo() this.getStoreInfo()
}, },
onShow(options) {
console.log('app onShow', options);
if (options.referrerInfo) {
// wx.showToast({
// title: params.errStr,
// icon: 'none',
// });
uni.$emit('appShow', options.referrerInfo);
}
},
methods: { methods: {
// app启动参数 // app启动参数

104
pages/checkout/cashier/index.vue
Unescape View File

@ -18,9 +18,12 @@
<view class="payment-method"> <view class="payment-method">
<view v-for="(item, index) in methods" :key="index" class="pay-item dis-flex flex-x-between" @click="handleSelectPayType(index)"> <view v-for="(item, index) in methods" :key="index" class="pay-item dis-flex flex-x-between" @click="handleSelectPayType(index)">
<view class="item-left dis-flex flex-y-center"> <view class="item-left dis-flex flex-y-center">
<view class="item-left_icon" :class="[item.method]"> <view v-if="item.method!=='huifu'" class="item-left_icon" :class="[item.method]">
<text class="iconfont" :class="[PayMethodIconEnum[item.method]]"></text> <text class="iconfont" :class="[PayMethodIconEnum[item.method]]"></text>
</view> </view>
<view v-else class="huifu-box">
<image :src="`${$picUrl}/static/yinlian.png`" mode="heightFix" class="huifu"></image>
</view>
<view class="item-left_text"> <view class="item-left_text">
<text>{{ PayMethodEnum[item.method].name }}</text> <text>{{ PayMethodEnum[item.method].name }}</text>
</view> </view>
@ -117,10 +120,19 @@
this.orderId = Number(orderId) this.orderId = Number(orderId)
// 获取收银台信息 // 获取收银台信息
this.getCashierInfo() this.getCashierInfo()
uni.$on('appShow', this.solveShowMsg);
}, },
onUnload() {
uni.$off('appShow', this.solveShowMsg);
},
methods: { methods: {
solveShowMsg(info) {
console.log(info);
if (this.miniPayRequest && Object.keys(this.miniPayRequest).length > 0 && info.appId === this.miniPayRequest.miniuser) {
this.onTradeQuery(this.miniPayRequest.out_trade_no, this.curPaymentItem.method);
}
},
// 获取收银台信息 // 获取收银台信息
getCashierInfo() { getCashierInfo() {
const app = this const app = this
@ -160,6 +172,9 @@
// 选择支付方式 // 选择支付方式
handleSelectPayType(index) { handleSelectPayType(index) {
this.curPaymentItem = this.methods[index] this.curPaymentItem = this.methods[index]
if (this.curPaymentItem.method === 'huifu') {
this.createOrder();
}
}, },
// 判断当前页面来源于浏览器返回 // 判断当前页面来源于浏览器返回
@ -195,23 +210,55 @@
// 确认支付 // 确认支付
handleSubmit() { handleSubmit() {
const app = this const app = this
// 判断是否选择了支付方式 // 判断是否选择了支付方式
if (!app.curPaymentItem) { if (!app.curPaymentItem) {
app.$toast('您还没有选择支付方式') app.$toast('您还没有选择支付方式')
return return
} }
// 按钮禁用 // 按钮禁用
if (app.disabled) return if (app.disabled) return
app.disabled = true app.disabled = true
// 提交到后端API if (app.curPaymentItem.method === 'huifu') {
CashierApi.orderPay(app.orderId, { app.disabled = false
method: app.curPaymentItem.method, if (!app.miniPayRequest || Object.keys(app.miniPayRequest).length === 0) {
client: app.platform, app.$toast(`暂无${app.PayMethodEnum[app.curPaymentItem.method].name}支付信息`);
extra: app.getExtraAsUnify(app.curPaymentItem.method) return
}) }
.then(result => app.onSubmitCallback(result)) let appPayRequest = '';
.finally(err => setTimeout(() => app.disabled = false, 10)) appPayRequest = encodeURIComponent(JSON.stringify({
}, sign: app.miniPayRequest.sign,
prepayid: app.miniPayRequest.prepayid,
}));
uni.openEmbeddedMiniProgram({
appId: app.miniPayRequest.miniuser,
path: `${app.miniPayRequest.minipath}?appPayRequest=${appPayRequest}`
});
} else {
// 提交到后端API
this.createOrder();
}
},
createOrder() {
const app = this;
CashierApi.orderPay(app.orderId, {
method: app.curPaymentItem.method,
client: app.platform,
extra: app.getExtraAsUnify(app.curPaymentItem.method)
})
.then(result => {
console.log(result);
if (app.curPaymentItem.method === 'huifu') {
const { miniPayRequest, out_trade_no } = result.data.payment;
app.miniPayRequest = miniPayRequest;
app.miniPayRequest.out_trade_no = out_trade_no;
} else {
app.onSubmitCallback(result)
}
})
.finally(err => setTimeout(() => app.disabled = false, 10))
},
// 获取第三方支付的扩展参数 // 获取第三方支付的扩展参数
getExtraAsUnify(method) { getExtraAsUnify(method) {
@ -355,7 +402,7 @@
.payment-method { .payment-method {
width: 94%; width: 94%;
margin: 0 auto 20rpx auto; margin: 0 auto 20rpx auto;
padding: 0 40rpx; padding: 0 40rpx 0 20rpx;
background-color: #ffffff; background-color: #ffffff;
border-radius: 20rpx; border-radius: 20rpx;
@ -369,8 +416,9 @@
} }
.item-left_icon { .item-left_icon {
margin-right: 20rpx; width: 100rpx;
font-size: 44rpx; text-align: center;
font-size: 60rpx;
&.wechat { &.wechat {
color: #00c800; color: #00c800;
@ -384,6 +432,14 @@
color: #ff9700; color: #ff9700;
} }
} }
.huifu-box {
width: 100rpx;
display: flex;
justify-content: center;
.huifu {
height: 44rpx;
}
}
.item-left_text { .item-left_text {
font-size: 28rpx; font-size: 28rpx;

92
pages/wallet/recharge/index.vue
Unescape View File

@ -38,9 +38,12 @@
<view v-for="(item, index) in methods" :key="index" class="pay-item dis-flex flex-x-between" <view v-for="(item, index) in methods" :key="index" class="pay-item dis-flex flex-x-between"
@click="handleSelectPayType(index)"> @click="handleSelectPayType(index)">
<view class="item-left dis-flex flex-y-center"> <view class="item-left dis-flex flex-y-center">
<view class="item-left_icon" :class="[item.method]"> <view v-if="item.method!=='huifu'" class="item-left_icon" :class="[item.method]">
<text class="iconfont" :class="[PayMethodIconEnum[item.method]]"></text> <text class="iconfont" :class="[PayMethodIconEnum[item.method]]"></text>
</view> </view>
<view v-else class="huifu-box">
<image :src="`${$picUrl}/static/yinlian.png`" mode="heightFix" class="huifu"></image>
</view>
<view class="item-left_text"> <view class="item-left_text">
<text>{{ PayMethodEnum[item.method].name }}</text> <text>{{ PayMethodEnum[item.method].name }}</text>
</view> </view>
@ -140,10 +143,19 @@
onLoad(options) { onLoad(options) {
// 获取页面数据 // 获取页面数据
this.getPageData() this.getPageData()
uni.$on('appShow', this.solveShowMsg);
}, },
onUnload() {
uni.$off('appShow', this.solveShowMsg);
},
methods: { methods: {
solveShowMsg(info) {
console.log(info);
if (this.miniPayRequest && Object.keys(this.miniPayRequest).length > 0 && info.appId === this.miniPayRequest.miniuser) {
this.onTradeQuery(this.miniPayRequest.out_trade_no, this.curPaymentItem.method);
}
},
// 选择充值套餐 // 选择充值套餐
onSelectPlan(planId) { onSelectPlan(planId) {
this.selectedPlanId = planId this.selectedPlanId = planId
@ -159,6 +171,9 @@
// 选择支付方式 // 选择支付方式
handleSelectPayType(index) { handleSelectPayType(index) {
this.curPaymentItem = this.methods[index] this.curPaymentItem = this.methods[index]
if (this.curPaymentItem.method === 'huifu' && (this.selectedPlanId > 0 || this.inputValue)) {
this.createOrder();
}
}, },
// 获取页面数据 // 获取页面数据
@ -222,18 +237,52 @@
if (app.disabled) return if (app.disabled) return
app.disabled = true app.disabled = true
// 提交到后端 // 提交到后端
RechargeApi.submit({ if (app.curPaymentItem.method === 'huifu') {
planId: app.selectedPlanId, app.disabled = false
customMoney: app.inputValue ? app.inputValue : '', if (!this.selectedPlanId && !this.inputValue) {
method: app.curPaymentItem.method, app.$toast('请选择充值套餐或输入充值金额');
client: app.platform, return;
extra: app.getExtraAsUnify(app.curPaymentItem.method) }
}) if (!app.miniPayRequest || Object.keys(app.miniPayRequest).length === 0) {
.then(result => app.onSubmitCallback(result)) app.$toast(`暂无${app.PayMethodEnum[app.curPaymentItem.method].name}支付信息`);
.finally(err => { return
setTimeout(() => app.disabled = false, 10) }
}) let appPayRequest = '';
appPayRequest = encodeURIComponent(JSON.stringify({
sign: app.miniPayRequest.sign,
prepayid: app.miniPayRequest.prepayid,
}));
uni.openEmbeddedMiniProgram({
appId: app.miniPayRequest.miniuser,
path: `${app.miniPayRequest.minipath}?appPayRequest=${appPayRequest}`
});
} else {
// 提交到后端API
this.createOrder();
}
}, },
createOrder() {
const app = this;
RechargeApi.submit({
planId: app.selectedPlanId,
customMoney: app.inputValue ? app.inputValue : '',
method: app.curPaymentItem.method,
client: app.platform,
extra: app.getExtraAsUnify(app.curPaymentItem.method)
})
.then(result => {
console.log(result);
if (app.curPaymentItem.method === 'huifu') {
const { miniPayRequest, out_trade_no } = result.data.payment;
app.miniPayRequest = miniPayRequest;
app.miniPayRequest.out_trade_no = out_trade_no;
} else {
app.onSubmitCallback(result)
}
})
.finally(err => setTimeout(() => app.disabled = false, 10))
},
// 获取第三方支付的扩展参数 // 获取第三方支付的扩展参数
getExtraAsUnify(method) { getExtraAsUnify(method) {
@ -466,8 +515,9 @@
font-size: 26rpx; font-size: 26rpx;
.item-left_icon { .item-left_icon {
margin-right: 20rpx; width: 100rpx;
font-size: 44rpx; text-align: center;
font-size: 60rpx;
&.wechat { &.wechat {
color: #00c800; color: #00c800;
@ -478,6 +528,14 @@
} }
} }
.huifu-box {
width: 100rpx;
display: flex;
justify-content: center;
.huifu {
height: 44rpx;
}
}
.item-left_text { .item-left_text {
font-size: 30rpx; font-size: 30rpx;

Write Preview
Loading…
Cancel
Save