zyejMAll-mobile/pages/subscribe/success_tolse.vue

<template>
	<s-layout title="预约成功" :bgStyle="{ color: '#fff' }">
		<view class="main">
			<view class="main-t">
				<view class="img-t">
					<image
						src="https://zysc.fjptzykj.com:3000/shangcheng/ab5eb1046be1b2d98fbab61cd1925301725b7a6d2d263fc22ea1a788e39df38d.png"
						class="img"></image>
				</view>
				<view class="img-b">
					预约成功
				</view>
			</view>
			<view class="main-b">
				<view class="list">
					<view class="name">姓名</view>
					<view class="name-value">{{ item.name }}</view>
				</view>
				<view class="list">
					<view class="name">电话</view>
					<view class="name-value">{{ item.phone }}</view>
				</view>
				<view class="list">
					<view class="name">预约门店</view>
					<view class="name-value">{{item.brandId}}</view>
				</view>
				<view class="list">
					<view class="name">项目套餐</view>
					<view class="name-value">{{item.projectId}}  {{ item.technicianId }}</view>
				</view>
				<view class="list">
					<view class="name">预约时间</view>
					<view class="name-value">{{ item.projectdayId }}  {{item.timeId}}</view>
				</view>
			</view>
		</view>

		<view class="btn" @click="sheep.$router.go('/pages/index/user')">
			确认
		</view>
	</s-layout>
</template>

<script>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import request from '@/sheep/request';
	import {
		baseUrl,
		apiPath
	} from '@/sheep/config';
	import sheep from '@/sheep';
	export default {
		setup() {
			// 使用 ref 创建响应式数据
			const memberId = ref(null);
			const reservationList = ref([]);
			const page = ref(1);
			const limit = ref(10);
			const totalPages = ref(1);
			const item = ref({});

			// 使用 computed 创建计算属性
			const userInfo = computed(() => sheep.$store('user').userInfo);
			memberId.value = userInfo.value.id;

			// 使用 onMounted 生命周期钩子
			onMounted(() => {
				getList();
			});
			onLoad((options) => {
				if (options) {
					item.value = options;
					console.log(item.value,"-------------------")
				}
			});
			// 定义方法
			function getList() {
				request({
					url: `${baseUrl}${apiPath}/h5/reservation/reservationInfo`,
					method: 'GET',
					custom: {
						showLoading: false,
					},
				}).then((res) => {
					reservationList.value = res.data;
				});
			}

			// 将响应式数据和方法暴露给模板
			return {
				memberId,
				reservationList,
				page,
				limit,
				totalPages,
				getList,
				sheep,
				item
			};
		},
	};
</script>

<style scope lang="scss">
	.main {
		background: white;
		margin: 15px 15px;
		border-radius: 12px;
		padding-bottom: 10px;

		.main-t {
			.img-t {
				padding-bottom: 20px;

				.img {
					width: 143px;
					height: 106px;
					display: block;
					margin: 10px auto;
					padding-top: 25px;
				}
			}

			.img-b {
				text-align: center;
				font-size: 24px;
				font-weight: 700;
				width: 90%;
				margin: 0 auto;
				border-bottom: 1px solid rgba(233, 233, 233);
				padding-bottom: 15px;
			}
		}

		.main-b {
			margin: 10px auto;
			width: 90%;
			margin-top: 40px;

			.list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				margin:10px 0;
				.name {
					font-size: 17px;
					color: rgba(101, 101, 101);
				}

				.name-value {
					font-size: 17px;
				}
			}
		}
	}

	.btn {
		position: absolute;
		bottom: 60px;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 16px;
		background: rgba(0, 149, 248);
		text-align: center;
		color: white;
		width: 89%;
		padding: 10px 0;
	}
</style>