front-end/hdApp/src/components/app-send-time.vue

<template>
	<view>
		<tui-list-cell class="line-cell" :hover="false" :arrow="true">
			<div class="tui-title">{{ timeLabel }}</div>
			<picker style="width: 100%"
				mode="multiSelector"
				:range="timeList"
				:value="timeValue"
				@change="changeTimeFn"
				class="inp-select"
			>
				<div v-if="sendTime">{{ sendTime }}</div>
				<div class="tui-placeholder" v-else>{{ placeholder }}</div>
			</picker>
		</tui-list-cell>
	</view>
</template>

<script>
import TuiListCell from "@/components/plugin/list-cell";
export default {
	name: "AppSendTime",
	components: {
		TuiListCell
	},
	props: {
		sendDate: {
			type: String,
			default: ""
		},
		sendTime: {
			type: String,
			default: ""
		},
		dateLabel: {
			type: String,
			default: "配送日期"
		},
		timeLabel: {
			type: String,
			default: "配送时间"
		},
		placeholder: {
			type: String,
			default: "请选择具体时间"
		}
	},
	data() {
		return {
			timeList: [
				[
					"01",
					"02",
					"03",
					"04",
					"05",
					"06",
					"07",
					"08",
					"09",
					"10",
					"11",
					"12",
					"13",
					"14",
					"15",
					"16",
					"17",
					"18",
					"19",
					"20",
					"21",
					"22",
					"23",
					"24"
				],
				["00", "10", "20", "30", "40", "50"]
			],
			timeValue: [0, 0]
		};
	},
	created() {
		let nowDate = new Date();
		this.$emit("update:sendDate", nowDate.Format("yyyy-MM-dd"));
	},
	methods: {
		changeTimeFn(e) {
			console.log(e);
			let oneIndex = e.detail.value[0] || 0;
			let twoIndex = e.detail.value[1] || 0;
			this.timeValue = e.detail.value;
			this.$emit(
				"update:sendTime",
				this.timeList[0][oneIndex] + ":" + this.timeList[1][twoIndex]
			);
			this.$emit("alterTime")

		}
	},
	watch: {
		sendTime(val) {
			if (val) {
				let indexList = val.split(":");
				let oneIndex = indexList[0] || 0;
				let twoIndex = indexList[1] || 0;
				this.timeValue = [oneIndex, twoIndex];
			}
		}
	}
};
</script>

<style lang="scss" scoped></style>