jili2-ph/pages/order/send.vue

<template>
	<view>
		  <view class="container book-main">
			<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="text" placeholder="请填写"  v-model="price" />
			  </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="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,
				cate: {
					id: 0,
					title: '',
					price: 0,
				},
				cateShow: false,
				cates:[],
				remark: '',
				price: '',
				unames: '',
				workers: [],
				orderId: 0
			}
		},
		onLoad(option) {
			this.orderId = option.orderId;
			console.log(option);
		},
		onShow() {
			var that = this;
			app.ajaxReadyCallback = res => {  //各个接口统一回调方法
				var apiname = res.data.apiname;
				console.log(res);
				if(apiname == 'cate'){
					that.cates = res.data.data;
				} else if(apiname == 'order'){
					uni.navigateBack({
					    delta: 1
					});
				}
			}
			
			this.getCate();
		},
		methods: {
			getUrlCode (name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
			},
			selectCate(){
				this.cateShow = true;
			},
			selectedCateVal(obj){
				console.log(obj)
				this.cate = obj;
				this.price = obj.price;
			},
			getCate(){
				app.ajaxUnlogin({
					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.start){
					uni.showToast({
						title: '请选择服务开始时间',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if(!this.cate.id){
					uni.showToast({
						title: '请选择服务',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if(!this.cate.price){
					uni.showToast({
						title: '请输入价格',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				let uids = [];
				this.workers.forEach((item) => {
					uids.push(item.id);
				})
				if(uids.length <= 0){
					uni.showToast({
						title: '请选择护工',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				let param = {
					id: this.orderId,
					start: this.start,
					remark: this.remark,
					cate_id: this.cate.id,
					price: this.price,
					uids: uids.join(',')
				}
				
				app.ajax({
					url: app.globalData.serverUrl + 'order/send',
					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>