zhxf-app/pages/repair/repair.vue

<template>
	<view class="processWrapper repair-page" style="   
    overflow: scroll;">
		
		<!-- 宫格列表 -->
		<view class="bg-white  " >
			<view class="cu-list grid col-3 no-border" style="padding-bottom:0">
				<view class="cu-item justify-center align-center  "  v-for="(item,index) in repairSquare"  @tap=searchType(item)
				 :key="index">
				 <view :style="`background:${item.color}`" style="width:90%" class=" repairSquare">
					 <view class="num">{{item.num}}</view>
					 <text  class="title" style="color:#fff">{{item.title}}</text>
				 </view>
					
				</view>
			</view>
		</view>
		
		<block>
			<view>
				<view class="cu-list menu-avatar ">
					<view class="cu-item" v-for="(item,index) in getDataList" :key="index">
						<view class="cu-avatar " v-if="item.cl_type==1">
							<image class="image-bg" src="/static/repair1.png"/>
						</view>
						<view class="cu-avatar " v-if="item.cl_type==2">
							<image class="image-bg" src="/static/repair2.png"/>
						</view>
						<view class="cu-avatar " v-if="item.cl_type==3" >
							<image class="image-bg" src="/static/repair3.png"/>
						</view>
						<view class="cu-avatar " v-if="item.cl_type==4" >
							<image class="image-bg" src="/static/repair4.png"/>
						</view>
						<view class="cu-avatar " v-if="item.cl_type==5">
							<image class="image-bg" src="/static/repair5.png"/>
						</view>
						<view class="content">
							<view class="pro-title">
								<view class="cut">{{item.wx_name}}</view>
							</view>
							<view class="pro-des  ">
								<view class="text-cut">
									{{item.sj_type==1?'故障':item.sj_type==2?'隐患':'其他'}}
								</view>
							</view>
						</view>
						<view class="action margin-right-sm" style="text-align:right;z-index:999" >
							<view style="color:#FDCA60" v-if="item.cl_type==1" @tap="goRepairDetail(item)">未处理</view>
							<view style="color:#59D1EA" v-if="item.cl_type==2">未审核</view>
							<view style="color:#F77070" v-if="item.cl_type==3">未通过</view>
							<view style="color:#72D06A" v-if="item.cl_type==4" >已完成</view>
							<view style="color:#F7895E" v-if="item.cl_type==5">超时完成</view>
						</view>
					</view>
				</view>
			</view>
		</block>

		<!-- <view class="btn-area submitBottomBtn padding-lr-sm">
			<button class="bg-blue round  margin-top" @tap="goRepairDetail">报 修 </button>
		</view> -->
	
	</view>
</template>

<script>
	import json from '../../data/json.js';
	export default {
		data() {
			return {
				unporcessList:json.repair,
				repairSquare: json.repairSquare,
				
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				CustomBar: this.CustomBar,
				
				getData:{},
				getDataList:{}
		
			
			};
		},
		onLoad:function(option){
			this.goRepairList({'company_code':uni.getStorageSync('selectedCode')})
		},
		methods: {
			
			// 保修列表数据请求
			async goRepairList(params = {}) {
				const res = await this.$myRequest({
					url: 'Repair/getRepairList',
					data:params,
					showLoading: true
				})
				this.getData=res.data;
				this.getDataList=res.data.data;
				this.repairSquare[0].num=res.data.repair_count;
				this.repairSquare[1].num=res.data.unprocessed_count;
				this.repairSquare[2].num=res.data.not_reviewed_count;
				this.repairSquare[3].num=res.data.failed_count;
				this.repairSquare[4].num=res.data.completed_count;
				this.repairSquare[5].num=res.data.overtime_count;
				console.log(this.getData);
			},
			
			// 筛选
			searchType(item) {
				this.goRepairList({'company_code':uni.getStorageSync('selectedCode'),"cl_type":item.cl_type})
				
			},
					
			// 页面跳转
			goRepairDetail(item) {
				uni.navigateTo({
					url: '/pages/repair/repairDetail/repairDetail?id='+item.id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 页面跳转
			// goRepairDetailDone(item) {
			// 	uni.navigateTo({
			// 		url: '/pages/repair/repairDetailDone/repairDetailDone?id='+item.id,
			// 		success: res => {},
			// 		fail: () => {},
			// 		complete: () => {}
			// 	});
			// }

		}
	}
</script>

<style lang="scss">

	.processList{
		position:static;
	}
	
</style>