zyejMAll-mobile/pages/reservation_record/reservation_record.vue

<template>
	<s-layout title="预约记录" :bgStyle="{ color: '#fff' }">
        <view class="container">
            <!--    <view class="health_title">
    <image class="health_title_img" ></image>
    <view class="health-title-title">预约记录</view>
    </view> -->
            <view class="cards">
                <view class="card" v-for="(item, index) in reservationList" :key="index">
                    <view class="card-content">
                        <text class="type" >预约类型：{{ item.typeName }}</text>
                        <!-- <text class="type" v-if="item.type===1">预约类型：教培预约</text> -->
						  <text class="time">预约时间：{{ item.reAddTime }}</text>
                    </view>
					<view style="height: 1px; background-color: #e8e8e8;margin:7px 0px 7px 0px"></view>
            <!--        <view class="card-contentinfo">
                        <text class="time">预约时间：{{ item.reAddTime }}</text>
                    </view> -->
                    <view>
                        <text class="address">医生：{{ item.technicianName }}</text><br><br>
                        <text class="address">医馆：{{ item.brandName }}</text><br><br>
                        <text class="address">医馆电话：{{ item.brandphone }}</text><br><br>
                         <div class="address-container">
                           <text class="address">医馆地址：{{ item.brandaddress }}</text><br><br>
                         </div>
                        <text class="address">备注：{{ item.remark }}</text><br><br>
                    </view>
                    <view>
                        <text class="status" style="float: right; border-radius: 10px; background-color: orangered; 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><br><br>
                    </view>
                </view>
            </view>
        </view>
    </s-layout>
</template>

<script>
	import request from '@/sheep/request';
	import { computed } from 'vue';
	import sheep from '@/sheep';
	import {
		baseUrl,
		apiPath
	} from '@/sheep/config';
	export default {
		data() {
			return {
				memberId:null,
				reservationList: [],
				page: 1,
				limit: 10,
				totalPages: 1,
			};
		},
		created() {
			this.memberId=computed(() => sheep.$store('user').userInfo).value.id
			this.getList();
		},
		methods: {
			getList() {
				request({
					url: `${baseUrl}${apiPath}/h5/reservation/list`,
					method: 'GET',
					params:{
						userId:this.memberId,
					},
					custom: {
						showLoading: false,
					},
				}).then((res) => {
					this.reservationList = res.data.list
				});
				// uni.request({
				// 	url: `${baseUrl}${apiPath}/h5/reservation/list`, // 接口地址
				// 	data: {
				// 		userId:this.memberId,
				// 	},
				// 	success: (res) => {
				// 		console.log(res.data);
				// 		this.reservationList = res.data.rows
				// 	},
				// 	fail: (error) => {
				// 		console.log(error)
				// 	}
				// })
			},
		}
	};
</script>


<style scoped>
	.address-container {
	  display: flex;
	  align-items: center;
	}
	.container {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		background-color: #f5f5f5;
		padding: 10px;
	}

	.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;
	}

	.card-contentinfo {
		margin-top: 20px;
		text-align: center;
		/* display: flex;
  justify-content: space-between; */
	}

	.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{
		margin: 20px 0px 0px 20px ;
		font-size: 15px;
		color: #666;
		}
	.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: 15px;
		color: #5e5e5e;
	}
</style>