jili2-ph/pages/order/add.vue

<template>
	<view>
		  <view class="container book-main">
		    <view class="form-box">
		      <view class="form-box-label">选择科室</view>
		      <view class="form-box-content" @click="selectDep">
		        <view class="form-box-content-text" v-if="!dep.title">请选择</view>
				<view class="form-box-content-text" v-if="dep.title">{{dep.title}}</view>
		        <image src="../../images/xiangyou-xiao.png"></image>
		      </view>
		    </view>
		    <view class="form-box">
		      <view class="form-box-label">联系人 <text class="text-red">*</text></view>
		      <view class="form-box-content">
		        <input type="text" v-model="contact" placeholder="请填写" />
		      </view>
		    </view>
			<view class="form-box">
			  <view class="form-box-label">联系手机号 <text class="text-red">*</text></view>
			  <view class="form-box-content">
			    <input type="tel" v-model="phone" placeholder="请填写" />
			  </view>
			</view>
		    
		    <view class="form-box form-box2">
		      <view class="form-box-label">被陪护人信息</view>
			  <view class="form-box-sub">
			    <view class="form-box-label">姓名<text class="text-red">*</text></view>
			    <view class="form-box-content">
			      <input type="text" placeholder="请填写" v-model="name" />
			    </view>
			  </view>
			  <view class="form-box-sub">
			    <view class="form-box-label">性别<text class="text-red">*</text></view>
			    <view class="form-box-content" @click="selectGender">
			      <view class="form-box-content-text">{{gender.title}}</view>
				  <image src="../../images/xiangyou-xiao.png"></image>
			    </view>
			  </view>
			  <view class="form-box-sub">
			    <view class="form-box-label">年龄<text class="text-red">*</text></view>
			    <view class="form-box-content">
			      <input type="number" placeholder="请填写"  v-model="age" />
			    </view>
			  </view>
			  <view class="form-box-sub">
			    <view class="form-box-label">床号<text class="text-red">*</text></view>
			    <view class="form-box-content">
			      <input type="text" placeholder="请填写" v-model="bed" />
			    </view>
			  </view>
		      <view class="form-box-sub">
		        <view class="form-box-label">所患疾病<text class="text-red">*</text></view>
		        <view class="form-box-content">
		          <input type="text" placeholder="请填写" v-model="ill" />
		        </view>
		      </view>
		    </view>
			
			<view class="form-box">
			  <view class="form-box-label">服务开始时间<text class="text-red">*</text></view>
			  <view class="form-box-content">
				<view class="form-box-content" @click="selectStart">
				  <view class="form-box-content-text" v-if="!start">请选择</view>
				  <view class="form-box-content-text" v-if="start">{{start}}</view>
				  <image src="../../images/xiangyou-xiao.png"></image>
				</view>
			  </view>
			</view>
			
			<view class="form-box">
			  <view class="form-box-label">选择服务</view>
			  <view class="form-box-content" @click="selectCate">
			    <view class="form-box-content-text" v-if="!cate.title">请选择</view>
				<view class="form-box-content-text" v-if="cate.title">{{cate.title}}</view>
			    <image src="../../images/xiangyou-xiao.png"></image>
			  </view>
			</view>
			
			<view class="form-box">
			  <view class="form-box-label">价格(/人/天)<text class="text-red">*</text></view>
			  <view class="form-box-content">
			    <input type="number" placeholder="请填写"  v-model="price" />
			  </view>
			</view>
			
			<view class="form-box">
			  <view class="form-box-label">预收金</view>
			  <view class="form-box-content">
			    <input type="number" placeholder="请填写"  v-model="pre_money" />
			  </view>
			</view>
			
			<view class="form-box">
			  <view class="form-box-label">选择护工</view>
			  <view class="form-box-content" @click="goSelectWorker">
			    <view class="form-box-content-text" v-if="!unames">请选择</view>
				<view class="form-box-content-text" v-if="unames">{{unames}}</view>
			    <image src="../../images/xiangyou-xiao.png"></image>
			  </view>
			</view>
			
			<view class="form-box form-box2">
			  <view class="form-box-label">备注</view>
			  <view class="form-box-textarea">
			    <textarea style="height:120rpx;" v-model="remark" placeholder="请填写" />
			  </view>
			</view>
		
		    <view class="book-btn" @click="saveBtn()">提交</view>
		  </view>
		  <cpicker v-if="genders.length > 0" :list="genders" :show.sync="genderShow" :did="gender.id" @confirm="selectedGenderVal"></cpicker>
		  <cpicker v-if="deps.length > 0" :list="deps" :show.sync="depShow" :did="dep.id" @confirm="selectedDepVal"></cpicker>
		  <cpicker v-if="cates.length > 0" :list="cates" :show.sync="cateShow" :did="cate.id" @confirm="selectedCateVal"></cpicker>
			<w-picker
				:visible.sync="startVisible"
				mode="date" 
				startYear="2021" 
				endYear="5000"
				themeColor="#FF7576"
				:value="start"
				:current="true"
				fields="minute"
				@confirm="onConfirm($event,'date')"
				:disabled-after="false"
				ref="date" 
			></w-picker>
	</view>
</template>

<script>
	var app = getApp();
	import cpicker from "../../components/cpicker/cpicker.vue";
	import wpicker from "../../components/w-picker/w-picker.vue";
	export default {
		components: {
			cpicker,
			wpicker
		},
		data() {
			return {
				flag: false,
				start:'',
				startVisible:false,
				contact: '',
				name: '',
				phone: '',
				ill: '',
				age: '',
				bed: '',
				gender: {
					id: 1,
					title: '男'
				},
				genderShow: false,
				genders:[{"id":1,"title":"男"},{"id":2,"title":"女"}],
				dep: {
					id: 0,
					title: ''
				},
				depShow: false,
				deps:[],
				cate: {
					id: 0,
					title: '',
					price: 0,
				},
				cateShow: false,
				cates:[],
				remark: '',
				price: '',
				unames: '',
				workers: [],
				pre_money: '',
			}
		},
		onLoad(option) {
			
		},
		onShow() {
			var that = this;
			app.ajaxReadyCallback = res => {  //各个接口统一回调方法
				var apiname = res.data.apiname;
				console.log(res);
				if(apiname == 'dep'){
					that.deps = res.data.data;
				}else if(apiname == 'cate'){
					that.cates = res.data.data;
				} else if(apiname == 'order'){
					uni.navigateTo({
					    url: '/pages/order/index'
					});
				}
			}
			
			this.getDep();
			this.getCate();
		},
		methods: {
			getUrlCode (name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
			},
			selectGender(){
				this.genderShow = true;
			},
			selectedGenderVal(obj){
				console.log(obj)
				this.gender = obj;
			},
			selectDep(){
				this.depShow = true;
			},
			selectedDepVal(obj){
				console.log(obj)
				this.dep = obj;
			},
			getDep(){
				app.ajax({
					url: app.globalData.serverUrl + 'common/dep',
					type: 'POST',
					apiname: 'dep',
				});
			},
			selectCate(){
				this.cateShow = true;
			},
			selectedCateVal(obj){
				console.log(obj)
				this.cate = obj;
				this.price = obj.price;
			},
			getCate(){
				app.ajax({
					url: app.globalData.serverUrl + 'cate/cateList',
					type: 'POST',
					apiname: 'cate',
				});
			},
			onConfirm(e,type){
				this.start = e.result;
			},
			selectStart(){
				this.startVisible = true;
			},
			
			goSelectWorker(){
				var that = this;
				uni.navigateTo({
					url: '/pages/order/worker',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: function(data) {
							console.log('jieshou:',data)
							that.workers = data;
							let names = [];
							that.workers.forEach((item,index) => {
								if(index < 2){
									names.push(item.name)
								}
							});
							if(that.workers.length > 2){
								that.unames = names.join(',') + '...';
							}else{
								that.unames = names.join(',');
							}
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { workers: that.workers })
					}
				})
			},
			
			saveBtn(){
				if(!this.contact){
					uni.showToast({
						title: '请输入联系人',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if(!this.phone){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if(!this.name){
					uni.showToast({
						title: '请输入姓名',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if(!this.age){
					uni.showToast({
						title: '请输入年龄',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if(!this.bed){
					uni.showToast({
						title: '请输入床号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if(!this.ill){
					uni.showToast({
						title: '请输入所患疾病',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if(!this.start){
					uni.showToast({
						title: '请选择预约时间',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				let param = {
					contact: this.contact,
					phone: this.phone,
					name: this.name,
					gender: this.gender.id,
					age: this.age,
					bed: this.bed,
					ill: this.ill,
					start: this.start,
					remark: this.remark,
					dep_id: this.dep.id,
				}
				app.ajax({
					url: app.globalData.serverUrl + 'Worker/order',
					type: 'POST',
					apiname: 'order',
					data: param
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbg{
	    width: 100%;
	    height: 300rpx;
	}
	.book-main{
	    width: 710rpx;
	    // position: absolute;
	    // z-index: 10;
	    // top: 300rpx;
	    // left: 0;
	    // bottom: 0;
	    overflow: auto;
	}
	
	
	.book-btn{
	    width: 710rpx;
	    height: 90rpx;
	    line-height: 90rpx;
	    background-color: var(--themeColor);
	    color: #ffffff;
	    font-size: 34rpx;
	    font-weight: bold;
	    text-align: center;
	    border-radius: 10rpx;
	}
</style>