emis-sapp/components/buns-revtime-sheet/buns-revtime-sheet.vue

<template>
	<tpx-dialog :show="show" title="上门取件时间" @onClose="handleCloseModal()">
		<view style="position: relative;height: calc(60vh);">
			<tpx-layout>
				<template v-slot:body>
					<view class="shet-cont">
						<view>
							<u-text :text="tips" size="28" color="#999" margin="0 0 20rpx 0"></u-text>
						</view>
						<view style="flex: 1;">
							<view style="display: flex;flex-direction: row;height: 100%;">
								<view style="width: 300rpx;height: 100%;background-color:#F6F6F6;">
									<tpx-checkitems :list="dayList"
										v-model:value="model.date" v-slot="dCurrent" min-checked="1" type="single" 
									>
										<view slot :class="`day-item ${dCurrent.checked?'active':''}`">
											{{ dCurrent.item.title }}
										</view>
									</tpx-checkitems>
								</view>
								<view style="flex: 1;position: relative;">
									<view class="pos-abt-all" style="overflow-y: auto;">
										<tpx-checkitems :list="timeFilterList"
											v-model:value="model.time" v-slot="tCurrent" min-checked="1" type="single" 
										>
											<view slot :class="`time-item ${tCurrent.checked?'active':''}`">
												<u-row justify="between">
													<view>
														{{ tCurrent.item.title }}
													</view>
													<view v-if="tCurrent.checked">
														<u-icon name="checkbox-mark" size="32" :bold="true" 
															:custom-style="`${tCurrent.checked?'color:#B12D29;':''}`"
														></u-icon>
													</view>
												</u-row>
											</view>
										</tpx-checkitems>
									</view>
								</view>
							</view>
						</view>
					</view>	
				</template>
				
				<template v-slot:footer>
					<view class="blcok-white-noradius" style="margin-top: 0;margin-bottom: 0;">
						<u-button @click="handleEditItem()" type="primary" size="large" shape="circle" 
							custom-style="height:80rpx;font-size: 30rpx;"
						>确认</u-button>
					</view>
				</template>
			</tpx-layout>
		</view>
	</tpx-dialog>
</template>

<script>
	import { setClipboardData } from "@/common/untool"
	import { numberToChinese } from "@/common/util"
	import dayjs from 'dayjs'
	
	let dayFormat = 'YYYY-MM-DD'
	let dateTimeFormat = 'YYYY-MM-DD HH:mm:ss'
	
	export default {
		watch:{
			show: {
				handler: function(cval, oval) {
					cval && this.initData()
				},
				deep: true
			}
		},
		computed: {
			modelInfo: {
				get(){
					return this.value
				}
			},
			timeFilterList() {
				const _this = this
				let list = []
				const tItem = this.dayList.filter(t=> _this.model.date == t.val)[0] || {}
				list = tItem.timeList || []
				return list
			},
		},
		props: {
			show: {
				default () {
					return false
				}
			},
			value: {
				default () {
					return { }
				}
			},
		},
		data() {
			return {
				tips: '推荐上午 9:00 - 15:00 之间',
				range: [8, 19],
				model: {
					date: '',
					time: ''
				},
				dayList: [
					
				]
			}
		},
		created() {
			
			this.initData()
		},
		onHide() {

		},
		unmounted() {},

		methods: {
			initData() {
				this.makeList()
				let { pickStartDate, pickFinishDate } = this.modelInfo || {}
				// 默认值
				this.model.date = this.dayList[0].val
				if(pickStartDate && pickFinishDate) {
					this.model.date = dayjs(pickStartDate).format(dayFormat)
					this.model.time = `${pickStartDate}~${pickFinishDate}`
				}
			},
			makeList() {
				const _this = this
				const now = dayjs(new Date())
				const nowDate = dayjs(now).format(dayFormat)
				const plus1Date = dayjs(nowDate).add(1, 'day').format(dayFormat)
				const plus2Date = dayjs(nowDate).add(2, 'day').format(dayFormat)
				const nowHour = now.get("hours")
				let dayList = [
					{ title: '今天', val: nowDate },
					{ title: '明天', val: plus1Date },
					{ title: '后天', val: plus2Date }
				]
				dayList.map((dItem, dIndex)=> {
					const timeList = []
					let start = _this.range[0]
					let end = _this.range[1]
					if(dIndex == 0 && nowHour > start) {
						start = nowHour + 1
					}
					for(var tIndex = start; tIndex <= end; tIndex ++) {
						let tItem = {}
						tItem.startTime = dayjs(`${dItem.val} ${tIndex}`).format(dateTimeFormat)
						tItem.endTime = dayjs(`${dItem.val} ${tIndex + 1}`).format(dateTimeFormat)
						
						tItem.val = `${tItem.startTime}~${tItem.endTime}`
						tItem.title = `${dayjs(tItem.startTime).format("HH:mm")}-${dayjs(tItem.endTime).format("HH:mm")}`
						if(dIndex == 0 && tIndex == start) {
							tItem.title = `${numberToChinese(start - nowHour)}小时内`
						}
						timeList.push(tItem)
					}
					dItem.timeList = timeList
				})
				dayList = dayList.filter(d=> d.timeList.length > 0)
				this.dayList = dayList
			},
			handleCloseModal() {
				this.$emit('update:show', false)
			},
			handleEditItem() {
				const { date, time } = this.model
				const value = `${date} ${time}`
				let curItem
				this.dayList.map(d=> {
					if(d.val == date) {
						d.timeList.map(t=> {
							if(t.val == time) {
								curItem = t
							}
						})
					}
				})
				this.$emit('onChange', curItem)
				if(curItem){
					this.modelInfo.pickStartDate = curItem.startTime
					this.modelInfo.pickFinishDate = curItem.endTime
				}
				this.handleCloseModal()
			}
		}
	}
</script>

<style scoped lang="scss">
	.shet-cont{
		height: 100%;
		padding: 10rpx 0 30rpx 0;
		display: flex;
		flex-direction: column;
	}
	.day-item{
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		font-weight: 600;
		text-align: center;
		&.active{
			background-color: #fff;
		}
	}
	.time-item{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		padding-left: 100rpx;
		&.active{
			font-weight: 600;
			color: $uni-color-primary;
		}
	}
	
</style>