jje_staff/pages/index/index.vue

<template>
	<view class="page">
		<uni-nav-bar :fixed="true" background-color="#FFE05C" :border="false" :statusBar="true" title="首页" />
		<view class="flex-row tuni ">
			<image class="profile" :src="userInfo.avatarUrl || '/static/ud4.png'"></image>
			<view class="tuniMsg">
				<view class="name ">
					<text>{{userInfo.name}}</text>
				</view>
				<view>
					<text class="biaoqian ">{{userInfo.post}}</text>
				</view>
			</view>
			<view class="flex-row justify-around tuni-right ">
				<view class="flex-col">
					<view class="flex-row justify-center dakaIcon ">
						<text>{{userInfo.subNumber}}</text>
					</view>
					<view class="flex-row justify-center dakaText ">
						<text>今日预约</text>
					</view>
				</view>
				<view class="flex-col" @click="promotion">
					<view class="flex-row justify-center dakaIcon ">
						<u-icon name="/static/index/erweima.png" size="35"></u-icon>
					</view>
					<!--					<view class="flex-row justify-center dakaText " >-->
					<!--						<text>拓客码</text>-->
					<!--					</view>-->
				</view>
				<view class="flex-col " @click="userScanCode">
					<view class="flex-row justify-center dakaIcon ">
						<u-icon name="/static/index/saoma.png" size="25"></u-icon>
					</view>
					<view class="flex-row justify-center dakaText ">
						<text>报到打卡</text>
					</view>
				</view>
			</view>

		</view>

		<view class="flex-row justify-around buttons">
			<!--			<view class="buttonItem" @click="call" v-if="currService && currService.callState == '2'">-->
			<!--				<text>叫号</text>-->
			<!--			</view>-->
			<view class="buttonItem" :class="{buttonState:buttonState[0]}" @click="next">
				<text>下一位</text>
			</view>
			<view class="buttonItem" :class="{buttonState:buttonState[1]}" @click="takePlace">
				<text>已就位</text>
			</view>
			<view class="buttonItem" :class="{buttonState:buttonState[2]}" @click="settle">
				<text>结算</text>
			</view>
			<view class="buttonItem" :class="{buttonState:buttonState[3]}" @click="addService">
				<text>添加服务</text>
			</view>
		</view>

		<view class="flex-row justify-center ">
			<view class="serviceMsg " v-if="currService">
				<view class="flex-row serviceInfo ">
					<image class="serviceProfile" :src="currService.avatar || '/static/ud4.png'" @click="avatarOpen">
					</image>
					<view class="flex-col justify-end serviceInfo-rigth ">
						<view class="flex-row justify-between ">
							<view class="">
								<view class="flex-row">
									<text class="servicename">{{currService.serviceObjectName}}</text>
									<text v-if="currService.isVip" class="biaoqian">会员客户</text>
									<text v-else class="biaoqian">现金客户</text>
								</view>
								<view class="">
									<text class="servicename">{{currService.no}}</text>
								</view>
							</view>

							<view class="flex-col justify-center ">
								<view class="flex-row justify-center  tag" @click="openSelectServiceObjectPopup">
									<text>切换</text>
									<u-icon name="/static/index/qiehuan.png" size="18"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view :style="{'height':'120rpx'}"></view>
				<view class="flex-row justify-center" v-if="!currService.balanceFlag">
					<view class="flex-row justify-center hintView">
						<view class="hint">
							<text>!</text>
						</view>
						<view class="hintCentent">
							<text>娇宝余额不足哟~</text>
						</view>
					</view>
				</view>

				<view class="flex-row justify-center" v-if="currService.balanceFlag && currService.balance *1 <= 200">
					<view class="flex-row justify-center hintView" :class="{hintViewBgColor2: currService.balance *1 <= 100,
						  		   hintViewBgColor3: currService.balance *1 > 100 && currService.balance *1 <= 200}">
						<view class="hint">
							<text>!</text>
						</view>
						<view class="hintCentent">
							<text>娇宝余额充足~</text>
						</view>
					</view>
				</view>

				<view class="flex-col orderMsg">


					<view class="flex-row justify-between">
						<view class="flex-row">
							<u-icon name="/static/index/quhao.png" size="20"></u-icon>
							<text class="key">排号：</text>
							<text class="value">{{currService.planNumber}}</text>
						</view>
						<view class="flex-col justify-center stateStr">
							<text>{{currService.statusDesc}}</text>
						</view>
					</view>
					<view class="flex-row">
						<u-icon name="/static/index/orderNo1.png" size="20"></u-icon>
						<text class="key">订单编号：</text>
						<text class="value">{{currService.orderNo}}</text>
					</view>
					<view class="flex-row">
						<u-icon name="/static/index/jiandao.png" size="20"></u-icon>
						<text class="key">服务项目：</text>
						<text class="value">{{currService.serviceProject}}</text>
					</view>
					<view class="flex-row">
						<u-icon name="/static/index/tel.png" size="20"></u-icon>
						<text class="key">手机尾号：</text>
						<text class="value">{{currService.phone.substring(7,11)}}</text>
					</view>
				</view>
				<view class="flex-row justify-center">
					<view class="imgs">
						<view class="mmImgView" :class="{floatRight: (index+1) % 2==0,marginTop:index>1}"
							v-for="(i,index) in 0" :key="index">
							<image class="mmImg" mode="widthFix" src="/static/mn1.webp"></image>
						</view>
					</view>

				</view>

				<view class="flex-row justify-center" v-if="currService.status!==12">
					<view class="like">
						<text>{{currService.preference || '暂无'}}</text>
					</view>
				</view>
			</view>

			<view class="flex-col" :style="{'height':sysHeight}" v-else>
				<view class="flex-row justify-center">
					<image class="dataNull" src="/static/index/dataNull.png"></image>
				</view>
				<view class="flex-row justify-center dataNullText">
					<text>暂无服务项目,请点击下一位刷新页面</text>
				</view>
			</view>
		</view>

		<uni-popup ref="avatarPopup" type="center">
			<view class="avatarView " v-if="currService">
				<view class="flex-row justify-center">
					<image class="avatarOpen" mode="widthFix" :src="currService.avatar || '/static/ud4.png'"></image>
				</view>
				<view class="flex-row justify-center" :style="{'marginTop':'20rpx'}">
					<text>服务对象：{{currService.serviceObjectName}}</text>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="reminderPopup" type="center">
			<view class="reminderView ">
				<view class="reminderTitle">
					<text>保存用户喜好</text>
				</view>
				<view class="textareaView flex-row justify-center ">
					<textarea class="textarea" v-model="content" placeholder-style="color:#999999;fontSize:28rpx"
						placeholder="请输入用户喜好" />
				</view>
				<view class="flex-row justify-around" :style="{'marginTop':'20rpx'}">
					<view class="cancelButton " @click="closeReminderPopup">
						<text>取消</text>
					</view>
					<view class="confirmButton " @click="preference">
						<text>确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="addServicePopup" @change="popupChange" type="bottom">
			<view class="addService">
				<scroll-view class="scrollY1 " scroll-y>
					<view class="flex-col">
						<view class="popupTitle">
							<text>选择服务项目</text>
						</view>
						<view class="flex-row justify-center">
							<view class="serviceItems ">
								<view class="serviceItem "
									:class="{vBackGround: serviceProjectListIndex === index,marginLeft16: (index+3) % 3!==0,marginTop24:index>2}"
									v-for="(item,index) in serviceProjectList" :key="index"
									@click="selectProject(item,index)">
									<text>{{item.serviceName}}</text>
								</view>
							</view>
						</view>
						<view class="popupTitle marginTop24">
							<text>选择服务技师</text>
						</view>

						<view class="flex-row justify-center">
							<view class="serviceItems ">
								<view class="flex-col serviceTeach "
									:class="{marginLeft28: (index+4) % 4!==0,marginTop24:index>3}"
									v-for="(item,index) in servicePersonList" :key="index"
									@click="servicePersonListIndex = index">
									<image class="serviceTeachImg" :src="item.facePhotoUrl ||'/static/ud4.png'"
										:class="{vBackGround: servicePersonListIndex === index}"></image>
									<view class="serviceTeachName">
										<text>{{item.personName}}</text>
									</view>
									<image v-if="servicePersonListIndex === index" class="vImage"
										src="/static/index/xuanzhong.png"></image>
								</view>
							</view>
						</view>

					</view>


				</scroll-view>

				<view class="flex-row justify-around">
					<view class="cancelButton " @click="closeAddServicePopup">
						<text>取消</text>
					</view>
					<view class="confirmButton" @click="addServiceProject">
						<text>确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="selectServiceObjectPopup" @change="popupChange" type="bottom">
			<view class="addService">

				<view class="popupTitle">
					<text>切换服务对象</text>
				</view>

				<scroll-view class="scrollY" scroll-y>
					<view class="flex-row objectItem" :class="{'vBackGround': selectServiceObjectIndex === index}"
						v-for="(item,index) in selectServiceObjectList" :key="index"
						@click="selectServiceObjectIndex = index">
						<image class="objectImage" :src="item.facePhotoUrl || '/static/ud4.png'"></image>
						<view class="flex-col objectName ">
							<text>{{item.nickName}}</text>
						</view>
						<image v-if="selectServiceObjectIndex === index" class="vImage"
							src="/static/index/xuanzhong.png"></image>
					</view>
				</scroll-view>

				<view class="flex-row justify-around">
					<view class="cancelButton" @click="closeSelectServiceObjectPopup">
						<text>取消</text>
					</view>
					<view class="confirmButton" @click="switchServiceObject">
						<text>确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="promotionPopup" type="center">
			<view class="promotionView">
				<view class="flex-row justify-center qrcodeView">
					<uv-qrcode ref="qrcode" size="400rpx" :value="qrcodeUrl" :options="options"></uv-qrcode>
				</view>
				<view class="flex-row justify-center">
					<text>娇骄儿造型</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import MescrollItem from "./module/mescrollUni-item.vue";
	import QQMapWX from '../../common/js/qqmap/myqqmap-sdk.js'
	export default {
		components: {
			MescrollItem
		},
		data() {
			return {
				buttonState: [0, 0, 0, 0], //0：不禁用按钮，1:禁用按钮。
				previousServiceOrderId: '',
				content: '',
				selectServiceObjectList: [],
				selectServiceObjectIndex: -1,
				servicePersonList: [],
				servicePersonListIndex: 0,
				serviceProjectList: [],
				serviceProjectListIndex: 0,
				tabIndex: 0,
				sysHeight: '',
				readerHeight: '',
				readerWidth: '',
				userInfo: {},
				storeId: '',
				storeName: '',
				currService: null,
				qqMap: new QQMapWX({
					key: 'ZIABZ-543WB-747UM-JL5Y7-NDS4E-HWB4M',
					vm: this
				}),
				qrcodeUrl: 'https://jje.admin.xinyuekj.com.cn/recharge/recharge?storeId={promotionStoreId}&techNo={techNo}',
				options: {
					// 指定二维码前景，一般可在中间放logo
					foregroundImagePadding: 2,
					foregroundImageBorderRadius: 5,
					foregroundImageSrc: '/static/logo.png'
				}

			}
		},
		onLoad() {
			let sysInfo = uni.getSystemInfoSync()
			this.sysHeight = sysInfo.windowHeight - (sysInfo.windowWidth / 750) * 400 + 'px'
			this.readerHeight = sysInfo.windowHeight + 'px'
			this.readerWidth = sysInfo.windowWidth + 'px'

		},
		onShow() {
			this.getUserInfo()
			// this.userInfo = uni.getStorageSync('userInfo')
			// if (this.userInfo.signIn){
			// 	this.currServiceInfo()
			// }
		},
		methods: {
			avatarOpen() {
				this.$refs.avatarPopup.open()
			},

			promotion() {
				let data = {
					promotionStoreId: this.userInfo.workStoreId || '',
					techNo: this.userInfo.techNo || ''
				};

				for (let key in data) {
					let regexp = new RegExp("{" + key + "}"); // 构造正则表达式
					this.qrcodeUrl = this.qrcodeUrl.replace(regexp, data[key]); // 执行替换操作
				}
				console.log('++++qrcodeUrl+++++', this.qrcodeUrl)
				this.$refs.promotionPopup.open()
			},

			closeReminderPopup() {
				this.previousServiceOrderId = ''
				this.$refs.reminderPopup.close()
			},
			openSelectServiceObjectPopup() {
				this.$api.service.getServiceObjectList({
					orderServiceId: this.currService.orderServiceId,
				}).then(res => {
					this.selectServiceObjectList = res.data.data
					this.getServiceObjectUrl(this.selectServiceObjectList)
					uni.hideTabBar()
					this.$refs.selectServiceObjectPopup.open()
				})
			},

			// 获取图片
			getServiceObjectUrl(items) {
				for (let i = 0; i < items.length; i++) {
					let ptoto = items[i].facePhoto || items[i].personPhoto
					if (ptoto) {
						this.$api.service.getImgUrlByOssId({
							ossId: ptoto
						}).then(res => {
							items[i].facePhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
							this.$forceUpdate()
						})
					}
				}
			},

			closeSelectServiceObjectPopup() {
				this.serviceProjectListIndex = -1
				this.$refs.selectServiceObjectPopup.close()
			},
			switchServiceObject() {
				if (this.selectServiceObjectIndex === -1) {
					uni.showToast({
						icon: 'none',
						duration: 2000,
						title: '请选择服务对象'
					});
					return
				}
				this.$api.service.switchServiceObject({
					orderServiceId: this.currService.orderServiceId,
					serviceObjectId: this.selectServiceObjectList[this.selectServiceObjectIndex].id
				}).then(res => {
					this.currServiceInfo()
					this.closeSelectServiceObjectPopup()
				})
			},

			addService() {
				if (!this.currService) {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: '没有服务对象'
					});
					return
				}
				this.serviceProjectListIndex = 0
				this.$api.service.serviceProjectList().then(res => {
					this.serviceProjectList = res.data.data
					this.serviceUserList(res.data.data[0])
					uni.hideTabBar()
					this.$refs.addServicePopup.open()
				})
			},

			selectProject(item, index) {
				this.serviceProjectListIndex = index
				this.serviceUserList(item)
			},
			serviceUserList(item) {
				this.$api.service.serviceUserList({
					serviceProjectId: item.id,
					storeId: this.storeId
				}).then(res => {
					this.servicePersonListIndex = 0
					this.servicePersonList = res.data.data
					this.getServiceObjectUrl(this.servicePersonList)
				})
			},

			closeAddServicePopup() {
				this.serviceProjectListIndex = 0
				this.$refs.addServicePopup.close()
			},
			addServiceProject() {
				this.previousServiceOrderId = this.currService.serviceObjectId
				this.$api.service.addServiceProject({
					orderServiceId: this.currService.orderServiceId,
					serviceProjectId: this.serviceProjectList[this.serviceProjectListIndex].id,
					serviceUserId: this.servicePersonList[this.servicePersonListIndex].personId
				}).then(res => {
					this.closeAddServicePopup()
					this.currServiceInfo()
					this.$refs.reminderPopup.open()

				})
			},

			popupChange(e) {
				if (!e.show) {
					uni.showTabBar()
				}
			},


			takePlace() {
				if (!this.currService) {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: '没有服务对象'
					});
					return
				}
				this.$api.service.takePlace({
					orderServiceId: this.currService.orderServiceId
				}).then(res => {
					uni.showToast({
						icon: 'success',
						duration: 2000,
						title: '操作成功'
					});
					this.currServiceInfo()
				})
			},

			preference() {
				this.$refs.reminderPopup.close()
				this.$api.service.preference({
					serviceObjectId: this.previousServiceOrderId,
					preference: this.content
				}).then(res => {
					if (this.currService) {
						if (this.currService.serviceObjectId == this.previousServiceOrderId) {
							this.currService.preference = this.content
						}
					}
					this.previousServiceOrderId = ''
					this.content = ''
					uni.showToast({
						icon: 'success',
						duration: 2000,
						title: '保存成功'
					});
				})
			},

			settle() {
				let that = this
				if (!that.currService) {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: '没有服务对象'
					});
					return
				}
				uni.showModal({
					title: '温馨提示',
					content: '是否确定结算',
					editable: false,
					success: (e) => {
						console.log(e)
						if (e.confirm) {
							that.previousServiceOrderId = that.currService.serviceObjectId
							uni.showLoading({
								title: '结算中...'
							});
							that.$api.service.settle({
								orderServiceId: that.currService.orderServiceId
							}).then(res => {
								uni.hideLoading();
								that.currServiceInfo()
								that.$refs.reminderPopup.open()
							}).catch(err => {
								uni.hideLoading();
							})
						}
					}
				})

			},
			start() {
				this.$api.service.start({
					orderServiceId: this.currService.orderServiceId
				}).then(res => {
					this.currServiceInfo()
				})
			},

			end() {
				this.$api.service.end({
					orderServiceId: this.currService.orderServiceId
				}).then(res => {
					this.currServiceInfo()
				})
			},
			call() {
				this.$api.service.call({
					orderServiceId: this.currService.orderServiceId
				}).then(res => {
					this.currServiceInfo()
				})
			},

			next() {
				if (!this.userInfo.signIn) {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: '请先扫码签到'
					});
					return
				}
				uni.showModal({
					title: '温馨提示',
					content: '是否确定下一位',
					editable: false,
					success: (e) => {
						if (e.confirm) {
							console.log(e.confirm)
							uni.showLoading({
								title: '叫号中...'
							});
							this.$api.service.next({
								orderServiceId: this.currService ? this.currService.orderServiceId :
									null,
								storeId: this.storeId
							}).then(res => {
								this.currServiceInfo(true)
							}).catch(err => {
								uni.hideLoading();
							})
						}
					}
				})
			},

			currServiceInfo(e) {
				if (!this.userInfo.signIn) {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: '请先扫码签到'
					});
					return
				}
				uni.showLoading({
					title: '叫号中...'
				});
				this.$api.service.currServiceInfo({
					storeId: this.userInfo.workStoreId
				}).then(res => {
					if (e) {
						console.log(res.data.data)
						if (res.data.data === null) {
							uni.showModal({
								title: '温馨提示',
								content: '暂无需要服务的客户',
								editable: false,
								showCancel: false,
								success: (e) => {
									if (e.confirm) {

									}
								}
							})
						}
					}
					uni.hideLoading();
					this.currService = res.data.data
					this.setButtomState(this.currService)
					this.currService.avatar = this.currService.avatar.replace(/^http:/, "https:")
				}).catch(err => {
					uni.hideLoading();
					console.log("出错了+++++++++++出错了+++++++", err)

				})

			},

			setButtomState(currService) {
				if (currService) {
					if (currService.status == 12) {
						//叫号中
						this.buttonState = [0, 0, 1, 1]
					} else if (currService.status == 8 || currService.status == 1) {
						//服务中
						this.buttonState = [1, 1, 0, 0]
					}

				} else {
					this.buttonState = [0, 1, 1, 1]
				}
			},

			getUserInfo() {
				this.$api.user.getUserInfo().then(res => {
					this.userInfo = res.data.data
					this.storeId = res.data.data.workStoreId
					uni.setStorageSync('userInfo', this.userInfo)
					if (this.userInfo.avatar) {
						this.getImgUrlByOssId(this.userInfo.avatar)
					}
					if (this.userInfo.signIn) {
						this.buttonState = [0, 1, 1, 1]
						this.currServiceInfo()
					}
					this.$forceUpdate()
				})
			},
			getImgUrlByOssId(ossId) {
				this.$api.service.getImgUrlByOssId({
					ossId: ossId
				}).then(res => {
					this.$set(this.userInfo, 'avatarUrl', res.data.data[0].url.replace(/^http:/, "https:"))
					uni.setStorageSync('userInfo', this.userInfo)
				})
			},

			userScanCode() {
				let that = this
				uni.navigateTo({
					url: '/pages/scanCode/scanCode',
					events: {
						getScancode: function(data) {
							let param = {
								storeId: JSON.parse(data).storeId,
								timestamp: JSON.parse(data).timestamp
							}
							that.$api.service.clockIn(param).then(res => {
								uni.showToast({
									icon: 'success',
									duration: 2000,
									title: '签到成功'
								});
								uni.setStorageSync('userInfo', that.userInfo)
								that.getUserInfo()
							})
						},
					}
				})
			},
			clickTab(e) {
				this.tabIndex = e
				if (e === 0) {
					this.currServiceInfo()
				}
			},

		}
	}
</script>

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