fny-ugd-palace-uniapp/pages/signs/subscribe/subscribe.vue

<template>
	<view class="sign-page">
		<view class="view-wrap">
			<view class="card">
				<view class="form-item">
					<view class="form-item__title">
						<view class="name">请选择阁位</view>
						<view class="extra" @click="navToAddress">添加阁位</view>
					</view>
					<view class="form-item__input__wrap" @click="showPos">
						<view class="form-item__input">
							<input placeholder-class="input-placeholder" class="input" type="text" :value="form.blessingPositionName" placeholder="请选择阁位" disabled />
							<view class="icon"><image style="width: 16rpx;height: 16rpx;" src="/static/app/page3/arrow-down.png" mode="aspectFit"></image></view>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item__title">
						<view class="name">人数随访人数</view>
						<view class="extra"></view>
					</view>
					<view class="form-item__input__wrap">
						<view class="form-item__input">
							<input  placeholder-class="input-placeholder" class="input" type="number" v-model="form.num" placeholder="点击输入到访人数" />
						</view>
					</view>
				</view>
			</view>
			<view class="divide"></view>
			<view class="card">
				<view class="date-name">预约时间</view>
				<view class="date-box">
					<c-datepicker v-model="form.day" @change="bindDateChange" :beginDate="form.beginDate"></c-datepicker>
					<view class="date-divide"></view>
					<view class="date-time-wrap">
						<view class="label">可选时间段</view>
						<view class="time-range" v-if="times.length > 0">
							<swiper class="picker-view" vertical :autoplay="false" :display-multiple-items="9">
								<swiper-item v-for="(item, index) in times" :key="item.id">
									<view class="picker-item" :hover-stay-time="100" hover-class="hover-active" :class="{active: index == current}" @click="pickeClick(item, index)">
										<view class="value" :class="{not : !item.isCheck}">{{item.text}}</view>
										<view class="tig" v-if="item.num">{{item.num}}/{{item.max}}</view>
										<view class="stauts-wrap">
											<view class="mark" v-if="index == current">
												<image style="width: 30rpx;height: 30rpx;" src="/static/app/page3/mark.png" mode="aspectFit"></image>
											</view>
											<text v-else-if="item.num >= item.max" class="msg">已约满</text>
										</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
			</view>
			<view class="button-wrap">
				<button type="default" class="u-reset-button sing-btn" @click="bindDate">
					确认预约
				</button>
			</view>
		</view>
		
		<!-- 阁位 -->
		<c-form-type-action-sheet ref="pos" title="请选择阁位" :loadData="getPos">
			<template v-slot="{item}">
				<view>{{item.name}}</view>
			</template>
		</c-form-type-action-sheet>
		
		<!-- 提示框 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import dayjs from '@/common/dayjs/dayjs.min.js'
	export default {
		data() {
			return {
				form: {
					blessingPositionId: '',
					blessingPositionName: '',
					num: '',
					beginDate: dayjs().format('YYYY-MM-DD'),
					visitDate: dayjs().format('YYYY-MM-DD'),
					visitTime: ''
				},
				current: null,
				times: []
			};
		},
		mounted() {
			this.initTimes(this.form.visitDate)
		},
		methods: {
		   /**
			* 比较时间大小 时间
			* @param {dayjs} time1
			* @param {dayjs} time2
			*/	
		   isLittleTime(time1, time2){
			   const diff = time1.diff(time2,'minutes' )
			   if(diff >= 0){
				   return false
			   }else{
				   return true
			   }
		   },	
		   async initTimes(date = '') {
			    try{
			    	const res = await this.$api('signs.getOpenidVisitDateTime', {visitDate: date})
					const timeStr = dayjs().unix()
					this.current = null;
					let isfuzhi = false
					
					const time1 = dayjs()
					const time2YMD = dayjs(date)
			    	const times = res.data.map((item, index) => {
						let isCheck = false // 点击
						const _time2 = dayjs().year(time2YMD.year()).month(time2YMD.month()).day(time2YMD.day()).hour(item.visitTime.split(':')[0]).minute(item.visitTime.split(':')[1]).second(0);
						// 自动选中未录满
						if(this.isLittleTime(time1 , _time2) && item.max > item.num) {
							// 可以点击
							isCheck = true
							if(!isfuzhi){
								isfuzhi = true;
								this.current = index
								this.form.visitTime = item.visitTime;
							}
						}
						// 获取item
						return { id: timeStr + '' + index, text: item.visitTime, visitTime: item.visitTime, max: item.max, num: item.num, isCheck: isCheck}
					})
			    	this.times = times
					console.log(times, '---------')
			    }catch(e){
			    	//TODO handle the exception
			    }
			},
			async getPos(){
				const res = await this.$api('signs.getOpenidBlessingPosition', {})
				if(res.code != 200) {
					throw new Error("")
				}
				return res.data.map(item => {
					return { ...item, id: item.blessingPositionId, name: item.blessingPositionName }
				})
			},
			showPos() {
				this.$refs.pos.$open().then(res => {
					if(res.arr && res.arr.length > 0){
						this.form.blessingPositionId = res.arr[0].blessingPositionId
						this.form.blessingPositionName = res.arr[0].blessingPositionName
					}
				})
			},
			bindDateChange(date){
				const dateString = dayjs(date).format('YYYY-MM-DD')
				this.form.visitDate = dateString;
				this.current = 0;
				this.initTimes(dateString)
			},
			pickeClick(item, index){
				if(!item.isCheck) {
					this.$refs.uToast.show({type: 'error', message: '不能选择', position: 'top'})
					return
				}
				if(item.num >= item.max) {
					this.$refs.uToast.show({type: 'error', message: '时段已经约满', position: 'top'})
					return
				}
				this.form.visitTime = item.text;
				this.current = index
			},
			// 确认预约
		    async bindDate(){
				
				if(!this.form.blessingPositionId){
					this.$refs.uToast.show({type: 'error', message: '请选择阁位', position: 'top'})
					return;
				}
				if(!this.form.num){
					this.$refs.uToast.show({type: 'error', message: '请输入随访人数量', position: 'top'})
					return;
				}
				
				if(!this.current && this.current != 0){
					this.$refs.uToast.show({type: 'error', message: '请选择随访时间', position: 'top'})
					return;
				}
				
				
				this.$refs.uToast.show({
					type: 'loading',
					message: '请稍后',
				})
				
				const res = await this.$api('signs.addOpenidVisit', {...this.form})
				
				this.$refs.uToast.hide()
				
				if(res.code == 200){
					// 这里此提示会被this.start()方法中的提示覆盖
					this.$refs.uToast.show({type: 'success', message: res.msg, position: 'top'})
					
					 const {code, visitDate, visitTime, openid, blessingPositionId, blessingPositionName} = res.data;
					 
					 this.$st(() => {
					 	this.$u.route({
					 		url: '/pages/signs/invitation/invitation',
					 		type: "redirectTo",
					 		params: {
					 			code: code,
					 			visitDate: visitDate,
					 			visitTime: visitTime,
					 		}
					 	})
					 })
					 
				}else{
					this.$refs.uToast.show({type: 'error', message: res.msg, position: 'top'})
				}
			},
			navToAddress(){
				this.$st(() => {
					this.$u.route({
						url: '/pages/signs/address/address',
						type: "navigateTo",
						params: {
							
						}
					})
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>