dazheng-ph-mini/pages/index/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 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>
			<w-picker
				:visible.sync="startVisible"
				mode="date" 
				startYear="2021" 
				endYear="5000"
				themeColor="#089875"
				: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:[],
				remark: ''
			}
		},
		onLoad(option) {
			var orgId = this.getUrlCode('orgId');
			if(orgId){
				uni.setStorageSync(app.globalData.storagePre+'orgId',orgId);
				app.globalData.userinfo.orgId = orgId;
			}else{
				orgId = uni.getStorageSync(app.globalData.storagePre+'orgId');
				if(orgId){
					app.globalData.userinfo.orgId = orgId;
				}else{
					uni.showToast({
						title: '参数错误',
						icon: 'none',
						duration: 2000
					})
				}
			}
		},
		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 == 'order'){
					uni.navigateTo({
					    url: '/pages/index/success'
					});
				}
			}
			
			this.getDep();
		},
		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',
				});
			},
			onConfirm(e,type){
				this.start = e.result;
			},
			selectStart(){
				this.startVisible = true;
			},
			
			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,
					depId: 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;
		overflow-y: auto;
		overflow-x: hidden;
	}
	
	
	.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>