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>
								<view class="flex-col justify-center ">
									<text class="servicename">{{currService.serviceObjectName}}</text>
								</view>
								<view class="">
									<text v-if="currService.isVip" class="biaoqian">会员客户</text>
									<text v-else class="biaoqian">现金客户</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 hintView">
						<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)=>{
						if (e.confirm){
							that.previousServiceOrderId = that.currService.serviceObjectId
							that.$api.service.settle({
								orderServiceId: that.currService.orderServiceId
							}).then(res => {
								that.currServiceInfo()
								that.$refs.reminderPopup.open()
							})
						}
					}
				})

			},
			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)
							this.$api.service.next({
								orderServiceId: this.currService ? this.currService.orderServiceId : null,
								storeId:this.storeId
							}).then(res => {
								this.currServiceInfo()
							})
						}
					}
				})
			},

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

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

				})

			},

			setButtomState(currService){
				if (currService){
					if (currService.status == 12){
						//叫号中
						this.buttonState=[0,0,1,1]
					}else if (currService.status == 8){
						//服务中
						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>