H5-ThreeDoorder/pages/diy/pay-status/pay-status.vue

<template>
	<view class="page">
		<view class="" v-if="OrderInfor['pay_status'] == 1">
			<view style="text-align: center;">
				<image src="https://img.agrimedia.cn/chwl/v2/pay_success.png" style="width: 230rpx;height: 230rpx; margin: auto;" mode="aspectFit"></image>
			</view>
			<view style="background-color: #FFFFFF;border-radius: 15rpx;">
				<view style="display: flex;justify-content: space-between;padding: 0 32rpx;">
					<view class="Label">
						支付金额
					</view>
					<view class="value">
						￥{{_amount(OrderInfor['pay_price'])}}
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;padding: 0 32rpx;">
					<view class="Label">
						支付时间
					</view>
					<view class="value">
						{{`${new Date(1675218434000).getFullYear()}/${new Date(1675218434000).getMonth()+1}/${new Date(1675218434000).getDate()} ${new Date(1675218434000).getHours()}:${new Date(1675218434000).getMinutes()}:${new Date(1675218434000).getSeconds()}`}}
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;padding: 0 32rpx;">
					<view class="Label">
						支付方式
					</view>
					<view class="value">
						{{!OrderInfor['pay_type']?'微信':'支付宝'}}
					</view>
				</view>
			</view>
		</view>
		<view style="text-align: center;" v-if="OrderInfor['pay_status'] == 0">
			<image style="width: 230rpx;height: 230rpx; margin: auto;" src="https://img.agrimedia.cn/chwl/v2/pay_fail.png" mode="aspectFit"></image>
			<view style="background-color: #FFFFFF;border-radius: 15rpx;">
				<view style="display: flex;justify-content: space-between;padding: 0 32rpx;">
					<view class="Label">
						支付金额
					</view>
					<view class="value">
						￥{{_amount(OrderInfor['pay_price'])}}
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;padding: 0 32rpx;">
					<view class="Label">
						下单时间
					</view>
					<view class="value">
						{{OrderInfor['create_time']}}
					</view>
				</view>
			</view>
		</view>
		<navigator :url="`/pages/diy/orders/order-infor/order-infor?order_sn=${order_sn}`" open-type="redirect">
			<button class="button_1">
				查看订单
			</button>
		</navigator>
		<!-- <view class="group_2" v-if="state">
			<image v-if="state == 1" src="https://img.agrimedia.cn/chwl/fuel/success.png"
				style="width: 304rpx;height: 262rpx;margin:auto;" mode=""></image>
			<image v-if="state == 2" src="https://img.agrimedia.cn/chwl/fuel/fail.png"
				style="width: 304rpx;height: 262rpx;margin:auto;" mode=""></image>
			<text v-if="state == 1" lines="1" class="text_2" style="color: #4acf32;">支付成功</text>
			<text v-if="state == 2" lines="1" class="text_2" style="color: #EC524F;">支付失败</text>
			<view v-if="state == 2" style="color: #666666;font-size: 24rpx;text-align: center;margin-top: 32rpx;" >
				若您已经支付请点击"查看详情"进入订单详情查看
			</view>
			<template v-if="state == 1">
				<view style="margin-top: 300rpx;display: flex;justify-content:space-around;">
					<navigator :url="`/pages/diy/orders/order-infor/order-infor?order_sn=${order_sn}`"
						open-type="reLaunch">
						<button class="button_1">
							<text lines="1" class="text_3">查看详情</text>
						</button>
					</navigator>
				</view>
			</template>
			<view class="block_2" v-if="state == 2">
				<navigator :url="`/pages/diy/orders/order-infor/order-infor?order_sn=${order_sn}`"
					open-type="reLaunch" hover-class="none">
					<button class="button_1">
						<text lines="1" class="text_3">查看详情</text>
					</button>
				</navigator>
				<navigator :url="`/pages/diy/orders/order-infor/order-infor?order_sn=${order_sn}`"
					open-type="reLaunch" hover-class="none">
					<button class="button_3" @tap="pay">
						<text lines="1" class="text_5">继续支付</text>
					</button>
				</navigator>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	import {
		orderInfoAPI,
	} from '@/request/diy/index.js';
	// 公用混入
	import mixin from "@/static/js/mixin/mixin.js";
	export default {
		mixins:[mixin],
		data() {
			return {
				order_sn: 0,
				state: -1,
				OrderInfor:{},
				tiem:null,
			};
		},
		onLoad(p) {
			this['order_sn'] = p['order_sn'];
			this.GetInfor();
			
			
		},
		methods: {
			GetInfor(){
				orderInfoAPI({order_sn:this['order_sn']}).then(res => {
					clearInterval(this['tiem']);
					this['tiem'] = null;
					this['OrderInfor'] = res['data'];
					if(res['data']['pay_status'] == 0){
						this['tiem'] = setInterval(()=>{
							this.GetInfor(this['order_sn']);
						},1500)
					}
					
				})
			}
		},
		onUnload() {
			clearInterval(this['tiem']);
			this['tiem'] = null;
		}
	}
</script>

<style lang="scss">
	.page {
		background-color: rgba(245, 245, 245, 1.000000);
		position: relative;
		width: 750rpx;
		height: 1623rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.Label,.value{
		font-size: 28rpx;
		font-weight: 900;
		line-height: 80rpx;
	}
	.button_1{
		color: #FFFFFF;
		margin: 60rpx 32rpx;
		background: linear-gradient(90deg, #FFAD02 0%, #FD8F3B 100%);
	}
</style>