pet-front-order/pages/details/successful.vue

<template>
	<view class="successful-page">
		<view class="successful-content">
			<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/details/pic_product.png" alt=""
				style="width:100%;" mode="widthFix">
			<view class="successful-tips">
				<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/details/cmdf.png" alt="" style="width: 80px; height:80px">
				<view class="successful-tips-text">预约成功</view>
			</view>
			<view class="successful-small-page">
				<view class="successful-add-wechat">
					<view>请您耐心等待,</view>
					<view>我们将会在5小时内与您取得联系,</view>
					<view>您也可主动添加下方微信哦</view>
					<image src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/details/QR_Code.png" alt="" :show-menu-by-longpress="true"
						style="width: 99px; height:99px; margin-top:23px" />
				</view>
			</view>
		</view>
		
		<view class="back-home">
			<button class="details-btn" @click="goHome">返回首页</button>
		</view>
		<Kefu></Kefu>
		
	</view>
</template>

<script>
	import Kefu from '../common/kefu.vue'
	export default {
		data() {
			return {

			};
		},
		components:{
			Kefu
		},
		methods: {
			goHome() {
				this.$globalData.itemPrice=[]
				this.$globalData.submitData = {}
				this.$globalData.newOrderData={
						currentAddress:{},
						currentPets:[],
						totalPrice:0,
						needPreFamiliarize:[]
					}
				// 清空页面栈
				uni.reLaunch({
					url: "/pages/index"
				});
			},
		}
	}
</script>

<style lang="scss">
	.successful-page{
		position: relative;
		height: 100vh;
		padding-bottom: 58px;
		background-color: #ffffff;
		.successful-tips {
			width: 100%;
			padding: 10px;
			text-align: center;
			margin-top: 10%;
			.successful-tips-text {
				color: #333;
				font-size: 20px;
				font-weight: bold;
			}
		}
		.successful-content{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			padding: 10px;
			
			.successful-small-page {
				width: 258px;
				background-color: #f7f7f7;
				margin-top: 20px;
				padding: 32px 10px;
				
				.successful-add-wechat {
					color: #6A6A6A;
					text-align: center;
					font-size: 14px;
					width: 100%;
				}
			}
		}
		
		.back-home{
			height: 58px;
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			.details-btn {
				width: 90%;
				border-radius: 6px;
				background: #FFB13F;
				font-size: 16px;
				color: #FFFFFF;
			}
		}
	}
	
</style>