shanxian-work-app/pages/workOrder/workOrder.vue

<template>
	<view class="page">
		<view class="allArea">
			<view class="area1">
				<text class="arear-text" @click="tanKuang">{{list[curVal].text}}</text>
				<image src="../../static/down.png" mode=""></image>
			</view>
		</view>
		<view class="tabbar">
			<view @click="select(0)" :class="tabIndex==0 ? 'active' : ''">
				<text>未认领</text>
			</view>
			<view @click="select(1)" :class="tabIndex==1 ? 'active' : ''">
				<text>处理中</text>
			</view>
			<view @click="select(2)" :class="tabIndex==2 ? 'active' : ''">
				<text>已处理</text>
			</view>
			<view @click="select(3)" :class="tabIndex==3 ? 'active' : ''">
				<text>已完成</text>
			</view>
		</view>
		<view class="content">
			<view class="list" v-for="(item,index1) in workList" :key="index1" @click="wordDetail(item.id)">
				<view class="reason">{{item.reason?item.reason:item.type_name}}</view>
				<view class="type " v-if="item.type_name=='充电工单'" style="background: linear-gradient(163deg, #68e9ce 0%, #18d5b9 100%);">
					{{item.type_name}}（{{item.times}}次）
				</view>
				<view class="type" v-if="item.type_name=='断电工单'" style="background: linear-gradient(163deg, #ff6477 0%, #ff7a69 100%);">
					{{item.type_name}}（{{item.times}}次）
				</view>
				<view class="type" v-if="item.type_name=='组长工单'" style="background: linear-gradient(163deg, #41b8fd 0%, #0ee7fe 100%);">
					{{item.type_name}}（{{item.times}}次）
				</view>
				<view class="type" v-if="item.type_name=='偷盗工单'" style="background: linear-gradient(163deg, #ff8b66 0%, #fe5722 100%);">
					{{item.type_name}}（{{item.times}}次）
				</view>
				<view class="type" v-if="item.type_name=='离线工单'" style="background: linear-gradient(163deg, #FF8CC7 0%, #F232A3 100%);">
					{{item.type_name}}（{{item.times}}次）
				</view>
				<view class="type" v-if="item.type_name=='救援工单'" style="background: linear-gradient(163deg, #9382f4 0%, #a297fb 100%);">
					{{item.type_name}}（{{item.times}}次）
				</view>
				<view class="type" v-if="item.type_name=='断电工单'" style="background: linear-gradient(163deg, #ff6477 0%, #ff7a69 100%);">
					{{item.type_name}}（{{item.times}}次）
				</view>
				<view class="type" v-if="item.type_name=='警报工单'" style="background: linear-gradient(163deg, #FF9854 0%, #FFC573 100%);">
					{{item.type_name}}（{{item.times}}次）
				</view>
				<view class="type" v-if="item.type_name=='故障工单'" style="background: linear-gradient(163deg, #D684DD 0%, #F7A7EC 100%);">
					{{item.type_name}}（{{item.times}}次）
				</view>
				<view class="type" v-if="item.type_name=='其他工单'" style="background: linear-gradient(163deg, #47DDA8 0%, #61F79C 100%);">
					{{item.type_name}}（{{item.times}}次）
				</view>
				<view class="type" v-if="item.type_name=='查看工单'" style="background: linear-gradient(163deg, #88B9E1 0%, #004FB6 100%);">
					{{item.type_name}}（{{item.times}}次）
				</view>
				<view class="flexB" style="margin-top:0;">
					<view>
						<view>车辆编号：{{item.bike_no}}</view>
						<view>更新时间：{{item.updated_at}}</view>
						<!-- <view>次数：20</view> -->
					</view>
					<view style="margin-right:50upx;">
						<view>进度：{{item.planned}}</view>
						<view>来源：{{item.source}}</view>
						<!-- <view>查看详情</view> -->
					</view>
				</view>
			</view>
			<view class="noData" v-if="workList.length == 0">
				<image src="http://resource.bike.hanyiyun.com/none.png"></image>
				<view>暂无相关数据~</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	let touchDotX = 0; //X按下时坐标
	let touchDotY = 0; //y按下时坐标
	let interval; //计时器
	let time = 0;
	export default {
		data() {
			return {
				active: 0,
				workList: [], //工单列表
				page: 1,
				current: 4,
				option1: [], //区域选择
				value1: 0, //第一个显示什么
				areaID: '',
				url: '',
				screenHeight: '', //屏幕可视高度
				tabIndex: 0,
				list: [{ //所有区域选项
					areaID: '',
					text: '全部区域',
					value: -1,
				}], //骑行区域选择列表
				curVal: uni.getStorageSync('curVal') ? uni.getStorageSync('curVal') : 0, //骑行区与第一个下标
			}
		},
		methods: {
			select: function(e) {
				console.log(e)
				this.tabIndex = e;
				this.workList = '';
				this.page = 1;
				this.getWork();
				this.goTop();
			},
			tanKuang: function() {
				var that = this;
				var arr = []
				for (let i = 0; i<this.list.length; i++) {
					arr = arr.concat(this.list[i].text)
				}
				console.log(arr)
				uni.showActionSheet({
					itemList: arr,
					success: function(res) {
						let index = res.tapIndex
						that.areaID = that.list[index].areaID;
						that.curVal = res.tapIndex
						console.log(that.list[index].areaID, "66666");
						console.log('选中了第' + res.tapIndex + '个按钮');
						that.getWork();
						that.goTop();
						// that.allData()
						// that.tabList()
					},
					fail: function(res) {}
				})
			},
			scanCode: function() {
				uni.redirectTo({
					url: '/pages/logs/logs?scan=' + 1,
				})
			},
			getWork: function() {
				uni.showLoading({
					title: '加载中',
				})
				let that = this;
				let planned = '';
				let url = "";
				let data = '&&put_area_id=' + that.areaID
				if (this.tabIndex == 0) {
					planned = 1
					url = "work_order/list?planned=" + planned + data
				} else if (this.tabIndex == 1) {
					planned = 2
					url = "work_order/myWorkOrderList?planned=" + planned + data
				} else if (this.tabIndex == 2) {
					planned = 3
					url = "work_order/myWorkOrderList?planned=" + planned + data
				} else if (this.tabIndex == 3) {
					planned = 4
					url = "work_order/myWorkOrderList?planned=" + planned + data
				}
				app.request(url, '', 'GET').then(res => {
					console.log(res, '工单')
					console.log(url)
					uni.hideLoading();
					this.workList = res.data.data
				})
			},
			//回到顶部
			goTop: function(e) { // 一键回到顶部
				if (uni.pageScrollTo) {
					uni.pageScrollTo({
						scrollTop: 0
					})
				}
			},
			wordDetail: function(e) {
				//工单详情
				console.log(e)
				uni.navigateTo({
					url: '/pages/manage/workDetail?id=' + e,
				})
			},
		},
		onLoad: function(options) {
			let that = this;
			var arr = uni.getStorageSync('allArea');
			this.list = this.list.concat(arr);
			that.option1 = uni.getStorageSync('allArea')
			let curVal = uni.getStorageSync('curVal')
			if (curVal) {
				that.value1 = curVal
			}
			let areaID = uni.getStorageSync('curId')
			if (areaID) {
				that.areaID = areaID
			} else {
				let id = that.option1[0].areaID
				that.areaID = id;
			}
			that.getWork();
		},
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading();
			this.getWork(), uni.hideNavigationBarLoading(), uni.stopPullDownRefresh();
		},
		onReachBottom: function() {
			var that = this;
			uni.showLoading({
				title: '加载中',
			})
			let planned = '';
			var page = that.page + 1
			if (that.tabIndex == 0) {
				planned = 1
			} else if (that.tabIndex == 1) {
				planned = 2
			} else if (that.tabIndex == 2) {
				planned = 3
			} else if (that.tabIndex == 3) {
				planned = 4
			}
			let url = 'work_order/list?planned=' + planned + '&&put_area_id=' + that.areaID + '&&page=' + page
			app.request(url, '', 'GET').then(res => {
				console.log(res)
				uni.hideLoading()
				if (res.statusCode == 200) {
					if (res.data.data.length > 0) {
						that.workList = that.workList.concat(res.data.data);
						that.page = page;
					} else {
						uni.showToast({
							title: '没有更多了~',
							icon: 'none'
						})
					}
				}
			})
		},
		onShareAppMessage: function() {
			return {
				title: '轻松出行，方便你我',
				path: '/pages/login/login',
				success: function(res) {}
			}
		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 888;
		background: #fff;
	}

	.content {
		margin-top: 220upx !important;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.list {
		width: 92%;
		margin: 20upx auto;
		border: 2upx solid #d8d8d8;
		border-radius: 10upx;
		padding: 20upx;
		position: relative;
		box-shadow: 0 0 6upx 0 rgba(216, 216, 216, 1);
		box-sizing: border-box;

	}

	.list view {
		font-size: 24upx;
		color: #4d4d4d;
		margin-top: 15upx;
	}

	.list .reason {
		font-size: 28upx;
		color: #282828;
	}

	.list .type {
		/* width: 168upx; */
		padding: 0 10upx;
		height: 42upx;
		color: #fff;
		font-size: 22upx;
		text-align: center;
		position: absolute;
		top: -15upx;
		right: 0;
		border-radius: 0 2upx 0 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tabbar {
		width: 100%;
		display: flex;
		align-items: center;
		position: fixed;
		top: 120upx;
		left: 0;
		height: 100upx;
		background: #FFFFFF;
		z-index: 999;
		color: #000000;
	}

	.tabbar view {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		font-size: 28upx;
	}

	.active {
		color: #FF0000 !important;
	}

	.noData {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.noData image {
		width: 200upx;
		height: 200upx;
	}

	.noData view {
		width: 100%;
		text-align: center;
		font-size: 28upx;
		margin-top: 20upx;
	}
	.allArea {
		display: inline-block;
		position: fixed;
		padding-left: 35upx;
		height: 120upx;
		font-size: 34upx;
		line-height: 150upx;
		background-color: #FFFFFF;
		top: 0upx;
		z-index: 1000;
		width: 100%;
	}
	
	.allArea image {
		display: inline-block;
		vertical-align: middle;
		margin-left: 20upx;
		height: 40upx;
		width: 40upx;
	}
</style>