qjd-user-uniapp/pagesMain/paySuccess.vue

<template>
	<view class="container">
		<view class="pay-icon">
			<view class="iconfont iconqueding"></view>
		</view>
		<view class="pay-title" v-if="goodType && orderStatus == 1">提交成功</view>
		<view class="pay-title" v-else>支付成功</view>
		<view class="pay-text">{{goodType ? '您已提交成功, 您所购买的商品需要留言卖家后进行自助采摘' : '您已支付成功，您所购买的商品正在向您飞奔， 请耐心等待！'}}</view>
		<view v-if="!goodType" class="pay-text">3秒后自动跳转订单详情...</view>
		<view class="pay-handle">
			<u-button v-if="goodType" type="success" shape="circle" :ripple="true" @click="goPickVideo()" class="button1">自助采摘</u-button>
			<u-button v-if="goodType" type="success" shape="circle" :ripple="true" :hair-line="false" :plain="true" @click="goToOrderList2()" class="button3">查看订单</u-button>
			<u-button v-if="!goodType" type="success" shape="circle" :ripple="true" @click="goToOrderList()" class="button1">查看订单</u-button>
			<u-button v-if="!goodType" type="success" shape="circle" :ripple="true" :hair-line="false" :plain="true" @click="goToIndex()" class="button2">返回首页</u-button>
		</view>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
			    orderId: '',
				timeoutID:0,
				goodType: '',
				tenantCode: '',
				orderStatus: ''
			}
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.goodType = options.goodType ? options.goodType : ''
			this.tenantCode = options.tenantCode ? options.tenantCode : ''
			this.orderStatus = options.orderStatus ? options.orderStatus : ''
			if (!this.goodType) {
				this.autoJump()
			}
			uni.setNavigationBarTitle({
				title: (this.goodType == 3 && this.orderStatus == 1) ? '提交结果' : '支付结果'
			});
		},
		methods: {
			// 自动跳转页面
			autoJump() {
				this.timeoutID = setTimeout(() => {
					uni.redirectTo({
						url: '/pagesMain/orderDetail?orderId=' + this.orderId + '&orderStatus=' + 2
					});
				},3000)
			},
			//  查看订单
			goToOrderList() {
				// uni.navigateTo({
				// 	url: '/pagesMain/orderList?type=1'
				// });
				clearTimeout(this.timeoutID)
				uni.navigateTo({
					 url: '/pagesMain/orderDetail?orderId=' + this.orderId + '&orderStatus=' + 2
				});
			},
			//  自助采摘未付款查看订单
			goToOrderList2() {
				uni.navigateTo({
					 url: '/pagesMain/orderDetail?orderId=' + this.orderId + '&orderStatus=' + 1
				});
			},
			// 跳转自助采摘直播
			goPickVideo() {
				var that=this;
				debugger
				if(uni.getStorageSync("firstTimeLiveUser")==""){
					uni.setStorage({
						key: 'firstTimeLiveUser',
						data: 1
					})
					uni.navigateTo({
						url: '/pagesGood/pickVideo?orderId=' + that.orderId + '&tenantCode=' + that.tenantCode
					});
				}else{
					uni.navigateTo({
						url: '/pagesGood/pickVideo?orderId=' + that.orderId + '&tenantCode=' + that.tenantCode
					});
				}
			},
			//  返回首页
			goToIndex() {
				clearTimeout(this.timeoutID)
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		background-color: #F3F3F3;
		position: absolute;

		.pay-icon {
			width: 100%;
			height: 120px;
			margin-top: 50px;
			float: left;
			text-align: center;

			.iconqueding {
				color: #52A63A;
				font-size: 120px;
				font-size: 240px;
				line-height: 120px;
			}
		}

		.pay-title {
			width: 100%;
			height: 20px;
			float: left;
			margin: 16px 0 20px 0;
			font-size: 16px;
			font-family: PingFang SC;
			color: #333333;
			line-height: 20px;
			text-align: center;
		}

		.pay-text {
			width: 100%;
			float: left;
			box-sizing: border-box;
			padding: 0 60px;
			font-size: 13px;
			font-family: PingFang SC;
			color: #666666;
			line-height: 22px;
			text-align: center;
		}

		.pay-handle {
			width: 230px;
			height: 100px;
			float: left;
			position: absolute;
			bottom: 60px;
			left: 50%;
			transform: translateX(-50%);

			.button1 {
				/deep/button {
					background-color: #56a83a !important;
					border: none !important;
				}

				margin-bottom: 12px;
				float: left;
				width: 100%;
				height: 34px;
			}

			.button2 {
				/deep/button {
					background-color: #74bd60 !important;
					border: none !important;
					color: white !important;
				}
				float: left;
				width: 100%;
				height: 34px;
			}
			
			.button3 {
				/deep/button {
					background-color: #74bd60 !important;
					border: none !important;
					color: white !important;
				}
			
				float: left;
				width: 100%;
				height: 34px;
			}
		}
	}
</style>