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,item.serviceUserId)">
					<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"  @getPeriodDate="getPeriodDate"></chooseServiceTime>
		<myPay ref="myPay" :blPay="false" :orderNo="subOrderNo" @payResult="payResult"></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 {
				selectIndex:0,
				requestStatus:false,
				personId:'',
				date:'',
				serviceObjectList: [],
				userInfo: {},
				//服务门店
				store: {},
				//默认服务技师
				serviceTeacher: {},
				//默认服务时间
				periodDate: [],
				//默认服务时段
				periodTime: [],
				//预约费用
				price: '0',
				//订单编号
				orderNo: '',
				subOrderNo: '',
				selectIcon: true,
				orderParam:{
					orderType: 1,
					serviceAttribute: 2,
					serviceStoreId: '',
					remark: '',
					serviceDate:'',
					childService:[
						// 	{
						// 		periodDate:'',//回显需要，不做参数
						// 		serviceObjectId: '',
						// 		facePhotoUrl:'', //回显需要，不做参数
						// 		nickName:'', //回显需要，不做参数
						// 		serviceUserId: '',
						// 		personName:'',//回显需要，不做参数
						// 		fee:'',//回显需要，不做参数
						// 		serviceStartTime: ''
						// }
					]
				}
			}
		},
		onLoad() {
			this.store = uni.getStorageSync('storeInfo')
			this.userInfo = uni.getStorageSync('userInfo')
			this.orderParam.serviceStoreId = this.store.storeId

		},
		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
					this.orderParam.serviceDate=this.periodDate.label
					if (res.data.data[0]){
						this.getServicePerson(res.data.data[0].label);
					}
				})
			},

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

			//获取门店排班时段
			getServiceTime(date,personId) {
				this.$api.getServicePersonTime({
					personId: personId,
					date: date,
					storeId:this.store.storeId
				}).then(res => {
					this.periodTime = res.data.data[0]
					this.orderParam.childService[0].serviceStartTime = this.periodTime.label
					this.orderParam.childService[0].periodDate = this.periodDate.label,
					this.orderParam.childService[0].serviceUserId = this.serviceTeacher.personId ,
					this.orderParam.childService[0].personName = this.serviceTeacher.personName ,//回显需要，不做参数
					this.orderParam.childService[0].fee = this.serviceTeacher.fee //回显需要，不做参数
				})
			},

			selectServiceObject(item) {
				this.subOrderNo=''
				console.log(item)
				if (item.select) {
					this.orderParam.childService = this.orderParam.childService.filter(selectServiceObject =>
						selectServiceObject.serviceObjectId !== item.id)
				} else {
					this.$api.getServicePersonTime({
						personId: this.serviceTeacher.personId,
						date: this.periodDate.label,
						storeId:this.store.storeId
					}).then(res => {
						let periodTimeList = res.data.data

						let selectServiceObjectList = this.orderParam.childService

						selectServiceObjectList.forEach(selectServiceObject =>{
							periodTimeList.forEach(periodTime =>{
								if (selectServiceObject.serviceStartTime === periodTime.label ){
									periodTime.total = periodTime.total - 1
								}
							})
						})
						periodTimeList = periodTimeList.filter(periodTime=> periodTime.total>0)
						console.log(periodTimeList)
						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: periodTimeList[0].label ,
						}
						this.orderParam.childService.push(childService)

					})

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

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

					if (this.orderParam.childService.length === 0) {
						let selectServiceObject = this.serviceObjectList[0]
						this.serviceObjectList[0].select = true
						let childService ={
							periodDate: '',
							serviceObjectId: selectServiceObject.id,
							facePhotoUrl:selectServiceObject.facePhotoUrl,
							nickName:selectServiceObject.nickName,
							serviceUserId: -1 ,
							fee:'' ,
							serviceStartTime: '' ,
						}
						this.orderParam.childService.push(childService)
						this.selectDate()
					} else {
						for (let selectServiceObject of this.orderParam.childService) {
							for (let serviceObject of this.serviceObjectList) {
								if (selectServiceObject.id === serviceObject.id) {
									serviceObject.select = true
								}
							}
						}
					}
					this.getImgUrlByBannerOssId(this.serviceObjectList);

				})
			},
			// 获取图片
			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,serviceUserId) {
				this.selectIndex = index
				this.$refs.chooseServiceTeacher.openPopup(serviceUserId)
			},

			//选择服务人员
			getWorkPerson(e) {

				if (e.personId !== this.orderParam.childService[this.selectIndex].serviceUserId){
					this.subOrderNo=''
					this.$api.getServicePersonTime({
						personId: e.personId,
						date: this.periodDate.label,
						storeId: this.store.storeId
					}).then(res => {
						this.orderParam.childService[this.selectIndex].serviceUserId = e.personId
						this.orderParam.childService[this.selectIndex].personName = e.personName
						this.orderParam.childService[this.selectIndex].fee = e.fee
						this.orderParam.childService[this.selectIndex].serviceStartTime = ''
						let periodTimeList = res.data.data
						let selectServiceObjectList = this.orderParam.childService.filter(selectServiceObject =>
								selectServiceObject.serviceUserId === e.personId
								|| selectServiceObject.serviceUserId === -1
						)
						selectServiceObjectList.forEach(selectServiceObject =>{
							periodTimeList.forEach(periodTime =>{
								if (selectServiceObject.serviceStartTime === periodTime.label){
									periodTime.total = periodTime.total - 1
								}
							})
						})
						periodTimeList = periodTimeList.filter(periodTime=> periodTime.total>0)
						this.orderParam.childService[this.selectIndex].serviceStartTime = periodTimeList[0].label
						this.price = 0
						for (let childService of this.orderParam.childService) {
							this.price =  this.price * 1 + childService.fee * 1
						}
					})
				}
			},

			//选择服务时段
			chooseServiceTime(index) {
				this.selectIndex = index
				this.$refs.chooseServiceTime.openPopup(this.orderParam.childService[index].serviceUserId,
						this.periodDate.label,this.store.storeId,this.orderParam.childService,index,this.orderParam.childService[index].serviceStartTime)
			},
			//选择服务时段
			getPeriodDate(e) {
				console.log(e)
				if (e){
					if (this.orderParam.childService[this.selectIndex].serviceStartTime !== e.label){
						this.subOrderNo=''
						this.orderParam.childService[this.selectIndex].serviceStartTime = e.label
						this.$set(this.orderParam)
					}
				}

			},

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


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

			//支付组件回调
			payResult(e){
				console.log(e)
				if(e.payResult){
					uni.showToast({
						title: '支付成功!'
					});
				}else {
					uni.showToast({
						title: '支付失败',
						icon: 'error'
					});
				}
				setTimeout(()=>{
					uni.switchTab({
						url: '/pages/order/index'
					})
				},1000)
			},


			//提交订单
			commitOrder() {
				if (this.subOrderNo){
					this.$refs.myPay.openPopup()
				}else {
					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)
						if (res.data.data.subOrderNo) {
							this.orderNo = res.data.data.orderNo
							this.subOrderNo = res.data.data.subOrderNo
							this.$refs.myPay.openPopup()
						} else {
							uni.$u.toast('预约成功')
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/order/index'
								})
							}, 1000)
						}
						this.requestStatus = false
					}).catch(err => {
						this.requestStatus = false
					})
				}
			},




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