zh_order_food_xcx/pages-takeout/confirm-mod/time.vue

<template>
	<view>
		<uni-popup ref="popupTime" type="bottom">
			<view class="pop-address box-border-box">
				<view class="text-align-center fs-36 fw-600 box-title mb-32">
					选择预计送达时间
					<uni-icons @click="closeCoupon" class="box-close" type="closeempty" size="20"></uni-icons>
				</view>
				<view class="scroll-view-css flex-justify-space">
					<view class="time-left">
						<view class="item-box" :class="type == item.type?'bgc-f':''" v-for="(item,i) in list" :key="i"
							@click="select(1,item)">
							{{item.name}}
						</view>
					</view>
					<view class="time-right flex-1" v-if="timeList.length>0">
						<view class="item-box b-b-F9F9F9" :class="time == item?'fc-41ABF5':''"
							v-for="(item,i) in timeList" :key="i" @click="select(2,item)">
							{{item}}
						</view>
					</view>
					<view class="flex-1 align-items-center flex-justify-center" v-else>
						暂无可选时间
					</view>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		orderTime
	} from '@/api/order.js'
	export default {
		data() {
			return {
				list: [],
				timeList: [],
				type: '',
				time: '',
			}
		},
		methods: {
			getList(id) {
				let school_id = uni.getStorageSync('school_id');
				orderTime({
					shop_id: id,
					school_id: school_id
				}).then((res) => {
					if (res.code == 1) {
						this.list = res.data
						this.timeList = this.list[0].timeList;
						this.time = this.timeList[0];
						this.type = this.list[0].type;
					}
				})
				console.log(this.list, '&&&&&&&&&&&&&&&&&&');
				// if (this.list[0].timeList.length > 0) {
				// 	this.timeList = this.list[0].timeList;
				// 	this.time = this.timeList[0];
				// }
				// this.type = this.list[0].type;
				this.openPop();
			},
			openPop() {
				this.$refs.popupTime.open();
			},
			closeCoupon() {
				this.$refs.popupTime.close();
			},
			select(type, item) {
				if (type === 1) {
					if (this.type != item.type) {
						this.type = item.type;
						this.time = '';
						if(this.type == 2) {
							this.timeList = this.list[1].timeList;
						}else {
							this.timeList = this.list[0].timeList;
						}
					}
				} else {
					this.time = item
					this.closeCoupon()
					this.$emit('timeAndType', this.type, this.time)
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.pop-address {
		width: 100%;
		height: 50vh;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding-top: 32rpx !important;
		display: flex;
		flex-direction: column;

		.box-title {
			position: relative;

			.box-close {
				position: absolute;
				right: 22rpx;
			}
		}

		.time-left {
			width: 240rpx;
			height: auto;
			background-color: #F7F8FA;
		}

		.time-right {
			overflow-y: scroll;
		}

		.item-box {
			width: 100%;
			height: 104rpx;
			line-height: 104rpx;
			font-size: 28rpx;
			font-weight: 400;
			text-align: center;

		}
	}
</style>