jje_uniapp/orderPages/storeService/index.vue

<template>
	<view class="page">
		<view class="periodDate">
			<text>服务日期：{{orderParam.serviceDate}}</text>
		</view>

		<view class="flex-col group">
			<view class="serob"><text>服务对象</text></view>
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(item,index) in serviceObjectList" :key="index">
					<view class="serobItem flex-col">
						<view class="serobImgView" @click="selectServiceObject(item)">
							<image class="serobImg" mode="aspectFill" :src="item.facePhotoUrl || '/static/me/ud4.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>
				</u-grid-item>
			</u-grid>
<!--			<view class="serobReminder">-->
<!--				<text>同一服务对象在同一时间只能有一个服务订单</text>-->
<!--			</view>-->
		</view>

		<view class="flex-col group ">
			<view class="groupItemKey">
				<text>取号规则</text>
			</view>
			<view class="serobReminder">
				<text>1.你已进入不挑师傅不挑时段的单剪造型占位理发服务。</text>
			</view>
			<view class="serobReminder">
				<text>2.预约需要一人一号。</text>
			</view>
			<view class="serobReminder">
				<text>3.到门店先签到，过时没有签到占位时段失效。</text>
			</view>
			<view class="serobReminder">
				<text>4.服务费用到店享受相应服务以后在另行收取。</text>
			</view>
		</view>
<!--		<view class="tabBarLineHeight "></view>-->
		<view class="tabBarView">
			<view class="submitButton " @click="commonGeneralOrder">提交</view>
		</view>

	</view>
</template>

<script>
	export default {

		components: {
		},
		data() {
			return {
				userInfo: {},
				store: {},
				serviceObjectList: [],
				requestStatus: false,
				orderParam: {
					orderType: 1,
					serviceAttribute: 1,
					serviceStoreId: '',
					remark: '',
					serviceDate: '',
					childService: [
						// {
						//   periodDate:'',//回显需要，不做参数
						//   serviceObjectId: '',
						//   facePhotoUrl:'', //回显需要，不做参数
						//   nickName:'', //回显需要，不做参数
						//   serviceUserId: '',
						//   personName:'',//回显需要，不做参数
						//   fee:'',//回显需要，不做参数
						//   serviceStartTime: ''
						// }
					]
				}

			}
		},
		onLoad() {
			this.store = uni.getStorageSync('storeInfo')
			this.orderParam.serviceStoreId = this.store.storeId
			let date = new Date();
			this.orderParam.serviceDate = date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' +
				date.getDate()).slice(-2)

		},
		onShow() {
			// 服务对象
			this.userInfo = uni.getStorageSync('userInfo')
			this.listServiceObject()
		},
		methods: {

			// 查询服务对接信息列表
			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 === 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)
					} 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'
				})
			},

			selectServiceObject(item) {
				if (item.select) {
					this.orderParam.childService = this.orderParam.childService.filter(selectServiceObject =>
						selectServiceObject.serviceObjectId !== item.id)
				} else {
					let childService = {
						periodDate: '',
						serviceObjectId: item.id,
						facePhotoUrl: item.facePhotoUrl,
						nickName: item.nickName,
						serviceUserId: -1,
						fee: '',
						serviceStartTime: '',
					}
					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
				}
			},
			commonGeneralOrder() {
				if (!this.userInfo.phone){
					uni.showModal({
						title:'温馨提示',
						content:'预约叫号是通过手机尾号进行查询，是否确认绑定手机号！',
						success:res=>{
							if (res.confirm){
								uni.navigateTo({
									url: '/myPages/setting/setting-telphone',
								})
							}
						}
					})
					return
				}

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

				this.$api.commonGeneralOrder(this.orderParam).then(res => {
					this.requestStatus = false
					uni.switchTab({
						url: '/pages/order/index'
					})

				}).catch(err => {
					this.requestStatus = false
				})
			}

		}
	}
</script>

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