shop-app/pages/order/payResult.vue

<!--
 * @Author: ch
 * @Date: 2022-04-28 15:01:41
 * @LastEditors: ch
 * @LastEditTime: 2022-05-06 10:49:00
 * @Description: file content
-->

<template>
	<view class="main">
		<template v-if="!orderInfo">
			<view class="title title--await">结果查询中</view>
			<view class="desc">正在与支付渠道确认支付结果，请您耐心等待...</view>
		</template>
		<template v-else>
			<template v-if="orderInfo.isSuccess">
				<image class="icon" src="@/static/order/paySuccess.png"/>
				<view class="title">支付成功</view>
				<view class="desc">您的包裹整装待发</view>
				<view class="btns">
					<UiButton class="btn" type="primaryLine" @click="$Router.replaceAll('/')">返回首页</UiButton>
					<UiButton class="btn" type="solid"  @click="$Router.replace(`/orderDetail?id=${$Route.query.orderId}`)">查看订单</UiButton>
				</view>
				<view class="recommend-title">为您推荐</view>
				<BsChoiceGoods></BsChoiceGoods>
			</template>
			<template v-else>
				<image class="icon" src="@/static/order/payFail.png"/>
				<view class="title">支付失败</view>
				<view class="desc">请重新试试</view>
				<view class="btns">
					<UiButton class="btn" @click="$Router.replace(`/orderDetail?id=${$Route.query.orderId}`)">查看订单详情</UiButton>
				</view>
			</template>
		</template>
	</view>
</template>
<script>
import UiButton from '@/components/UiButton.vue';
import BsChoiceGoods from '@/components/BsChoiceGoods.vue';
import {ApiGetOrderPaySatus} from '@/common/api/order';
export default {
	components: { UiButton, BsChoiceGoods },
	data(){
		return {
			orderInfo : '',
			reuqestNum : 0
		}
	},
	onShow(){
		this.getOrderInfo();
	},
	methods : {
		async getOrderInfo(){
			this.reuqestNum++;
			const {error, result} = await ApiGetOrderPaySatus({orderId : this.$Route.query.orderId});
			if(error){
				uin.$u.toast(error.message);
				return false
			}
			if(!result.isSuccess && this.reuqestNum < 5){
				setTimeout(()=>{
					this.getOrderInfo();
				}, 1000)
				return false;
			}
			this.orderInfo = result;
			uni.setNavigationBarTitle({title:result.isSuccess ? '支付成功' : '支付失败'});
		},
		back(){
			const payType = this.$Route.query.payType;
			if(payType !== 'wxjsapi'){
				this.$Router.back(2);
			}else{
				this.$Router.back();
			}
		}
	}
	
}
</script>
<style lang="scss">
page {
	text-align: center;
}
</style>
<style lang="scss" scoped>
.main{
	text-align: center;
}
.icon{
	width: 400rpx;
	height: 256rpx;
	margin: 169rpx auto 42rpx;
}
.title{
	font-size: $font-size-lg;
	line-height: 44rpx;
	color: $color-grey6;
	&--await{
		margin: 100rpx 0 20rpx;
		color: $color-grey5;
	}
}
.desc{
	font-size: $font-size-sm;
	line-height: 34rpx;
	color: $color-grey4;
}
.btns{
	margin: 74rpx 105rpx 0;
	display: flex;
	justify-content: space-between;
}

.recommend-title{
	font-size: $font-size-lg;
	text-align: center;
	margin: 51rpx auto 30rpx auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 500rpx;
	&::after,&::before{
		display: inline-block;
		content: '';
		width: 160rpx;
		height: 2rpx;
		background: linear-gradient(90deg, $color-grey3 0%, rgba(204, 204, 204, 0) 100%);
		
	}
	&::before{
		
		background: linear-gradient(270deg, $color-grey3 0%, rgba(204, 204, 204, 0) 100%);
	}
}
</style>