zyejMAll-mobile/pages/reservation_record/reservation_record.vue

<template>
	<s-layout title="预约记录" :bgStyle="{ color: '#fff' }">
		<view class="container">
			<view class="cards">
				<view class="card" v-for="(item, index) in reservationList" :key="index">
					<view class="card-content">
						<text class="type">预约信息</text>
						<text class="time">订单日期：{{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd') }}</text>
					</view>
					<view>
						<text class="address">预约姓名：<text class="title">{{ item.technicianName }}</text></text>
						<text class="address">预约电话：<text class="title">{{ item.memberphone }}</text></text>
						<text class="address">预约时间：<text
								class="title">{{ sheep.$helper.timeFormat(item.reAddTime, 'yyyy-mm-dd') }}</text></text>
						<text class="address">门店名称：<text class="title">{{ item.brandName }}</text> </text>
						<div class="address-container">
							<text class="address">门店地址：<text class="title">{{ item.brandaddress }}</text></text>
						</div>
						<text class="address">备注留言：<text class="title">{{ item.remark }}</text></text>
					</view>
					<view>
						<text class="status"
							style="float: right; border-radius: 10px; background-color: rgba(0,149,243); padding: 5px 10px; color: white;"
							v-if=" item.reStatus===0">待审核</text>
						<text class="status"
							style="float: right; border-radius: 10px; background-color: orangered; padding: 5px 10px; color: white;"
							v-if=" item.reStatus===1">预约成功</text>
						<text class="status"
							style="float: right; border-radius: 10px; background-color: orangered; padding: 5px 10px; color: white;"
							v-if=" item.reStatus===2">已完结</text>
					</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	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);

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

			// 使用 onMounted 生命周期钩子
			onMounted(() => {
				getList();
			});

			// 定义方法
			function getList() {
				request({
					url: `${baseUrl}${apiPath}/h5/reservation/list`,
					method: 'GET',
					params: {
						userId: memberId.value,
					},
					custom: {
						showLoading: false,
					},
				}).then((res) => {
					reservationList.value = res.data.list;
				});
			}

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


<style scoped lang="scss">
	.address-container {
		display: flex;
		align-items: center;
	}

	.container {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		background-color: #f5f5f5;
		padding: 15px;
	}

	.header {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		color: #333;
	}

	.cards {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin-top: 0px;
	}

	.card {
		/* width: calc(50% - 10px); */
		width: 100%;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
		padding: 10px;
	}

	.card-content {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;

		.type {
			position: relative;
			padding-left: 20px;
			font-size: 16px;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 10px;
				height: 100%;
				background: url('https://zysc.fjptzykj.com:3000/shangcheng/617bb18286a76a4c8bfc377bf69f7436c478252e419f04cdd9a6070dd352d00f.png') no-repeat;
				background-size: 60%;
			}
		}
		.time{
			font-size: 15px;
		}
	}

	.card-contentinfo {
		margin-top: 20px;
		text-align: center;
	}

	.card-image {
		width: 50px;
		height: 50px;
		border-radius: 25px;
	}

	.technician {
		margin-left: 20%;
	}

	.hospital,
	.technician,
	.type {
		/* margin-left: 20px; */
		font-size: 15px;
		color: #161616;
		font-weight: bold;
	}

	.status {
		font-size: 15px;
		color: #666;
	}

	.address {
		display: block;
		margin-bottom: 10px;
		font-size: 15px;
		color: rgba(174, 174, 174);

		.title {
			font-size: 15px;
			font-weight: 300;
		}
	}

	.health-list {
		background-color: #FFFFFF;
		height: 100%;
		width: 98%;
		margin: 5PX;
		padding-left: 15px;
		padding-top: 10px;
		/* padding: 10px; */
		border-radius: 12px;
	}

	.health_title {
		padding: 5px;
	}

	.health_title_img {
		float: left;
		width: 40px;
		height: 40px;
	}

	.health-title-title {
		float: none;
		font-size: 18px;
		font-weight: bold;
		margin-top: 10px;
		margin-left: 10px;
	}

	.time {
		/* margin-top: 20px; */
		font-size: 12px;
		color: #aeaeae;
	}
</style>