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 flex-col">
				<text class="name">{{userInfo.nickName}}</text>
				<view class="flex-row dizi">
					<u-icon name="/static/index/dizi.png" size="18"></u-icon>
					<text>{{storeName || '请先报道打卡'}}</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 class="flex-row justify-center">
			<view class="tab flex-row">
				<view class="tabs" :class="{selectTabs: tabIndex === 0}" @click="clickTab(0)">
					<text>服务中</text>
				</view>
				<view class="tabs" :class="{selectTabs: tabIndex === 1}" @click="clickTab(1)">
					<text>待服务</text>
				</view>
			</view>
		</view>

		<view v-if="tabIndex === 0" 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">
						<view class="flex-row">
							<text class="servicename">{{currService.serviceObjectName}}</text>
							<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 :style="{'height':'110rpx'}"></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 ">
					<view class="flex-row justify-center itemViewOut " v-for="(item,index) in currService.childList" :key="index">
						<view class="flex-col itemView " >
							<view class="flex-row justify-between item">
								<view class="flex-row">
									<u-icon name="/static/index/jiandao.png" size="20"></u-icon>
									<text class="key">服务项目：</text>
									<text class="value">{{item.serviceProject}}</text>
								</view>
								<view class="flex-row statusDesc" :class="item.status ?'statusDesc':'statusDesc1'">
									<text>{{item.statusDesc}}</text>
								</view>
							</view>
							<view class="flex-row item">
								<u-icon name="/static/index/riqi.png" size="20"></u-icon>
								<text class="key">服务日期：</text>
								<text class="value">{{item.serviceDate}}</text>
							</view>
							<view class="flex-row  item">
								<view class="flex-row">
									<u-icon name="/static/index/aixin.png" size="20"></u-icon>
									<text class="key">服务人员：</text>
									<text class="value">{{item.serviceUserName}}</text>
								</view>
							</view>

							<view class="flex-row item">
								<view class="flex-row">
									<u-icon name="/static/index/shiduan.png" size="20"></u-icon>
									<text class="key">服务时段：</text>
									<text class="value">{{item.time}}</text>
								</view>
								<view class="flex-row leftBord">
									<text class="key">服务费用：</text>
									<text class="value2">￥{{item.serviceFee}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-row justify-center">
					<view class="flex-col itemView">
						<view class="flex-row justify-between">

							<view class="flex-col justify-center">
								<view class="flex-row">
									<text class="key1">服务总金额：</text>
									<text class="value1">￥{{currService.serviceFee}}</text>
								</view>
							</view>
							<view class="flex-row justify-center tag1" v-if="currService.status == 1" @click="settle">
								<u-icon name="/static/index/qianbao.png" size="18"></u-icon>
								<text>去结算</text>
							</view>
						</view>
					</view>
				</view>

				<view class="flex-row justify-center">
					<view class="flex-row justify-around grid">
						<view @click="connect">
							<view class="flex-row justify-center">
								<u-icon name="/static/index/jiaojieban.png" size="40"></u-icon>
							</view>
							<view class="flex-row justify-center">
								<text class="grid-text">服务交接</text>
							</view>
						</view>
						<view @click="addService">
							<view class="flex-row justify-center">
								<u-icon name="/static/index/jiandao.png" size="40"></u-icon>
							</view>
							<view class="flex-row justify-center">
								<text class="grid-text">添加服务</text>
							</view>
						</view>
						<view @click="call" v-if="currService.State=='2'">
							<view class="flex-row justify-center">
								<u-icon name="/static/index/naba.png" size="40"></u-icon>
							</view>
							<view class="flex-row justify-center">
								<text class="grid-text">叫&nbsp;&nbsp;号</text>
							</view>
						</view>
						<view @click="next" v-else>
							<view class="flex-row justify-center">
								<u-icon name="/static/index/xiayige.png" size="40"></u-icon>
							</view>
							<view class="flex-row justify-center">
								<text class="grid-text">下一位</text>
							</view>
						</view>
						<view @click="takePlace">
							<view class="flex-row justify-center">
								<u-icon name="/static/index/yijiuwei.png" size="40"></u-icon>
							</view>
							<view class="flex-row justify-center">
								<text class="grid-text">已就位</text>
							</view>
						</view>
					</view>
				</view>



				<view class="flex-row justify-center start" @click="start" v-if="currService.status == 1">
					<text>开始服务</text>
				</view>
				<view class="flex-row justify-center start" @click="end" v-if="currService.status == 6">
					<text>结束服务</text>
				</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>
		<view v-if="tabIndex === 1" :style="{'height':sysHeight}">
			<mescroll-item :i="0" :index="0" :height="sysHeight">
			</mescroll-item>
		</view>

		<uni-popup ref="addServicePopup" @change="popupChange" type="bottom">
			<view class="addService">

				<view class="popupTitle">
					<text>添加服务项目</text>
				</view>

				<scroll-view class="scrollY" scroll-y>
					<view class="serviceItem" :class="{'vBackGround': serviceProjectListIndex === index}" v-for="(item,index) in serviceProjectList" :key="index" @click="serviceProjectListIndex = index">
						<view class="serviceName">
							<text>{{item.serviceName}}</text>
						</view>
						<view class="flex-row servicePrice">
							<u-icon name="rmb-circle" color="#666666"></u-icon>
							<text class="servicePriceKey">预约费用：</text>
							<text class="servicePricePrice">￥{{item.standardPrice}}</text>
						</view>
						<image v-if="serviceProjectListIndex === index" class="vImage" src="/static/index/xuanzhong.png"></image>
					</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>