Smart-Farm/uniapp/uni-app/mine/pages/choose-time.vue

<template>
	<view class="mine-choose-time" v-if="isLoad">
		<scroll-view class="scroll-left fill-base" scroll-y :scroll-into-view="scrollNav" :scroll-with-animation="true"
			v-if="sendDay.length> 0">
			<block v-for="(item,index) in sendDay" :key="index">
				<view @tap="onChangeNav(index,1)" :id="`scrollNav${index}`"
					class="item-child flex-center f-paragraph c-title" :class="[{'active':index==scrollInd}]"
					:style="{color: index == scrollInd ? primaryColor: ''}">
					<view class="flex-center child ellipsis"
						:style="{borderLeft: index == scrollInd ? `5rpx solid ${primaryColor}`:''}">
						{{`${item.date} (${item.week})`}}
					</view>
				</view>
			</block>
		</scroll-view>
		<view class="scroll-right abs fill-base pl-lg" v-if="sendTime.length > 0">
			<view @tap="onChangeNav(index,2)" class="item-child flex-center f-paragraph c-paragraph"
				style="padding-right: 25rpx;" :style="{color: index == checkInd ? primaryColor: ''}"
				v-for="(item,index) in sendTime" :key="index">
				<view class="flex-1" :class="[{'text-delete': item.status != 1}]">
					{{item.time_text}}
				</view>
				<i class="iconfont icon-xuanze-fill" v-if="index == checkInd"></i>
			</view>
			<view class="mg-lg">
				<abnor v-if="!loading&&sendTime.length<=0"></abnor>
			</view>
		</view>

		<abnor v-if="!loading&&sendDay.length<=0"></abnor>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				isLoad: false,
				options: {},
				today_time: '',
				sendDay: [],
				sendTime: [],
				loading: false,
				scrollNav: 'scrollNav0',
				scrollInd: 0,
				checkInd: -1
			}
		},
		computed: mapState({
			commonOptions: state => state.user.commonOptions,
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
		}),
		onLoad(options) {
			let {
				index = '-1'
			} = options
			if (index && index.includes('_')) {
				let arr = index.split('_')
				this.scrollInd = arr[0]
				this.checkInd = arr[1]
			}
			this.options = options
			this.$util.showLoading()
			this.initIndex()
		},
		methods: {
			async initIndex(type = 0) {
				let cur_time = new Date().getTime()
				this.today_time = this.$util.DateToUnix(this.$util.formatTime(cur_time, 'YY-M-D h:m'))
				let {
					time = [],
						date = []
				} = await this.$api.claim.sendTime()
				if (date.length > 0) {
					let {
						date: cur_day
					} = date[type]
					time.map(item => {
						item.time_text = `${item.start_time} ~ ${item.end_time}`
						item.end_time_unix = this.$util.DateToUnix(`${cur_day} ${item.end_time}`)
						item.status = item.end_time_unix < this.today_time ? 0 : 1
					})
				}
				this.sendDay = date
				this.sendTime = time
				this.loading = false
				this.isLoad = true
				this.$util.hideAll()
			},
			async initRefresh() {
				this.initIndex()
			},
			async onChangeNav(index, type = 1) {
				let key = type == 1 ? 'sendDay' : 'sendTime'
				if (type == 1) {
					this.checkInd = this.scrollInd == index ? this.checkInd : -1
					this.scrollInd = index
					this.scrollNav = `scrollNav${index}`
					await this.initIndex(index)
				} else {
					let {
						status,
					} = this[key][index]
					if (status != 1) return
					this.checkInd = index
					let item = this[key][index]
					let {
						date
					} = this.sendDay[this.scrollInd]
					item.date = date
					let send_info = {
						time_index: `${this.scrollInd}_${index}`,
						time: item
					}
					this.$util.getPage(-1).send_info = send_info
					this.$util.goUrl({
						url: 1,
						openType: 'navigateBack'
					})
				}
			},
		},
	}
</script>

<style lang="scss">
	.mine-choose-time {

		.scroll-left {
			width: 260rpx;
			height: 100vh;
			position: fixed;
			top: 0;
			bottom: 0;
		}

		.item-child {
			height: 98rpx;
		}

		.item-child.active {
			background: #F9F9F9;
		}

		.item-child .child {
			width: 100%;
			height: 32rpx;
			padding: 0 5%;
		}

		.scroll-right {
			min-height: 100vh;
			top: 0;
			width: 460rpx;
			margin-left: 292rpx;
		}
	}
</style>