guosen-ldt-client/pages/checkstand/order-res.vue

<template>
	<view v-if="loading">
		<u-modal v-model="loading" :show-title="false" :show-confirm-button="false">
			<view class="slot-content center flex-direction">
					<image  class="loading-icon" src="../../static/pay/loading.png"></image>
					<view class="tips center">处理中</view>
			</view>
		</u-modal>
	</view>
	<view v-else class="check-panel flex-direction">
		<image src="../../static/pay/success.png"></image>
		<view class="text-status center">付款成功</view>
		<view class="order-des center">{{orderDetail.billsTitle}}</view>
		<view class=" fee center">￥{{orderDetail.payAmount}}</view>
		<button class="finish" @click="backToHome">完成</button>
		<view class="bottom-line center">联兑通提供技术支持</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.orderId=options.orderId
			this.timer =  setInterval(this.queryOrderStatus,500);
		},
		data() {
			return {
				orderId:'',//订单id
				counter: 0,
				timer: null,
				loading: true,
				orderDetail:{},
				paySuccess:false
			}
		},
		methods: {
			async queryOrderStatus(){
				let res=await this.$api.billRecord.detail({id:this.orderId})
				if(res.data.payStatus==this.$global.payStatus.IS_PAY){
					this.orderDetail=res.data
					//已支付
					clearInterval(this.timer)
					this.loading = false
					this.paySuccess=true
					return
				}
				this.counter++;
				if(this.counter>10){
					clearInterval(this.timer)
					this.loading = false
					this.paySuccess=false
				}
			},
			backToHome(){
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.check-panel{
		background-color: #FFFFFF;
		border-radius: 25rpx;
		width: 90%;
		min-height: 900rpx;
		margin: 20rpx  5%;
		image{
			width: 150rpx;
			height: 150rpx;
			margin-top: 100rpx;
			margin-left: calc(50% - 75rpx);
		}
		.order-des{
			margin-top: 100rpx;
			color: #575959;
			width: 100%;
			font-size: 30rpx;
			letter-spacing: 2rpx;
			height: 100rpx;
		}
		.fee{
			height: 80rpx;
			width: 100%;
			color: #484a4b;
			font-size: 80rpx;
			// font-style: italic;
			font-weight: 350;
		}
		.text-status{
			color: #E1961A;
			height: 70rpx;
			width: 100%;
		}
		.finish{
			position: absolute;
			width: 40%;
			left: 30%;
			bottom: 25%;
			color: #E1961A;
			border-color:   #E1961A ;
			letter-spacing: 20rpx;
			background: transparent ;
		}
	}
	.slot-content{
		height: 300rpx;
		.loading-icon{
			width: 100rpx;
			height: 100rpx;
			animation: round 1s infinite linear;
		}
		.tips{
			height: 80rpx;
			color: #565757;
		}
	}
	.bottom-line{
		position: absolute;
		bottom: 50rpx;
		left: 0;
		width: 100%;
		color: #dddddd;
	}
	@keyframes round {
	  from{
	    transform: rotate(360deg);
	  }
	}
</style>