xietaitai-shop-wx/components/date-picker/date-picker.vue

<template>
	<view>
		<u-popup v-model="show" mode="bottom">
			<view class="date">
				<view class="date-title">
					<view>配送</view>
					<view @click="closePop">
						<u-icon name="close-circle-fill" color="#f0efed" size="32"></u-icon>
					</view>
				</view>
				<view class="date-express">
					<view v-for="(item,index) in express">
						<view @click="chooseExpress(index,item)"
							:class="{'date-express-item':true,'date-express-item_active':expressIndex==index}"
							v-if="item.name">{{item.name}}</view>
					</view>
				</view>
				<view class="date-stitle">送货时间</view>
				<view class="date-list">
					<view class="date-list-left">
						<view v-for="(item,index) in data">
							<view @click="chooseDate(index,item)"
								:class="{'date-list-item':true,'date-list-item_active':dateIndex==index}" v-if="item">
								{{item.ymd}}[{{item.week}}]
							</view>
						</view>
					</view>
					<view class="date-list-right">
						<view class="lunarData" v-if="dateObj.lunarData">
							{{dateObj.lunarData?dateObj.lunarData:''}}
							<view>今日剩余可提货量：{{dateObj.canUse.quantity - dateObj.canUse.booked}}</view>
						</view>
						<view class="hh">
							<view @click="chooseHh(index,item)"
								:class="{'hh-item':true,'hh-item_active':hhIndex==index}"
								v-for="(item,index) in hhList">
								{{item}}
							</view>
						</view>
					</view>
				</view>
				<view class="date-btn">
					<view @click="confirmPop">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		isEmptyObject,
		isNull,
		toast
	} from "@/common/util.js"
	export default {
		props: {
			// 日期
			data: {
				type: Array,
				default () {
					return []
				}
			},
			// 快递
			express: {
				type: Array,
				default () {
					return []
				}
			}

		},
		data() {
			return {
				show: false,
				expressIndex: -1,
				expressObj: {},
				dateIndex: -1,
				dateObj: {},
				hhList: ['09:00-15:00', '15:00-21:00'],
				hhIndex: -1,

			}
		},
		methods: {
			chooseExpress(index, item) {
				this.expressObj = item
				this.expressIndex = index
			},
			chooseDate(index, item) {
				this.dateIndex = index
				this.dateObj = item
			},
			chooseHh(index, item) {
				this.hhTime = item
				this.hhIndex = index
			},
			closePop() {
				this.show = false
			},
			confirmPop() {
				if (isEmptyObject(this.dateObj)) {
					toast('请选择日期')
					return
				}
				if (isEmptyObject(this.expressObj)) {
					toast('请选择快递')
					return
				}
				if (isNull(this.hhTime)) {
					toast('请选择时间')
					return
				}
				// 将对象A的值插入到对象B中
				for (const key in this.expressObj) {
					if (this.expressObj.hasOwnProperty(key)) {
						this.dateObj[`express${key}`] = this.expressObj[key];
					}
				}
				this.dateObj.hhtime = this.hhTime
				this.$emit('refresh', this.dateObj)
				this.show = false
				console.log("this.dateObj", this.dateObj)

			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-drawer-content-visible {
		border-radius: 30rpx 30rpx 0 0;
	}

	.date {
		padding: 35rpx 0;
		padding-right: 35rpx;
		padding-bottom: 0;

		&-title {
			font-size: 32rpx;
			color: #000;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 35rpx;
		}

		&-express {
			padding-left: 35rpx;
			display: flex;
			align-items: center;
			margin-top: 35rpx;
			margin-bottom: 15rpx;

			&-item {
				font-size: 24rpx;
				color: #000;
				background-color: #f0efed;
				height: 57rpx;
				line-height: 55rpx;
				text-align: center;
				min-width: 180rpx;
				border: 1px solid transparent;
				border-radius: 30rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}

			&-item_active {
				color: #ba8b45;
				background-color: #fef8ee;
				border: 1px solid #ba8b45;

			}
		}

		&-stitle {
			font-size: 24rpx;
			color: #000;
			padding-left: 35rpx;
			margin-bottom: 35rpx;
		}

		&-list {
			display: flex;
			height: 510rpx;

			&-left {
				width: 235rpx;
				height: 510rpx;
				overflow-y: scroll;
				font-size: 0;
			}

			&-item {
				font-size: 24rpx;
				color: #787877;
				background-color: #f0efed;
				width: 235rpx;
				height: 72rpx;
				text-align: center;
				line-height: 72rpx;

			}

			&-item_active {
				background-color: #fff;
				color: #000;
			}

			&-right {
				width: calc(100% - 235rpx);
				padding-top: 15rpx;
				padding-left: 75rpx;
				font-size: 24rpx;
				color: #000;

				.lunarData {
					line-height: 45rpx;
					margin-bottom: 20rpx;
				}

				.hh {
					&-item {
						border: 1px solid #f4f4f4;
						border-radius: 10rpx;
						height: 80rpx;
						line-height: 80rpx;
						width: 80%;
						padding-left: 45rpx;
						margin-bottom: 20rpx;
						background-color: #fff;
					}

					&-item_active {
						border: 1px solid #d1b384;
						color: #ba8b45;
						background-color: #fef8ee;
						box-shadow: 0px 0px 8rpx #d1b384;
					}
				}
			}

		}

		&-btn {
			width: calc(100% + 35rpx);
			text-align: center;
			display: flex;
			justify-content: center;
			padding: 30rpx 0;

			>view {
				color: #f0efed;
				font-size: 30rpx;
				text-align: center;
				width: 70%;
				height: 75rpx;
				line-height: 75rpx;
				background-color: #ba8b45;
				border-radius: 36rpx;
			}
		}
	}
</style>