jili2-visitor/pages/index/add.vue

<template>
	<view class="box">
		<view class="address-box" v-if="defaultOrg == 0 || (defaultOrg > 0 && type == 1)">
			<view class="address-box-list">
				<view class="address-box-label">
					项目名称
				</view>
				<view class="address-box-input">
					<picker v-if="orgs.length > 0" disabled="true" @change="bindPickerChange" :value="orgIndex" :range="orgs" range-key="name">
						<text class="address-box-input-text">{{orgs[orgIndex].name}}</text>
						<image class="address-box-input-icon" src="../../images/xiangyou.png"></image>
					</picker>
				</view>
			</view>
			<view class="address-box-list">
				<view class="address-box-label">
					项目服务
				</view>
				<view class="address-box-input">
					<picker v-if="serves.length > 0" @change="bindPickerServeChange" :value="serveIndex" :range="serves" range-key="title">
						<text class="address-box-input-text">{{serves[serveIndex].title}}</text>
						<image class="address-box-input-icon" src="../../images/xiangyou.png"></image>
					</picker>
				</view>
			</view>
			<view class="address-box-list">
				<view class="address-box-label">
					预约日期
				</view>
				<view class="address-box-input">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<text class="address-box-input-text">{{date}}</text>
						<image class="address-box-input-icon" src="../../images/xiangyou.png"></image>
					</picker>
				</view>
			</view>
			<view class="address-box-list">
				<view class="address-box-label">
					预约时间段
				</view>
				<view class="address-box-input">
					<picker v-if="times.length > 0" @change="bindPickerTimeChange" :value="timeIndex" :range="times" range-key="name">
						<text class="address-box-input-text">{{times[timeIndex].name}}</text>
						<image class="address-box-input-icon" src="../../images/xiangyou.png"></image>
					</picker>
				</view>
			</view>
		</view>
		
		<view class="address-box">
			<view class="address-box-list">
				<view class="address-box-label">
					预约人姓名
				</view>
				<view class="address-box-input">
					<input v-model="name" placeholder="请输入" type="text">
				</view>
			</view>
			<view class="address-box-list">
				<view class="address-box-label">
					手机号码
				</view>
				<view class="address-box-input">
					<input v-model="phone" placeholder="请输入" type="tel">
				</view>
			</view>
		</view>
		
		<view class="address-btn" @click="saveBtn">
			提 交
		</view>
		<view class="address-btn2" @click="saveBtn2">
			我的记录
		</view>
	</view>
</template>

<script>
	var app = getApp();
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
	
		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			return {
				id: 0,
				defaultOrg: 0,
				type: 0,
				orgs: [],
				orgIndex: 0,
				serves: [],
				serveIndex: 0,
				date: getDate({
					format: true
				}),
				startDate:getDate('start'),
				endDate:getDate('end'),
				times: [],
				timeIndex: 0,
				name: '',
				phone: ''
			}
		},
		onLoad(option) {
			app.checkLogin();
			
			this.defaultOrg = option.orgId ? option.orgId : 0;
			this.type = option.type ? option.type : 0;
			console.log(this.defaultOrg,this.type);
			if(!this.defaultOrg){
				this.getOrgs();
			}else{
				if(this.type == 1){ //预约
					this.getOrgs();
				}else{//现场登记
					uni.setNavigationBarTitle({
					    title: '现场登记'
					});
					uni.setStorageSync(app.globalData.storagePre+'orgId', this.defaultOrg);
				}
				
			}
		},
		onShow() {
			var that = this;
			app.ajaxReadyCallback = res => {  //各个接口统一回调方法
				var apiname = res.data.apiname;
				console.log(res);
				if(apiname == 'org'){
					that.orgs = res.data.data;
					if(that.defaultOrg && that.type == 1){
						if(that.orgs.length > 0){
							that.orgs.forEach((item,index) => {
								if(item.id.toString() == that.defaultOrg.toString()){
									that.orgIndex = index;
								}
							})
						}
					}else{
						that.orgIndex = 0;
					}
					if(that.orgs.length > 0){
						that.getService();
					}
				} else if(apiname == 'service'){
					that.serves = res.data.data;
					that.serveIndex = 0;
					if(that.serves.length > 0){
						that.getServiceTime();
					}
				} else if(apiname == 'serviceTime'){
					that.times = [];
					that.timeIndex = 0;
					res.data.data.forEach((item) => {
						that.times.push({
							id: item.id,
							name: item.start + '~' + item.end
						});
					})
				} else if(apiname == 'order'){
					uni.showToast({
						title: '提交成功',
						icon: 'none',
						duration: 2000
					});
					setTimeout(function(){
						uni.navigateTo({
						    url: '/pages/index/index'
						});
					},1000);
				}
					
			}
		},
		methods: {
			getUrlCode (name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.detail.value)
				this.orgIndex = e.detail.value;
				this.getService();
			},
			bindPickerServeChange: function(e) {
				console.log('bindPickerServeChange发送选择改变，携带值为：' + e.detail.value)
				this.serveIndex = e.detail.value;
				this.getServiceTime();
			},
			bindPickerTimeChange: function(e) {
				console.log('bindPickerTimeChange发送选择改变，携带值为：' + e.detail.value)
				this.timeIndex = e.detail.value;
			},
			bindDateChange: function(e) {
				console.log('bindDateChange发送选择改变，携带值为：' + e.detail.value)
				this.date = e.detail.value;
				this.getServiceTime();
			},
			getOrgs(){
				this.serves = [];
				this.serveIndex = 0;
				this.times = [];
				this.timeIndex = 0;
				app.ajax({
					url: app.globalData.serverUrl + 'org/lists',
					type: 'POST',
					apiname: 'org'
				});
			},
			getService(){
				this.times = [];
				this.timeIndex = 0;
				const orgId = this.orgs[this.orgIndex].id;
				app.ajax({
					url: app.globalData.serverUrl + 'service/list',
					type: 'POST',
					apiname: 'service',
					data: {
						orgId: orgId
					}
				});
			},
			getServiceTime(){
				const serviceId = this.serves[this.serveIndex].id;
				const orgId = this.orgs[this.orgIndex].id;
				app.ajax({
					url: app.globalData.serverUrl + 'service/times',
					type: 'POST',
					apiname: 'serviceTime',
					data: {
						serviceId: serviceId,
						day: this.date,
						orgId: orgId
					}
				});
			},
			saveBtn(){
				let serviceTimeId = 0;
				if(this.times[this.timeIndex]){
					serviceTimeId = this.times[this.timeIndex].id;
				}
				let orgId = 0;
				if(this.orgs[this.orgIndex]){
					orgId = this.orgs[this.orgIndex].id;
				}
				
				let param = {
					type: this.defaultOrg==0?1:2,
					serviceTimeId: serviceTimeId,
					name: this.name,
					phone: this.phone,
					orgId: orgId
				}
				if(this.defaultOrg){
					param.orgId = this.defaultOrg;
				}
				if(!this.name){
					uni.showToast({
						title: '请输入姓名',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if(!this.phone){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				
				app.ajax({
					url: app.globalData.serverUrl + 'visitorOrder/order',
					type: 'POST',
					apiname: 'order',
					data: param
				});
			},
			saveBtn2(){
				uni.reLaunch({ //关闭所有页面，跳转到闪屏页
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		padding: 20rpx;
	}
	.address-box{
		
		// padding: 0 20rpx;
		margin-bottom: 20rpx;
	}
	.address-box-list{
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1rpx solid #f2f2f2;
		padding: 0 20rpx;
		border-radius: 8rpx;
		background-color: #FFFFFF;
	}
	.address-box-list:last-child{
		border: 0;
	}
	.address-box-label{
		display: inline-block;
		width: 200rpx;
		height: 100%;
		float: left;
	}
	.address-box-input{
		display: inline-block;
		width: 460rpx;
		height: 100%;
		float: right;
		text-align: right;
	}
	.address-box-input input{
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 10rpx;
		font-size: 28rpx;
		vertical-align: middle;
	}
	.address-box-input-text{
		display: inline-block;
		width: 430rpx;
		line-height: 100%;
		vertical-align: middle;
		color: #949494;
		padding-right: 18rpx;
		font-size: 28rpx;
	}
	.address-box-input-icon{
		width: 12rpx;
		height: 22rpx;
		vertical-align: middle;
	}
	
	.address-btn{
		width: 700rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: #FFFFFF;
		background-color: $theme-color;
		border-radius: 10rpx;
		margin: 50rpx auto 20rpx auto;
		text-align: center;
	}
	
	.address-btn2{
		width: 700rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: $theme-color;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx auto;
		text-align: center;
	}
	
	.address-btn-del{
		width: 700rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: $theme-color;
		background-color: #FFFFFF;
		border: 1rpx solid $theme-color;
		border-radius: 10rpx;
		margin: 10rpx auto;
		text-align: center;
	}
</style>