✨ 收银台：接入收银结果界面
YunaiV
parent
072f6a15a9
commit
4245164cae
|
|
@ -87,10 +87,11 @@
|
|||
|
||||
// 检测支付环境
|
||||
const state = reactive({
|
||||
payment: '',
|
||||
orderInfo: {},
|
||||
orderType: 'goods', // 订单类型; goods - 商品订单, recharge - 充值订单
|
||||
orderInfo: {}, // 支付单信息
|
||||
payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付
|
||||
payMethods: [],
|
||||
payMethods: [], // 可选的支付方式
|
||||
payment: '', // 选中的支付方式
|
||||
});
|
||||
|
||||
const onPay = () => {
|
||||
|
|
@ -104,12 +105,12 @@
|
|||
content: '确定要支付吗?',
|
||||
success: function (res) {
|
||||
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 {
|
||||
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
|
||||
function checkPayStatus() {
|
||||
if (state.orderInfo.status === 10) {
|
||||
if (state.orderInfo.status === 10
|
||||
|| state.orderInfo.status === 20 ) { // 支付成功
|
||||
state.payStatus = 2;
|
||||
return;
|
||||
}
|
||||
if (state.orderInfo.status === 20) {
|
||||
if (state.orderInfo.status === 30) { // 支付关闭
|
||||
state.payStatus = -1;
|
||||
return;
|
||||
}
|
||||
state.payStatus = 1;
|
||||
state.payStatus = 1; // 待支付
|
||||
}
|
||||
|
||||
// 切换支付方式
|
||||
|
|
@ -167,24 +169,25 @@
|
|||
|
||||
// 获得支付方式
|
||||
async function setPayMethods() {
|
||||
const { data, code } = await PayChannelApi.getEnableChannelCodeList(state.orderInfo.appId);
|
||||
const { data, code } = await PayChannelApi.getEnableChannelCodeList(state.orderInfo.appId)
|
||||
if (code !== 0) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
state.payMethods = getPayMethods(data);
|
||||
state.payMethods = getPayMethods(data)
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (
|
||||
sheep.$platform.name === 'WechatOfficialAccount' &&
|
||||
sheep.$platform.os === 'ios' &&
|
||||
!sheep.$platform.landingPage.includes('pages/pay/index')
|
||||
) {
|
||||
if (sheep.$platform.name === 'WechatOfficialAccount'
|
||||
&& sheep.$platform.os === 'ios'
|
||||
&& !sheep.$platform.landingPage.includes('pages/pay/index')) {
|
||||
location.reload();
|
||||
return;
|
||||
}
|
||||
// 获得支付订单信息
|
||||
let id = options.id;
|
||||
if (options.orderType) {
|
||||
state.orderType = options.orderType;
|
||||
}
|
||||
setOrder(id);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -203,6 +206,7 @@
|
|||
position: relative;
|
||||
padding: 60rpx 20rpx 40rpx;
|
||||
|
||||
|
||||
.money-text {
|
||||
color: $red;
|
||||
font-size: 46rpx;
|
||||
|
|
|
|||
|
|
@ -2,34 +2,27 @@
|
|||
<template>
|
||||
<s-layout title="支付结果" :bgStyle="{ color: '#FFF' }">
|
||||
<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
|
||||
class="pay-img ss-m-b-30"
|
||||
v-if="payResult === 'success'"
|
||||
:src="sheep.$url.static('/static/img/shop/order/order_pay_success.gif')"
|
||||
></image>
|
||||
/>
|
||||
<image
|
||||
class="pay-img ss-m-b-30"
|
||||
v-if="['failed', 'closed'].includes(payResult)"
|
||||
: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'">{{
|
||||
state.orderInfo.pay_mode === 'offline' ? '下单成功' : '支付成功'
|
||||
}}</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 == 'closed'">该订单已关闭</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 === 'success'">支付成功</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 === '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 v-if="Number(state.orderInfo.pay_fee) > 0">￥{{ state.orderInfo.pay_fee }}</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>￥{{ fen2yuan(state.orderInfo.price) }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作区 -->
|
||||
<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')">
|
||||
返回首页
|
||||
|
|
@ -37,30 +30,29 @@
|
|||
<button
|
||||
class="check-btn ss-reset-button"
|
||||
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 class="check-btn ss-reset-button" v-if="payResult === 'success'" @tap="onOrder">
|
||||
查看订单
|
||||
</button>
|
||||
<!-- TODO 芋艿：拼团接入 -->
|
||||
<button
|
||||
class="check-btn ss-reset-button"
|
||||
v-if="
|
||||
payResult === 'success' &&
|
||||
['groupon', 'groupon_ladder'].includes(state.orderInfo.activity_type)
|
||||
"
|
||||
v-if="payResult === 'success' && state.tradeOrder.type === 3"
|
||||
@tap="sheep.$router.redirect('/pages/activity/groupon/order')"
|
||||
>
|
||||
我的拼团
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- TODO 芋艿：订阅 -->
|
||||
<!-- #ifdef MP -->
|
||||
<view class="subscribe-box ss-flex ss-m-t-44">
|
||||
<image
|
||||
class="subscribe-img"
|
||||
:src="sheep.$url.static('/static/img/shop/order/cargo.png')"
|
||||
></image>
|
||||
<image class="subscribe-img" :src="sheep.$url.static('/static/img/shop/order/cargo.png')" />
|
||||
<view class="subscribe-title ss-m-r-48 ss-m-l-16">获取实时发货信息与订单状态</view>
|
||||
<view class="subscribe-start" @tap="subscribeMessage">立即订阅</view>
|
||||
</view>
|
||||
|
|
@ -74,15 +66,20 @@
|
|||
import { reactive, computed } from 'vue';
|
||||
import { isEmpty } from 'lodash';
|
||||
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({
|
||||
orderId: 0,
|
||||
orderType: 'goods',
|
||||
id: 0, // 支付单号
|
||||
orderType: 'goods', // 订单类型
|
||||
result: 'unpaid', // 支付状态
|
||||
orderInfo: {}, // 订单详情
|
||||
orderInfo: {}, // 支付订单信息
|
||||
tradeOrder: {}, // 商品订单信息，只有在 orderType 为 goods 才会请求。目的：【我的拼团】按钮的展示
|
||||
counter: 0, // 获取结果次数
|
||||
});
|
||||
|
||||
// 支付结果 result => payResult
|
||||
const payResult = computed(() => {
|
||||
if (state.result === 'unpaid') {
|
||||
return 'waiting';
|
||||
|
|
@ -93,57 +90,65 @@
|
|||
if (state.result === 'failed') {
|
||||
return 'failed';
|
||||
}
|
||||
|
||||
if (state.result === 'closed') {
|
||||
return 'closed';
|
||||
}
|
||||
});
|
||||
async function getOrderInfo(orderId) {
|
||||
let checkPayResult;
|
||||
|
||||
// 获得订单信息
|
||||
async function getOrderInfo(id) {
|
||||
state.counter++;
|
||||
if (state.orderType === 'recharge') {
|
||||
checkPayResult = sheep.$api.trade.order;
|
||||
} else {
|
||||
checkPayResult = sheep.$api.order.detail;
|
||||
}
|
||||
const { data, error } = await checkPayResult(orderId);
|
||||
if (error === 0) {
|
||||
// 1. 加载订单信息
|
||||
const { data, code } = await PayOrderApi.getOrder(id);
|
||||
if (code === 0) {
|
||||
state.orderInfo = data;
|
||||
if (state.orderInfo.status === 'closed') {
|
||||
if (!state.orderInfo || state.orderInfo.status === 30) {
|
||||
// 支付关闭
|
||||
state.result = 'closed';
|
||||
return;
|
||||
}
|
||||
if (state.orderInfo.status !== 'unpaid') {
|
||||
if (state.orderInfo.status !== 0) {
|
||||
// 非待支付，可能是已支付，可能是已退款
|
||||
state.result = 'paid';
|
||||
// #ifdef MP
|
||||
subscribeMessage();
|
||||
// #endif
|
||||
// 特殊：获得商品订单信息
|
||||
if (state.orderType === 'goods') {
|
||||
const { data, code } = await OrderApi.getOrder(state.orderInfo.merchantOrderId);
|
||||
if (code === 0) {
|
||||
state.tradeOrder = data;
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
// 2.1 情况三一：未支付，且轮询次数小于三次，则继续轮询
|
||||
if (state.counter < 3 && state.result === 'unpaid') {
|
||||
setTimeout(() => {
|
||||
getOrderInfo(orderId);
|
||||
getOrderInfo(id);
|
||||
}, 1500);
|
||||
}
|
||||
// 超过三次检测才判断为支付失败
|
||||
// 2.2 情况二：超过三次检测才判断为支付失败
|
||||
if (state.counter >= 3) {
|
||||
state.result = 'failed';
|
||||
}
|
||||
}
|
||||
|
||||
function onOrder() {
|
||||
if ((state.orderType === 'recharge')) {
|
||||
// TODO 芋艿：待测试
|
||||
if (state.orderType === 'recharge') {
|
||||
sheep.$router.redirect('/pages/pay/recharge-log');
|
||||
} else {
|
||||
sheep.$router.redirect('/pages/order/list');
|
||||
}
|
||||
}
|
||||
|
||||
// TODO 芋艿：待测试
|
||||
// #ifdef MP
|
||||
function subscribeMessage() {
|
||||
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_fail');
|
||||
}
|
||||
|
|
@ -152,18 +157,13 @@
|
|||
// #endif
|
||||
|
||||
onLoad(async (options) => {
|
||||
let id = '';
|
||||
// 支付订单号
|
||||
if (options.orderSN) {
|
||||
id = options.orderSN;
|
||||
}
|
||||
if (options.id) {
|
||||
id = options.id;
|
||||
state.id = options.id;
|
||||
}
|
||||
state.orderId = id;
|
||||
|
||||
if (options.orderType === 'recharge') {
|
||||
state.orderType = 'recharge';
|
||||
// 订单类型
|
||||
if (options.orderType) {
|
||||
state.orderType = options.orderType;
|
||||
}
|
||||
|
||||
// 支付结果传值过来是失败，则直接显示失败界面
|
||||
|
|
@ -171,14 +171,16 @@
|
|||
state.result = 'failed';
|
||||
} else {
|
||||
// 轮询三次检测订单支付结果
|
||||
getOrderInfo(state.orderId);
|
||||
await getOrderInfo(state.id);
|
||||
}
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
if(isEmpty(state.orderInfo)) return;
|
||||
getOrderInfo(state.orderId);
|
||||
})
|
||||
if (isEmpty(state.orderInfo)) {
|
||||
return;
|
||||
}
|
||||
getOrderInfo(state.id);
|
||||
});
|
||||
|
||||
onHide(() => {
|
||||
state.result = 'unpaid';
|
||||
|
|
|
|||
|
|
@ -9,6 +9,14 @@ const PayOrderApi = {
|
|||
params: { id }
|
||||
});
|
||||
},
|
||||
// 提交支付订单
|
||||
submitOrder: (data) => {
|
||||
return request({
|
||||
url: '/app-api/pay/order/submit',
|
||||
method: 'POST',
|
||||
data
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default PayOrderApi;
|
||||
|
|
|
|||
|
|
@ -5,16 +5,16 @@ const OrderApi = {
|
|||
settlementOrder: (data) => {
|
||||
const data2 = {
|
||||
...data,
|
||||
}
|
||||
};
|
||||
// 移除多余字段
|
||||
if (!(data.couponId > 0)) {
|
||||
delete data2.couponId
|
||||
delete data2.couponId;
|
||||
}
|
||||
if (!(data.addressId > 0)) {
|
||||
delete data2.addressId
|
||||
delete data2.addressId;
|
||||
}
|
||||
// 解决 SpringMVC 接受 List<Item> 参数的问题
|
||||
delete data2.items
|
||||
delete data2.items;
|
||||
for (let i = 0; i < data.items.length; i++) {
|
||||
data2[encodeURIComponent('items[' + i + '' + '].skuId')] = data.items[i].skuId + '';
|
||||
data2[encodeURIComponent('items[' + i + '' + '].count')] = data.items[i].count + '';
|
||||
|
|
@ -22,20 +22,32 @@ const OrderApi = {
|
|||
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({
|
||||
url: `trade/order/settlement?${queryString}`,
|
||||
method: 'GET'
|
||||
})
|
||||
method: 'GET',
|
||||
});
|
||||
},
|
||||
// 创建订单
|
||||
createOrder: (data) => {
|
||||
return request2({
|
||||
url: `trade/order/create`,
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
data,
|
||||
});
|
||||
},
|
||||
// 获得订单
|
||||
getOrder: (id) => {
|
||||
return request2({
|
||||
url: `trade/order/get-detail`,
|
||||
method: 'GET',
|
||||
params: {
|
||||
id,
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default OrderApi;
|
||||
export default OrderApi;
|
||||
|
|
|
|||
|
|
@ -3,19 +3,20 @@ import sheep from '@/sheep';
|
|||
import $wxsdk from '@/sheep/libs/sdk-h5-weixin';
|
||||
// #endif
|
||||
import { getRootUrl } from '@/sheep/helper';
|
||||
import PayOrderApi from '@/sheep/api/pay/order';
|
||||
|
||||
/**
|
||||
* 支付
|
||||
*
|
||||
* @param {String} payment = ['wechat','alipay','wallet','offline'] - 支付方式
|
||||
* @param {String} orderType = ['goods','recharge','groupon'] - 订单类型
|
||||
* @param {String} orderSN - 订单号
|
||||
* @param {String} id - 订单号
|
||||
*/
|
||||
|
||||
export default class SheepPay {
|
||||
constructor(payment, orderType, orderSN) {
|
||||
constructor(payment, orderType, id) {
|
||||
this.payment = payment;
|
||||
this.orderSN = orderSN;
|
||||
this.id = id;
|
||||
this.orderType = orderType;
|
||||
this.payAction();
|
||||
}
|
||||
|
|
@ -83,18 +84,21 @@ export default class SheepPay {
|
|||
}
|
||||
|
||||
// 预支付
|
||||
prepay() {
|
||||
prepay(channel) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let data = {
|
||||
order_sn: this.orderSN,
|
||||
payment: this.payment,
|
||||
id: this.id,
|
||||
channelCode: channel,
|
||||
channelExtras: {}
|
||||
};
|
||||
if (uni.getStorageSync('openid')) {
|
||||
data.openid = uni.getStorageSync('openid');
|
||||
}
|
||||
sheep.$api.pay.prepay(data).then((res) => {
|
||||
res.error === 0 && resolve(res);
|
||||
if (res.error === -1 && res.msg === 'miss_openid') {
|
||||
PayOrderApi.submitOrder(data).then((res) => {
|
||||
// 成功时
|
||||
res.code === 0 && resolve(res);
|
||||
// 失败时
|
||||
if (res.code !== 0 && res.msg === 'miss_openid') {
|
||||
uni.showModal({
|
||||
title: '微信支付',
|
||||
content: '请先绑定微信再使用微信支付',
|
||||
|
|
@ -134,7 +138,7 @@ export default class SheepPay {
|
|||
async wechatWapPay() {
|
||||
const { error, data } = await this.prepay();
|
||||
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}`;
|
||||
location.href = `${data.pay_data.h5_url}&redirect_url=${encodeURIComponent(redirect_url)}`;
|
||||
}
|
||||
|
|
@ -144,7 +148,7 @@ export default class SheepPay {
|
|||
async redirectPay() {
|
||||
let { error, data } = await this.prepay();
|
||||
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}`;
|
||||
location.href = data.pay_data + encodeURIComponent(redirect_url);
|
||||
}
|
||||
|
|
@ -172,10 +176,10 @@ export default class SheepPay {
|
|||
});
|
||||
}
|
||||
|
||||
// 余额支付 TODO 芋艿：待接入
|
||||
// 余额支付
|
||||
async walletPay() {
|
||||
const { error } = await this.prepay();
|
||||
error === 0 && this.payResult('success');
|
||||
const { code } = await this.prepay('wallet');
|
||||
code === 0 && this.payResult('success');
|
||||
}
|
||||
|
||||
// 货到付款 TODO 芋艿：待接入
|
||||
|
|
@ -246,10 +250,9 @@ export default class SheepPay {
|
|||
// 支付结果跳转,success:成功，fail:失败
|
||||
payResult(resultType) {
|
||||
sheep.$router.redirect('/pages/pay/result', {
|
||||
orderSN: this.orderSN,
|
||||
payment: this.payment, //重新支付的时候使用
|
||||
payState: resultType,
|
||||
id: this.id,
|
||||
orderType: this.orderType,
|
||||
payState: resultType
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue