288 lines
6.6 KiB
Vue
288 lines
6.6 KiB
Vue
<!-- 支付结果页面 -->
|
|
<template>
|
|
<s-layout title="支付结果" :bgStyle="{ color: '#FFF' }">
|
|
<view class="main">
|
|
<image
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/7bab925772a5b878b75dcc35e5ebd1d6e6c2e776752554526a71ecd1371c24db.png"
|
|
class="img" mode=""></image>
|
|
<view class="title" v-if="payResult === 'success'">订单支付成功</view>
|
|
<view class="title" v-if="payResult === 'failed'">支付失败</view>
|
|
<view class="title" v-if="payResult === 'closed'">该订单已关闭</view>
|
|
<view class="title" v-if="payResult === 'waiting'">检测支付结果...</view>
|
|
<!-- <view class="title">订单支付成功</view> -->
|
|
<view class="fgx"></view>
|
|
<view class="ddxx">
|
|
<view class="l">
|
|
订单号
|
|
</view>
|
|
<view class="r">
|
|
{{ state.orderInfo.no }}
|
|
</view>
|
|
</view>
|
|
<view class="ddxx">
|
|
<view class="l">
|
|
下单时间
|
|
</view>
|
|
<view class="r">
|
|
{{ sheep.$helper.timeFormat(state.orderInfo.createTime, 'yyyy-mm-dd hh:MM:ss') }}
|
|
</view>
|
|
</view>
|
|
<view class="ddxx">
|
|
<view class="l">
|
|
支付方式
|
|
</view>
|
|
<view class="r">
|
|
支付余额
|
|
</view>
|
|
</view>
|
|
<view class="ddxx">
|
|
<view class="l">
|
|
支付余额
|
|
</view>
|
|
<view class="r">
|
|
￥{{ fen2yuan(state.orderInfo.price) }}
|
|
</view>
|
|
</view>
|
|
<view class="fgx"></view>
|
|
<view class="ck-detail" v-if="payResult === 'failed'" @tap="sheep.$router.redirect('/pages/pay/index', { id: state.id, orderType: state.orderType })">
|
|
重新支付
|
|
</view>
|
|
<view class="ck-detail" v-if="payResult === 'success' && state.tradeOrder.type === 3" @tap="sheep.$router.redirect('/pages/activity/groupon/order')">
|
|
我的拼团
|
|
</view>
|
|
<view class="ck-detail" v-if="payResult === 'success'" @tap="onOrder">
|
|
查看订单
|
|
</view>
|
|
<view class="bk-home" @click="sheep.$router.go('/pages/index/index');">
|
|
返回首页
|
|
</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')" />
|
|
<view class="subscribe-title ss-m-r-48 ss-m-l-16">获取实时发货信息与订单状态</view>
|
|
<view class="subscribe-start" @tap="subscribeMessage">立即订阅</view>
|
|
</view> -->
|
|
<!-- #endif -->
|
|
</view>
|
|
</s-layout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
onLoad,
|
|
onHide,
|
|
onShow
|
|
} from '@dcloudio/uni-app';
|
|
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({
|
|
id: 0, // 支付单号
|
|
orderType: 'goods', // 订单类型
|
|
result: 'unpaid', // 支付状态
|
|
orderInfo: {}, // 支付订单信息
|
|
tradeOrder: {}, // 商品订单信息，只有在 orderType 为 goods 才会请求。目的：【我的拼团】按钮的展示
|
|
counter: 0, // 获取结果次数
|
|
});
|
|
|
|
// 支付结果 result => payResult
|
|
const payResult = computed(() => {
|
|
if (state.result === 'unpaid') {
|
|
return 'waiting';
|
|
}
|
|
if (state.result === 'paid') {
|
|
return 'success';
|
|
}
|
|
if (state.result === 'failed') {
|
|
return 'failed';
|
|
}
|
|
if (state.result === 'closed') {
|
|
return 'closed';
|
|
}
|
|
});
|
|
|
|
// 获得订单信息
|
|
async function getOrderInfo(id) {
|
|
state.counter++;
|
|
// 1. 加载订单信息
|
|
const {
|
|
data,
|
|
code
|
|
} = await PayOrderApi.getOrder(id);
|
|
if (code === 0) {
|
|
state.orderInfo = data;
|
|
if (!state.orderInfo || state.orderInfo.status === 30) {
|
|
// 支付关闭
|
|
state.result = 'closed';
|
|
return;
|
|
}
|
|
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(id);
|
|
}, 1500);
|
|
}
|
|
// 2.2 情况二：超过三次检测才判断为支付失败
|
|
if (state.counter >= 3) {
|
|
state.result = 'failed';
|
|
}
|
|
}
|
|
|
|
function onOrder() {
|
|
// 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 (state.tradeOrder.type === 3) {
|
|
event.push('groupon_finish');
|
|
event.push('groupon_fail');
|
|
}
|
|
sheep.$platform.useProvider('wechat').subscribeMessage(event);
|
|
}
|
|
// #endif
|
|
|
|
onLoad(async (options) => {
|
|
// 支付订单号
|
|
if (options.id) {
|
|
state.id = options.id;
|
|
}
|
|
// 订单类型
|
|
if (options.orderType) {
|
|
state.orderType = options.orderType;
|
|
}
|
|
|
|
// 支付结果传值过来是失败，则直接显示失败界面
|
|
if (options.payState === 'fail') {
|
|
state.result = 'failed';
|
|
} else {
|
|
// 轮询三次检测订单支付结果
|
|
await getOrderInfo(state.id);
|
|
}
|
|
});
|
|
|
|
onShow(() => {
|
|
if (isEmpty(state.orderInfo)) {
|
|
return;
|
|
}
|
|
getOrderInfo(state.id);
|
|
});
|
|
|
|
onHide(() => {
|
|
state.result = 'unpaid';
|
|
state.counter = 0;
|
|
});
|
|
</script>
|
|
<style lang="scss" scope>
|
|
.main {
|
|
background: white;
|
|
width: 85%;
|
|
padding: 15px;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 12px;
|
|
|
|
.img {
|
|
width: 80px;
|
|
height: 80px;
|
|
display: block;
|
|
margin: 0 auto;
|
|
margin-top: -52px;
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
margin: 15px 0;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ddxx {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 10px 0;
|
|
|
|
.l {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.r {
|
|
font-size: 16px;
|
|
color: rbga(102, 102, 102);
|
|
}
|
|
}
|
|
|
|
.fgx {
|
|
margin: 20px 0;
|
|
height: 1px;
|
|
width: 100%;
|
|
background: rgba(239, 239, 239);
|
|
}
|
|
|
|
.ck-detail {
|
|
// background: rgba(254,92,45);
|
|
background: rgba(230, 50, 34);
|
|
padding: 10px 0;
|
|
color: white;
|
|
font-size: 19px;
|
|
text-align: center;
|
|
width: 100%;
|
|
margin-bottom: 15px;
|
|
border-radius: 31px;
|
|
}
|
|
|
|
.bk-home {
|
|
border: 1px solid rgba(230, 50, 34);
|
|
padding: 10px 0;
|
|
color: rgba(230, 50, 34);
|
|
font-size: 19px;
|
|
text-align: center;
|
|
width: 100%;
|
|
border-radius: 31px;
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|