<template>
|
<view class="">
|
<u-navbar height="48" :autoBack="true" safeAreaInsetTop placeholder bgColor="transparent" leftIconColor="#fff">
|
</u-navbar>
|
<view class="top">
|
<image class="top-img" src="/static/img/repair-bg.png" mode="aspectFill"></image>
|
</view>
|
|
<view class="container">
|
<view class="c-ff f-36">请选择您需要的服务</view>
|
<view class="serve-box bgc-ff mb-20 flex j-c-s-b a-i-c">
|
<view class="flex a-i-c">
|
<u-icon name="/static/icon/nav-09.png" width="91rpx" height="70rpx"></u-icon>
|
<view class="flex f-d-c ml-40">
|
<text class="f-36">总申请</text>
|
<view class="flex a-i-c">
|
<text class="f-48 c-blue fw mr-6">{{count.all}}</text>
|
<text class="f-24 c-99">件</text>
|
</view>
|
</view>
|
</view>
|
<view class="flex a-i-c">
|
<u-icon name="/static/icon/nav-10.png" width="91rpx" height="70rpx"></u-icon>
|
<view class="flex f-d-c ml-40">
|
<text class="f-36">已处理</text>
|
<view class="flex a-i-c">
|
<text class="f-48 c-green fw mr-6">{{count.processed}}</text>
|
<text class="f-24 c-99">件</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="site-box bgc-ff flex" v-if="siteInfo.name">
|
<view class="flex a-i-c">
|
<u-icon name="map-fill" color="#AAAAAA"></u-icon>
|
<text class="f-28 c-aa ml-20">当前小区：</text>
|
</view>
|
<text class="address f-28">{{siteInfo.name}}</text>
|
</view>
|
|
<view class="nav flex flex-wrap j-c-s-b">
|
<view class="nav-item" v-for="(i,k) in navList" :key="k" @click="navTo(i.path,k)">
|
<image class="nav-item-bg" :src="i.bgImg" mode="aspectFill"></image>
|
<view class="nav-item-inner flex f-d-c">
|
<text class="f-32 mb-30">{{i.title}}</text>
|
<button class="item-btn" :style="{backgroundColor:i.background}">立即上报</button>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</template>
|
|
<script>
|
|
import { getReportingCount } from '@/api/reporting/reporting.js'
|
|
export default {
|
data(){
|
return {
|
navList:[
|
{
|
title:"取保候审",
|
bgImg:"/static/icon/nav-bg-10.png",
|
path:"bail",
|
background:"#63C875"
|
},
|
{
|
title:"打金店",
|
bgImg:"/static/icon/nav-bg-11.png",
|
path:"form",
|
background:"#4D98E2"
|
},
|
{
|
title:"旅馆安全",
|
bgImg:"/static/icon/nav-bg-12.png",
|
path:"hotel",
|
background:"#EC7E51"
|
},
|
{
|
title:"二手车交易",
|
bgImg:"/static/icon/nav-bg-13.png",
|
path:"form",
|
background:"#F4B862"
|
},
|
{
|
title:"二手手机维修",
|
bgImg:"/static/icon/nav-bg-14.png",
|
path:"form",
|
background:"#13C6C7"
|
}
|
],
|
siteInfo:{},
|
count:{}
|
}
|
},
|
|
onLoad(){
|
this.siteInfo = uni.getStorageSync("siteInfo");
|
},
|
|
onShow() {
|
this.getCount(uni.getStorageSync("siteInfo").id);
|
},
|
|
methods:{
|
getCount(code){
|
getReportingCount({houseCode:code}).then(res=>{
|
console.log(res);
|
this.count = res.data;
|
})
|
},
|
|
navTo(path,index){
|
let type = 1;
|
if(index == 1){
|
type == 1
|
}else if (index == 3){
|
type = 3
|
}else if(index == 4) {
|
type = 2
|
}
|
this.$u.func.globalNavigator(`${path}?type=${type}`, "navTo")
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
page{
|
width:100%;
|
height:100%;
|
}
|
.top{
|
width:100%;
|
height:659rpx;
|
background: linear-gradient(180deg, #017BFC 0%, rgba(1,123,252,0) 100%);
|
position: fixed;
|
top:0;
|
left:0;
|
.top-img{
|
width:100%;
|
height:659rpx;
|
}
|
}
|
.container{
|
width:100%;
|
padding: 0 30rpx;
|
position: fixed;
|
box-sizing: border-box;
|
top:130rpx;
|
left:0;
|
z-index: 100;
|
.serve-box{
|
width:100%;
|
height:213rpx;
|
border-radius: 8rpx;
|
margin-top:30rpx;
|
padding: 0 60rpx 0 40rpx;
|
box-sizing: border-box;
|
}
|
.f-48{
|
font-size:48rpx;
|
}
|
.c-blue{
|
color:#677CF8;
|
|
}
|
.c-green{
|
color:#30D17C;
|
}
|
.ml-40{
|
margin-left:40rpx;
|
}
|
.site-box{
|
width:100%;
|
padding:30rpx;
|
box-sizing: border-box;
|
border-radius: 4rpx;
|
.c-aa{
|
color:#aaa;
|
}
|
.address{
|
width:60%;
|
margin-left:25rpx;
|
}
|
}
|
.nav{
|
width:100%;
|
.nav-item,.nav-item-bg,.nav-item-inner{
|
width:330rpx;
|
height:167rpx;
|
}
|
.nav-item{
|
position: relative;
|
margin-top:30rpx;
|
}
|
.nav-item-inner{
|
padding:30rpx 30rpx 0;
|
position: absolute;
|
top:0;
|
left:0;
|
|
}
|
.item-btn{
|
width:125rpx;
|
height:42rpx;
|
line-height: 42rpx;
|
border-radius: 20rpx;
|
color:#fff;
|
font-size:22rpx;
|
padding:0;
|
margin:0;
|
}
|
}
|
|
}
|
</style>
|
