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.avatar || '/static/logo.png'"></image>
			<view class="tuniMsg">
				<view class="name ">
					<text >{{userInfo.nickName}}</text>
				</view>
				<view>
					<text class="biaoqian ">高级技师</text>
				</view>
			</view>
			<view class="flex-row justify-around tuni-right ">
				<view class="flex-col " @click="userScanCode">
					<view class="flex-row justify-center dakaIcon ">
						<text>12</text>
					</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/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.callState=='2'">
				<text>叫号</text>
			</view>
			<view class="buttonItem" @click="next" v-else>
				<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/logo.png'"></image>
					<view class="flex-col justify-end serviceInfo-rigth ">
						<view class="flex-row justify-between ">
							<view class="flex-row">
								<view class="flex-col justify-center ">
									<text class="servicename">张辉</text>
								</view>
								<view class="flex-col justify-center ">
									<text 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-row justify-center ">
					<view class="imgs">
						<view class="mmImgView" :class="{floatRight: (index+1) % 2==0,marginTop:index>1}" v-for="(i,index) in 5" :key="index">
							<image class="mmImg" mode="widthFix" src="/static/mn1.webp"></image>
						</view>
					</view>

				</view>

				<view class="flex-row justify-center">
					<view class="like">
						<text>用户爱好用户爱好用户爱好用户爱好用户爱好用户爱好用户爱好用户爱好用户爱好用户爱好用户爱好</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="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 10" :key="index" @click="serviceProjectListIndex = index">
									<text>单间造型服务</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 10" :key="index" @click="serviceProjectListIndex = index">
									<image class="serviceTeachImg"  src="/static/mm.webp" :class="{vBackGround: serviceProjectListIndex === index}"></image>
									<view class="serviceTeachName">
										<text>庞启俊</text>
									</view>
									<image v-if="serviceProjectListIndex === 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="connectPopup" @change="popupChange" type="bottom">
			<view class="addService">

				<view class="popupTitle">
					<text>选择交接人员</text>
				</view>

				<scroll-view class="scrollY" scroll-y>
					<view class="flex-row teachItem" :class="{'vBackGround': servicePersonListIndex === index}" v-for="(item,index) in servicePersonList" :key="index"  @click="servicePersonListIndex = index">
						<image class="teachImage" src="/static/index/dataNull.png"></image>
						<view class="flex-col teachMsg ">
							<view class="flex-row">
								<text class="techName">{{item.personName}}</text>
								<view v-if="i<2" class="teachTag" v-for="(iter,i) in item.postList" :key="i">
									<text>{{iter.levelName}}</text>
								</view>
							</view>
							<text class="declaration">优质服务，从我做起</text>
						</view>
						<image v-if="servicePersonListIndex === index" class="vImage" src="/static/index/xuanzhong.png"></image>
					</view>
				</scroll-view>

				<view class="flex-row justify-around">
					<view class="cancelButton" @click="closeConnectPopup">
						<text>取消</text>
					</view>
					<view class="confirmButton" @click="handover">
						<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.facePhoto || '/static/index/dataNull.png'"></image>
						<view class="flex-col objectName ">
							<text>{{item.nickName}}</text>
						</view>
						<image v-if="servicePersonListIndex === 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 {
				selectServiceObjectList:[],
				selectServiceObjectIndex:-1,
				servicePersonList:[],
				servicePersonListIndex:-1,
				serviceProjectList:[],
				serviceProjectListIndex:-1,
				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() {
		},
		methods: {
			openSelectServiceObjectPopup(){
				this.$api.service.getServiceObjectList({
					orderServiceId:this.currService.orderServiceId,
				}).then(res=>{
					this.selectServiceObjectList= res.data.data
					uni.hideTabBar()
					this.$refs.selectServiceObjectPopup.open()
				})
			},

			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.$api.service.serviceProjectList().then(res=>{
					this.serviceProjectList= res.data.data
					uni.hideTabBar()
					this.$refs.addServicePopup.open()
				})
			},

			closeAddServicePopup(){
				this.serviceProjectListIndex = -1
				this.$refs.addServicePopup.close()
			},
			addServiceProject(){
				if (this.serviceProjectListIndex === -1){
					uni.showToast({
						icon: 'none',
						duration: 2000,
						title: '请选择服务项目'
					});
					return
				}
				this.$api.service.addServiceProject(
						{
							orderServiceId:this.currService.orderServiceId,
							serviceProjectId:this.serviceProjectList[this.serviceProjectListIndex].id
						}
				).then(res=>{
					uni.showToast({
						icon: 'none',
						duration: 2000,
						title: '添加成功'
					});
					this.currServiceInfo()
					this.closeAddServicePopup()
				})
			},

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

				this.$api.service.getServicePerson({storeId:this.storeId}).then((res) => {
					this.servicePersonList = res.data.data;
					uni.hideTabBar()
					this.$refs.connectPopup.open()
				})
			},
			closeConnectPopup(){
				this.servicePersonListIndex = -1
				this.$refs.connectPopup.close()
			},
			handover(){
				if (this.servicePersonListIndex === -1){
					uni.showToast({
						icon: 'none',
						duration: 2000,
						title: '请选择服务技师'
					});
					return
				}
				this.$api.service.handover({
					orderServiceId:this.currService.orderServiceId,
					serviceUserId:this.servicePersonList[this.servicePersonListIndex].personId
				}).then(res=>{
					this.closeConnectPopup()
					this.closeAddServicePopup()
				})

			},

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

			settle() {
				this.$api.service.settle({
					orderServiceId: this.currService.orderServiceId
				}).then(res => {
					this.currServiceInfo()
				})
			},
			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() {
				this.$api.service.next({
					orderServiceId: this.currService.orderServiceId
				}).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.user
					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.storeName = JSON.parse(data).storeName
							uni.setStorageSync('storeId', that.storeId)
							uni.setStorageSync('storeName', that.storeName)

							console.log('++++++++++getScancode+++++++++++++',that.storeId,that.storeName)

							uni.getLocation({
								type: 'gcj02',
								success: (e) => {
									console.log('++++++++++getLocation++success+++++++++++',e.longitude,e.latitude)
									let param ={
										storeId:that.storeId,
										longitude:e.longitude,
										latitude:e.latitude
									}
									that.qqMap.reverseGeocoder({
										location: {
											latitude: e.latitude,
											longitude: e.longitude
										},
										success: function(res1){
											console.log('+++++++++++++++++地址信息++++++++++++++++++++++++',res1)
										}
									})
									that.$api.service.clockIn(param).then(res=>{
										that.currServiceInfo()
									})
								},
								fail:(err) =>{
									console.log('++++++++++getLocation++fail+++++++++++',err)
								}
							})


						},
					}
				})
			},
			clickTab(e) {
				this.tabIndex = e
				if (e === 0) {
					this.currServiceInfo()
				}
			},

		}
	}
</script>

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