zyejMAll-mobile/pages/subscribe/subscribe.vue

<template>
	<s-layout color="white" :bgStyle="{ color: '#fff'}" opacityBgUi="" navbarbackgroundColor="transparent">

		<view class="new-main">
			<view class="top-img">
				<image class="img"
					src="https://zysc.fjptzykj.com:3000/shangcheng/3148160e2dcb79f1a494ad59229976e31bc9f8e1f13b8da073ad3bcd95a36801.png">
				</image>
			</view>
			<!-- <view class="new-all new-top">
				<image class="new-img" :src="brandList.list[selectedClinicIndex].picUrl" mode="aspectFill">
				</image>
				<view class='new-title'>
					<view class='t' v-html="brandList.list[selectedClinicIndex].depict"></view>
					<view class='b'>{{ brandList.list[selectedClinicIndex].address }}</view>
				</view>
				<view class="new-bottom">
					<view class="l">
						<view class="t">
							<image
								src="https://zysc.fjptzykj.com:3000/shangcheng/0f3417cd9adec5b7fce6ac74a4525a3b44803137decbf83bb1608f8723f423e8.png"
								class="img"></image>
							莆田市城厢区万达广场对面
						</view>
						<view class="t">
							<image
								src="https://zysc.fjptzykj.com:3000/shangcheng/3160a894c5c816f62574dd66eed01930eaa5c28126c3170eab0f622c3ab88115.png"
								class="img"></image>
							每周二至周日
						</view>
					</view>
					<view class="r">
						<image class="img"
							src="https://zysc.fjptzykj.com:3000/shangcheng/a0661763abe4539e376cc22eaf79a6de1e99a253c37281d3d3944abcd81a7227.png">
						</image>
					</view>
				</view>
			</view> -->
			<view class="new-all">
				<view class="title">
					<image
						src="https://zysc.fjptzykj.com:3000/shangcheng/617bb18286a76a4c8bfc377bf69f7436c478252e419f04cdd9a6070dd352d00f.png"
						class="img"></image>
					<text class='text'>门店选择</text>
				</view>
				<picker mode="selector" :range="brandNameList" @change="onClinicChange">
					<view class="clinic-select-value">
						<text>{{ ll}}</text>
						<image src="@/static/images/dayu.png" class="img"></image>
					</view>
				</picker>
				<view class="title">
					<image
						src="https://zysc.fjptzykj.com:3000/shangcheng/617bb18286a76a4c8bfc377bf69f7436c478252e419f04cdd9a6070dd352d00f.png"
						class="img"></image>
					<text class='text'>项目选择</text>
				</view>

				<picker mode="selector" :range="brandNameList" @change="onClinicChange">
					<view class="clinic-select-value">
						<text>{{ ll}}</text>
						<image src="@/static/images/dayu.png" class="img"></image>
					</view>
				</picker>
				<!-- 项目选择列表 -->
				<view class="new-project">
					<view class="list" @click="onradio(item)" :class="this.techid == item.id ? 'on': ''"
						v-for="(item, index) in techList" :key="index">
						<view class="l">
							<image
								src="https://zysc.fjptzykj.com:3000/shangcheng/e940fb45cc53df01980b7069432d5101e104014fbb3cd24862d08c1ffba9df68.png"
								class='img'></image>
						</view>
						<view class="r">
							<view class="tt">
								<image class='img img1'
									src="https://zysc.fjptzykj.com:3000/shangcheng/d0a91de26065e4753357ed32f301d2ed9c8a9b10e789c9cddf5f5a93903af9da.png">
								</image>
								<image class='img img2'
									src="https://zysc.fjptzykj.com:3000/shangcheng/f9e69fd9b1e60481f3ba926d1942d65e34c90916329823a16ce703f6fe36b2e9.png">
								</image>
								关于UI视觉设计方案需求评审
							</view>
							<view class="tt ttr">
								<image class='img img1'
									src="https://zysc.fjptzykj.com:3000/shangcheng/10b4a5f0abb36bb1a4ef71f36ffc867330d34844abd897a59889dc9a61b9c2af.png">
								</image>
								<image class='img img2'
									src="https://zysc.fjptzykj.com:3000/shangcheng/a4a5541795df5e89912762bfb29900d8ab420abbda2753b2d22741e29e0ea150.png">
								</image>
								关于UI视觉设计方案需求评审
							</view>
							<view class="tt ttr">
								<image class='img img1'
									src="https://zysc.fjptzykj.com:3000/shangcheng/f197edf433c7c80703de38cf49f9bbef64192de14ec284950a023d68bcad792a.png">
								</image>
								<image class='img img2'
									src="https://zysc.fjptzykj.com:3000/shangcheng/ca834c977ae99a35db90b5cef48c729c9ce953840a86847cb926d9752f58c0d7.png">
								</image>
								关于UI视觉设计方案需求评审
							</view>
						</view>
					</view>
				</view>

				<view class="title">
					<image
						src="https://zysc.fjptzykj.com:3000/shangcheng/617bb18286a76a4c8bfc377bf69f7436c478252e419f04cdd9a6070dd352d00f.png"
						class="img"></image>
					<text class='text'>套餐选择</text>
				</view>
				<picker mode="selector" :range="brandNameList" @change="onClinicChange">
					<view class="clinic-select-value">
						<text>{{ ll}}</text>
						<image src="@/static/images/dayu.png" class="img"></image>
					</view>
				</picker>

				<view class="title">
					<image
						src="https://zysc.fjptzykj.com:3000/shangcheng/617bb18286a76a4c8bfc377bf69f7436c478252e419f04cdd9a6070dd352d00f.png"
						class="img"></image>
					<text class='text'>预约日期</text>
				</view>
				<view class="date-list">
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
						<view class="scroll-view-item_H" v-for="(item, index) in dateList" :key="index"
							@click="selectDate(index)">
							<view class="date-item" v-if="addDate==item.addDate"
								style="background-color: rgba(228,241,255);border: 1px solid rgba(3,150,248);">
								<text class="date" style="color: black;">{{ item.formattedDate }}</text>
								<text class="weekday" style="color: rgba(82,82,2,83);">{{ item.weekday }}</text>
							</view>
							<view class="date-item" v-if="addDate!=item.addDate">

								<text class="date">{{ item.formattedDate }}</text>
								<text class="weekday">{{ item.weekday }}</text>
							</view>
						</view>
					</scroll-view>

				</view>

				<view class="title" style="margin-top:10px;">
					<image
						src="https://zysc.fjptzykj.com:3000/shangcheng/617bb18286a76a4c8bfc377bf69f7436c478252e419f04cdd9a6070dd352d00f.png"
						class="img"></image>
					<text class='text'>预约时段</text>
				</view>

				<view class="date-list">
					<view class="new-nei" v-for="(item, index) in serviceTime" :key="index">
						<view class="date-list-new" @click="selecthsstr(index)" :class="hsstr==item.str ? 'on':''">
							<view class="date-itemstr" v-if="hsstr==item.str">
								<text class="weekday">{{ item.str }}</text>
							</view>

							<view v-if="item.ym==='true'" class="new-jk">
								<view class="date-itemym" v-if="hsstr!=item.str">
									<text class="weekdayym">约满</text><br />
									<text class="weekday">{{ item.str }}</text>

								</view>
							</view>
							<view v-if="item.ym==='false'" class="new-jk">
								<view class="date-itemstr" v-if="hsstr!=item.str">
									<text class="weekday">{{ item.str }}</text>
								</view>
							</view>

						</view>
					</view>
				</view>

				<view class="title" style="margin-top:10px;">
					<image
						src="https://zysc.fjptzykj.com:3000/shangcheng/617bb18286a76a4c8bfc377bf69f7436c478252e419f04cdd9a6070dd352d00f.png"
						class="img"></image>
					<text class='text'>预约信息</text>
				</view>

				<view class="yyxx-input">
					<view class="name">
						姓名:<input class="int" placeholder="请输入您的名字" placeholder-style="color:rgba(204,204,204)" />
					</view>
					<view class="phone">
						电话:<input class="int" placeholder="请输入您的电话" placeholder-style="color:rgba(204,204,204)" />
					</view>
				</view>
			</view>



			<view class="footer" @click="handleSubmit">
				立即预约
			</view>
		</view>
		<view class="container">


			<!-- <view class="doctor-list">
				<view class="doctor-cards">
					<image class="doctor-avatars" :src="brandList.list[selectedClinicIndex].picUrl" mode="aspectFill">
					</image><br /><br />
					<view class="brandr-info">
						<text class="doctor-names">
							<text class="ygcontent">医馆地址：</text>
							{{ brandList.list[selectedClinicIndex].address }}</text><br /><br />
						<rich-text class="doctor-specialtys"
							:nodes="brandList.list[selectedClinicIndex].depict"></rich-text>

					</view>
				</view>
			</view> -->

			<!-- <view class="clinic-select">
				<text class="clinic-select-label">医馆选择</text>
				<picker mode="selector" :range="brandNameList" @change="onClinicChange">
					<view class="clinic-select-value">
						<text>{{ ll}}</text>
					</view>
				</picker>
			</view>
			<view class="clinic-select">
				<text class="clinic-select-label">预约类型</text>
				<picker mode="selector" :range="typenameList" @change="ontype">
					<view class="clinic-select-value">
						<text>{{ gg }}</text>
					</view>
				</picker>
			</view> -->
			<!-- <text class="clinic-select-label">套餐选择</text><br>
		<image class="doctor-avatar" src="/static/avatar-doctor.png" mode="aspectFill"></image> -->
			<!-- <view class="date-card">
			<view class="weekdays">
				<text v-for="(day, index) in weekdays" :key="index" :class="['weekday', index === selectedDayIndex ? 'active' : '']"
				 @click="selectDay(index)">{{ day }}</text>
			</view>
			<swiper class="date-swiper" :current="selectedDayIndex" @change="handleSwiperChange">
				<swiper-item v-for="(date, index) in dateList" :key="index">
					<view class="date-item" :class="index === selectedDayIndex ? 'active' : ''">
						<text class="date">{{ formatDate(date.date) }}</text>
					</view>
				</swiper-item>
			</swiper>
		</view> -->
			<!-- <radio-group>
				<view class="date-list">
					<view v-for="(item, index) in dateList" :key="index" @click="selectDate(index)">
						<view class="date-item" v-if="addDate==item.addDate" style="background-color: #ff5541;">

							<text class="date" style="color: #FFFFFF;">{{ item.formattedDate }}</text>
							<text class="weekday" style="color: #FFFFFF;">{{ item.weekday }}</text>
						</view>
						<view class="date-item" v-if="addDate!=item.addDate">

							<text class="date">{{ item.formattedDate }}</text>
							<text class="weekday">{{ item.weekday }}</text>
						</view>
					</view>
				</view>
			</radio-group> -->


			<!-- <view @click="showTime = true"><text v-if="goTime" style="color: #000;">{{goTime }}</text><text v-else>请选择返程时间</text></view> -->
			<!-- //通过控制showTime来判断组件是否显示 -->
			<!-- <pickerTime :startH="8" :lateH="19" :step="32" v-if="showTime" @close="showTime=false" @chooseTime="bindTime"></pickerTime> -->


			<radio-group>
				<view class="doctor-list">
					<!-- {{techList}} -->
					<view class="doctor-card" v-for="(item, index) in techList" :key="index">
						<view class="doctor-info">
							<image class="doctor-avatar" :src="'https://sfyjk.com/api'+item.photo" mode="aspectFill">
							</image>
							<text class="doctor-name">{{ item.technicianName }}</text>
							<text class="doctor-name" style="float: right;margin-right: 20px;">{{item.typeName}}</text>

							<!-- <text class="doctor-specialty" v-if="item.content">介绍: {{item.content.substr(0, 20)}}...</text> -->
						</view>
						<radio style="float: right;" :value="item.id" @click="onradio(item)" :checked="index==0">
						</radio>
						<div v-if="techid == item.id">
							<view class="info-title">服务范围</view>
							<rich-text style="white-space: pre-wrap;" :nodes="item.serviceScope"></rich-text>
							<view class="info-title">介绍</view>
							<rich-text style="white-space: pre-wrap;" :nodes="item.content"></rich-text>
						</div>
					</view>

				</view>
			</radio-group>
			<!-- <radio-group>
				<view class="date-list">
					<view v-for="(item, index) in serviceTime" :key="index" @click="selecthsstr(index)">
						<view class="date-itemstr" v-if="hsstr==item.str" style="background-color: #ff5541;">
							<text class="weekday">{{ item.str }}</text>
						</view>

						<view v-if="item.ym==='true'">
							<view class="date-itemym" v-if="hsstr!=item.str">
								<text class="weekdayym">约满</text><br />
								<text class="weekday">{{ item.str }}</text>

							</view>
						</view>
						<view v-if="item.ym==='false'">
							<view class="date-itemstr" v-if="hsstr!=item.str">
								<text class="weekday">{{ item.str }}</text>
							</view>
						</view>

					</view>
				</view>
			</radio-group> -->



			<!-- <view class="footer">
				<button class="appointment-btn" @click="handleSubmit">立即预约</button>
			</view> -->
		</view>
	</s-layout>
</template>

<script>
	import request from '@/sheep/request';
	import {
		baseUrl,
		apiPath
	} from '@/sheep/config';
	import {
		computed
	} from 'vue';
	import sheep from '@/sheep';
	import {
		showShareModal,
		showAuthModal
	} from '@/sheep/hooks/useModal';
	// import pickerTime from "@/pages/commission/pickerTime.vue"
	// 用户信息
	export default {
		// components: {
		// 	pickerTime
		// },
		data() {
			return {
				isLogin: null,
				memberId: null,
				// showTime: false,
				serviceTime: [],
				sjd: {},
				ym: [],
				// starhour: 8,
				// starminute: 0,
				// endhour: 18,
				// endminute: 0,
				// timejg: 70,

				hsstr: "",

				dateList: [],
				typeList: [{
						dictValue: 0,
						dictLabel: "调理预约"
					},
					{
						dictValue: 1,
						dictLabel: "教培预约"
					}
				],
				typenameList: [],
				addDate: "",
				techList: [], // 技师列表
				//医馆信息
				selectedClinicIndex: 0, // 当前选中的医馆索引
				brandList: [{
					name: ""
				}],
				brandNameList: [],
				brandId: "",
				brandName: "",
				selectedDayIndex: 0,
				selecttypeIndex: 0,
				techid: 0,
				type: 0,
				ll: '请选择',
				gg: '请选择'
			};
		},
		created() {
			this.isLogin = computed(() => sheep.$store('user').isLogin);
			this.memberId = computed(() => sheep.$store('user').userInfo).value.id
			this.brandlists();

			this.generateDateList();
			this.addDate = this.dateList[0].addDate;
			this.gettypeList();
			console.log(apiPath, baseUrl, "import.meta.env.SHOPRO_API_PATH")

		},
		methods: {
			onClinicChange(event) {
				const selectedClinicIndex = event.detail.value;
				this.selectedClinicIndex = selectedClinicIndex;
				this.brandName = this.brandList.list[selectedClinicIndex].name
				this.brandId = this.brandList.list[selectedClinicIndex].id
				console.log("dddddddddddd")
				this.ll = this.brandList.list[selectedClinicIndex].name
				this.technicianList();
			},
			ontype(event) {
				const selecttypeIndex = event.detail.value;
				this.selecttypeIndex = selecttypeIndex;
				this.typename = this.typeList[selecttypeIndex].dictValue
				this.type = this.typeList[selecttypeIndex].value
				console.log(this.type, "this.type")
				this.gg = this.typeList[selecttypeIndex].label
				this.technicianList();
			},
			// 查询医馆列表 
			brandlists() {
				request({
					url: `${baseUrl}${apiPath}/h5/brand/list`,
					method: 'GET',
					custom: {
						showLoading: false,
					},
				}).then((res) => {
					this.brandList = res.data
					console.log(this.brandList, "this.brandList")
					for (var i = 0; i < this.brandList.list.length; i++) {
						// this.brandList[i].depict=(this.brandList[i].depict).replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
						this.brandNameList.push(this.brandList.list[i].name)
					}

					this.brandId = this.brandList[0].id
					this.technicianList();
				});
				// uni.request({
				// 	url: `${baseUrl}/api/h5/brand/list`,
				// 	success: (res) => {
				// 		this.brandList = res.data
				// 		for (var i = 0; i < this.brandList.length; i++) {
				// 			// this.brandList[i].depict=(this.brandList[i].depict).replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
				// 			this.brandNameList.push(this.brandList[i].name)
				// 		}

				// 		this.brandId = this.brandList[0].id
				// 		this.technicianList();
				// 	},
				// 	fail: (error) => {
				// 		console.log(error)
				// 	}
				// })
			},

			gettypeList() {
				request({
					url: `${baseUrl}${apiPath}/h5/reservation/type`,
					method: 'GET',
					custom: {
						showLoading: false,
					},
				}).then((res) => {
					console.log(res, "typeListtypeList")
					this.typeList = res.data
					// this.typeList.depict=this.typeList.depict.replace(/\<img/gi, '<img style="max-width:100%;float:left; height:auto" ')
					for (var i = 0; i < this.typeList.length; i++) {
						this.typenameList.push(this.typeList[i].label);
					}
					console.log(this.typenameList)
				});
				// uni.request({
				// 	url: `${baseUrl}/api/h5/reservation/type`,
				// 	success: (res) => {
				// 		this.typeList = res.data.data
				// 		// this.typeList.depict=this.typeList.depict.replace(/\<img/gi, '<img style="max-width:100%;float:left; height:auto" ')
				// 		for (var i = 0; i < this.typeList.length; i++) {
				// 			this.typenameList.push(this.typeList[i].dictLabel);
				// 		}
				// 		console.log(this.typenameList)
				// 	},
				// 	fail: (error) => {
				// 		console.log(error)
				// 	}
				// })


			},
			// 查询医生列表
			technicianList() {
				console.log("有没有进来technicianList");
				this.techid = null,
					this.serviceTime = []
				this.hsstr = ""
				request({
					url: `${baseUrl}${apiPath}/h5/technician/list`,
					method: 'GET',
					params: {
						type: this.type,
						// addDate:this.addDate,
						brandId: this.brandId
					},
					custom: {
						showLoading: false,
					},
				}).then((res) => {
					console.log(res)
					this.techList = res.data.list
					console.log(this.techList)
					if (this.techList.length > 0) {
						this.techid = this.techList[0].id
						var item = {
							id: this.techid
						}
						this.onradio(item);
					}

					console.log(this.techList)
				});
				// uni.request({
				// 	// url: 'https://sfyjk.com/api/h5/technician/list',
				// 	url: `${baseUrl}/app-api/h5/technician/list`,
				// 	data: {
				// 		type: this.type,
				// 		// addDate:this.addDate,
				// 		brandId: this.brandId
				// 	},
				// 	success: (res) => {
				// 		console.log(res)
				// 		this.techList = res.data.rows
				// 		console.log(this.techList)
				// 		if (this.techList.length > 0) {
				// 			this.techid = this.techList[0].id
				// 			var item = {
				// 				id: this.techid
				// 			}
				// 			this.onradio(item);
				// 		}

				// 		console.log(this.techList)

				// 	},
				// 	fail: (error) => {
				// 		console.log(error)
				// 	}
				// })
			},

			onradio(item) {
				this.techid = item.id
				this.serviceTime = []
				this.hsstr = ""
				request({
					url: `${baseUrl}${apiPath}/h5/technician/h5xq`,
					method: 'GET',
					params: {
						addDate: this.addDate,
						id: this.techid
					},
					custom: {
						showLoading: false,
					},
				}).then((res) => {
					console.log(res);
					var serviceTime = JSON.parse(res.data.serviceTime)
					console.log(serviceTime, "serviceTimeserviceTimeserviceTime")
					if (serviceTime) {
						for (let i = 0; i < serviceTime.length; i++) {
							console.log(serviceTime[i].end)
							console.log(serviceTime[i].start)
							console.log(serviceTime[i].ym)
							if (serviceTime[i].end && serviceTime[i].start) {
								this.sjd = {},
									this.sjd.str = serviceTime[i].start.toString() + "-" + serviceTime[
										i].end.toString()
								this.sjd.ym = serviceTime[i].ym
								this.serviceTime.push(this.sjd)
							}
						}
					}
					console.log(this.serviceTime, "this.serviceTime")
				});


			},
			selectDay(index) {
				this.selectedDayIndex = index;
			},
			handleSwiperChange(event) {
				this.selectedDayIndex = event.mp.detail.current;
			},
			formatDate(date) {
				const options = {
					month: "2-digit",
					day: "2-digit"
				};
				return date.toLocaleDateString("en-US", options);
			},
			handleSubmit() {
				this.memberId = computed(() => sheep.$store('user').userInfo).value.id
				if (!this.memberId) {
					if (sheep.$platform.name === 'WechatMiniProgram') {
						// showAuthModal('wechatMiniLogin')
						return;
					}
					showAuthModal('accountLogin')
				} else {
					this.memberId = computed(() => sheep.$store('user').userInfo).value.id
					if (!this.brandId) {
						sheep.$helper.toast('请选择医馆')
					} else if (!this.techid) {
						sheep.$helper.toast('请选择技师')
					} else if (!this.addDate) {
						sheep.$helper.toast('请选择预约时间')
					} else if (!this.hsstr) {
						sheep.$helper.toast('请选择预约时间段')
					} else if (this.memberId) {
						request({
							url: `${baseUrl}/app-api/h5/reservation/add`,
							method: 'post',
							params: {
								type: this.type,
								brandId: this.brandId,
								technicianId: this.techid,
								reAddTime: this.addDate,
								hsstr: this.hsstr,
								userId: this.memberId,
							},
							custom: {
								showLoading: false,
							},
						}).then((res) => {
							uni.showModal({
								title: '预约提示',
								content: '预约成功！',
								success: function(res) {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/index/user'
										});
									} else {
										uni.switchTab({
											url: '/pages/index/user'
										});
									}
								}
							});
						});


					}
				}



				console.log("立即预约");
			},


			generateDateList() {
				const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const today = new Date();
				for (let i = 0; i < 7; i++) {
					const date = new Date(today);
					date.setDate(date.getDate() + i);
					const formattedDate =
						// `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
						`${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
					const weekday = weekDays[date.getDay()];
					const addDate =
						`${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
					this.dateList.push({
						date,
						formattedDate,
						addDate,
						weekday
					});
				}
			},
			selectDate(index) {
				this.addDate = this.dateList[index].addDate
				if (this.techid) {
					var item = {
						id: this.techid
					}
					this.onradio(item);
				}

				// 处理选中日期的逻辑，例如触发事件、更新状态等
				console.log('Selected date:', this.addDate);
			},
			selecthsstr(index) {
				console.log(this.serviceTime[index].str)
				console.log(this.serviceTime[index].ym)
				if (this.serviceTime[index].ym === "true") {

				} else if (this.serviceTime[index].ym === "false") {
					this.hsstr = this.serviceTime[index].str
				}

				// 处理选中日期的逻辑，例如触发事件、更新状态等
				console.log('this.serviceTimesss:', this.serviceTime[index].ym);
			},
		},
	};
</script>

<style scope lang="scss">
	.new-main {
		width: 100%;
		margin-top: -3rem;
		background-color: rgba(237, 249, 254);

		.top-img {
			.img {
				width: 100%;
				height: 153px;
			}
		}

		.new-all {
			width: 93%;
			margin: 15px auto;
			background: white;
			padding: 10px 0;
			border-radius: 9px;

			.yyxx-input {
				padding: 10px;

				&>view {
					padding: 15px 0;
					display: flex;
					align-items: center;
					font-size: 16px;
					font-weight: 700;
				}

				.name {
					border-bottom: 1px solid rgba(229, 229, 229);
				}

				.int {
					padding-left: 15px;
				}
			}

			.new-project {
				.list {
					padding: 10px 20px;
					background: rgba(246, 247, 251);
					display: flex;
					margin: 10px 10px;
					border-radius: 5px;
					align-items: center;

					&.on {
						background: rgb(0, 149, 248);

						.r {
							.tt {
								color: white;

								.img2 {
									display: block;
								}

								.img1 {
									display: none;
								}
							}
						}
					}

					.l {
						width: 50px;
						height: 50px;
						margin-right: 10px;

						.img {
							width: 100%;
							height: 100%;
						}
					}

					.r {
						padding-left: 15px;
						position: relative;

						&::after {
							position: absolute;
							content: '';
							height: 100%;
							width: 1px;
							background: #c4c4c4;
							top: 50%;
							left: 0;
							transform: translateY(-50%);
						}

						.tt {
							display: flex;
							align-items: center;
							margin-bottom: 8px;


							.img {
								width: 20px;
								height: 20px;
								margin-right: 10px;
							}

							.img2 {
								display: none;
							}
						}

						.ttr {
							font-size: 13px;
						}
					}
				}
			}

			.clinic-select-value {
				margin: 10px 10px;
				border: 1px solid #efefef;
				padding: 10px 20px;
				border-radius: 26px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.img {
					width: 25px;
					height: 25px;
				}
			}

			.title {
				display: flex;
				align-items: center;
				margin: 0 10px;

				.img {
					width: 8px;
					height: 20px;
					margin-right: 10px;
				}

				.text {
					font-size: 17px;
					font-weight: 700;
				}
			}

			.date-list {
				// display: flex;
				// flex-wrap: wrap;
				// justify-content: center;
				margin-top: 10px;
				padding: 0 5px;
				min-height: 53px;

				.scroll-view_H {
					white-space: nowrap;
					width: 100%;

					.scroll-view-item_H {
						display: inline-block;
						// width: 100%;
						// height: 300rpx;
						// line-height: 300rpx;
						// text-align: center;
						// font-size: 36rpx;
					}
				}

				.new-nei {
					padding: 5px;
					width: 30%;
					float: left;

					.date-list-new {
						border: 1px solid #efefef;
						text-align: center;
						padding: 10px 0;
						border-radius: 6px;

						&.on {
							background: rgb(0, 149, 248);

							.date-itemstr {

								// background-color: #ff5541;
								.weekday {
									color: white;
								}
							}
						}

						.date-itemstr {

							// background-color: #ff5541;
							.weekday {}
						}

						.new-jk {
							.date-itemym {
								.weekdayym {}

								.weekday {}
							}

							.date-itemstr {
								.weekday {}
							}
						}
					}


				}


				.date-item {
					border-radius: 8px;
					float: left;
					margin: 5px;
					padding: 5px;
					width: 26px;
					height: 30px;
					border: 1px solid rgba(229, 229, 229);
					cursor: pointer;
					display: flex;
					background-color: white;
					flex-direction: column;
					align-items: center;

					&:hover {
						background-color: #ff5541;
					}

					.date {
						font-size: 8px;
					}

					.weekday {
						margin-top: 5px;
						font-size: 10px;
						color: #666;
					}
				}
			}
		}

		.new-top {
			padding: 0 0;

			.new-img {
				width: 100%;
				height: 150px;
				border-radius: 9px 9px 0 0;
			}

			.new-title {
				padding: 10px;

				.t {
					width: 100%;
					font-size: 20px;
					color: black;
				}

				.b {
					width: 100%;
					font-size: 15px;
					color: rgba(154, 154, 154);
					position: relative;
					padding-bottom: 15px;

					&::after {
						position: absolute;
						content: '';
						bottom: 0;
						height: 1px;
						width: 100%;
						background: #e8e3e3;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}

			.new-bottom {
				padding: 10px;
				padding-top: 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.l {
					.t {
						display: flex;
						align-items: center;
						margin-bottom: 10px;

						.img {
							width: 20px;
							height: 20px;
							margin-right: 10px;
						}
					}
				}

				.r {
					position: relative;
					width: 40px;
					padding-left: 14px;

					&::after {
						position: absolute;
						content: '';
						left: 0;
						height: 35px;
						width: 1px;
						background: #e8e3e3;
						top: 50%;
						transform: translateY(-50%);
					}

					.img {
						width: 20px;
						height: 20px;
						display: block;
						margin: 0 auto;
					}
				}
			}
		}
	}

	.footer {
		padding: 10px 0;
		border-radius: 15px;
		background: rgb(0, 149, 248);
		margin: 0 10px;
		text-align: center;
		color: white;
	}
</style>