18 changed files with 635 additions and 124 deletions
@ -1,13 +1,294 @@
|
||||
<template> |
||||
<cs-page :selected="1" isTab></cs-page> |
||||
<cs-page :selected="1" title="执法任务" isTab> |
||||
<view class="page-container"> |
||||
<van-dropdown-menu safe-area-tab-bar active-color="#17C653"> |
||||
<van-dropdown-item |
||||
:value="queryParams.dept" |
||||
:options="getDropdownOption('dept')" |
||||
@change=" |
||||
v => { |
||||
querySelect(v, 'dept') |
||||
} |
||||
" |
||||
/> |
||||
<van-dropdown-item |
||||
:value="queryParams.hy" |
||||
:options="getDropdownOption('hy')" |
||||
@change=" |
||||
v => { |
||||
querySelect(v, 'hy') |
||||
} |
||||
" |
||||
/> |
||||
<van-dropdown-item |
||||
:value="queryParams.st" |
||||
:options="getDropdownOption('st')" |
||||
@change=" |
||||
v => { |
||||
querySelect(v, 'st') |
||||
} |
||||
" |
||||
/> |
||||
<van-dropdown-item |
||||
:value="queryParams.wr" |
||||
:options="getDropdownOption('wr')" |
||||
@change=" |
||||
v => { |
||||
querySelect(v, 'wr') |
||||
} |
||||
" |
||||
/> |
||||
</van-dropdown-menu> |
||||
<scroll-view |
||||
scroll-y="true" |
||||
:refresher-enabled="true" |
||||
@refresherrefresh="refresherrefresh" |
||||
:refresher-triggered="refresherTriggered" |
||||
@refresherpulling="refresherpulling" |
||||
@scrolltolower="loadMore" |
||||
class="list" |
||||
> |
||||
<view |
||||
v-for="enterprise in list" |
||||
:key="enterprise.id" |
||||
class="wd-flex wd-items-center enterprise" |
||||
@click="goDetail(enterprise.id)" |
||||
> |
||||
<van-circle :value="Math.random() * 100" size="56" color="#17c653" layer-color="#F1F1F4"> |
||||
<template> |
||||
<u-count-to :startVal="0" :endVal="Math.random() * 100" fontSize="16" bold duration="1000"></u-count-to> |
||||
% |
||||
</template> |
||||
</van-circle> |
||||
<view class="wd-flex wd-flex-col" style="gap: 4px"> |
||||
<text class="wd-font-800 wd-text-15">{{ enterprise.enterprisesName }}</text> |
||||
<text class="address wd-text-12">{{ enterprise.address }}</text> |
||||
<view class="tagList"> |
||||
<view class="tag" v-for="(tag, index) in enterprise.tagList" :key="index"> |
||||
{{ tag }} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view |
||||
class="audit" |
||||
v-if="enterprise.audit != 2" |
||||
:style="{ color: enterprise.audit == 1 ? '#F6B100' : '#ea000c', backgroundColor: '#FFF8DD' }" |
||||
> |
||||
{{ $dict.echoDicValue(dictMap.user_audit_type, enterprise.audit) }} |
||||
</view> |
||||
</view> |
||||
<u-loadmore :status="load" marginTop="20" /> |
||||
</scroll-view> |
||||
</view> |
||||
</cs-page> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getEnterPriseList } from '@/api/enterprise/index.js' |
||||
import { getDictBatchByType, getDeptTree, getTagData } from '@/api/system/dict.js' |
||||
export default { |
||||
data() { |
||||
return {} |
||||
} |
||||
data() { |
||||
return { |
||||
queryParams: { |
||||
pageSize: 10, |
||||
pageNo: 1, |
||||
qy: '', |
||||
hy: '', |
||||
st: '', |
||||
wr: '', |
||||
dept: '', |
||||
tagList: '' |
||||
}, |
||||
refresherTriggered: false, |
||||
list: [], |
||||
load: 'loadmore', |
||||
dictMap: {} |
||||
} |
||||
}, |
||||
async onLoad() { |
||||
await this.getDict() |
||||
}, |
||||
onShow() { |
||||
this.queryEnterprise() |
||||
}, |
||||
methods: { |
||||
async getList() { |
||||
uni.showToast({ |
||||
title: '加载中', |
||||
mask: true, |
||||
icon: 'loading' |
||||
}) |
||||
this.load = 'loading' |
||||
const res = await getEnterPriseList(this.queryParams) |
||||
this.list.push(...res.data.list) |
||||
this.load = 'loadmore' |
||||
if (this.list.length == res.data.total) { |
||||
this.load = 'nomore' |
||||
} |
||||
uni.hideToast() |
||||
}, |
||||
async getDict() { |
||||
const tags = await getTagData(['qy', ' hy', 'st', 'wr'].join(',')) |
||||
const dict = await getDictBatchByType({ type: ['user_audit_type'].join(',') }) |
||||
const dept = await getDeptTree() |
||||
let tagMap = {} |
||||
tags.data.forEach(t => { |
||||
tagMap[t.tagCode] = t.children |
||||
}) |
||||
this.dictMap = { |
||||
...tagMap, |
||||
...dict.data, |
||||
dept: dept.data.map(i => { |
||||
return { |
||||
...i, |
||||
text: i.name, |
||||
value: i.id |
||||
} |
||||
}) |
||||
} |
||||
}, |
||||
getDropdownOption(key) { |
||||
if (!this.dictMap[key]) return [] |
||||
const keyMap = { |
||||
qy: '区域', |
||||
hy: '行业', |
||||
st: '生态', |
||||
wr: '污染', |
||||
dept: '全部部门' |
||||
} |
||||
if (key == 'dept') { |
||||
return [...this.dictMap[key], { value: '', text: keyMap[key] }] |
||||
} else { |
||||
return [ |
||||
...this.dictMap[key].map(d => { |
||||
return { |
||||
value: d.id, |
||||
text: d.tagName |
||||
} |
||||
}), |
||||
{ value: '', text: keyMap[key] } |
||||
] |
||||
} |
||||
}, |
||||
querySelect(v, key) { |
||||
this.queryParams[key] = v.detail |
||||
this.queryEnterprise() |
||||
}, |
||||
queryEnterprise() { |
||||
this.queryParams.pageNo = 1 |
||||
this.load = 'loadmore' |
||||
this.list = [] |
||||
this.queryParams.tagList = [this.queryParams.qy, this.queryParams.hy, this.queryParams.st, this.queryParams.wr] |
||||
.filter(i => i != '') |
||||
.join() |
||||
this.getList() |
||||
}, |
||||
loadMore() { |
||||
if (this.load == 'nomore') { |
||||
uni.showToast({ |
||||
title: '没有更多了', |
||||
icon: 'none' |
||||
}) |
||||
return |
||||
} |
||||
this.queryParams.pageNo++ |
||||
this.getList() |
||||
}, |
||||
refresherpulling() { |
||||
const that = this |
||||
if (!this.refresherTriggered) { |
||||
this.refresherTriggered = true |
||||
setTimeout(() => { |
||||
that.refresherTriggered = false |
||||
}, 1000) |
||||
} |
||||
}, |
||||
refresherrefresh() { |
||||
this.resetQuery() |
||||
}, |
||||
async resetQuery() { |
||||
this.queryParams = { |
||||
pageSize: 10, |
||||
pageNo: 1, |
||||
qy: '', |
||||
hy: '', |
||||
st: '', |
||||
wr: '', |
||||
dept: '', |
||||
tagList: '' |
||||
} |
||||
await this.queryEnterprise() |
||||
}, |
||||
goDetail(id) { |
||||
uni.navigateTo({ |
||||
url: `/sub/task/detail?id=${id}` |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"></style> |
||||
<style lang="scss" scoped> |
||||
.page-container { |
||||
height: 100%; |
||||
overflow: hidden; |
||||
} |
||||
.list { |
||||
height: 75vh; |
||||
padding: 12px; |
||||
} |
||||
.enterprise { |
||||
padding: 12px; |
||||
background-color: #fff; |
||||
border-radius: $cs-border-radius; |
||||
gap: 12px; |
||||
margin-top: 12px; |
||||
position: relative; |
||||
overflow: hidden; |
||||
font-size: 12px; |
||||
.address { |
||||
color: $uni-text-color-grey; |
||||
} |
||||
.tagList { |
||||
margin-top: 8px; |
||||
display: flex; |
||||
gap: 4px; |
||||
color: $uni-text-color-grey; |
||||
display: flex; |
||||
.tag { |
||||
font-size: 12px; |
||||
display: flex; |
||||
padding: 2px 6px; |
||||
justify-content: center; |
||||
align-items: center; |
||||
border-radius: 2px; |
||||
background: #f9f9f9; |
||||
} |
||||
} |
||||
.audit { |
||||
position: absolute; |
||||
right: -19px; |
||||
top: 6px; |
||||
transform: rotateZ(45deg); |
||||
transform-origin: 50% 50%; |
||||
padding: 4px 20px; |
||||
font-size: 12px; |
||||
text-align: center; |
||||
} |
||||
} |
||||
::v-deep .van-dropdown-menu { |
||||
box-shadow: none; |
||||
height: 35px; |
||||
font-size: 13px; |
||||
} |
||||
|
||||
::v-deep .u-list { |
||||
padding: 12px; |
||||
} |
||||
|
||||
::v-deep .u-count-num { |
||||
font-size: 16px; |
||||
font-family: 'WeChat Sans Std'; |
||||
font-weight: 800; |
||||
} |
||||
</style> |
||||
|
||||
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 254 KiB |
@ -1 +1,62 @@
|
||||
@import '../common/index.wxss';.van-dropdown-menu{background-color:var(--dropdown-menu-background-color,#fff);box-shadow:var(--dropdown-menu-box-shadow,0 2px 12px hsla(210,1%,40%,.12));display:flex;height:var(--dropdown-menu-height,50px);-webkit-user-select:none;user-select:none}.van-dropdown-menu__item{align-items:center;display:flex;flex:1;justify-content:center;min-width:0}.van-dropdown-menu__item:active{opacity:.7}.van-dropdown-menu__item--disabled:active{opacity:1}.van-dropdown-menu__item--disabled .van-dropdown-menu__title{color:var(--dropdown-menu-title-disabled-text-color,#969799)}.van-dropdown-menu__title{box-sizing:border-box;color:var(--dropdown-menu-title-text-color,#323233);font-size:var(--dropdown-menu-title-font-size,15px);line-height:var(--dropdown-menu-title-line-height,18px);max-width:100%;padding:var(--dropdown-menu-title-padding,0 24px 0 8px);position:relative}.van-dropdown-menu__title:after{border-color:transparent transparent currentcolor currentcolor;border-style:solid;border-width:3px;content:"";margin-top:-5px;opacity:.8;position:absolute;right:11px;top:50%;transform:rotate(-45deg)}.van-dropdown-menu__title--active{color:var(--dropdown-menu-title-active-text-color,#ee0a24)}.van-dropdown-menu__title--down:after{margin-top:-1px;transform:rotate(135deg)} |
||||
@import '../common/index.wxss'; |
||||
|
||||
.van-dropdown-menu { |
||||
background-color: var(--dropdown-menu-background-color, #fff); |
||||
box-shadow: var(--dropdown-menu-box-shadow, 0 2px 12px hsla(210, 1%, 40%, .12)); |
||||
display: flex; |
||||
height: var(--dropdown-menu-height, 50px); |
||||
-webkit-user-select: none; |
||||
user-select: none |
||||
} |
||||
|
||||
.van-dropdown-menu__item { |
||||
align-items: center; |
||||
display: flex; |
||||
flex: 1; |
||||
justify-content: center; |
||||
min-width: 0 |
||||
} |
||||
|
||||
.van-dropdown-menu__item:active { |
||||
opacity: .7 |
||||
} |
||||
|
||||
.van-dropdown-menu__item--disabled:active { |
||||
opacity: 1 |
||||
} |
||||
|
||||
.van-dropdown-menu__item--disabled .van-dropdown-menu__title { |
||||
color: var(--dropdown-menu-title-disabled-text-color, #969799) |
||||
} |
||||
|
||||
.van-dropdown-menu__title { |
||||
box-sizing: border-box; |
||||
color: var(--dropdown-menu-title-text-color, #323233); |
||||
font-size: var(--dropdown-menu-title-font-size, 15px); |
||||
line-height: var(--dropdown-menu-title-line-height, 18px); |
||||
max-width: 100%; |
||||
padding: var(--dropdown-menu-title-padding, 0 24px 0 8px); |
||||
position: relative; |
||||
} |
||||
|
||||
.van-dropdown-menu__title:after { |
||||
border-color: transparent transparent currentcolor currentcolor; |
||||
border-style: solid; |
||||
border-width: 3px; |
||||
content: ""; |
||||
margin-top: -5px; |
||||
opacity: .8; |
||||
position: absolute; |
||||
right: 11px; |
||||
top: 50%; |
||||
transform: rotate(-45deg) |
||||
} |
||||
|
||||
.van-dropdown-menu__title--active { |
||||
color: var(--dropdown-menu-title-active-text-color, #ee0a24) |
||||
} |
||||
|
||||
.van-dropdown-menu__title--down:after { |
||||
margin-top: -1px; |
||||
transform: rotate(135deg) |
||||
} |
||||
Loading…
Reference in new issue