jje_uniapp/orderPages/bookService/index.vue

<template>
	<view class="page">

		<view class="flex-col group">
			<view class="serob"><text>服务对象</text></view>
			<view class="serobItems flex-row">
				<scroll-view class="scrollX" scroll-x>
					<view class="flex-row">
						<view class="serobItem flex-col" v-for="(item,index) in serviceObjectList" :key="index">
							<view class="serobImgView" @click="selectServiceObject(item)">
								<image class="serobImg" mode="aspectFill" :src="item.facePhotoUrl || '/static/logo.png'"></image>
							</view>
							<text class="serobName">{{item.nickName || '未填写'}}</text>
							<view class="serobV" v-if="item.select === true">
								<image class="serobVicon" src="/static/order/ud20.png"></image>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="addSerobImg" @click="addServiceObject">
					<text>+</text>
				</view>
			</view>
		</view>

		<view class="flex-row hintView">
			<view class="flex-col justify-center">
				<view class="hint">
					<text>!</text>
				</view>
			</view>
			<view class="hintCentent">
				<text>娇宝，提前10分钟到哟，一人一号过号需要重新取号排队！等你哟</text>
			</view>

		</view>

		<view class="flex-col group marginTop" v-for="(item, index) in orderParam.childService">
			<view class="flex-row">
				<image class="selectSerobImg" mode="aspectFill" :src="item.facePhotoUrl || '/static/logo.png'"></image>
				<text class="selectSerobName">{{item.nickName || '未填写'}}</text>
			</view>

			<view class="flex-row  groupItem ">
				<view class="groupItemKey ">
					<text>服务日期</text>
				</view>
				<view class="flex-row justify-between groupItemContent ">
					<text>{{ item.periodDate || '请选择服务日期' }}</text>
				</view>
			</view>

			<view class="flex-row  groupItem">
				<view class="groupItemKey">
					<text>服务人员</text>
				</view>
				<view class="flex-row justify-between groupItemContent" @click="chooseServiceTeacher(index)">
					<text>{{ item.personName || '请选择服务人员' }}</text>
					<u-icon name="arrow-right" color="#666" size="18"></u-icon>
				</view>
			</view>

			<view class="flex-row  groupItem">
				<view class="groupItemKey">
					<text>服务时段</text>
				</view>
				<view class="flex-row justify-between groupItemContent" @click="chooseServiceTime(index)">
					<text>{{ item.serviceStartTime || '服务时段' }}</text>
					<u-icon name="arrow-right" color="#666" size="18"></u-icon>
				</view>
			</view>
		</view>


		<view class="flex-col group marginTop">
			<view class="groupItemKey">
				<text>服务定制</text>
			</view>
			<view class="textareaView">
				<textarea v-model="orderParam.remark" placeholder-style="color:#999999;fontSize:28rpx"
					placeholder="如有其它特殊需求，请在此输入您的需求" />
			</view>
		</view>

		<view :style="{'height':'236rpx'}"></view>

		<view class="flex-col  group2 ">
			<view class="btnTitle flex-row">
				<u-icon v-if="selectIcon" name="checkmark-circle-fill" color="#FFE52C" size="18"
					@click="selectChange"></u-icon>
				<u-icon v-else name="/static/order/ud9.png" color="#FFE52C" size="18" @click="selectChange"></u-icon>
				<text :style="{'margin-left':'10rpx'}">请阅读并同意</text>
				<text :style="{'color':'red'}" @click="goTermsOfService">《预约需知》</text>
			</view>
			<view class="btn flex-row justify-between">
				<view>
					<text class="title">待支付</text>
					<text class="num">￥{{ price }}</text>
				</view>
				<view class="btnRight" @click="commitOrder">
					<text>提交</text>
				</view>
			</view>
		</view>
		<chooseServiceTeacher ref="chooseServiceTeacher" :storeId="store.storeId" :date="date" @getWorkPerson="getWorkPerson"></chooseServiceTeacher>
		<chooseServiceTime ref="chooseServiceTime" :personId="personId" :date="date" @getPeriodDate="getPeriodDate"></chooseServiceTime>
		<myPay ref="myPay" :blPay="false"></myPay>
	</view>
</template>

<script>
	import chooseServiceTeacher from './components/chooseServiceTeacher';
	import chooseServiceTime from './components/chooseServiceTime';
	import myPay from '../../components/pay/pay';
	export default {
		components: {
			chooseServiceTeacher,
			chooseServiceTime,
			myPay
		},
		data() {
			return {
				requestStatus:false,
				personId:'',
				date:'',
				serviceObjectList: [],
				userInfo: {},
				//服务门店
				store: {},
				//默认服务技师
				serviceTeacher: {},
				//默认服务时间
				periodDate: [],
				//默认服务时段
				periodTime: [],
				//预约费用
				price: '0',
				//订单编号
				orderNo: '',
				subOrderNo: '',
				selectIcon: true,
				orderParam:{
					orderType: 1,
					serviceAttribute: 2,
					serviceStoreId: '',
					remark: '',
					childService:[
							{
								periodDate:'',//回显需要，不做参数
						serviceObjectId: '',
						facePhotoUrl:'', //回显需要，不做参数
						nickName:'', //回显需要，不做参数
						serviceUserId: '',
						personName:'',//回显需要，不做参数
					    fee:'',//回显需要，不做参数
						serviceStartTime: '',
						timeRangeId: ''
					}
					]
				}
			}
		},
		onLoad() {
			this.store = uni.getStorageSync('storeInfo')
			this.userInfo = uni.getStorageSync('userInfo')
			this.orderParam.serviceStoreId = this.store.storeId
			this.selectDate()
		},
		onShow() {
			// 服务对象
			this.listServiceObject()
		},
		mounted(){




		},
		methods: {
			//获取排班日期
			selectDate() {
				console.log(this.store)
				this.$api.selectDate({
					organization: this.store.storeId
				}).then(res => {
					this.periodDate = res.data.data[0]
					this.date=this.periodDate.label

					if (this.orderParam.childService.length === 1) {
						this.orderParam.childService[0].periodDate = this.periodDate.label
					}

					if (res.data.data[0]){
						this.getServicePerson(res.data.data[0].label);
					}
				})
			},

			// 查询服务工作人员列表
			getServicePerson(date) {
				this.$api.getServicePerson({
					storeld:this.store.storeId,
					date:date
				}).then((res) => {
					this.serviceTeacher = res.data.data[0];
					this.personId =this.serviceTeacher.id

					if (this.orderParam.childService.length === 1) {
						this.orderParam.childService[0].serviceUserId = res.data.data[0].personId
						this.orderParam.childService[0].personName = res.data.data[0].personName
						this.orderParam.childService[0].fee = res.data.data[0].fee
						this.price =  res.data.data[0].fee * 1
					}
					if (res.data.data[0]){
						this.getServiceTime(date,res.data.data[0].personId)
					}
				})
			},

			//获取门店排班时段
			getServiceTime(date,personId) {
				this.$api.getServicePersonTime({
					personId: personId === -1 ? '' : personId,
					date: date,
				}).then(res => {
					this.periodTime = res.data.data[0]
					if (this.orderParam.childService.length === 1) {
						this.orderParam.childService[0].serviceStartTime = res.data.data[0].label
						this.orderParam.childService[0].timeRangeId = res.data.data[0].id
					}
				})
			},

			selectServiceObject(item) {
				console.log(item)
				if (item.select) {
					this.orderParam.childService = this.orderParam.childService.filter(selectServiceObject =>
						selectServiceObject.serviceObjectId !== item.id)
				} else {
					let childService ={
						periodDate: this.periodDate.label,
						serviceObjectId: item.id,
						facePhotoUrl:item.facePhotoUrl, //回显需要，不做参数
						nickName:item.nickName, //回显需要，不做参数
						serviceUserId: this.serviceTeacher.personId ,
						personName:this.serviceTeacher.personName ,//回显需要，不做参数
						fee:this.serviceTeacher.fee ,//回显需要，不做参数
						serviceStartTime: this.periodTime.label ,
						timeRangeId: this.periodTime.id
					}
					this.orderParam.childService.push(childService)
					for (let childService of this.orderParam.childService) {
						this.price = 0
						this.price =  this.price * 1 + childService.fee * 1
					}
				}
				item.select = !item.select
			},

			// 查询服务对接信息列表
			listServiceObject() {
				this.$api.listServiceObject(this.reqParm).then((res) => {
					console.log(res)
					this.serviceObjectList = res.data.data
					this.getImgUrlByBannerOssId(this.serviceObjectList);

					if (this.orderParam.childService.length === 1) {
						let selectServiceObject = this.serviceObjectList[0]
						this.orderParam.childService[0].serviceObjectId = selectServiceObject.id,
						this.orderParam.childService[0].nickName = selectServiceObject.nickName,
						this.serviceObjectList[0].select = true
					} else {
						for (let selectServiceObject of this.orderParam.childService) {
							for (let serviceObject of this.serviceObjectList) {
								if (selectServiceObject.id === serviceObject.id) {
									serviceObject.select = true
								}
							}
						}
					}


				})
			},
			// 获取图片
			getImgUrlByBannerOssId(items) {
				for (let i = 0; i < items.length; i++) {
					if (items[i].facePhoto) {
						this.$api.getImgUrlByOssId({
							ossId: items[i].facePhoto
						}).then(res => {
							items[i].facePhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
							this.$set(this.serviceObjectList, i, items[i])
							if (i === 0){
								this.orderParam.childService[0].facePhotoUrl =res.data.data[0].url.replace(/^http:/, "https:")
							}
						})
					}
				}
			},


			addServiceObject() {
				uni.navigateTo({
					url: '/myPages/ServiceObjectManagement/index'
				})
			},


			//选择服务人员
			chooseServiceTeacher(index) {
				this.selectIndex = index
				this.$refs.chooseServiceTeacher.openPopup()
			},

			//选择服务人员
			getWorkPerson(e) {
				this.orderParam.childService[this.selectIndex].serviceUserId = e.personId
				this.orderParam.childService[this.selectIndex].personName = e.personName
				this.orderParam.childService[this.selectIndex].fee = e.fee

				for (let childService of this.orderParam.childService) {
					this.price = 0
					this.price =  this.price * 1 + childService.fee * 1
				}

			},

			//选择服务时段
			chooseServiceTime(index) {
				this.selectIndex = index
				this.$refs.chooseServiceTime.openPopup()
			},
			//选择服务时段
			getPeriodDate(e) {
				this.orderParam.childService[this.selectIndex].serviceStartTime = e.label
				this.orderParam.childService[this.selectIndex].timeRangeId = e.id
			},

			selectChange() {
				this.selectIcon = !this.selectIcon
			},


			goTermsOfService() {
				uni.navigateTo({
					url: '/myPages/TermsOfService/index?name=' + '预约需知' + '&type=' + 5
				})
			},




			//提交订单
			commitOrder() {
				if(!this.selectIcon){
				  uni.$u.toast('请阅读并同意《预约需知》')
				  return;
				}

				if (this.orderParam.childService.length === 0) {
				  uni.$u.toast('请选择服务对象')
				  return;
				}
				if(this.requestStatus){
					return;
				}
				this.requestStatus=true

				this.$api.commonGeneralOrder(this.orderParam).then(res=>{
					console.log('++++++++++++++++++订单提交+++++++++++',res)
					this.orderNo = res.data.data.orderNo
					this.subOrderNo = res.data.data.subOrderNo
					this.$refs.myPay.openPopup()
					this.requestStatus=false
				}).catch(err =>{
					this.requestStatus=false
				})

			},




		}
	}
</script>
<style scoped lang="scss">
	@import './index.rpx.scss';
</style>