hotel-tablecloth-uniapp-24-08-29/components/userShop/seleteJobTime.vue

<template>
	<!-- 修改营业时间弹框 -->
	<uv-overlay :show="show" @click="close">
		<view class="warp">
			<view class="rect" @tap.stop>
				<view class="title">修改营业时间</view>
				<view class="center">
					<view style="display: flex;justify-content: center;gap: 20rpx;">
						<view>上班时间</view>
						<view @click="startDateOpen()">
							{{ startTime }}
							<uv-datetime-picker ref="startDateRef" v-model="startTime" mode="time"
								@confirm="startDateChange()"></uv-datetime-picker>
						</view>
					</view>

					<view style="display: flex;justify-content: center;gap: 20rpx;">
						<view>下班时间</view>
						<view @click="endDateOpen()">
							{{ endTime }}
							<uv-datetime-picker style="z-index: 999;" ref="endDateRef" v-model="endTime" mode="time"
								@confirm="endDateChange()"></uv-datetime-picker>
						</view>
					</view>
				</view>
				<view class="bottom">
					<view>
						<uv-button type="info" shape="circle" text="取消" :custom-style="customStyle1"
							@click="close"></uv-button>
					</view>
					<view>
						<uv-button type="info" shape="circle" text="确定" :custom-style="customStyle2"
							@click="confirm"></uv-button>
					</view>
				</view>
			</view>
		</view>
	</uv-overlay>
</template>

<script>
	import dayjs from '../../uni_modules/uv-ui-tools/libs/util/dayjs';
	export default {
		data() {
			return {
				show: false,
				startTime: dayjs(new Date()).format("HH:mm"),
				endTime: dayjs(new Date()).format("HH:mm")
			}
		},
		computed: {
			customStyle1() {
				return {
					height: '60rpx',
					background: '#FFF',
					color: '#000000',
					fontSize: '36rpx',
					borderRadius: '40rpx', //圆角

					// nvue中必须是下方的写法
					'border-top-right-radius': '40rpx',
					'border-bottom-left-radius': '40rpx',
					'border-bottom-right-radius': '40rpx',
					'width': '150rpx',
				}
			},
			customStyle2() {
				return {
					height: '60rpx',
					background: '#fd5100',
					color: '#FFF',
					fontSize: '34px',
					borderRadius: '40rpx', //圆角
					// nvue中必须是下方的写法
					'border-top-right-radius': '40rpx',
					'border-bottom-left-radius': '40rpx',
					'border-bottom-right-radius': '40rpx',
					'width': '150rpx',
				}
			}
		},
		methods: {

			startDateChange(val) {
				this.$nextTick(() => {
					this.startTime = val.value

				});
			},
			startDateOpen() {
				this.$refs.startDateRef.open();
			},
			endDateChange(val) {
				this.$nextTick(() => {
					this.endTime = val.value
				});
			},
			endDateOpen() {
				this.$refs.endDateRef.open();
			},


			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			confirm() {
				this.show = false

				this.$api('updateJobTime', {
					time: this.startTime + '-' + this.endTime
				}, res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '修改营业时间成功',
							duration: 1500
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.uv-popup {
		z-index: 999;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

	}

	.rect {
		width: 600rpx;
		height: 300rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		.title {
			padding: 10rpx 0 0 15rpx;
			background-color: #fd5100;
			color: #FFF;
			text-align: left;
			width: 100%;
			height: 18%;
			font-size: 36rpx;
		}

		.center {
			height: 50%;
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			// justify-content: center;
			// align-items: center;
			font-size: 36rpx;
		}

		.bottom {
			display: flex;
			justify-content: center;
			gap: 50rpx;
		}
	}
</style>