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">
					<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" @click="next">
				<text>下一位</text>
			</view>
			<view class="buttonItem" @click="takePlace">
				<text>已就位</text>
			</view>
			<view class="buttonItem"  @click="settle">
				<text>结算</text>
			</view>
			<view class="buttonItem" @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'"></image>
					<view class="flex-col justify-end serviceInfo-rigth ">
						<view class="flex-row justify-between ">
							<view class="flex-col">
								<view class="flex-col justify-center ">
									<text class="servicename">{{currService.serviceObjectName}}</text>
								</view>
								<view class="flex-col justify-center ">
									<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">
						<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-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>
				<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="showLike">
					<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="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>
	</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 {
				showLike:false,
				previousServiceOrderId:'',
				content:'',
				selectServiceObjectList:[],
				selectServiceObjectIndex:-1,
				servicePersonList:[],
				servicePersonListIndex:0,
				serviceProjectList:[],
				serviceProjectListIndex:0,
				tabIndex: 0,
				sysHeight: '',
				readerHeight: '',
				readerWidth: '',
				userInfo: {},
				storeId: '1710635498257108993',
				storeName: '',
				currService: null,
				qqMap:new QQMapWX({key: 'ZIABZ-543WB-747UM-JL5Y7-NDS4E-HWB4M',vm: this})

			}
		},
		onLoad() {
			let sysInfo = uni.getSystemInfoSync()
			this.sysHeight = sysInfo.windowHeight - (sysInfo.windowWidth / 750) * 400 + 'px'
			this.readerHeight = sysInfo.windowHeight + 'px'
			this.readerWidth = sysInfo.windowWidth + 'px'
			// this.storeId = uni.getStorageSync('storeId')
			this.storeName = uni.getStorageSync('storeName')
			this.getUserInfo()
			this.currServiceInfo()
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			if (this.userInfo.signIn){
				this.currServiceInfo()
			}
		},
		methods: {
			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() {
				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() {
				this.showLike = true
				this.$api.service.takePlace({
					orderServiceId: this.currService.orderServiceId
				}).then(res => {
					uni.showToast({
						icon: 'success',
						duration: 2000,
						title: '操作成功'
					});
					this.$api.service.currServiceInfo({
						storeId: this.storeId
					}).then(res => {
						console.log(res.data.data)
						this.currService = res.data.data
						this.currService.avatar=this.currService.avatar.replace(/^http:/, "https:")
						let serviceFee = 0
						res.data.data.childList.forEach(item=>{
							serviceFee += item.serviceFee *1
						})
						this.currService.serviceFee = serviceFee.toFixed(2)
					})
				})
			},

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

			settle() {
				this.previousServiceOrderId = this.currService.serviceObjectId
				this.$api.service.settle({
					orderServiceId: this.currService.orderServiceId
				}).then(res => {
					this.currServiceInfo()
					this.$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.storeId){
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: '请先扫码签到'
					});
					return
				}
				this.showLike = false
				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.storeId === '' || this.storeId === null){
					return
				}
				this.$api.service.currServiceInfo({
					storeId: this.storeId
				}).then(res => {
					console.log(res.data.data)
					this.currService = res.data.data
					this.currService.avatar=this.currService.avatar.replace(/^http:/, "https:")
					let serviceFee = 0
					res.data.data.childList.forEach(item=>{
						serviceFee += item.serviceFee *1
					})
					this.currService.serviceFee = serviceFee.toFixed(2)
				})

			},

			getUserInfo() {
				this.$api.user.getUserInfo().then(res => {
					this.userInfo = res.data.data
					uni.setStorageSync('userInfo', this.userInfo )
					if (this.userInfo.avatar){
						this.getImgUrlByOssId(this.userInfo.avatar)
					}
					if (this.userInfo.signIn){
						this.currServiceInfo()
					}
				})
			},
			 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) {
							that.storeId = JSON.parse(data).storeId
							that.timestamp = JSON.parse(data).timestamp
							uni.setStorageSync('storeId', that.storeId)
							uni.setStorageSync('timestamp', that.timestamp)
							let param ={
								storeId:that.storeId,
								timestamp:that.timestamp
							}
							console.log(param)
							that.$api.service.clockIn(param).then(res=>{
								uni.showToast({
									icon: 'success',
									duration: 2000,
									title: '签到成功'
								});
								that.currServiceInfo()
							})
						},
					}
				})
			},
			clickTab(e) {
				this.tabIndex = e
				if (e === 0) {
					this.currServiceInfo()
				}
			},

		}
	}
</script>

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