xsl/meida_applet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 修复代码冲突，被错误覆盖掉的 cart.vue、pay.vue、result.vue、confirm.vue

Browse Source
This commit is contained in:
YunaiV
2023-12-16 00:09:01 +08:00
parent b235cb0d8d
commit 77e2719837
9 changed files with 796 additions and 643 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/pay/index.vue
+54 -124
View File
@@ -2,14 +2,17 @@
<template>
<s-layout title="收银台">
<view class="bg-white ss-modal-box ss-flex-col">
<!-- 订单信息 -->
<view class="modal-header ss-flex-col ss-col-center ss-row-center">
<view class="money-box ss-m-b-20">
<text class="money-text">{{ state.orderInfo.pay_fee }}</text>
<text class="money-text">{{ fen2yuan(state.orderInfo.price) }}</text>
</view>
<view class="time-text">
<text>{{ payDescText }}</text>
</view>
</view>
<!-- 支付方式 -->
<view class="modal-content ss-flex-1">
<view class="pay-title ss-p-l-30 ss-m-y-30">选择支付方式</view>
<radio-group @change="onTapPay">
@@ -17,7 +20,6 @@
<view
class="pay-item ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom"
:class="{ 'disabled-pay-item': item.disabled }"
v-if="allowedPayment.includes(item.value)"
>
<view class="ss-flex ss-col-center">
<image
@@ -25,25 +27,19 @@
v-if="item.disabled"
:src="sheep.$url.static('/static/img/shop/pay/cod_disabled.png')"
mode="aspectFit"
></image>
/>
<image
class="pay-icon"
v-else
:src="sheep.$url.static(item.icon)"
mode="aspectFit"
></image>
/>
<text class="pay-title">{{ item.title }}</text>
</view>
<view class="check-box ss-flex ss-col-center ss-p-l-10">
<view class="userInfo-money ss-m-r-10" v-if="item.value == 'money'">
<view class="userInfo-money ss-m-r-10" v-if="item.value === 'wallet'">
余额: {{ userInfo.money }}元
</view>
<view
class="userInfo-money ss-m-r-10"
v-if="item.value == 'offline' && item.disabled"
>
部分商品不支持
</view>
<radio
:value="item.value"
color="var(--ui-BG-Main)"
@@ -56,6 +52,7 @@
</label>
</radio-group>
</view>
<!-- 工具 -->
<view class="modal-footer ss-flex ss-row-center ss-col-center ss-m-t-80 ss-m-b-40">
<button v-if="state.payStatus === 0" class="ss-reset-button past-due-btn">
@@ -81,95 +78,49 @@
import { computed, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import { useDurationTime } from '@/sheep/hooks/useGoods';
import { fen2yuan, useDurationTime } from '@/sheep/hooks/useGoods';
import PayOrderApi from '@/sheep/api/pay/order';
import PayChannelApi from '@/sheep/api/pay/channel';
import { getPayMethods } from '@/sheep/platform/pay';
const userInfo = computed(() => sheep.$store('user').userInfo);
// 检测支付环境
const state = reactive({
orderType: 'goods',
payment: '',
orderInfo: {},
orderType: 'goods', // 订单类型; goods - 商品订单, recharge - 充值订单
orderInfo: {}, // 支付单信息
payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付
payMethods: [],
payMethods: [], // 可选的支付方式
payment: '', // 选中的支付方式
});
const allowedPayment = computed(() => {
if(state.orderType === 'recharge') {
return sheep.$store('app').platform.recharge_payment
}
return sheep.$store('app').platform.payment
});
const payMethods = [
{
icon: '/static/img/shop/pay/wechat.png',
title: '微信支付',
value: 'wechat',
disabled: false,
},
{
icon: '/static/img/shop/pay/alipay.png',
title: '支付宝支付',
value: 'alipay',
disabled: false,
},
{
icon: '/static/img/shop/pay/wallet.png',
title: '余额支付',
value: 'money',
disabled: false,
},
{
icon: '/static/img/shop/pay/apple.png',
title: 'Apple Pay',
value: 'apple',
disabled: false,
},
{
icon: '/static/img/shop/pay/cod.png',
title: '货到付款',
value: 'offline',
disabled: false,
},
];
const onPay = () => {
if (state.payment === '') {
sheep.$helper.toast('请选择支付方式');
return;
}
if (state.payment === 'money') {
if (state.payment === 'wallet') {
uni.showModal({
title: '提示',
content: '确定要支付吗?',
success: function (res) {
if (res.confirm) {
sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn);
}
},
});
} else if (state.payment === 'offline') {
uni.showModal({
title: '提示',
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);
}
};
// 支付文案提示
const payDescText = computed(() => {
if (state.payStatus === 2) {
return '该订单已支付';
}
if (state.payStatus === 1 && state.orderInfo.ext.expired_time !== 0) {
const time = useDurationTime(state.orderInfo.ext.expired_time);
if (state.payStatus === 1) {
const time = useDurationTime(state.orderInfo.expireTime);
if (time.ms <= 0) {
state.payStatus = -1;
return '';
@@ -179,86 +130,65 @@
if (state.payStatus === -2) {
return '未查询到支付单信息';
}
return '';
});
// 状态转换：payOrder.status => payStatus
function checkPayStatus() {
if (state.orderInfo.status === 'unpaid') {
state.payStatus = 1;
if (state.orderInfo.status === 10
|| state.orderInfo.status === 20 ) { // 支付成功
state.payStatus = 2;
return;
}
if (state.orderInfo.status === 'closed') {
if (state.orderInfo.status === 30) { // 支付关闭
state.payStatus = -1;
return;
}
state.payStatus = 2;
state.payStatus = 1; // 待支付
}
// 切换支付方式
function onTapPay(e) {
state.payment = e.detail.value;
}
async function setRechargeOrder(id) {
const { data, error } = await sheep.$api.trade.order(id);
if (error === 0) {
state.orderInfo = data;
state.payMethods = payMethods;
checkPayStatus();
} else {
// 设置支付订单信息
async function setOrder(id) {
// 获得支付订单信息
const { data, code } = await PayOrderApi.getOrder(id);
if (code !== 0 || !data) {
state.payStatus = -2;
return;
}
state.orderInfo = data;
// 获得支付方式
await setPayMethods();
// 设置支付状态
checkPayStatus();
}
async function setGoodsOrder(id) {
const { data, error } = await sheep.$api.order.detail(id);
if (error === 0) {
state.orderInfo = data;
if (state.orderInfo.ext.offline_status === 'none') {
payMethods.forEach((item, index, array) => {
if (item.value === 'offline') {
array.splice(index, 1);
}
});
} else if (state.orderInfo.ext.offline_status === 'disabled') {
payMethods.forEach((item) => {
if (item.value === 'offline') {
item.disabled = true;
}
});
}
state.payMethods = payMethods;
checkPayStatus();
} else {
state.payStatus = -2;
// 获得支付方式
async function setPayMethods() {
const { data, code } = await PayChannelApi.getEnableChannelCodeList(state.orderInfo.appId)
if (code !== 0) {
return
}
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 = '';
if (options.orderSN) {
id = options.orderSN;
}
if (options.id) {
id = options.id;
}
if (options.type === 'recharge') {
state.orderType = 'recharge';
// 充值订单
setRechargeOrder(id);
} else {
state.orderType = 'goods';
// 商品订单
setGoodsOrder(id);
// 获得支付订单信息
let id = options.id;
if (options.orderType) {
state.orderType = options.orderType;
}
setOrder(id);
});
</script>
pages/pay/result.vue
+61 -59
View File
@@ -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';