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">
				<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="brandNameList2" @change="onClinicChange2">
					<view class="clinic-select-value">
						<text>{{ll2}}</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="brandNameList3" @change="onClinicChange3">
					<view class="clinic-select-value">
						<text>{{ll3}}</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" :class="brandId4 == item.id ? 'on':''">
								<text class="date" style="color: black;">{{ item.days.slice(5) }}</text>
								<text class="weekday" style="color: rgba(82,82,2,83);">{{ item.week }}</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 brandList4" :key="index">
						<view class="date-list-new" @click="selecthsstr(index,item.status)"
							:class="{'on' : brandId5 == item.id,'hui' : item.status == 0}" v-if="brandList3.length>0">
							<view class="date-itemstr">
								<view class="weekday">{{ item.timeQuantum }}</view>

								<view class="weekday">剩余{{item.residueNumber}}</view>
							</view>

						</view>
					</view>

					<view style="clear:both;"></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" v-model="name" placeholder="请输入您的名字"
							placeholder-style="color:rgba(204,204,204)" />
					</view>
					<view class="phone">
						电话:<input class="int" v-model="phone" placeholder="请输入您的电话"
							placeholder-style="color:rgba(204,204,204)" />
					</view>
				</view>
			</view>
			<view class="footer" @click="brandlists9">
				立即预约
			</view>
		</view>
		<fui-toast ref="toast"></fui-toast>
	</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';
	// 用户信息
	export default {
		data() {
			return {
				isLogin: null,
				memberId: null,
				serviceTime: [],
				sjd: {},
				ym: [],
				hsstr: "",
				dateList: [],
				typeList: [{
						dictValue: 0,
						dictLabel: "调理预约"
					},
					{
						dictValue: 1,
						dictLabel: "教培预约"
					}
				],
				typenameList: [],
				addDate: "",
				techList: [], // 技师列表
				selectedClinicIndex: 0, // 当前选中的门店索引
				selectedClinicIndex2: 0, // 当前选中的项目索引
				selectedClinicIndex3: 0, // 当前选中的项目索引
				brandList: [], //门店列表数据
				brandList2: [], //项目列表数据
				brandList3: [], //套餐列表数据
				brandList4: [], //时段列表数据
				brandNameList: [], //门店列表
				brandNameList2: [], //项目列表
				brandNameList3: [], //套餐列表
				brandId: "", //门店当前选中id
				brandId2: "", //项目当前选中id
				brandId3: "", //套餐当前选中id
				brandId4: "", //预约日期当前选中id
				brandId5: "", //时段当前选中id
				brandName: "",
				selectedDayIndex: 0,
				selecttypeIndex: 0,
				techid: 0,
				type: 0,
				ll: '请选择',
				ll2: '请选择',
				ll3: '请选择',
				ll5: '请选择', //时间段日常显示
				ll6: '请选择', //时间段日常显示
				gg: '请选择',
				dateIndex: '', //时间的状态
				name: '',
				phone: ''
			};
		},
		created() {
			this.isLogin = computed(() => sheep.$store('user').isLogin);
			this.memberId = computed(() => sheep.$store('user').userInfo).value.id
			this.brandlists(); //调用门店列表

		},
		methods: {
			onClinicChange(event) {

				this.brandId = ''
				this.brandId2 = ''
				this.brandId3 = ''
				this.brandId4 = ''
				this.brandId5 = ''
				this.name = ''
				this.phone = ''
				this.ll2 = '请选择'
				this.ll3 = '请选择'
				this.brandNameList2 = []
				this.brandNameList3 = []
				this.dateList = []
				this.brandList3 = []

				const selectedClinicIndex = event.detail.value;
				this.selectedClinicIndex = selectedClinicIndex;
				this.ll = this.brandList[selectedClinicIndex].name
				this.brandId = this.brandList[selectedClinicIndex].id
				this.brandlists2();
			},
			onClinicChange2(event) {

				this.brandId3 = ''
				this.brandId4 = ''
				this.brandId5 = ''
				this.name = ''
				this.phone = ''
				this.ll3 = '请选择'
				this.brandNameList3 = []
				this.dateList = []
				this.brandList3 = []

				const selectedClinicIndex = event.detail.value;
				this.selectedClinicIndex2 = selectedClinicIndex;
				this.ll2 = this.brandList2[selectedClinicIndex].name
				this.brandId2 = this.brandList2[selectedClinicIndex].id
				this.setDate();
				this.brandlists3();
			},
			onClinicChange3(event) {


				const selectedClinicIndex = event.detail.value;
				this.selectedClinicIndex3 = selectedClinicIndex;
				this.ll3 = this.brandList3[selectedClinicIndex].name
				this.brandId3 = this.brandList3[selectedClinicIndex].id
			},
			ontype(event) {
				const selecttypeIndex = event.detail.value;
				this.selecttypeIndex = selecttypeIndex;
				this.typename = this.typeList[selecttypeIndex].dictValue
				this.type = this.typeList[selecttypeIndex].value
				this.gg = this.typeList[selecttypeIndex].label
				this.technicianList();
			},
			// 查询门店列表
			brandlists() {
				request({
					url: `${baseUrl}${apiPath}/h5/brand/getBrand`,
					method: 'GET',
					custom: {
						showLoading: false,
					},
				}).then((res) => {
					this.brandList = res.data
					for (var i = 0; i < this.brandList.length; i++) {
						this.brandNameList.push(this.brandList[i].name)
					}
				});
			},
			// 查询项目列表
			brandlists2() {
				this.brandNameList2 = [];
				this.brandList2 = [];
				request({
					url: `${baseUrl}${apiPath}/h5/project/getProject`,
					method: 'GET',
					params: {
						id: this.brandId
					},
					custom: {
						showLoading: false,
					},
				}).then((res) => {
					this.brandList2 = res.data
					for (var i = 0; i < this.brandList2.length; i++) {
						this.brandNameList2.push(this.brandList2[i].name)
					}
				});
			},
			// 查询日期列表
			setDate() {
				request({
					url: `${baseUrl}${apiPath}/h5/projectday/getProjectday`,
					method: 'GET',
					params: {
						id: this.brandId2
					},
					custom: {
						showLoading: false,
					},
				}).then((res) => {
					this.dateList = res.data;
				});
			},
			// 查询套餐列表
			brandlists3() {
				this.brandList3 = []
				this.brandNameList3 = []
				request({
					url: `${baseUrl}${apiPath}/h5/technician/getTechnician`,
					method: 'GET',
					params: {
						id: this.brandId2
					},
					custom: {
						showLoading: false,
					},
				}).then((res) => {
					if (res) {

					}
					this.brandList3 = res.data
					for (var i = 0; i < this.brandList3.length; i++) {
						this.brandNameList3.push(this.brandList3[i].name)
					}
				});
			},
			// 查询预约时段列表
			brandlists4() {
				request({
					url: `${baseUrl}${apiPath}/h5/configuration/getConfiguration`,
					method: 'GET',
					params: {
						projectdayId: this.brandId4,
						technicianId: this.brandId3
					},
					custom: {
						showLoading: false,
					},
				}).then((res) => {
					this.brandList4 = res.data
				});
			},
			// 提交表单接口
			brandlists9() {
				if (!this.brandId) {
					sheep.$helper.toast('请选择门店')
				} else if (!this.brandId2) {
					sheep.$helper.toast('请选择项目')
				} else if (!this.brandId3) {
					sheep.$helper.toast('请选择套餐')
				} else if (!this.brandId4) {
					sheep.$helper.toast('请选择预约日期')
				} else if (!this.brandId5) {
					sheep.$helper.toast('请选择预约时段')
				} else if (!this.name) {
					sheep.$helper.toast('请填写姓名')
				} else if (!this.phone) {
					sheep.$helper.toast('请填写电话')
				} else {
					request({
						url: `${baseUrl}${apiPath}/h5/reservation/addReservation`,
						method: 'GET',
						params: {
							brandId: this.brandId,
							projectId: this.brandId2,
							technicianId: this.brandId3,
							projectdayId: this.brandId4,
							timeId: this.brandId5,
							name: this.name,
							phone: this.phone
						},
						custom: {
							showLoading: false,
						},
					}).then((res) => {
						if (res.code == 0) {


							sheep.$router.go('/pages/subscribe/success_tolse', {
								brandId: this.ll, //门店名称
								projectId: this.ll2, //项目名称
								technicianId: this.ll3, //套餐名称
								projectdayId: this.ll5, //预约日期
								timeId: this.ll6, //预约时段
								name: this.name, //名字
								phone: this.phone //电话
							})



							// let options = {}
							//提示信息
							// options.text = '提交成功';
							//图标图片地址
							// options.src = "https://zysc.fjptzykj.com:3000/shangcheng/44252dee36b3ba686967c33e911b15c565f5ccc4c7b2a9f56e43418da949b7c2.png";
							// this.$refs.toast.show(options)
							// setTimeout(()=>{
							// 	sheep.$router.go('/pages/index/user')
							// },1000)
						}
					});


				}

			},
			// 删除前五位数字
			delete(val) {},
			//查看时段接口
			selectDate(index) {
				if (this.brandId3 == '') {
					sheep.$helper.toast('请先选择套餐')
					return;
				}
				this.dateIndex = index;
				this.brandId4 = this.dateList[index].id;
				this.ll5 = this.dateList[index].days;
				this.brandlists4();
			},
			selecthsstr(index, status) {
				console.log(this.brandList4[index].timeQuantum, "查看时段")
				if (status == 0) {
					this.brandId5 = '';
					sheep.$helper.toast('该时间段已约满')
					return;
				}
				this.brandId5 = this.brandList4[index].id;
				this.ll6 = this.brandList4[index].timeQuantum;
			}
		},
	};
</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: #e4f1ff;

							.date-itemstr {

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

						&.hui {
							user-select: none;
							background: #f6f6f6;
						}

						.date-itemstr {

							// background-color: #ff5541;
							.weekday {
								color: black;
								font-size: 14px;
							}
						}

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

								.weekday {}
							}

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


				}


				.date-item {
					border-radius: 8px;
					float: left;
					margin: 5px;
					padding: 8px 0;
					width: 59px;
					height: 46px;
					border: 1px solid #e5e5e5;
					cursor: pointer;
					display: flex;
					background-color: white;
					flex-direction: column;
					align-items: center;


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

					&.on {
						background-color: rgba(228, 241, 255);
						border: 1px solid rgba(3, 150, 248);
					}

					.date {
						font-size: 12px;
					}

					.weekday {
						margin-top: 5px;
						font-size: 12px;
						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>