shanxian-work-app/pages/index/index1.nvue

<template>
	<view class="page">
		<map id="map" :longitude='longitude' :latitude='latitude' :scale='18' @markertap="marker" :show-location="true"
		 :markers="markers" :polygons="polygons"></map>
		<!-- <footer params="current" v:if="footerShow" bind:scanCode="scanCode"></footer> -->
		<cover-view class="area">
			<cover-view @click="parkShow1"> 
				<image src="http://resource.weilaibike.com/yunwei/parkShow.png" style="width:48rpx;height:56rpx;"></image>
				<text style="color:parkAreaShow==true?'red':'black';padding-left:10rpx;">还车点</text>
			</cover-view>
			<cover-view @click="forbidShow">
				<image src="http://resource.weilaibike.com/yunwei/forbid.png" style="width:48rpx;height:56rpx;"></image>
				<text style="color:noParkAreaShow==true?'red':'black';padding-left:10rpx;">禁停区</text>
			</cover-view>
		</cover-view>
		<view class="iconHint">
			<view class="operate" @click="operate">
				<view style="height:60rpx;width:60rpx;background:#fff;border-radius:50%;" class="flexC">
					<image src="http://resource.weilaibike.com/yunwei/operation.png" style="width:46rpx;height:46rpx;"></image>
				</view>
			</view>
			<view class="flexB">
				<image src="http://resource.weilaibike.com/bike_yunwei/location.png" @click="posi"></image>
				<view @click="hintIcon" class="how">如何识别地图上的图标</view>	
				<image src="http://resource.weilaibike.com/bike_yunwei/ref.png" @click="load"></image>
			</view>
		</view>
		<view class="cover" v-if="hintShow"></view>
		<view class="hintPop" v-if="hintShow">
			<view class="hintCon">
				<view class="intr">提示说明：</view>
				<view class="icon">
					<view v-for="(item,index) in iconList1" :key="index">
						<image src="item.icon"></image>
						<text>{{item.con}}</text>
					</view>
				</view>
				<view class="close" @click="closeHint">
					<image src="http://resource.weilaibike.com/common/closePop.png"></image>
				</view>
			</view>
		</view>
		<view class="cover" v-if="sideShow" @click="closeSide"></view>
		<view class="side" v-if="sideShow">
			<view class="record flexA">
				<view @click="modify">
					<image src="http://resource.weilaibike.com/yunwei/amend.png" style="width:40rpx;height:40rpx;"></image>
					<text>修改</text>
				</view>
				<view @click="reqair">
					<image src="http://resource.weilaibike.com/yunwei/maintain.png"></image>
					<text>报修</text>
				</view>
				<view @click="bike_detail">
					<image src="http://resource.weilaibike.com/yunwei/bikeDe.png" style="width:45rpx;height:45rpx;"></image>
					<text>详情</text>
				</view>
			</view>
			<view class="bikeNo flexA">
				<input placeholder="请输入车牌号" value="bikeDetail.bike_info.bike_no" bindinput="bindKeyInput" bindblur="bindKeyInput"
				 placeholder-class="place" type="number"></input>
				<text @click="getBike_info">查找</text>
				<text @click="scanCode">扫描</text>
			</view>
			<view class="info" style="background:url('http://resource.weilaibike.com/bike_yunwei/sideBg.png') no-repeat;background-size:100% 100%;">
				<view class="infoCon">
					<view class="infoLeft">
						<view style="font-size: 30rpx;font-weight:bold;padding:10rpx 0;">车辆检测信息</view>
						<view style="margin-bottom:screenHeight=='xSeries' ? '12rpx' : '7rpx'">车牌号：{{bikeDetail.bike_info.bike_no}}</view>
						<view style="margin-bottom:screenHeight=='xSeries' ? '12rpx' : '7rpx'">当前电量：{{bikeDetail.bike_info.battery_power}}%</view>
						<view style="margin-bottom:screenHeight=='xSeries' ? '12rpx' : '7rpx'">车辆状态：{{bikeDetail.bike_info.tab_name}}</view>
					</view>
					<view class="infoRight">
						<image src="http://resource.weilaibike.com/bike_yunwei/sideRef.png" @click="refresh_power"></image>
					</view>
				</view>
				<view style="margin-bottom:screenHeight=='xSeries' ? '12rpx' : '7rpx'" class="last">{{bikeDetail.bike_info.tab_name=="中控离线"?'离线时间':'最后定位'}}：{{bikeDetail.bike_info.last_time}}</view>
			</view>
			<view class="position flexB" @click="bikePosition">
				<text>车辆位置</text>
				<!-- <van-icon name="arrow" color="#8A8A8A" /> -->
			</view>
			<view class="order " @click="recentOrder">
				<view class="flexB recent">
					<text>最近订单</text>
					<!-- <van-icon name="arrow" color="#8A8A8A" size="16px" /> -->
				</view>
				<view class="flex" style="color:#28282877;"  v-if="bikeDetail.bike_order!=''">
					<view>{{bikeDetail.bike_order[0].mobile}} </view>
					<view style="width:287rpx;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-left:15rpx;">
						{{bikeDetail.bike_order[0].username}}</view>
				</view>
				<view v-if="bikeDetail.bike_order==''" style="color:#28282877;">暂无订单信息</view>
				<view>
					<!-- <text style="color:#28282877;margin-right:10rpx;">{{bikeDetail.bike_order[0].order_status}}</text> -->
					<!-- <text v-if="bikeDetail.bike_order[0].mobile" style="color:#28282877;">{{bikeDetail.bike_order[0].start_use_bike_time_app}}-{{bikeDetail.bike_order[0].end_use_bike_time_app}}</text> -->
				</view>
			</view> 
			<view class="directive">
				<view class="dire">
					<text style="font-size:32rpx;">车辆检测指令</text>
					只开启蓝牙操控
					<!-- <switch checked="{{switch1Checked}}" bindchange="switch1Change" /> -->
				</view>
				<view>
					<view class="flexA list" style="height:100%;">
						<view style="text-align:center;margin-top:10rpx;" @click="whistle">
							<image src="/static/img/whistle.png" style="width:58rpx;height:58rpx;"></image>
							<text style="margin:15rpx 0;">鸣笛</text>
						</view>
						<view style="text-align:center;margin-top:10rpx;" @click="unlock">
							<image src="/static/img/open-lock.png" style="width:58rpx;height:58rpx;"></image>
							<text style="margin:15rpx 0;">开电车锁</text>
						</view>
						<view style="text-align:center;margin-top:10rpx;" @click="close_lock">
							<image src="/static/img/close-lock.png" style="width:58rpx;height:58rpx;"></image>
							<text style="margin:15rpx 0;">关电车锁</text>
						</view>
						<view style="text-align:center;" @click="battery_load">
							<image src="/static/img/battery-load.png" style="width:58rpx;height:58rpx;"></image>
							<text style="margin:15rpx 0;">开电池锁</text>
						</view>
						<view style="text-align:center;" @click="online">
							<image src="/static/img/online.png" style="width:62rpx;height:60rpx;"></image>
							<text style="margin:15rpx 0;">上线</text>
						</view>
						<view style="text-align:center;" @click="more">
							<image src="/static/img/more.png" style="width:62rpx;height:60rpx;"></image>
							<text style="margin:15rpx 0;">更多</text>
						</view>
					</view>
				</view>
			</view>
			<view class="workBtn">
				<view @click="showPop" :class="typeName==1?'changeWork':''" class="shelters">
					<text>工单记录</text>
					<text class="count flexC" v-if="workCount">{{workCount}}</text>
				</view>
				<view @click="showPop" :class="typeName==2?'changeWork':''" class="has">
					<text>报修记录</text>
					<text class="count flexC" v-if="repairsCount">{{repairsCount}}</text>
				</view>
			</view>
			<!-- <view class="amend flexC" bindtap="lookWork">查看工单</view> -->
		</view>
		<view class="background" v-if="moreShow" @click="coverHidn" catchtouchmove="true"></view>
		<view class="more" v-if="moreShow">
			<view @click="Offline">
				<image src="/img/offline.png" style="width:62rpx;height:60rpx;"></image>
				<text>下线</text>
			</view>
			<view @click="renewalPower">
				<image src="/img/renewalPower.png" style="width:62rpx;height:60rpx;"></image>
				<text>更新电量</text>
			</view>
			<view @click="renewalLocation">
				<image src="/img/renewalLocation.png" style="width:62rpx;height:60rpx;"></image>
				<text>更新位置</text>
			</view>
			<view @click="renewal">
				<image src="/img/renewal.png" style="width:62rpx;height:60rpx;"></image>
				<text>重启中控</text>
			</view>
			<view @click="recover">
				<image src="http://resource.weilaibike.com/bike_yunwei/park.png" style="width:50rpx;height:50rpx;"></image>
				<text>设为停车区</text>
			</view>
		</view>
		<view class="background" v-if="workShow" @click="coverHidn" catchtouchmove="true"></view>
		<view class="work" v-if="workShow">
			<view class="workTitle flexC">
				<text>{{bikeId}}</text>
				<text style="margin-left:15rpx;">工单记录</text>
			</view>
			<view class="workTab flexC">
				<view @click="workChoose" :class="workState==1?'cur':''">待领工单</view>
				<view @click="workChoose" :class="workState==2?'cur':''">已领工单</view>
			</view>
			<scroll-view class="wait" scroll-top='topNum' scroll-y="true" bindscrolltolower="moreWork" :style="list.length>=2 ? 'background:#efefef':'background:#fff'">
				<view v-for="(item,index) in list" :key="index" class="waitCon mead">
					<view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" style="item.txtStyle" class="content">
						<view style="font-size:28rpx;" class="title">
							<view class="left">{{item.type_name}}</view>
							<view class="right">{{item.planned}}</view>
						</view>
						<view class="body">
							<view class="left">
								<image style="width:90rpx;height:90rpx;" src="http://resource.weilaibike.com/yunwei/rescue.png" v-if="item.type_name=='道路救援工单'"></image>
								<image style="width:80rpx;height:80rpx;" src="http://resource.weilaibike.com/yunwei/posi.png" v-if="item.type_name=='车辆定位出现问题'"></image>
								<image style="width:100rpx;height:100rpx;" src="http://resource.weilaibike.com/bike_yunwei/outLi.png" v-if="item.type_name=='离线工单'"></image>
								<image style="width:100rpx;height:100rpx;" src="http://resource.weilaibike.com/yunwei/fault.png" v-if="item.type_name=='故障工单'"></image>
								<image style="width:90rpx;height:90rpx;" src="http://resource.weilaibike.com/yunwei/charge.png" v-if="item.type_name=='充电工单'"></image>
								<image style="width:100rpx;height:100rpx;" src="http://resource.weilaibike.com/yunwei/steal.png" v-if="item.type_name=='偷盗工单'"></image>
								<image style="width:90rpx;height:90rpx;" src="http://resource.weilaibike.com/yunwei/look1.png" v-if="item.type_name=='查看工单'"></image>
								<image style="width:90rpx;height:90rpx;" src="http://resource.weilaibike.com/yunwei/otherWork.png" v-if="item.type_name=='其他工单'"></image>
								<image style="width:100rpx;height:100rpx;" src="http://resource.weilaibike.com/yunwei/alarm1.png" v-if="item.type_name=='警报工单'"></image>
								<image style="width:80rpx;height:80rpx;" src="http://resource.weilaibike.com/yunwei/leader.png" v-if="item.type_name=='组长工单'"></image>
								<image style="width:100rpx;height:100rpx;" src="http://resource.weilaibike.com/yunwei/prepare.png" v-if="item.type_name=='备用电池电量低报警'"></image>
								<image style="width:90rpx;height:90rpx;" src="http://resource.weilaibike.com/xiaobanma_yunwei/lowPower_xbm.png"
								 v-if="item.type_name=='断电工单'"></image>
							</view>
							<view class="right">
								<view class="reason" style="width:100%;color:#555;font-size:28rpx; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">原因：{{item.reason?item.reason:item.type_name}}</view>
								<view class="reason" style="color:#999999;flex-grow:1;">来源：{{item.source}}</view>
							</view>
						</view>
						<view class="time">更新时间：{{item.updated_at}}</view>
					</view>
					<view :class="workState==1?'get':'finish'" class="del" @click="workState==1?'getWork':'finishWork'">{{workState == 1 ? '领取':'完成'}}
					</view>
				</view>

				<view class="no" v-if="list.length == 0">
					<image src="http://resource.weilaibike.com/none.png"></image>
					<view>暂无相关数据~</view>
				</view>
			</scroll-view>
		</view>
		<view class="background" v-if="repairsShow" @click="coverHidn" catchtouchmove="true"></view>
		<view class="work" v-if="repairsShow">
			<view class="workTitle flexC">
				<text>{{bikeId}}</text>
				<text style="margin-left:15rpx;">报修记录</text>
			</view>
			<view class="workTab flexC">
				<view @click="repairsChoose" :class="repairsState==1?'cur':''">未读</view>
				<view @click="repairsChoose" :class="repairsState==2?'cur':''">已读</view>
			</view>
			<scroll-view class="wait" scroll-y="true" bindscrolltolower="morkRepairs" :style="repairsList.length>=2 ? 'background:#efefef':'background:#fff'"
			 scroll-top='topNum'>
				<view v-for="(item,index) in repairsList" :key="index" class="waitCon mead">
					<view style="item.txtStyle" class="content">
						<view style="font-size:28rpx;" class="title">
							<view class="left">{{item.trouble_part}}</view>
							<view class="right" v-if="repairsState==1" @click="markRead">标为已读</view>
						</view>
						<view class="body">
							<view class="left">
								<image style="height:50rpx;width:112rpx" src="http://resource.weilaibike.com/yunwei/rep4.png" v-if="item.trouble_part=='刹车'"></image>
								<image style="height:96rpx;width:96rpx" src="http://resource.weilaibike.com/yunwei/rep6.png" v-if="item.trouble_part=='车胎'"></image>
								<image style="height:58rpx;width:116rpx" src="http://resource.weilaibike.com/yunwei/rep5.png" v-if="item.trouble_part=='链条'"></image>
								<image style="height:66rpx;width:116rpx" src="http://resource.weilaibike.com/yunwei/rep1.png" v-if="item.trouble_part=='车座'"></image>
								<image style="height:80rpx;width:60rpx" src="http://resource.weilaibike.com/yunwei/rep2.png" v-if="item.trouble_part=='二维码'"></image>
								<image style="height:72rpx;width:64rpx" src="http://resource.weilaibike.com/yunwei/rep3.png" v-if="item.trouble_part=='其他'"></image>
							</view>
							<view class="right">
								<view class="describe">问题描述：{{item.trouble_description}}</view>
							</view>
						</view>
						<view class="time">
							<text>创建时间：{{item.created_at}}</text>
							<text @click="phone" style="margin-left:40rpx;">手机号：{{item.users.mobile}}</text>
						</view>
						<!-- <view class="block"></view> -->
					</view>
				</view>
				<view class="no" v-if="repairsList.length == 0">
					<image src="http://resource.weilaibike.com/none.png"></image>
					<view>暂无相关数据~</view>
				</view>
			</scroll-view>
		</view>
		<!-- <footer params="current" v-if="footerShow" bind:scanCode="scanCode"></footer> -->
	</view>
</template>
<script>
	var app = getApp()
	export default {
		data() {
			return {
				current: 3,
				bike_no: '', //车牌号
				hintShow: false, //是否显示提示弹窗
				sideShow: false, //是否显示侧边栏
				footerShow: true,
				iconList1: [{
						icon: "http://resource.weilaibike.com/xiaobanma_yunwei/outline_xbm.png",
						con: "下线"
					},
					{
						icon: "http://resource.weilaibike.com/xiaobanma_yunwei/lowPower_xbm.png",
						con: "低电量"
					},
					{
						icon: "http://resource.weilaibike.com/xiaobanma_yunwei/noUser_xbm.png",
						con: "未使用"
					},
					{
						icon: "http://resource.weilaibike.com/trobole.png",
						con: "故障"
					},
					{
						icon: "http://resource.weilaibike.com/xiaobanma_yunwei/repair_xbm.png",
						con: "待维修"
					},
					{
						icon: "http://resource.weilaibike.com/xiaobanma_yunwei/noInPark_xbm.png",
						con: "未在停车区"
					},
					{
						icon: "http://resource.weilaibike.com/xiaobanma_yunwei/riding_xbm.png",
						con: "骑行中"
					},
					{
						icon: "http://resource.weilaibike.com/bike_yunwei/outLi.png",
						con: "离线"
					},
					{
						icon: "http://resource.weilaibike.com/bike_yunwei/work.png",
						con: "运维人员骑行"
					},
				],
				markers: [], //显示单车、停车的P
				polygons: [], //区域
				longitude: '113.779801',
				latitude: '34.753993',
				// allArea: [{
				//   text: '全部区域',
				//   value: 0,
				//   areaID: ''
				// }],
				allArea: [],
				allEle: [{
						text: '全部电量',
						value: 0,
						areaID: ''
					},
					{
						text: '70%以下',
						value: 1,
						areaID: '70'
					},
					{
						text: '60%以下',
						value: 2,
						areaID: '60'
					},
					{
						text: '50%以下',
						value: 3,
						areaID: '50'
					},
					{
						text: '30%以下',
						value: 4,
						areaID: '30'
					},
					{
						text: '20%以下',
						value: 5,
						areaID: '20'
					},
				],
				allStatus: [{
					text: '全部状态',
					value: 0,
					areaID: ''
				}],
				allDay: [{
						text: '使用状态',
						value: 0
					},
					{
						text: '1天未使用',
						value: 1
					},
					{
						text: '3天未使用',
						value: 2
					},
					{
						text: '7天未使用',
						value: 3
					}
				],
				area: 0,
				ele: 0,
				status: 0,
				day: 0,
				show: false, //车子详情的布尔值
				longitude: '113.779801',
				latitude: '34.753993',
				id: '', //停车区域的ID
				stopP: false, //判断是否显示停车区域
				polygons1: [], //可骑行区域 先用这个变量代表
				controls: [], //地图上当前定位的箭头
				background: '', //弹窗的背景颜色
				over: '', //关闭图标
				location: '', //是否有位置权限
				bluetooth: false, //是否开启蓝牙 false开始 true未开启
				box_no: '', //中控编号
				bikeDetail: [],
				bikeId: '',
				areaID: '',
				low_power: '',
				state: '',
				use_state: '',
				parkAreaShow: false, //还车点是否显示
				noParkAreaShow: true, //禁停区是否显示
				ridding: true,
				moreShow: false,
				screenHeight: '', //屏幕可视高度
				areas: [],
				parking: [],
				parking_points: [],
				no_parking: [],
				no_parking_points: [],
				parkShow: '',
				switch1Checked: '',
				delBtnWidth: 200, //删除或完成 按钮宽度
				typeName: '', //1 待认领工单  2已领工单
				page: 1, //当前页面
				workShow: false, //工单弹窗
				workCount: '', //侧边栏报修数量（未读）
				list: [], //工单列表
				workState: 1, //工单列表状态【1 待领取  2已领】
				repairsList: [], //报修列表
				repairsCount: '', //侧边栏工单数量（未认领）
				repairsState: 1, //报修列表状态【1 未读  2已读】
				repairsShow: false, //是否显示报修弹窗 【false 不显示  true 显示】
				topNum: 0,
			}
		},
		methods: {
			touchS: function(e) {
				if (e.touches.length == 1) {
					this.startX = e.touches[0].clientX
					//设置触摸起始点水平方向位置
				}
			},
			touchM: function(e) {
				// console.log(this.data.list[index].txtStyle)
				// console.log(e);
				if (e.touches.length == 1) {
					//手指移动时水平方向位置
					var moveX = e.touches[0].clientX;
					//手指起始点位置与移动期间的差值
					var disX = this.startX - moveX;
					// console.log(disX,'disX')
					var delBtnWidth = this.delBtnWidth;
					var txtStyle = "";
					if (disX == 0 || disX < 0) { //如果移动距离小于等于0，文本层位置不变
						txtStyle = "left:0rpx";
					} else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离
						txtStyle = "left:-" + disX + "rpx";
						if (disX >= delBtnWidth) {
							//控制手指移动距离最大值为删除按钮的宽度
							txtStyle = "left:-" + delBtnWidth + "rpx";
						}
					}
					//获取手指触摸的是哪一项
					var index = e.currentTarget.dataset.idx;
					var list = this.list;
					list[index].txtStyle = txtStyle;
					//更新列表的状态
					this.list = list
				}
			},
			touchE: function(e) {
				if (e.changedTouches.length == 1) {
					//手指移动结束后水平位置
					var endX = e.changedTouches[0].clientX;
					//触摸开始与结束，手指移动的距离
					var disX = this.startX - endX;
					var delBtnWidth = this.delBtnWidth;
					//如果距离小于删除按钮的1/2，不显示删除按钮
					var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx" : "left:0rpx";
					//获取手指触摸的是哪一项
					var index = e.currentTarget.dataset.idx;
					var list = this.list;
					list[index].txtStyle = txtStyle;
					//更新列表的状态
					this.list = list
				}
			},
			goTop: function(e) { // 一键回到顶部
				this.topNum = 0
			},
			coverHidn:function(e) {
				let show = e.currentTarget.dataset.show;
				if (show == 1) {
					this.moreShow = false;
					this.workState = 1;
				} else if (show == 2) {
					this.workShow = false;
					this.typeName = '';
				} else if (show == 3) {
					this.repairsShow = false;
					this.typeName = '';
					this.repairsState = 1;
				}
			},
			phone:function(e) {
				console.log(1111)
				uni.makePhoneCall({
					phoneNumber: e.currentTarget.dataset.phone
				})
			},
			showPop:function(e) {
				let show = e.currentTarget.dataset.idx;
				this.typeName = show;
				if (show == 1) {
					this.workShow = true;
					this.lookWork();
				} else if (show == 2) {
					this.repairsShow = true;
					this.lookRepairs();
				}
			},
			workChoose:function(e) {
				uni.showLoading({
					title: '加载中...',
				})
				let state = e.currentTarget.dataset.state;
				this.workState = state;
				this.list = []
				this.lookWork();
				this.goTop();
			},
			//工单列表 
			lookWork:function() {
				uni.showLoading({
					title: '加载中...',
				})
				let that = this;
				let planned = '';
				let url = "";
				let state = that.workState
				// console.log(state, 'workState')
				if (state == 1) {
					planned = 1
					url = "work_order/list?planned=" + planned + "&bike_no=" + that.bikeId
				} else {
					let planned = 2;
					url = 'work_order/myWorkOrderList?planned=' + planned + "&bike_no=" + that.bikeId
				}
				app.request(url, '', 'GET').then(res => {
					uni.hideLoading();
					let work = res.data.data;
					// console.log(work, '工单列表')
					if (work.length == 0) {
						// uni.showToast({
						//   title: '暂无工单~',
						//   icon: 'none'
						// })
						this.list = ''
					} else {
						work.map(i => {
							i.txtStyle = 'left:0rpx'
						})
						this.workShow = true;
						this.list = work;
						// console.log(that.data.list, 'list')
					}
				})
			},
			//接单
			getWork:function(e) {
				uni.showLoading({
					title: '领取中...',
				})
				let id = e.currentTarget.dataset.id
				console.log(id, 'getWorkid');
				app.request('work_order/receive?work_order_id=' + id, '', 'GET').then(res => {
					uni.hideLoading();
					console.log(res)
					if (res.statusCode == 200) {
						uni.showToast({
							title: '接单成功',
							icon: "none"
						})
						let work = this.list;
						work.map((i, index) => {
							if (i.id == id) {
								work.splice(index, 1)
								console.log(i)
							}
						})
						let count = this.workCount
						count = count - 1
						this.list = work;
						this.workCount = count;
						if (work.length == 0) {
							uni.showToast({
								title: '该车辆已无待领工单~',
								icon: 'none'
							})
							this.workShow = false;
							this.workCount = ''
						}
					}
				})
			},
			//完成
			finishWork:function(e) {
				uni.showLoading({
					title: '操作中...',
				})
				// console.log('finishWork')
				let id = e.currentTarget.dataset.id
				console.log(id, 'finishWorkId')
				app.request('work_order/over?work_order_id=' + id, '', 'GET').then(res => {
					uni.hideLoading();
					if (res.statusCode == 200) {
						console.log(res)
						uni.showToast({
							title: '操作成功',
							icon: "none"
						})
						let list = this.list
						list.map((i, index) => {
							if (i.id == id) {
								console.log(i)
								list.splice(index, 1)
							}
						})
						this.list = list;
						if (list.length == 0) {
							uni.showToast({
								title: '已完成所有认领工单~',
								icon: 'none'
							})
							this.workShow = false;
						}
					}
				})
			},
			//上拉加载
			moreWork:function() {
				uni.showLoading({
					title: '加载中...',
				})
				let that = this;
				var page = that.page + 1;
				let planned = '';
				let url = "";
				if (that.workState == 1) {
					planned = 1
					url = "work_order/list?planned=" + planned + "&bike_no=" + that.bikeId + '&page=' + page
				} else {
					planned = 2
					url = 'work_order/myWorkOrderList?planned=' + planned + "&bike_no=" + that.bikeId + '&page=' + page
				}
				app.request(url, '', 'GET').then(res => {
					uni.hideLoading();
					if (res.data.data.length > 0) {
						let work = res.data.data
						work.map(i => {
							i.txtStyle = 'left:0rpx'
						})
						this.workShow = true;
						this.list = that.list.concat(work);
						this.page = page;
					} else {
						uni.showToast({
							title: '没有更多数据了~',
							icon: 'none'
						})
					}
				})
			},
			//报修列表
			lookRepairs:function() {
				uni.showLoading({
					title: '加载中...',
				})
				let status = ''
				let state = this.repairsState
				if (state == 1) {
					status = 0
				} else if (state == 2) {
					status = 1
				}
				app.request('user/userRepaired?bike_no=' + this.bikeId + '&status=' + status, '', 'GET').then(res => {
					if (res.statusCode == 200) {
						uni.hideLoading();
						// console.log(res, '报修列表')
						let list = res.data.data;
						if (list.length == 0) {
							// uni.showToast({
							//   title: '暂无报修记录~',
							//   icon: 'none'
							// })
							this.repairsList = []
						} else {
							let repairs = res.data.data;
							repairs.map(i => {
								i.txtStyle = 'left:0rpx'
							})
							this.repairsList = res.data.data;
						}
					}
				})
			},
			repairsChoose:function(e) {
				let state = e.currentTarget.dataset.state;
				this.repairsState = state;
				this.repairsList = [];
				this.lookRepairs();
				this.goTop();
			},
			markRead:function(e) {
				let id = e.currentTarget.dataset.id
				app.request('user/userRepaired/status?id=' + id, '', 'GET').then(res => {
					if (res.statusCode == 200) {
						console.log(res)
						this.lookRepairs();
						let list = this.repairsList;
						if (list.length == 0) {
							uni.showToast({
								title: '暂无报修~',
								icon: 'none'
							})
							this.repairsCount = ''
						} else {
							let count = this.repairsCount;
							count = count - 1;
							this.repairsCount = count;
						}
					}
				})
			},
			morkRepairs:function() {
				uni.showLoading({
					title: '加载中...',
				})
				let that = this;
				let status = '';
				var page = that.page + 1;
				let state = this.repairsState
				if (state == 1) {
					status = 0
				} else if (state == 2) {
					status = 1
				}
				app.request('user/userRepaired?bike_no=' + this.bikeId + '&status=' + status + '&page=' + page, '', 'GET').then(res => {
					uni.hideLoading();
					if (res.statusCode == 200) {
						let list = res.data.data;
						if (list.length > 0) {
							this.repairsList = that.repairsList.concat(list);
							this.page = page;
						} else {
							uni.showToast({
								title: '没有更多数据了~',
								icon: 'none'
							})
						}
					}
				})
			},
			more: function() {
				this.moreShow = true;
			},
			async initData(isLoad = false) {
				var that = this;
				this.markers = [];
				uni.showLoading({
					title: '加载中...',
				})
				await app.request('getAreas?put_area_id=' + that.areaID, '', 'GET').then(res => {
					uni.hideLoading();
					// console.log(res.data.ridding_area);
					let data = res.data
					that.ridding_area = data.ridding_area;
					that.no_parking = data.no_parking_area;
					that.no_parking_points = data.no_parking_points;
					that.parking = data.parking_area;
					that.parking_points = data.parking_points;
					if (isLoad) {
						this.showArea(1)
						if (this.noParkAreaShow) this.showNoParking(0)
						if (this.parkAreaShow) this.showParking(0)
					}
				})
			},
			showArea:function(type = 0) {
				if (type) {
					this.polygons = this.ridding_area;
				} else {
					this.polygons = this.polygons.concat(this.ridding_area)
				}
			},
			clear:function(type=0) {
				if (type === 0) {
					let polygons = this.polygons.filter((polygons) => {
						if (polygons.id.slice(0, 1) === 'A') {
							return false
						}
						return true
					})
					this.polygons = polygons;
				}
				if (type === 1) {
					let polygons = this.polygons.filter((polygons) => {
						if (polygons.id.slice(0, 1) !== 'P') {
							return true
						}
						return false
					})

					let markers = this.markers.filter((polygons) => {
						if (polygons.id.slice(0, 1) !== 'p') {
							return true
						}
						return false
					})
					this.polygons = polygons;
					this.markers = markers;
				}

				if (type === 2) {
					let polygons = this.polygons.filter((polygons) => {
						if (polygons.id.slice(0, 1) !== 'N') {
							return true
						}
						return false
					})

					let markers = this.markers.filter((polygons) => {
						if (polygons.id.slice(0, 1) !== 'n') {
							return true
						}
						return false
					})
					this.polygons = polygons;
					this.markers = markers;
				}
			},
			//显示还车点 0：追加停车点 1：只显示停车点 2：删除停车点
			showParking:function(type = 0) {
				if (type === 0) {
					this.polygons = this.polygons.concat(this.parking);
					this.markers = this.markers.concat(this.parking_points);
				}
				if (type === 1) {
					this.polygons = this.parking;
					this.markers = this.markers;
				}

				if (type === 2) {
					this.clear(1)
				}
			},
			showNoParking:function(type = 0) {
				if (type === 0) {
					this.polygons = this.polygons.concat(this.no_parking);
					this.markers = this.markers.concat(this.no_parking_points);
				}
				if (type === 1) {
					this.polygons = this.no_parking;
					this.markers = this.no_parking_points;
				}
				if (type === 2) {
					this.clear(2)
				}
			},
			scanCode: function() {
				var that = this;
				console.log('scanCode')
				uni.scanCode({
					success: function(res) {
						let index = res.result.lastIndexOf("\=");
						var code = res.result.substring(index + 1, res.result.length);
						that.bikeId = code;
						that.getBike_info(code)
					},
					fail: function() {
						uni.showModal({
							title: '提示',
							content: '手动输入车辆标号',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/manualInp/manualInp',
									})
								}
							}
						})
					}
				})
			},
			getBikes: function(clear = 0) {
				uni.showLoading({
					title: '加载中...',
				})
				var that = this;
				var areaId = that.areaID;
				var low_power = that.low_power;
				var state = that.state;
				var use_state = that.use_state;
				let time = parseInt(use_state / 1000)
				if (time === 0) {
					time = ''
				}
				var data = {
					put_area_id: areaId,
					battery_power: low_power,
					all_states: state,
					last_use_bike_end_time: time
				};

				app.request('getBikes', data, 'POST').then(res => {
					uni.hideLoading();
					// console.log(res, 'bikes')
					let markers = this.markers
					if (clear) {
						markers = that.markers.filter((marker) => {
							if (marker.id.slice(0, 1) === 'B') {
								return false
							}
							return true
						})
					}
					that.markers = markers.concat(res.data);
				})
			},
			load: function() {
				uni.showLoading({
					title: '刷新中...',
				})
				this.markers = [];
				if (this.noParkAreaShow) {
					this.showNoParking(0);
				} else {
					this.showNoParking(2);
				}
				if (this.parkAreaShow) {
					this.showParking(0)
				} else {
					this.showParking(2)
				}
				this.getBikes(1);
				uni.hideLoading();
			},
			posi: function() {
				uni.showLoading({
					title: '定位中...',
				})
				//点击定位  
				var that = this;
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						uni.hideLoading();
						console.log(res, '定位信息')
						that.longitude = res.longitude;
						that.latitude = res.latitude;
					},
					fail: function(err) {
						uni.hideLoading();
						console.log(err)
					}
				})
			},
			change: function(e) {
				let that = this;
				console.log(e.detail)
				uni.setStorageSync('curVal', that.allArea[e.detail].value)
				uni.setStorageSync('curId', that.allArea[e.detail].areaID)
				this.areaID = that.allArea[e.detail].areaID;
				this.initData(1)
				that.getBikes(1)
			},
			change2: function(e) { //选择电量
				console.log(e)
				this.low_power = this.allEle[e.detail].areaID
				this.getBikes(1);
			},
			change3: function(e) { //选择状态
				console.log(e)
				this.state = this.allStatus[e.detail].areaID;
				this.getBikes(1)
			},
			change4: function(e) { //选择使用状态
				var time = new Date().getTime();
				var index = e.detail
				if (index == 0) {
					time = "";
				} else if (index == 1) {
					time = time - 86400000 * 1;
				} else if (index == 2) {
					time = time - 86400000 * 3;
				} else if (index == 3) {
					time = time - 86400000 * 7;
				}
				this.setData({
					use_state: time
				})
				this.getBikes(1)
			},
			marker: function(e) {
				console.log(e)
				// return;
				if (this.repairsShow || this.sideShow || this.workShow) return;
				// let type = markerId.slice(0, 1)
				//车辆索引
				// if (type === 'B') {

				// }
				var id = e.detail.markerId;
				id = id.substring(1, id.length);
				console.log(id)
				this.getBike_info(id)
			},
			// 获取车辆信息
			getBike_info: function(bikeId = false) {
				uni.showLoading({
					title: '加载中...',
				})
				if (typeof bikeId === 'object') {
					bikeId = this.bikeId
				}
				console.log(bikeId, 'bikeId')
				this.bikeId = bikeId;
				console.log(this.bikeId, 'bike_no')
				app.request('bike/getBikeInfo?bike_no=' + this.bikeId, '', 'GET').then(res => {
					uni.hideLoading();
					console.log(res, '获取车辆信息')
					if (res.data.bike_info == '') {
						this.sideShow = false;
						uni.showToast({
							title: '暂无该车辆信息~',
						})
					} else {
						this.bikeDetail = res.data;
						this.sideShow = true;
						this.footerShow = false;
					}
				})
				app.request("work_order/list?planned=" + 1 + "&bike_no=" + bikeId, '', 'GET').then(res => {
					if (res.statusCode == 200) {
						// console.log(res.data.meta.total, '工单数量')
						this.workCount = res.data.meta.total;
					}
				})
				app.request('user/userRepaired?bike_no=' + bikeId + '&&status=' + 0, '', 'GET').then(res => {
					// console.log(res.data)
					// console.log(res.data.meta.total, '报修数量')
					this.repairsCount = res.data.meta.total
				})
			},
			//获取输入框的值
			bindKeyInput:function(e) {
				// console.log(e.detail.value, 11111)
				this.bikeId = e.detail.value;
			},
			refresh_power: function() {
				this.getBike_info(this.bikeId), uni.showToast({
					title: '刷新完成',
					icon: 'none'
				})
			},
			bikePosition: function() {
				uni.navigateTo({
					url: '/pages/carPosition/carPosition?id=' + this.bikeDetail.bike_info.id + '&bike_no=' + this.bikeDetail.bike_info.bike_no,
				})
			},
			recentOrder: function() {
				console.log(123)
				uni.navigateTo({
					url: '../index/recentOrder?id=' + this.bikeDetail.bike_info.id
				})
			},
			showPopup:function() {
				this.show = true;
			},
			onClose:function() {
				this.show = false;
			},
			modify: function() {
				//跳转修改车辆信息
				var bike = this.bikeDetail.bike_info
				uni.navigateTo({
					url: '/pages/amendCar/amendCar?id=' + bike.id + '&bike_no=' + bike.bike_no + '&box_no=' + bike.box_no,
				})
			},
			parkShow1: function() {
				this.parkAreaShow = !this.parkAreaShow
				if (this.parkAreaShow) {
					this.showParking(0)
				} else {
					this.showParking(2)
				}
			},
			forbidShow:function() {
				this.noParkAreaShow = !this.noParkAreaShow
				if (this.noParkAreaShow) {
					this.showNoParking(0);
				} else {
					this.showNoParking(2);
				}
			},
			//显示图标提示弹窗
			hintIcon:function() {
				this.hintShow = true;
				uni.hideTabBar({});
			},
			// 关闭图标提示弹窗
			closeHint:function() {
				this.hintShow = false;
				uni.showTabBar({})
			},
			//关闭侧边栏
			closeSide:function() {
				this.sideShow = false;
				this.footerShow = true;
				this.workShow = false;
				this.workState = 1;
				this.repairsState = 1;
				this.typeName = '';
				uni.showTabBar({})
			},
			//调转我的工单
			skipWork:function() {
				uni.navigateTo({
					url: '/pages/myWork/myWork',
				})
			},
			// 鸣笛
			whistle:function() {
				var that = this;
				app.request('bike/bikeBell?bike_id=' + that.bikeDetail.bike_info.id, '', 'GET').then(res => {
					if (res.statusCode == 200) {
						// bluM.connectDeivece(that.bikeDetail.bike_info.box_no).then(res => {
						//   return bluM.bellBike()
						// })
						uni.showToast({
							title: '响铃成功',
							icon: 'none'
						})
					}
				})
			},
			//开锁
			unlock:function() {
				var that = this;
				app.request('bike/openBikeLock?bike_id=' + that.bikeDetail.bike_info.id, '', 'GET').then(res => {
					if (res.statusCode == 200) {
						uni.showToast({
							title: '开锁成功',
							icon: 'none'
						})
					}
				})
			},
			//关锁
			close_lock:function() {
				var that = this;
				app.request('bike/closeBikeLock?bike_id=' + that.bikeDetail.bike_info.id, '', 'GET').then(res => {
					if (res.statusCode == 200) {
						uni.showToast({
							title: '关锁成功',
							icon: 'none'
						})
					}
				})
			},
			bike_detail: function() {
				//车辆详情页面  
				var bike = this.bikeDetail.bike_info;
				console.log(bike)
				uni.navigateTo({
					url: '/pages/carDetails/carDetails?bike_no=' + bike.bike_no + '&id=' + bike.id,
				})
			},
			reqair: function() {
				var bike = this.bikeDetail.bike_info;
				uni.navigateTo({
					url: '/pages/reqair/reqair?bike_no=' + bike.bike_no,
				})
			},
			//开电池锁
			battery_load:function() {
				var that = this;
				app.request('bike/openBatteryLock?bike_id=' + that.bikeDetail.bike_info.id, '', 'GET').then(res => {
					if (res.statusCode == 200) {
						uni.showToast({
							title: '开电池锁成功',
							icon: 'none'
						})
					}
				})
			},
			renewalPower: function() {
				//更新电量
				app.request('bike/newBikeBatteryMSG?bike_id=' + this.bikeDetail.bike_info.id, '', 'GET').then(res => {
					// console.log(res)
					if (res.statusCode == 200) {
						uni.showToast({
							title: '更新电量成功',
							icon: 'none'
						})
					}
				})
			},
			renewalLocation: function() {
				//更新位置
				app.request('bike/newBikeLocation?bike_id=' + this.bikeDetail.bike_info.id, '', 'GET').then(res => {
					if (res.statusCode == 200) {
						uni.showToast({
							title: '更新位置成功',
							icon: 'none'
						})
					}
				})
			},
			renewal: function() {
				//重启中控
				var that = this;
				app.request('bike/rebootBox?bike_id=' + that.bikeDetail.bike_info.id, '', 'GET').then(res => {
					if (res.statusCode == 200) {
						uni.showToast({
							title: '重启中控成功',
							icon: 'none'
						})
					}
				})
			},
			// 设为停车区
			recover:function() {
				app.request('bike/repairInParking?bike_id=' + this.bikeDetail.bike_info.id, '', 'GET').then(res => {
					// console.log(res)
					if (res.statusCode == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						})
					}
				})
			},
			//上线
			online:function() {
				app.request('bike/login?bike_id=' + this.bikeDetail.bike_info.id, '', 'GET').then(res => {
					// console.log(res)
					if (res.statusCode == 200) {
						uni.showToast({
							title: '上线成功',
							icon: 'none'
						})
					}
				})
			},
			//下线
			Offline:function() {
				app.request('bike/logout?bike_id=' + this.bikeDetail.bike_info.id, '', 'GET').then(res => {
					console.log(res)
					if (res.statusCode == 200) {
						uni.showToast({
							title: '下线成功',
							icon: 'none'
						})
					}
				})
			},
			operate:function() {
				uni.navigateTo({
					url: '/pages/bikeInfo/bikeInfo'
				})
			},
		},
		onLoad(options) {
			// console.log(app.request())
			console.log(uni.getStorageSync('allArea'), 'allArea')
			var that = this;
			that.screenHeight = app.globalData.screenHeight;
			let timer = setTimeout(function() {
				if (uni.getStorageSync('allArea')) {
					that.allArea = uni.getStorageSync('allArea');
					that.allStatus = uni.getStorageSync('allState');
				}
				console.log(that.allArea)
				let curVal = uni.getStorageSync('curVal')
				console.log(curVal, 'log_curVal')
				if (curVal) {
					that.area = curVal;
				}
				let areaID = uni.getStorageSync('curId')
				console.log(areaID, 'log_areaID')
				if (areaID) {
					that.areaID = areaID;
				} else {
					let id = that.allArea[0].areaID
					that.areaID = id
				}
				// that.menu = that.selectComponent("#menu");
				// that.menu.changeTitle(that.data.allArea[that.data.area].text);
			}, 500)
			that.posi(); //获取当前位置
			this.initData(1)
			if (options.bike_no) {
				that.getBike_info(options.bike_no)
			}
			if (options.scan == 1) {
				this.scanCode();
			}
			that.getBikes();
			// that.lookWork();
			// that.initEleWidth();
		},
	}
</script>
<style>
	@import url('/static/base.css');
</style>
<style>
	page {
		width: 100%;
		height: 100%;
	}

	uni-page-body {
		width: 100%;
		height: 100%;
	}

	.page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: hidden;
		position: relative;
	}

	map {
		width: 100%;
		height: 100%;
	}


	.uni-cover-view{
		display: flex;
		align-items: center;
	}
	.top {
		position: fixed;
		z-index: 999;
		left: 0rpx;
		top: 0rpx;
		width: 100%;
	}

	.area {
		position: fixed;
		display: flex;
		width: 460rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 3rpx 6rpx 0px rgba(190, 190, 190, 1);
		border-radius: 10rpx;
		top: 270rpx;
		justify-content: space-around;
		left: 0rpx;
	}

	.area view {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(40, 40, 40, 1);
		width: 33%;
		justify-content: center;
	}

	.top .back {
		width: 100%;
		height: 6rpx;
		background: rgba(239, 239, 239, 1);
	}

	.top .flex {
		display: flex;
		width: 100%;
		justify-content: space-around;
		background: white;
		height: 75rpx;
	}

	.button {
		width: 216rpx;
		height: 129rpx;
		background: rgba(24, 213, 185, 1);
		box-shadow: 0rpx 8rpx 13rpx 0rpx rgba(100, 239, 218, 1);
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		z-index: 777;
		top: 78%;
		left: 50%;
		margin-left: -108rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	van-cell {
		width: 100rpx !important;
		height: 100rpx !important;
	}

	.view {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.view image {
		width: 84rpx;
		height: 84rpx;
	}

	.how {
		bottom: 15%;
		right: 30%;
		font-size: 24rpx;
		height: 68rpx;
		width: 336rpx;
		text-align: center;
		color: #fff;
		background: url(http://resource.weilaibike.com/bike_yunwei/iconHint.png) no-repeat;
		background-size: cover;
		padding-top: 10rpx;
		box-sizing: border-box;
	}

	.iconHint {
		position: absolute;
		bottom: 15%;
		left: 0;
		width: 100%;
		margin: 0 auto;
	}

	.iconHint .operate {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 30rpx;
	}

	.iconHint>view {
		width: 85%;
		margin: 0 auto;
	}

	.iconHint image {
		height: 72rpx;
		width: 72rpx;
	}

	/* 图标提示弹窗 */

	.hintPop {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 9999;
	}

	.hintCon {
		width: 526rpx;
		height: 733rpx;
		background-image: url('http://resource.weilaibike.com/popBg.png');
		background-size: 100% 100%;
	}

	.hintCon .intr {
		padding-top: 241rpx;
		font-size: 35rpx;
		color: #f00;
		padding-left: 20rpx;
	}

	.hintCon .icon {
		flex-grow: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		height: 55%;
		margin: 20rpx 0 0 35rpx;
	}

	.hintCon .icon view {
		width: 50%;
	}

	.hintCon .icon image {
		width: 55rpx;
		height: 55rpx;
		margin-right: 15rpx;
		vertical-align: middle;
	}

	.hintCon text {
		font-size: 26rpx;
	}

	.hintCon .icon>view>view {
		margin-top: 28rpx;
	}

	.hintCon .close {
		text-align: center;
	}

	.hintCon .close image {
		height: 52rpx;
		width: 52rpx;
		margin-top: 153rpx;
	}

	/* 侧边栏 */

	.side {
		position: absolute;
		top: 0;
		left: 20%;
		z-index: 7777;
		background: #efefef;
		height: 100%;
		width: 80%;
		overflow: hidden;
		padding-top: 80rpx;
	}

	.record,
	.bikeNo,
	.position,
	.order,
	.directive {
		background: #fff;
		width: 92%;
		border-radius: 10rpx;
		padding: 0 15rpx;
		box-sizing: border-box;
	}

	.side .record {
		height: 6%;
		margin: 0 auto;
		/* display: flex;
	  justify-content: flex-end;
	  align-items: center; */
	}

	.side .record image {
		height: 48rpx;
		width: 48rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}

	.side .record text {
		font-size: 26rpx;
		color: #8a8a8a;
	}

	.bikeNo {
		height: 7%;
		margin: 16rpx auto 13rpx;
	}

	.bikeNo input {
		width: 60%;
		font-size: 28rpx;
		padding: 0 0 5rpx 5rpx;
		border-bottom: 1rpx solid #d2d2d2;
	}

	.bikeNo .place {
		font-size: 24rpx;
		color: #4d4d4d88;
	}

	.bikeNo text {
		font-size: 24rpx;
		background: #18d5b9;
		padding: 10rpx 20rpx;
		color: #fff;
		border-radius: 10rpx;
	}

	.info {
		height: 19%;
		width: 92%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.infoCon {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.iconfont {
		font-size: 66rpx;
		color: #fff;
	}

	.info .infoLeft {
		height: 100%;
		box-sizing: border-box;
		margin-left: 100rpx;
	}

	.info .infoLeft view,
	.last {
		font-size: 24rpx;
		color: #fff;
		font-weight: 500;
	}

	.last {
		margin-left: 100rpx;
		padding-bottom: 20rpx;
	}

	.infoRight image {
		height: 90rpx;
		width: 90rpx;
	}

	.position {
		height: 6%;
		margin: 0 auto 10rpx;
	}

	.position text {
		font-size: 28rpx;
		color: #282828;
	}

	.order {
		margin: 0 auto;
		padding: 10rpx 15rpx;
	}

	.order .recent {
		font-size: 28rpx;
		padding: 10rpx 0;
	}

	.order view {
		font-size: 26rpx;
		margin-bottom: 5rpx;
	}

	.directive {
		margin: 10rpx auto 0;
	}

	.directive view {
		font-size: 28rpx;
		color: #282828;
	}

	.directive text {
		color: #575757;
	}

	.directive .dire {
		font-size: 24rpx;
		padding: 15rpx 0 15rpx 20rpx;
		border-bottom: 1rpx solid #dedede;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.directive .iconfont {
		font-size: 55rpx;
	}

	.directive .list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 15rpx;
	}

	.directive .list view {
		width: 33.33%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.iconlaba,
	.iconkaisuo,
	.iconguansuo {
		color: #f38106;
	}

	.background {
		background: #282828;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		z-index: 8888;
		opacity: 0.5;
	}

	.more {
		display: flex;
		flex-wrap: wrap;
		position: fixed;
		top: 41%;
		left: 28%;
		background: white;
		z-index: 9999;
		width: 392rpx;
		height: 392rpx;
		background: rgba(229, 229, 229, 1);
		border-radius: 10rpx;
	}

	.more view {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
		width: 50%;
		justify-content: center;
	}

	.workTitle {
		width: 100%;
		padding: 33rpx 0 20rpx;
	}

	.workTitle text {
		font-size: 32rpx;
		font-weight: 600;
	}


	.workTab {
		width: 100%;
		margin: 20rpx 0;
		background: #fff;
		padding: 15rpx
	}

	.workTab view {
		font-size: 28rpx;
		padding: 15rpx 80rpx;
		color: #64efda;
		border: 1px solid #64efda;
	}

	.workTab view:first-child {
		border-top-left-radius: 15rpx;
		border-bottom-left-radius: 15rpx;
	}

	.workTab view:last-child {
		border-top-right-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
	}

	.workTab .cur {
		background: #64efda;
		color: #fff;
	}

	.no {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		margin-top: 180rpx;
	}

	.no image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.work {
		background: #fff;
		position: fixed;
		bottom: 0%;
		left: 0%;
		z-index: 9999;
		width: 100%;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
	}

	.wait {
		width: 100%;
		border-radius: 10rpx;
		height: 840rpx;
	}



	.waitCon {
		position: relative;
		border: 2rpx solid #eee;
		height: 140rpx;
		overflow: hidden;
		box-shadow: 0 0 5rpx #eee;
		margin-bottom: 10rpx;
		background: #fff;
	}

	.content {
		background-color: #fff;
		width: 100%;
		height: 140rpx;
		z-index: 5;
		transition: left 0.2s ease-in-out;
		position: absolute;
		top: 0;
		left: 0rpx;
		font-size: 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.content .reason {
		/* border-top:1rpx solid #D7D8D9;
	  border-bottom:1rpx solid #D7D8D9; */
		height: 40%;
	}

	.content view {
		padding-left: 30rpx;
		display: flex;
		justify-content: start;
		align-items: center;
		font-size: 26rpx;
	}

	.del {
		width: 200rpx;
		height: 100%;
		text-align: center;
		z-index: 4;
		position: absolute;
		top: 0;
		right: 0;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
	}

	.get {
		background-color: #18d5b9;
	}

	.finish {
		background-color: #18d5b9;
	}

	.workBtn {
		width: 92%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		height: 6%;
		margin-top: 10rpx;
	}

	.workBtn .count {
		/* padding: 6rpx; */
		padding: 3rpx 14rpx;
		background-color: #f00;
		font-size: 22rpx;
		color: #fff;
		position: absolute;
		top: 12rpx;
		left: 199rpx;
		border-radius: 20rpx;
	}

	.shelters,
	.has {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		padding: 20rpx 0;
		font-size: 28rpx;
		position: relative;
	}

	.shelters {
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		border-right: 1rpx solid #eee;
	}

	.has {
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}

	.changeWork {
		background-color: #18d5b9;
		color: #fff;
	}


	.mead {
		height: 300rpx;
	}

	.mead .content {
		justify-content: initial;
		height: 300rpx;
	}

	.mead .title {
		line-height: 80rpx;
		height: 80rpx;
		padding: 0 20rpx;
	}

	.mead .title view {
		flex-grow: 1;
		padding: 0;
		display: inline-block;
	}

	.mead .title .left {
		text-align: left;
	}

	.mead .title .right {
		text-align: right;
		height: 100%
	}



	.mead .body {
		padding: 20rpx 20rpx;
		border-bottom: 1rpx solid #d7d8d8;
		border-top: 1rpx solid #d7d8d8;
		flex-wrap: wrap;
		display: flex;
		height: 100rpx;
	}

	.mead .body .left {
		width: 20%;
		display: inline-block;
		text-align: center;
		vertical-align: top;
	}

	.mead .body .right {
		width: 80%;
		display: inline-block;
		padding-left: 30rpx;
		vertical-align: top;
	}

	.mead .body .right .describe {
		width: 100%;
		height: 100%;
		color: #555;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.mead .body view {
		display: block;
		padding: 0;
		box-sizing: border-box;
	}

	.mead .reason {
		flex-grow: 0;
		height: 50rpx;
		line-height: 50rpx;
	}

	.mead .time {
		line-height: 80rpx;
		height: 80rpx;
		color: #999;
		padding: 0 20rpx;
	}
</style>