smartSchoolClockApp/components/kx-time-picker/kx-time-picker.vue

<template>
	<view>
		<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" @change="bindMultiChange" @cancel="bindMultiCancel" :value="multiIndex"
			:range="multiArray">
			<view class="uni-input">
				<text v-if="kxTimeValue.value">{{kxTimeValue.value}}</text>
				<text v-else class="default">请选择时间段</text>
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		name: "kx-time-picker",
		data() {
			//根据传输时间段判断展示内容
			let [multiIndex,mIndex] = this.multiFunt();
			return {
				multiIndex: multiIndex, //当前区间选中值
				mIndex: mIndex, //选择范围区间
			};
		},
		//接受参数
		props: ['kxTimeValue'],
		computed: {
			//选择时间段
			multiArray() {
				let multiArray = [];
				let startArray = this.hourArray(this.mIndex[0]);
				let endArray = this.hourArray(this.mIndex[1]);
				multiArray = [startArray, endArray];
				console.log(multiArray)
				return multiArray
			},
			//展示时间段
			startTime() {
				return this.multiArray[0][this.multiIndex[0]]
			},
			endTime() {
				return this.multiArray[1][this.multiIndex[1]]
			},
			showTime() {
				return this.startTime + '--' + this.endTime
			},
		},
		methods: {
			//数据整理
			multiFunt(){
				let multiIndex = [0, 0],
					mIndex = [0, 1]
				if (this.kxTimeValue.value) {
					let multiA = this.kxTimeValue.value.split('--');
					multiA = multiA.map((v) => {
						return Number(v.split(':')[0])
					});
					multiIndex[0]=multiA[0];
					mIndex[1]=multiIndex[0]+1;
					multiIndex[1]=multiA[1]-mIndex[1];
				}
				return [multiIndex,mIndex]
			},
			//时间段数组
			hourArray(start = 0, end = 24) {
				let array = [];
				if (start == 0) {
					end = 23
				}
				for (let i = start; i <= end; i++) {
					array.push(i + ':00')
				}
				return array
			},
			//修改列
			bindMultiPickerColumnChange: function(e) {
				this.multiIndex[e.detail.column] = e.detail.value
				switch (e.detail.column) {
					case 0: //拖动第1列
						this.mIndex[1] = e.detail.value + 1
						if (this.multiIndex[1]) this.multiIndex[1]--;
						break
				}
				this.mIndex.splice(0, 0)
			},
			//点击确定
			bindMultiChange(e){
				this.$emit('kxTimeFunt',{
					value:this.showTime,
					start:this.startTime,
					end:this.endTime
				})
			},
			//点击取消
			bindMultiCancel(){
				let [multiIndex,mIndex] = this.multiFunt();
				this.multiIndex=multiIndex;
				this.mIndex=mIndex;
			}
		}
	}
</script>

<style scoped>
	.default{
		color: #8f8f94;
	}
</style>