zhxf-app/pages/repair/repair.vue

<template>
	<view class="processWrapper ">
		
		<!-- 宫格列表 -->
		<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"  
				 :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 class="processList" style="margin-top:0">
				<view class="cu-list menu-avatar ">
					<view class="cu-item" v-for="(item,index) in unporcessList" :key="index">
						<view class="cu-avatar " :style="`background-image:url(${item.imgUrl})`"  style="width:82rpx;height:82rpx"></view>
						<view class="content">
							<view class="pro-title">
								<view class="cut">{{item.title}}</view>
							</view>
							<view class="pro-des  ">
								<view class="text-cut">
									{{item.subTitle}}
								</view>
							</view>
							<view class="pro-date ">{{item.time}}</view>
						</view>
						<view class="action margin-right-sm" style="text-align:right">
							<view style="color:#FDCA60" v-if="item.status==0">未处理</view>
							<view style="color:#59D1EA" v-if="item.status==1">未审核</view>
							<view style="color:#F77070" v-if="item.status==2">未通过</view>
							<view style="color:#72D06A" v-if="item.status==3">已完成</view>
							<view style="color:#F7895E" v-if="item.status==4">超时完成</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,
		
			
			};
		},
		methods: {
			
			
			// 页面跳转
			goRepairDetail() {
				uni.navigateTo({
					url: '/pages/repair/repairDetail/repairDetail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
			
				
		
		}
	}
</script>

<style lang="scss">

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