yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

✨ 收银台：接入收银结果界面

pull/26/head^2
YunaiV 2023-12-12 22:23:33 +08:00
parent 072f6a15a9
commit 4245164cae
5 changed files with 132 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
pages/pay/index.vue
View File

@ -87,10 +87,11 @@
// 检测支付环境 // 检测支付环境
const state = reactive({ const state = reactive({
payment: '', orderType: 'goods', // 订单类型; goods - 商品订单, recharge - 充值订单
orderInfo: {}, orderInfo: {}, // 支付单信息
payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付 payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付
payMethods: [], payMethods: [], // 可选的支付方式
payment: '', // 选中的支付方式
}); });
const onPay = () => { const onPay = () => {
@ -104,12 +105,12 @@
content: '确定要支付吗?', content: '确定要支付吗?',
success: function (res) { success: function (res) {
if (res.confirm) { if (res.confirm) {
sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn); sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.id);
} }
}, },
}); });
} else { } else {
sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn); sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.id);
} }
}; };
@ -134,15 +135,16 @@
// 状态转换：payOrder.status => payStatus // 状态转换：payOrder.status => payStatus
function checkPayStatus() { function checkPayStatus() {
if (state.orderInfo.status === 10) { if (state.orderInfo.status === 10
|| state.orderInfo.status === 20 ) { // 支付成功
state.payStatus = 2; state.payStatus = 2;
return; return;
} }
if (state.orderInfo.status === 20) { if (state.orderInfo.status === 30) { // 支付关闭
state.payStatus = -1; state.payStatus = -1;
return; return;
} }
state.payStatus = 1; state.payStatus = 1; // 待支付
} }
// 切换支付方式 // 切换支付方式
@ -167,24 +169,25 @@
// 获得支付方式 // 获得支付方式
async function setPayMethods() { async function setPayMethods() {
const { data, code } = await PayChannelApi.getEnableChannelCodeList(state.orderInfo.appId); const { data, code } = await PayChannelApi.getEnableChannelCodeList(state.orderInfo.appId)
if (code !== 0) { if (code !== 0) {
return; return
} }
state.payMethods = getPayMethods(data); state.payMethods = getPayMethods(data)
} }
onLoad((options) => { onLoad((options) => {
if ( if (sheep.$platform.name === 'WechatOfficialAccount'
sheep.$platform.name === 'WechatOfficialAccount' && && sheep.$platform.os === 'ios'
sheep.$platform.os === 'ios' && && !sheep.$platform.landingPage.includes('pages/pay/index')) {
!sheep.$platform.landingPage.includes('pages/pay/index')
) {
location.reload(); location.reload();
return; return;
} }
// 获得支付订单信息 // 获得支付订单信息
let id = options.id; let id = options.id;
if (options.orderType) {
state.orderType = options.orderType;
}
setOrder(id); setOrder(id);
}); });
</script> </script>
@ -203,6 +206,7 @@
position: relative; position: relative;
padding: 60rpx 20rpx 40rpx; padding: 60rpx 20rpx 40rpx;
.money-text { .money-text {
color: $red; color: $red;
font-size: 46rpx; font-size: 46rpx;

120
pages/pay/result.vue
View File

@ -2,34 +2,27 @@
<template> <template>
<s-layout title="支付结果" :bgStyle="{ color: '#FFF' }"> <s-layout title="支付结果" :bgStyle="{ color: '#FFF' }">
<view class="pay-result-box ss-flex-col ss-row-center ss-col-center"> <view class="pay-result-box ss-flex-col ss-row-center ss-col-center">
<view class="pay-waiting ss-m-b-30" v-if="payResult === 'waiting'"> </view> <!-- 信息展示 -->
<view class="pay-waiting ss-m-b-30" v-if="payResult === 'waiting'" />
<image <image
class="pay-img ss-m-b-30" class="pay-img ss-m-b-30"
v-if="payResult === 'success'" v-if="payResult === 'success'"
:src="sheep.$url.static('/static/img/shop/order/order_pay_success.gif')" :src="sheep.$url.static('/static/img/shop/order/order_pay_success.gif')"
></image> />
<image <image
class="pay-img ss-m-b-30" class="pay-img ss-m-b-30"
v-if="['failed', 'closed'].includes(payResult)" v-if="['failed', 'closed'].includes(payResult)"
:src="sheep.$url.static('/static/img/shop/order/order_paty_fail.gif')" :src="sheep.$url.static('/static/img/shop/order/order_paty_fail.gif')"
></image> />
<view class="tip-text ss-m-b-30" v-if="payResult == 'success'">{{ <view class="tip-text ss-m-b-30" v-if="payResult === 'success'">支付成功</view>
state.orderInfo.pay_mode === 'offline' ? '下单成功' : '支付成功' <view class="tip-text ss-m-b-30" v-if="payResult === 'failed'">支付失败</view>
}}</view> <view class="tip-text ss-m-b-30" v-if="payResult === 'closed'">该订单已关闭</view>
<view class="tip-text ss-m-b-30" v-if="payResult == 'failed'">支付失败</view> <view class="tip-text ss-m-b-30" v-if="payResult === 'waiting'">检测支付结果...</view>
<view class="tip-text ss-m-b-30" v-if="payResult == 'closed'">该订单已关闭</view>
<view class="tip-text ss-m-b-30" v-if="payResult == 'waiting'">检测支付结果...</view>
<view class="pay-total-num ss-flex" v-if="payResult === 'success'"> <view class="pay-total-num ss-flex" v-if="payResult === 'success'">
<view v-if="Number(state.orderInfo.pay_fee) > 0">￥{{ state.orderInfo.pay_fee }}</view> <view>￥{{ fen2yuan(state.orderInfo.price) }}</view>
<view v-if="state.orderInfo.score_amount && Number(state.orderInfo.pay_fee) > 0">+</view>
<view class="price-text ss-flex ss-col-center" v-if="state.orderInfo.score_amount">
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img"
></image>
<view>{{ state.orderInfo.score_amount }}</view>
</view>
</view> </view>
<!-- 操作区 -->
<view class="btn-box ss-flex ss-row-center ss-m-t-50"> <view class="btn-box ss-flex ss-row-center ss-m-t-50">
<button class="back-btn ss-reset-button" @tap="sheep.$router.go('/pages/index/index')"> <button class="back-btn ss-reset-button" @tap="sheep.$router.go('/pages/index/index')">
返回首页 返回首页
@ -37,30 +30,29 @@
<button <button
class="check-btn ss-reset-button" class="check-btn ss-reset-button"
v-if="payResult === 'failed'" v-if="payResult === 'failed'"
@tap="sheep.$router.redirect('/pages/pay/index', { orderSN: state.orderId })" @tap="
sheep.$router.redirect('/pages/pay/index', { id: state.id, orderType: state.orderType })
"
> >
重新支付 重新支付
</button> </button>
<button class="check-btn ss-reset-button" v-if="payResult === 'success'" @tap="onOrder"> <button class="check-btn ss-reset-button" v-if="payResult === 'success'" @tap="onOrder">
查看订单 查看订单
</button> </button>
<!-- TODO 芋艿：拼团接入 -->
<button <button
class="check-btn ss-reset-button" class="check-btn ss-reset-button"
v-if=" v-if="payResult === 'success' && state.tradeOrder.type === 3"
payResult === 'success' &&
['groupon', 'groupon_ladder'].includes(state.orderInfo.activity_type)
"
@tap="sheep.$router.redirect('/pages/activity/groupon/order')" @tap="sheep.$router.redirect('/pages/activity/groupon/order')"
> >
我的拼团 我的拼团
</button> </button>
</view> </view>
<!-- TODO 芋艿：订阅 -->
<!-- #ifdef MP --> <!-- #ifdef MP -->
<view class="subscribe-box ss-flex ss-m-t-44"> <view class="subscribe-box ss-flex ss-m-t-44">
<image <image class="subscribe-img" :src="sheep.$url.static('/static/img/shop/order/cargo.png')" />
class="subscribe-img"
:src="sheep.$url.static('/static/img/shop/order/cargo.png')"
></image>
<view class="subscribe-title ss-m-r-48 ss-m-l-16">获取实时发货信息与订单状态</view> <view class="subscribe-title ss-m-r-48 ss-m-l-16">获取实时发货信息与订单状态</view>
<view class="subscribe-start" @tap="subscribeMessage">立即订阅</view> <view class="subscribe-start" @tap="subscribeMessage">立即订阅</view>
</view> </view>
@ -74,15 +66,20 @@
import { reactive, computed } from 'vue'; import { reactive, computed } from 'vue';
import { isEmpty } from 'lodash'; import { isEmpty } from 'lodash';
import sheep from '@/sheep'; import sheep from '@/sheep';
import PayOrderApi from '@/sheep/api/pay/order';
import { fen2yuan } from '../../sheep/hooks/useGoods';
import OrderApi from '@/sheep/api/trade/order';
const state = reactive({ const state = reactive({
orderId: 0, id: 0, // 支付单号
orderType: 'goods', orderType: 'goods', // 订单类型
result: 'unpaid', // 支付状态 result: 'unpaid', // 支付状态
orderInfo: {}, // 订单详情 orderInfo: {}, // 支付订单信息
tradeOrder: {}, // 商品订单信息，只有在 orderType 为 goods 才会请求。目的：【我的拼团】按钮的展示
counter: 0, // 获取结果次数 counter: 0, // 获取结果次数
}); });
// 支付结果 result => payResult
const payResult = computed(() => { const payResult = computed(() => {
if (state.result === 'unpaid') { if (state.result === 'unpaid') {
return 'waiting'; return 'waiting';
@ -93,57 +90,65 @@
if (state.result === 'failed') { if (state.result === 'failed') {
return 'failed'; return 'failed';
} }
if (state.result === 'closed') { if (state.result === 'closed') {
return 'closed'; return 'closed';
} }
}); });
async function getOrderInfo(orderId) {
let checkPayResult; // 获得订单信息
async function getOrderInfo(id) {
state.counter++; state.counter++;
if (state.orderType === 'recharge') { // 1. 加载订单信息
checkPayResult = sheep.$api.trade.order; const { data, code } = await PayOrderApi.getOrder(id);
} else { if (code === 0) {
checkPayResult = sheep.$api.order.detail;
}
const { data, error } = await checkPayResult(orderId);
if (error === 0) {
state.orderInfo = data; state.orderInfo = data;
if (state.orderInfo.status === 'closed') { if (!state.orderInfo || state.orderInfo.status === 30) {
// 支付关闭
state.result = 'closed'; state.result = 'closed';
return; return;
} }
if (state.orderInfo.status !== 'unpaid') { if (state.orderInfo.status !== 0) {
// 非待支付，可能是已支付，可能是已退款
state.result = 'paid'; state.result = 'paid';
// #ifdef MP // #ifdef MP
subscribeMessage(); subscribeMessage();
// #endif // #endif
// 特殊：获得商品订单信息
if (state.orderType === 'goods') {
const { data, code } = await OrderApi.getOrder(state.orderInfo.merchantOrderId);
if (code === 0) {
state.tradeOrder = data;
}
}
return; return;
} }
} }
// 2.1 情况三一：未支付，且轮询次数小于三次，则继续轮询
if (state.counter < 3 && state.result === 'unpaid') { if (state.counter < 3 && state.result === 'unpaid') {
setTimeout(() => { setTimeout(() => {
getOrderInfo(orderId); getOrderInfo(id);
}, 1500); }, 1500);
} }
// 超过三次检测才判断为支付失败 // 2.2 情况二：超过三次检测才判断为支付失败
if (state.counter >= 3) { if (state.counter >= 3) {
state.result = 'failed'; state.result = 'failed';
} }
} }
function onOrder() { function onOrder() {
if ((state.orderType === 'recharge')) { // TODO 芋艿：待测试
if (state.orderType === 'recharge') {
sheep.$router.redirect('/pages/pay/recharge-log'); sheep.$router.redirect('/pages/pay/recharge-log');
} else { } else {
sheep.$router.redirect('/pages/order/list'); sheep.$router.redirect('/pages/order/list');
} }
} }
// TODO 芋艿：待测试
// #ifdef MP // #ifdef MP
function subscribeMessage() { function subscribeMessage() {
let event = ['order_dispatched']; let event = ['order_dispatched'];
if (['groupon', 'groupon_ladder'].includes(state.orderInfo.activity_type)) { if (state.tradeOrder.type === 3) {
event.push('groupon_finish'); event.push('groupon_finish');
event.push('groupon_fail'); event.push('groupon_fail');
} }
@ -152,18 +157,13 @@
// #endif // #endif
onLoad(async (options) => { onLoad(async (options) => {
let id = '';
// 支付订单号 // 支付订单号
if (options.orderSN) {
id = options.orderSN;
}
if (options.id) { if (options.id) {
id = options.id; state.id = options.id;
} }
state.orderId = id; // 订单类型
if (options.orderType) {
if (options.orderType === 'recharge') { state.orderType = options.orderType;
state.orderType = 'recharge';
} }
// 支付结果传值过来是失败，则直接显示失败界面 // 支付结果传值过来是失败，则直接显示失败界面
@ -171,14 +171,16 @@
state.result = 'failed'; state.result = 'failed';
} else { } else {
// 轮询三次检测订单支付结果 // 轮询三次检测订单支付结果
getOrderInfo(state.orderId); await getOrderInfo(state.id);
} }
}); });
onShow(() => { onShow(() => {
if(isEmpty(state.orderInfo)) return; if (isEmpty(state.orderInfo)) {
getOrderInfo(state.orderId); return;
}) }
getOrderInfo(state.id);
});
onHide(() => { onHide(() => {
state.result = 'unpaid'; state.result = 'unpaid';

8
sheep/api/pay/order.js
View File

@ -9,6 +9,14 @@ const PayOrderApi = {
params: { id } params: { id }
}); });
}, },
// 提交支付订单
submitOrder: (data) => {
return request({
url: '/app-api/pay/order/submit',
method: 'POST',
data
});
}
}; };
export default PayOrderApi; export default PayOrderApi;

34
sheep/api/trade/order.js
View File

@ -5,16 +5,16 @@ const OrderApi = {
settlementOrder: (data) => { settlementOrder: (data) => {
const data2 = { const data2 = {
...data, ...data,
} };
// 移除多余字段 // 移除多余字段
if (!(data.couponId > 0)) { if (!(data.couponId > 0)) {
delete data2.couponId delete data2.couponId;
} }
if (!(data.addressId > 0)) { if (!(data.addressId > 0)) {
delete data2.addressId delete data2.addressId;
} }
// 解决 SpringMVC 接受 List<Item> 参数的问题 // 解决 SpringMVC 接受 List<Item> 参数的问题
delete data2.items delete data2.items;
for (let i = 0; i < data.items.length; i++) { for (let i = 0; i < data.items.length; i++) {
data2[encodeURIComponent('items[' + i + '' + '].skuId')] = data.items[i].skuId + ''; data2[encodeURIComponent('items[' + i + '' + '].skuId')] = data.items[i].skuId + '';
data2[encodeURIComponent('items[' + i + '' + '].count')] = data.items[i].count + ''; data2[encodeURIComponent('items[' + i + '' + '].count')] = data.items[i].count + '';
@ -22,20 +22,32 @@ const OrderApi = {
data2[encodeURIComponent('items[' + i + '' + '].cartId')] = data.items[i].cartId + ''; data2[encodeURIComponent('items[' + i + '' + '].cartId')] = data.items[i].cartId + '';
} }
} }
const queryString= Object.keys(data2).map(key => key + '=' + data2[key]).join('&') const queryString = Object.keys(data2)
.map((key) => key + '=' + data2[key])
.join('&');
return request2({ return request2({
url: `trade/order/settlement?${queryString}`, url: `trade/order/settlement?${queryString}`,
method: 'GET' method: 'GET',
}) });
}, },
// 创建订单 // 创建订单
createOrder: (data) => { createOrder: (data) => {
return request2({ return request2({
url: `trade/order/create`, url: `trade/order/create`,
method: 'POST', method: 'POST',
data data,
}) });
} },
// 获得订单
getOrder: (id) => {
return request2({
url: `trade/order/get-detail`,
method: 'GET',
params: {
id,
},
});
},
}; };
export default OrderApi; export default OrderApi;

37
sheep/platform/pay.js
View File

@ -3,19 +3,20 @@ import sheep from '@/sheep';
import $wxsdk from '@/sheep/libs/sdk-h5-weixin'; import $wxsdk from '@/sheep/libs/sdk-h5-weixin';
// #endif // #endif
import { getRootUrl } from '@/sheep/helper'; import { getRootUrl } from '@/sheep/helper';
import PayOrderApi from '@/sheep/api/pay/order';
/** /**
* 支付 * 支付
* *
* @param {String} payment = ['wechat','alipay','wallet','offline'] - 支付方式 * @param {String} payment = ['wechat','alipay','wallet','offline'] - 支付方式
* @param {String} orderType = ['goods','recharge','groupon'] - 订单类型 * @param {String} orderType = ['goods','recharge','groupon'] - 订单类型
* @param {String} orderSN - 订单号 * @param {String} id - 订单号
*/ */
export default class SheepPay { export default class SheepPay {
constructor(payment, orderType, orderSN) { constructor(payment, orderType, id) {
this.payment = payment; this.payment = payment;
this.orderSN = orderSN; this.id = id;
this.orderType = orderType; this.orderType = orderType;
this.payAction(); this.payAction();
} }
@ -83,18 +84,21 @@ export default class SheepPay {
} }
// 预支付 // 预支付
prepay() { prepay(channel) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let data = { let data = {
order_sn: this.orderSN, id: this.id,
payment: this.payment, channelCode: channel,
channelExtras: {}
}; };
if (uni.getStorageSync('openid')) { if (uni.getStorageSync('openid')) {
data.openid = uni.getStorageSync('openid'); data.openid = uni.getStorageSync('openid');
} }
sheep.$api.pay.prepay(data).then((res) => { PayOrderApi.submitOrder(data).then((res) => {
res.error === 0 && resolve(res); // 成功时
if (res.error === -1 && res.msg === 'miss_openid') { res.code === 0 && resolve(res);
// 失败时
if (res.code !== 0 && res.msg === 'miss_openid') {
uni.showModal({ uni.showModal({
title: '微信支付', title: '微信支付',
content: '请先绑定微信再使用微信支付', content: '请先绑定微信再使用微信支付',
@ -134,7 +138,7 @@ export default class SheepPay {
async wechatWapPay() { async wechatWapPay() {
const { error, data } = await this.prepay(); const { error, data } = await this.prepay();
if (error === 0) { if (error === 0) {
const redirect_url = `${getRootUrl()}pages/pay/result?orderSN=${this.orderSN}&payment=${this.payment const redirect_url = `${getRootUrl()}pages/pay/result?id=${this.id}&payment=${this.payment
}&orderType=${this.orderType}`; }&orderType=${this.orderType}`;
location.href = `${data.pay_data.h5_url}&redirect_url=${encodeURIComponent(redirect_url)}`; location.href = `${data.pay_data.h5_url}&redirect_url=${encodeURIComponent(redirect_url)}`;
} }
@ -144,7 +148,7 @@ export default class SheepPay {
async redirectPay() { async redirectPay() {
let { error, data } = await this.prepay(); let { error, data } = await this.prepay();
if (error === 0) { if (error === 0) {
const redirect_url = `${getRootUrl()}pages/pay/result?orderSN=${this.orderSN}&payment=${this.payment const redirect_url = `${getRootUrl()}pages/pay/result?id=${this.id}&payment=${this.payment
}&orderType=${this.orderType}`; }&orderType=${this.orderType}`;
location.href = data.pay_data + encodeURIComponent(redirect_url); location.href = data.pay_data + encodeURIComponent(redirect_url);
} }
@ -172,10 +176,10 @@ export default class SheepPay {
}); });
} }
// 余额支付 TODO 芋艿：待接入 // 余额支付
async walletPay() { async walletPay() {
const { error } = await this.prepay(); const { code } = await this.prepay('wallet');
error === 0 && this.payResult('success'); code === 0 && this.payResult('success');
} }
// 货到付款 TODO 芋艿：待接入 // 货到付款 TODO 芋艿：待接入
@ -246,10 +250,9 @@ export default class SheepPay {
// 支付结果跳转,success:成功，fail:失败 // 支付结果跳转,success:成功，fail:失败
payResult(resultType) { payResult(resultType) {
sheep.$router.redirect('/pages/pay/result', { sheep.$router.redirect('/pages/pay/result', {
orderSN: this.orderSN, id: this.id,
payment: this.payment, //重新支付的时候使用
payState: resultType,
orderType: this.orderType, orderType: this.orderType,
payState: resultType
}); });
} }
} }