xxdj1/technician/pages/time-manage.vue

<template>
	<view class="technician-time-manage">

		<view class="fill-base pd-lg flex-between timemanage">
			<view class="flex-1 flex-y-baseline f-title c-title">是否接单<view class="f-paragraph ml-sm"
					:style="{color:form.is_work==1?primaryColor:'#999'}">
					
				</view>
			</view>
			<view @tap.stop="toChangeItem">
				{{form.is_work==1?'接单':'休息'}}
				<i class="iconfont icon-switch c-caption ml-sm" :class="[{'icon-switch-on':form.is_work==1}]"
					:style="{ color: form.is_work==1 ? primaryColor : ''}"></i>
			</view>
		</view>

		<view class=" mt-md b-1px-b">
			<view class="f-title c-title pd-lg">选择接单时间</view>
		</view>
		<view class="f-paragraph c-desc pt-lg pb-lg timemanage">
			<view @tap.stop="toShowTime('start_time')" class="item-time">
				<view>选择开始时间</view>
				<view :style="{color:form.start_time ? primaryColor : '#999'}">
					{{form.start_time || '选择时间'}}
				</view>
			</view>
			<view @tap.stop="toShowTime('end_time')" class="item-time b-1px-l" style="margin-top:20rpx;">
				<view>选择结束时间</view>
				<view  :style="{color:form.end_time ? primaryColor : '#999'}">
					{{is_next_day?'次日':''}}{{form.end_time || '选择时间'}}
				</view>
			</view>
		</view>

		<view class="space-max-footer"></view>
		<w-picker :visible.sync="showTime" mode="time" :value="toDayTime" :current="false" :second="false"
			:themeColor="primaryColor" @confirm="onConfirm" ref="time"></w-picker>

		<auth :needAuth="userInfo && !userInfo.nickName" :must="true" type="userInfo" @go="submit"
			v-if="form.coach_status !=3 ">
			<fix-bottom-button :text="[{text:'保存',type:'confirm'}]" bgColor="#fff"></fix-bottom-button>
		</auth>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				toDay: '',
				toDayTime: '',
				showKey: '',
				showTime: false,
				form: {
					id: 0,
					is_work: 0,
					start_time: '',
					end_time: '',
					coach_status: 0
				},
				is_next_day: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
		}),
		onLoad() {
			this.initIndex()
		},
		methods: {
			...mapMutations(['updateUserItem']),
			async initIndex() {
				// #ifdef H5
				if (this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				// #endif
				let cur_time = new Date(Math.ceil(new Date().getTime()))
				this.toDay = this.$util.formatTime(cur_time, 'YY-M-D')
				this.toDayTime = this.$util.formatTime(cur_time, 'h:m')
				let data = await this.$api.technician.coachInfo()
				for (let key in this.form) {
					this.form[key] = data[key]
				}
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.toCount()
			},
			toChangeItem() {
				if (this.form.coach_status == 3) return
				this.form.is_work = this.form.is_work == 1 ? 0 : 1
			},
			toShowTime(key) {
				if (this.form.coach_status == 3) return
				this.showKey = key
				this.showTime = true
			},
			onConfirm(val) {
				this.form[this.showKey] = val.result;
				this.toCount()
			},
			toCount() {
				let {
					toDay = ''
				} = this
				let {
					start_time = '',
						end_time = ''
				} = this.form
				if (toDay && start_time && end_time) {
					let start = `${toDay} ${start_time}`
					let end = `${toDay} ${end_time}`
					this.is_next_day = this.$util.DateToUnix(start) >= this.$util.DateToUnix(end)
				}
			},
			async submit() {
				let param = this.$util.deepCopy(this.form)
				if (!param.start_time || !param.end_time) {
					this.$util.showToast({
						title: !param.start_time ? `请选择开始时间` : `请选择结束时间`
					})
					return
				}

				// let start_time = `${this.toDay} ${param.start_time}`
				// let end_time = `${this.toDay} ${param.end_time}`
				// if (this.$util.DateToUnix(start_time) > this.$util.DateToUnix(end_time) - 1) {
				// 	this.$util.showToast({
				// 		title: `结束时间不能小于或等于开始时间`
				// 	})
				// 	return
				// }
				delete param.coach_status
				this.$util.showLoading()
				await this.$api.technician.coachUpdate(param)
				this.$util.hideAll()
				this.$util.showToast({
					title: `保存成功`
				});
				setTimeout(() => {
					this.$util.back()
					this.$util.goUrl({
						url: 1,
						openType: `navigateBack`
					})
				}, 1000)

			}
		}
	}
</script>


<style lang="scss">
	.technician-time-manage {
		.iconfont {
			font-size: 80rpx;
			line-height: 34rpx;
			position: relative;
			top:20rpx;
		}

		.item-time {
			// width: 50%;
			display: flex;
			justify-content: space-between;
			padding:40rpx 30rpx;
			border-radius: 30rpx;
			background-color: #ffffff;
		}
	}
	.timemanage{
		border-radius: 30rpx;
		margin:20rpx 24rpx;
	}
</style>