jje_staff/pages/index/index.vue

<template>
	<view class="page">

					<view class="flex-row tuni">
						<image class="profile" :src="userInfo.avatar"></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"></image>
								<view class="flex-col justify-end">
									<view class="flex-row" >
										<text class="servicename">{{currService.serviceObjectName}}</text>
										<view class="flex-row justify-center tag">
											<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 ">

								<view class="flex-row hintView">
										<view class="hint">
											<text>!</text>
										</view>
									<view class="hintCentent" v-if="currService.balanceFlag">
										<text>娇宝的余额已不足，请提醒充值~</text>
									</view>
								</view>
							</view>
							<view class="flex-row justify-center ">
								<view class="flex-col itemView">
									<view class="flex-row item">
										<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 item">
										<u-icon name="/static/index/riqi.png" size="20"></u-icon>
										<text class="key">服务日期：</text>
										<text class="value">{{currService.date}}</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">{{currService.serviceUserName}}</text>
										</view>
										<view class="flex-row leftBord">
											<text class="key">预约费用：</text>
											<text class="value2">￥{{currService.bookingFee}}</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">{{currService.time}}</text>
										</view>
										<view class="flex-row leftBord">
											<text class="key">服务费用：</text>
											<text class="value2">￥{{currService.serviceFee}}</text>
										</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 + currService.bookingFee}}</text>
											</view>
										</view>
										<view class="flex-row justify-center tag1" v-if="currService.isSettle == 0" @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>
											<u-icon name="/static/index/jiaojieban.png" size="40"></u-icon>
											<text class="grid-text">服务交接</text>
										</view>
										<view>
											<u-icon name="/static/index/jiandao.png" size="40"></u-icon>
											<text class="grid-text">添加服务</text>
										</view>
										<view @click="next">
											<u-icon name="/static/index/xiayige.png" size="40"></u-icon>
											<text class="grid-text">下一位</text>
										</view>
										<view @click="takePlace">
											<u-icon name="/static/index/yijiuwei.png" size="40"></u-icon>
											<text class="grid-text">已就位</text>
										</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>
	</view>
</template>

<script>
	import MescrollItem from "./module/mescrollUni-item.vue";
	export default {
		components: {
			MescrollItem
		},
		data() {
			return {
				tabIndex:0,
				sysHeight:'',
				group1: [
					{thumb: '/static/my/idcard.png', title: '个人信息', rightText: '', to: '/myPages/aboutOur/index'}
				],
				readerHeight:'',
				readerWidth:'',
				userInfo:{},
				storeId:'1710635498257108993',
				storeName:'娇骄儿白云店',
				currService:{},
			}
		},
		onLoad(){
			let sysInfo = uni.getSystemInfoSync()
			this.sysHeight = sysInfo.windowHeight - (sysInfo.windowWidth/750) * 354  + 'px'
			this.readerHeight=sysInfo.windowHeight + 'px'
			this.readerWidth=sysInfo.windowWidth + 'px'
			console.log(this.sysHeight)

			 uni.getLocation({
				 success:(e)=>{
					 console.log(e)
				 }
			 })
			uni.setStorageSync('storeId',this.storeId)
		},
		onShow(){
			//退款成功后，刷新列表监听事件
			uni.$off('scancode')
			uni.$on('scancode',this.scancode)
			this.getUserInfo()
			this.currServiceInfo()
		},
		methods: {
			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()
				})
			},

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

			},

			currServiceInfo(){
				this.$api.service.currServiceInfo({storeId:this.storeId}).then(res=>{
					console.log(res.data.data)
					this.currService = res.data.data
				})

			},

			getUserInfo(){
				this.$api.user.getUserInfo().then(res=>{
					this.userInfo = res.data.data.user
				})
			},

			userScanCode(){
				uni.navigateTo({
					url:'/pages/scanCode/scanCode'
				})
			},

			scancode(e){
				console.log(e)
				this.$u.toast(e)
			},


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

			},

		}
	}
</script>

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