You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-app/pages/order/payResult.vue

129 lines
3.0 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!--
* @Author: ch
* @Date: 2022-04-28 15:01:41
* @LastEditors: ch
* @LastEditTime: 2022-05-05 11:02:48
* @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.ordId}`)"></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.back()"></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 < 10){
setTimeout(()=>{
this.getOrderInfo();
}, 1000)
return false;
}
this.orderInfo = result;
uni.setNavigationBarTitle({title:result.isSuccess ? '支付成功' : '支付失败'});
}
}
}
</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>