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">{{getTimeTips}}</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>
						</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 []
				}
			},
			getTimeTips:{
				type: String,
				default () {
					return '非到货时间，预计发货后48小时左右可到货。'
				}
			}
			// // 快递
			// 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;
			padding-bottom: 10rpx;
		}

		&-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: #787877;
			padding-left: 35rpx;
			margin-bottom: 20rpx;
			color:#b62828;
		}

		&-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>