pet-front-order/pages/details/service.vue

<template>
	<view class="service-container">
		<view class="select-address">
			<view class="normal-bolb-text">
				选择区域
			</view>
			<view class="select-address-value">
				<picker mode="multiSelector" @columnchange="columnchange" @change="bindMultiPickerColumnChange" :value="multiIndex"
					:range="multiArray">
					<view v-if="!isSelected" class="unselected">
						<img src="/static/images/details/add.svg" style="width: 20px;height: 20px;" alt="">
						<text class="unselected-text">点击选择区域</text>
					</view>
					<view v-else class="selected">
						<view class="selected-text">
							<text>{{multiArray[0][multiIndex[0]]}}</text>
							<text style="margin-left: 10px;">{{district}}</text>
						</view>
						<img src="/static/images/details/edit.svg" style="width: 18px;height: 18px;" alt="">
					</view>
				</picker>
			</view>
		</view>
		<view class="detailed-address">
			<view class="normal-bolb-text">
				详细地址
			</view>
			<view class="detailed-address-value">
				<input type="text" placeholder="需具体xx区xx街道xx小区xx室" v-model="detailedAddress">
			</view>
		</view>
		<view class="pet-info">
			<view class="normal-bolb-text">
				是否需要增加宠物数量
			</view>
			<view class="pet-info-tips">
				<view class="pet-info-tips-text">
					<img src="/static/images/details/tips.svg" style="width: 12px;height: 12px;" alt="">
					<text style="margin-left: 5px;">专业喂养套餐最多可服务3只猫或2只小型犬(不含遛狗)</text>
				</view>
				<view class="pet-info-tips-text">
					<img src="/static/images/details/tips.svg" style="width: 12px;height: 12px;" alt="">
					<text style="margin-left: 5px;">专业遛狗套餐最多可服务1只中型犬或2只小型犬(含喂养)</text>
				</view>
			</view>
			<view class="pet-info-number">
				<view v-for="(pet,index) in petPrices" class="pet-info-for" :key="index">
					<view class="normal-text">
						{{pet.petTypeName}}
					</view>
					<view class="pet-price-number">
						<view class="pet-price">
							<text style="font-size: 16px;">{{pet.price}}元</text>/只
						</view>
						<uni-number-box class="pet-number" @change="e=>changeNumber(e,index)" :value="pet.quantity"
							:min="0" :max="999" background="#fff">
						</uni-number-box>
					</view>
					<view v-if="index+1<petPrices.length" class="line" style="background-color: #FFE8C6;"></view>
				</view>
			</view>
		</view>

		<view class="content-container">
			<view class="normal-bolb-text">
				服务频率
			</view>
			<view class="line" style="background-color: #EFEFEF;"></view>
			<view class="service-frequency-value">
				<uni-data-checkbox selectedColor="#FFB13F" v-model="selectedFrequency" :localdata="frequency"
					@change="changeFrequency"></uni-data-checkbox>
			</view>
		</view>
		<view class="content-container">
			<view class="content-header">
				<view class="normal-bolb-text">
					预约日期 <text style="color: #999;font-size: 14px;margin-left: 5px;font-weight: normal;">(可选择多日)</text>
				</view>
				<text style="color: #A94F20;font-size: 14px;">总共选择{{selectedDate.length}}天</text>
			</view>

			<view class="line" style="background-color: #EFEFEF;"></view>
			<uni-calendar class="uni-calendar--hook" :selected="selectedDate" :startDate="startDate" :endDate="endDate"
				@change="change" :showMonth="false" />
		</view>

		<view class="content-container">
			<view class="normal-bolb-text">
				选择预约时间
			</view>
			<view class="line" style="background-color: #EFEFEF;"></view>
			<view>
				<view v-if="selectedFrequency == 'twice_a_day'" style="color: #999;font-size: 14px;margin-bottom:14px;">
					第一次服务时间
				</view>
				<view class="time-select">
					<view v-for="(item,index) in timeList"
						:class="['base-time',item.value == serviceTimeFirst?'time-selected':'time-unselected']"
						:key="index" @click="selectedTime(item.value)">
						<view style="font-size:14px;width: 100%;text-align: center;">{{item.value}}</view>
						<!-- 	<view style="font-size:12px;"
							:class="[item.value == serviceTimeFirst?'selected-color':'unselected-color']">
							{{item.status}}
						</view> -->
					</view>
				</view>
			</view>

			<view v-if="selectedFrequency == 'twice_a_day'">
				<view style="color: #999;font-size: 14px;margin:14px 0;">
					第二次服务时间
				</view>
				<view class="time-select">
					<view v-for="item in timeList"
						:class="['base-time', item.value == serviceTimeFirst? 'time-disable': item.value == serviceTimeSecond? 'time-selected':'time-unselected']"
						@click="selectedSecondTime(item.value)" :key="item.value">
						<view style="font-size:14px;width: 100%;text-align: center;">{{item.value}}</view>
						<!-- <view style="font-size:12px;"
							:class="[item.value == serviceTimeFirst? 'disabled-color' : item.value == serviceTimeSecond?'selected-color':'unselected-color']">
							{{item.status}}
						</view> -->
					</view>
				</view>
			</view>

		</view>

		<view class="payment">
			<view class="total-price">
				<text class="total-price-text">应付价格：</text>
				<text class="total-price-value">￥{{totalPrice}}元</text>
			</view>
			<button class="payment-btn" @click="goNext">下一步</button>
		</view>
		<Kefu></Kefu>

	</view>
</template>

<script>
	import Kefu from '../common/kefu.vue'
	import {
		getDictList,
		getCity
	} from '@/api/system/user.js'
	export default {
		data() {
			return {
				multiArray: [],
				isSelected: false,
				cityList:[],
				multiIndex: [0, 0],
				district: '',
				detailedAddress: '',
				petPrices: [{
						type: 'cat',
						petTypeName: '猫',
						price: 10,
						quantity: 0
					},
					{
						type: 'small_dog',
						petTypeName: '小/中型犬',
						price: 10,
						quantity: 0
					},
					{
						type: 'large_dog',
						petTypeName: '大型犬',
						price: 20,
						quantity: 0
					}
				],
				frequency: [{
					text: '一天一次',
					value: 'once_a_day'

				}, {
					text: '一天两次',
					value: 'twice_a_day'
				}],
				selectedFrequency: 'once_a_day',
				basePrice: 0,
				currentPrice: 0,
				totalPrice: 0,
				selectedDate: [],
				startDate: '',
				endDate: '',
				serviceTimeFirst: '',
				serviceTimeSecond: '',
				timeList: [{
						value: '08:00',
						status: '空闲',

					},
					{
						value: '09:00',
						status: '空闲',
					},
					{
						value: '10:00',
						status: '空闲',
					}, {
						value: '11:00',
						status: '空闲',
					},
					{
						value: '12:00',
						status: '空闲',
					},
					{
						value: '13:00',
						status: '空闲',
					},
					{
						value: '14:00',
						status: '空闲',
					},
					{
						value: '15:00',
						status: '空闲',
					},
					{
						value: '16:00',
						status: '空闲',

					}, {
						value: '17:00',
						status: '空闲',
					},
					{
						value: '18:00',
						status: '空闲',
					},
					{
						value: '19:00',
						status: '空闲',
					},
					{
						value: '20:00',
						status: '空闲',
					}
				]
			};
		},
		components: {
			Kefu
		},
		onLoad: function(option) {
			uni.setLocale('zh')
			this.basePrice = option.price;
			this.currentPrice = option.price;
			console.log(option.price); //打印出上个页面传递的参数。
		},
		mounted() {
			this.getCalendarDate();
			this.getCityList()
		},
		methods: {
			getCityList() {
				getCity().then(res => {
					if (res.code == 200) {
						console.log('city', JSON.parse(res.msg));
						this.cityList = JSON.parse(res.msg)
						const cityLabels = this.cityList.map(item =>item.city)
						this.multiArray[0] = cityLabels
						this.multiArray[1] = this.cityList[0].region.map(e=> e.region)

					} else {
						this.$modal.showToast('获取城市失败，请联系系统管理员！');
					}


				})
			},
			columnchange(e){
				console.log(e)
				// 当滚动切换一级分类时，为当前的一级分类添加它的子类
				if (e.detail.column == 0) {
					const currentCity = this.cityList[e.detail.value]
					// #ifdef H5
					// 在小程序中直接赋值无效  H5 可直接赋值
					this.multiArray[1] = currentCity.region.map(e=>e.region)
					// #endif
					// #ifdef MP-WEIXIN
					// 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
					this.$set(this.multiArray, 1, currentCity.region.map(e=>e.region))
					// #endif
					this.multiIndex=[e.detail.value,0]
				}
			},
			bindMultiPickerColumnChange(e) {
				console.log('值为：' + e.detail.value)
				this.multiIndex = e.detail.value
				this.district = this.multiArray[1][this.multiIndex[1]]
				this.isSelected = true
				this.$forceUpdate()
			},
			changeNumber(e, i) {
				const outerObj = this.petPrices[i];
				outerObj.quantity = e;
				console.log(this.petPrices);
				this.getTotalPrice()
			},
			changeFrequency() {
				if (this.selectedFrequency === 'twice_a_day') {
					this.currentPrice = this.basePrice * 2 - 20;
				} else {
					this.currentPrice = this.basePrice;
				}
				this.getTotalPrice()
			},
			selectedTime(value) {
				this.serviceTimeFirst = value;
				this.serviceTimeSecond = '';
			},
			selectedSecondTime(value) {
				if (value != this.serviceTimeFirst) {
					this.serviceTimeSecond = value;
				}
			},
			getTotalPrice() {
				let currentPetPrice = 0
				for (let i = 0; i < this.petPrices.length; i++) {
					currentPetPrice += this.petPrices[i].quantity * this.petPrices[i].price;
				}
				let oneDayPrice = +currentPetPrice + +this.currentPrice
				this.totalPrice = oneDayPrice * this.selectedDate.length;
			},
			pdDate() {
				let currentDate = new Date();
				let year = currentDate.getFullYear();
				let month = currentDate.getMonth() + 1 < 10 ? '0' + (currentDate.getMonth() + 1) : currentDate.getMonth() +
					1; // 月份从 0 开始，所以需要加 1
				let day = currentDate.getDate() + 1 < 10 ? '0' + (currentDate.getDate() + 1) : currentDate.getDate() + 1;
				let hour = currentDate.getHours();

				// 将日期格式化为字符串
				let nextDate = year + '-' + month + '-' + day;
				let currentTime = hour + ':00'
				// 将当前日期加一天
				if (this.selectedDate.find(item => item.date == nextDate)) {
					if ((this.serviceTimeFirst && currentTime > this.serviceTimeFirst) || (this.serviceTimeSecond &&
							currentTime > this.serviceTimeSecond)) {
						return false
					}
				}
				return true
			},
			goNext() {
				// 选择地址
				if (!this.isSelected) {
					this.$modal.showToast('请选择地址');
					return;
				}
				//详细地址
				if (!this.detailedAddress) {
					this.$modal.showToast('请填写详细地址');
					return;
				}
				//预定日期
				if (this.selectedDate.length < 1) {
					this.$modal.showToast('请至少选择一个预约日期');
					return;
				}

				//服务频次
				if (!((this.selectedFrequency == 'once_a_day' && this.serviceTimeFirst) ||
						(this.selectedFrequency == 'twice_a_day' && this.serviceTimeFirst && this.serviceTimeSecond))) {
					this.$modal.showToast('请选择预约时间');
					return;
				}
				if (!this.pdDate()) {
					this.$modal.showToast('首单可以服务的时间需距离当前时间24h以上，请重新选择时间');
					return;
				}

				this.$globalData.submitData.totalPrice = this.totalPrice;
				this.$globalData.submitData.address.province = this.multiArray[0][this.multiIndex[0]];
				this.$globalData.submitData.address.city = this.multiArray[0][this.multiIndex[0]];
				this.$globalData.submitData.address.district = this.district;
				this.$globalData.submitData.address.detailAddress = this.detailedAddress;
				this.$globalData.submitData.service.serviceFrequency = this.selectedFrequency;
				this.$globalData.submitData.service.serviceDate = this.selectedDate.map(item => item.date);
				this.$globalData.submitData.service.serviceTimeFirst = this.serviceTimeFirst;
				this.$globalData.submitData.service.serviceTimeSecond = this.serviceTimeSecond;
				this.$globalData.submitData.service.pet = this.petPrices.map(item => {
					if (item.quantity > 0) {
						return {
							type: item.type,
							quantity: item.quantity
						}
					}
				});
				this.setItemPrices()
				uni.navigateTo({
					url: "/pages/details/augmentedProduct"
				});
			},
			setItemPrices() {
				let itemPrices = [{
					itemType: '基础服务费',
					price: this.basePrice,
					quantity: this.selectedDate.length,
					unit: '次'
				}];

				for (let i = 0; i < this.petPrices.length; i++) {
					if (this.petPrices[i].quantity > 0) {
						let itemPrice = {
							itemType: '额外宠物' + '-' + this.petPrices[i].petTypeName,
							price: this.petPrices[i].price,
							quantity: this.petPrices[i].quantity * this.selectedDate.length,
							unit: '只'
						}
						itemPrices.push(itemPrice)
					}
				}
				this.$globalData.servicePrices = itemPrices
			},
			change(e) {
				console.log('change 返回:', e)
				// 选中日期
				const selectedValue = this.selectedDate.find(item => item.date === e.fulldate)
				if (selectedValue) {
					// 存在则移除
					this.selectedDate = this.selectedDate.filter(item => item.date !== e.fulldate);
				} else {
					this.selectedDate.push({
						date: e.fulldate,
						info: '预定'
					})
				}
				this.getTotalPrice();
				console.log(this.selectedDate)
			},
			getCalendarDate() {
				let tomorrow = new Date()
				tomorrow.setDate(tomorrow.getDate() + 2);
				this.startDate = this.formatDate(tomorrow);

				// 获取三个月后的日期
				let threeMonthsLater = new Date();
				threeMonthsLater.setMonth(threeMonthsLater.getMonth() + 3);
				this.endDate = this.formatDate(threeMonthsLater);
			},
			formatDate(date) {
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0');
				let day = date.getDate().toString().padStart(2, '0');
				return year + '-' + month + '-' + day;
			}
		},
	}
</script>

<style lang="scss">
	.service-container {
		background-color: #f5f5f7;

		.normal-bolb-text {
			font-size: 16px;
			font-weight: bold;
			line-height: 16px;
			color: #333;
		}

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

		.normal-text {
			font-size: 16px;
			color: #333;
		}

		.line {
			height: 1px;
			width: 100%;
			margin: 16px 0;
		}

		.select-address {
			background-color: #ffffff;
			width: 100%;
			padding: 14px 20px;

			.select-address-value {
				margin-top: 15px;

				.unselected {
					height: 60px;
					border-radius: 4px;
					border: 1px dashed #FFB13F;
					background: #FFFDF7;
					display: flex;
					justify-content: center;
					align-items: center;

					.unselected-text {
						color: #A94F20;
						font-size: 16px;
						margin-left: 10px;
					}
				}

				.selected {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					padding-top: 14px;
					border-top: 1px solid #efefef;

					.selected-text {
						font-size: 16px;
						color: #333;
					}
				}
			}
		}


		.detailed-address {
			margin-top: 10px;
			background-color: #ffffff;
			padding: 14px 20px;

			.detailed-address-value {
				margin-top: 14px;
				border: 1px solid #efefef;
				border-radius: 4px;
				padding: 10px;
			}
		}

		.pet-info {
			margin-top: 10px;
			background-color: #ffffff;
			padding: 14px 20px;

			.pet-info-tips {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				background-color: #FFF1E3;
				width: 100%;
				height: 46px;
				padding: 6px 10px;
				margin: 14px 0;
				border-radius: 4px;

				.pet-info-tips-text {
					display: flex;
					align-items: center;
					color: #A94F20;
					font-size: 12px;
					line-height: 18px;
					width: 100%;
				}
			}

			.pet-info-number {
				padding: 16px;
				background-color: #FFFCF2;
				border: 1px solid #FFE8C6;
				border-radius: 4px;

				.pet-info-for {
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;

					.pet-price-number {
						display: flex;
						align-items: center;

						.pet-price {
							font-size: 14px;
							color: #FF530A;
							line-height: 16px;
							margin-right: 12px;
						}

						.pet-number {
							border: 1px solid #FFE8C6;
							border-radius: 4px;
						}
					}

				}

			}
		}

		.content-container {
			margin-top: 10px;
			background-color: #ffffff;
			padding: 14px 20px;
		}

		.time-select {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;

			.base-time {
				width: 25%;
				height: 60px;
				padding: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				box-sizing: border-box;
				margin: -0.5px;
			}

			.time-unselected {
				border: 1px solid #FFE8C6;
				background-color: #FFFCF2;
				color: #333;
			}

			.time-selected {
				background-color: #FFBF60;
				border: 1px solid #FFB13F;
				color: #fff
			}

			.time-disable {
				background-color: #eee;
				border: 1px solid #FFE8C6;
				color: #999;
			}

			.unselected-color {
				color: #6ECD41;
			}

			.selected-color {
				color: #A94F20;
			}

			.disabled-color {
				color: #A1A1A1
			}
		}


		.payment {
			height: 56px;
			width: 100%;
			margin-top: 10px;
			padding: 10px 20px;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.total-price-text {
				color: #333;
				font-size: 16px;
				font-weight: blob;
				line-height: 16px;
			}

			.total-price-value {
				color: #FF530A;
				font-size: 22px;
				font-weight: blob;
				line-height: 16px;
			}

			.payment-btn {
				width: 140px;
				height: 38px;
				border-radius: 6px;
				background: #FFB13F;
				color: #fff;
				font-size: 16px;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>