jje_uniapp/orderPages/bookService/components/chooseServiceTime.vue

<template>
	<view>
		<uni-popup ref="chooseServiceTimePopup" :catchtouchmove="true" type="bottom">

			<view class="chooseServiceTimeView">
				<view class="chooseServiceTimeTitle">
					<text>选择服务时段</text>
				</view>

				<scroll-view class="scrollY" scroll-y>

					<u-grid :border="false" col="5">
						<u-grid-item v-for="(item,index) in periodDateList" :key="index" @click="selectPeriod(index)">
							<view class="flex-col justify-center timeItem" :class="{selectBack: index == selectIndex}">
								<view class="flex-row justify-center">
									<text class="time">{{item.label}}</text>
								</view>
								<view class="flex-row justify-center">
									<text class="price">￥{{item.price}}</text>
								</view>
							</view>
						</u-grid-item>
					</u-grid>

				</scroll-view>

				<view class="flex-row justify-between chooseServiceTeacherButton">
					<view class="chooseServiceTeacherButtonL" @click="closePopup">
						<text>取消</text>
					</view>
					<view class="chooseServiceTeacherButtonR" @click="submit">
						<text>确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: 'chooseServiceTime',
		props: {
			personId: {
				type: String,
				default () {
					return ''
				}
			},
			date: {
				type: String,
				default () {
					return ''
				}
			}
		},
		data() {
			return {
				selectIndex:0,
				periodDateList: []
			}
		},
		methods: {
			submit(){
				this.$emit("getPeriodDate",this.periodDateList[this.selectIndex])
				this.closePopup()
			},


			closePopup() {
				this.$refs.chooseServiceTimePopup.close()
			},

			selectPeriod(e){
				this.selectIndex = e
			},

			openPopup() {
				this.$refs.chooseServiceTimePopup.open()
				this.getServiceTime()
			},

			//获取门店排班时段
			getServiceTime(storeId, date) {
				this.$api.getServicePersonTime({
					personId: this.personId,
					date: this.date
				}).then(res => {
					this.periodDateList = res.data.data
					// if (this.periodTimeList.length === 0) {
					// 	uni.$u.toast('暂无排班时段')
					// }
				})
			},


		}
	}
</script>

<style scoped lang="scss">
	.chooseServiceTimeView {
		width: 750rpx;
		height: 850rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.chooseServiceTimeTitle {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		line-height: 44rpx;
		margin-left: 34rpx;
		padding-top: 26rpx;
	}

	.scrollY {
		width: 730rpx;
		height: 604rpx;
		margin-top: 8rpx;
		margin-left: 10rpx;
	}

	.timeItem {
		width: 124rpx;
		height: 124rpx;
		background: #FAFAFA;
		border-radius: 16rpx;
		margin-top: 16rpx;
	}


	.time {
		font-size: 24rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.price {
		font-size: 24rpx;
		color: #ED569F;
		line-height: 40rpx;
	}

	.chooseServiceTeacherButton {
		width: 686rpx;
		height: 80rpx;
		margin-left: 32rpx;
		margin-top: 32rpx;
	}

	.chooseServiceTeacherButtonL {
		width: 332rpx;
		height: 80rpx;
		background: #F5F5F5;
		border-radius: 54rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
	}

	.chooseServiceTeacherButtonR {
		width: 332rpx;
		height: 80rpx;
		background: #FFE05C;
		border-radius: 54rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.serobV {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 0;
		right: 0;
	}

	.serobVicon {
		width: 32rpx;
		height: 32rpx;
	}

	.selectBack {
		background: rgba(255, 224, 92, 0.1);
		border: 4rpx solid #FFE05C;
	}
</style>