You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
382 lines
9.0 KiB
382 lines
9.0 KiB
<template> |
|
<cs-page :selected="3" title="企业档案" isTab> |
|
<view class="page-container" id="page"> |
|
<van-search |
|
:value="queryParams.enterprisesName" |
|
placeholder="输入企业名称或类型查询" |
|
@sreach="handleSearch" |
|
@clear="resetQuery('enterpriseName')" |
|
id="sreach" |
|
@change="handleSearch" |
|
/> |
|
<view class="drop-box"> |
|
<van-dropdown-menu active-color="#17C653"> |
|
<van-dropdown-item |
|
:value="queryParams.region" |
|
:options="getDropdownOption('enterprises_area')" |
|
@change=" |
|
v => { |
|
querySelect(v, 'region') |
|
} |
|
" |
|
/> |
|
<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> |
|
</view> |
|
|
|
<scroll-view |
|
scroll-y="true" |
|
:refresher-enabled="true" |
|
@refresherrefresh="refresherrefresh" |
|
:refresher-triggered="refresherTriggered" |
|
@refresherpulling="refresherpulling" |
|
@scrolltolower="loadMore" |
|
class="list" |
|
:style="{ height: `${listHeight - sreachHeight}px` }" |
|
> |
|
<view |
|
v-for="enterprise in list" |
|
:key="enterprise.id" |
|
class="wd-flex wd-items-center enterprise" |
|
@click="goDetail(enterprise.id)" |
|
> |
|
<u-avatar |
|
:src="enterprise.files[0].url" |
|
shape="square" |
|
size="64" |
|
></u-avatar> |
|
<view class="wd-flex wd-flex-col"> |
|
<text |
|
class="wd-font-800 wd-text-15" |
|
style=" |
|
padding-right: 3rem; |
|
margin-bottom: 4rpx; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
width: 432rpx; |
|
overflow: hidden; |
|
" |
|
> |
|
{{ enterprise.enterprisesName }} |
|
</text> |
|
<view |
|
class="wd-flex" |
|
style="margin-bottom: 16rpx; margin-top: 4rpx" |
|
> |
|
<u-icon name="map" size="14" color="#17C653"></u-icon> |
|
<text class="address wd-text-12" style="margin-left: 4px"> |
|
{{ enterprise.address }} |
|
</text> |
|
</view> |
|
<view class="tagList"> |
|
<view class="tag"> |
|
{{ |
|
$dict.echoDicValue( |
|
dictMap.enterprises_area, |
|
enterprise.region |
|
) |
|
}} |
|
</view> |
|
<view |
|
class="tag" |
|
v-for="(tag, index) in enterprise.tagList" |
|
:key="index" |
|
> |
|
{{ tag }} |
|
</view> |
|
</view> |
|
</view> |
|
<view |
|
class="audit" |
|
v-if="!enterprise.isAudit" |
|
style="color: #f6b100; background-color: #fff8dd" |
|
> |
|
待审核 |
|
</view> |
|
</view> |
|
<u-loadmore |
|
:status="load" |
|
marginTop="12" |
|
marginBottom="12" |
|
v-if="load !== 'nomore' && list.length > 0" |
|
/> |
|
<cs-emty v-if="list.length == 0"></cs-emty> |
|
</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 { |
|
queryParams: { |
|
pageSize: 10, |
|
pageNo: 1, |
|
region: '', |
|
hy: '', |
|
st: '', |
|
wr: '', |
|
enterprisesName: '', |
|
tagList: '' |
|
}, |
|
listHeight: 0, |
|
sreachHeight: 0, |
|
refresherTriggered: false, |
|
list: [], |
|
load: 'loadmore', |
|
dictMap: {} |
|
} |
|
}, |
|
async onLoad() { |
|
await this.getDict() |
|
this.queryEnterprise() |
|
}, |
|
// onShow() { |
|
// this.queryEnterprise() |
|
// }, |
|
onReady() { |
|
this.getPageHeight() |
|
}, |
|
methods: { |
|
getPageHeight() { |
|
const query = uni.createSelectorQuery().in(this) |
|
query |
|
.select('#sreach') |
|
.boundingClientRect(data => { |
|
this.sreachHeight = data.height |
|
}) |
|
.exec() |
|
query |
|
.select('#page') |
|
.boundingClientRect(data => { |
|
this.listHeight = data.height - 35 - 25 |
|
}) |
|
.exec() |
|
}, |
|
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', |
|
'enterprises_type', |
|
'enterprises_area' |
|
].join(',') |
|
}) |
|
let tagMap = {} |
|
tags.data.forEach(t => { |
|
tagMap[t.tagCode] = t.children |
|
}) |
|
this.dictMap = { |
|
...tagMap, |
|
...dict.data |
|
} |
|
}, |
|
getDropdownOption(key) { |
|
if (!this.dictMap[key]) return [] |
|
const keyMap = { |
|
enterprises_area: '按区域', |
|
hy: '按行业', |
|
st: '按生态', |
|
wr: '按污染' |
|
} |
|
if (['enterprises_area'].includes(key)) { |
|
return [ |
|
{ |
|
value: '', |
|
text: keyMap[key] |
|
}, |
|
...this.dictMap[key].map(i => { |
|
return { |
|
value: i.value, |
|
text: i.label |
|
} |
|
}) |
|
] |
|
} |
|
const data = [ |
|
{ |
|
value: '', |
|
text: keyMap[key] |
|
}, |
|
...this.dictMap[key].map(d => { |
|
return { |
|
value: d.id, |
|
text: d.tagName |
|
} |
|
}) |
|
] |
|
return data |
|
}, |
|
querySelect(v, key) { |
|
this.queryParams.pageNo = 1 // 重置页码 |
|
this.queryParams[key] = v.detail |
|
this.queryEnterprise() |
|
}, |
|
handleSearch(e) { |
|
if (e.detail && e.detail.length > 1) { |
|
this.queryParams.pageNo = 1 // 重置页码 |
|
this.queryParams.enterprisesName = e.detail // 更新搜索关键字 |
|
this.queryEnterprise() |
|
} |
|
}, |
|
queryEnterprise() { |
|
this.load = 'loadmore' |
|
this.list = [] |
|
this.queryParams.tagList = [ |
|
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, |
|
region: '', |
|
hy: '', |
|
st: '', |
|
wr: '', |
|
enterprisesName: '', |
|
tagList: '' |
|
} |
|
await this.queryEnterprise() |
|
}, |
|
goDetail(id) { |
|
uni.navigateTo({ |
|
url: `/sub/enterprise/detail?id=${id}` |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.page-container { |
|
height: 100%; |
|
overflow: hidden; |
|
} |
|
.list { |
|
display: flex; |
|
flex-flow: column nowrap; |
|
gap: 24rpx; |
|
padding: 0 24rpx; |
|
} |
|
.enterprise { |
|
padding: 24rpx; |
|
background-color: #fff; |
|
border-radius: $cs-border-radius; |
|
gap: 24rpx; |
|
margin-top: 24rpx; |
|
position: relative; |
|
overflow: hidden; |
|
font-size: 24rpx; |
|
.address { |
|
color: $uni-text-color-grey; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
width: 448rpx; |
|
overflow: hidden; |
|
} |
|
&:active { |
|
background-color: $cs-color-touch; |
|
} |
|
.audit { |
|
position: absolute; |
|
right: -38rpx; |
|
top: 12rpx; |
|
transform: rotateZ(45deg); |
|
transform-origin: 50% 50%; |
|
padding: 8rpx 40rpx; |
|
font-size: 24rpx; |
|
text-align: center; |
|
} |
|
} |
|
.drop-box { |
|
padding: 24rpx; |
|
border-bottom: 2rpx solid #f1f1f4; |
|
background-color: #fff; |
|
::v-deep .van-dropdown-menu { |
|
box-shadow: none; |
|
height: fit-content !important; |
|
font-size: 26rpx; |
|
padding: 12rpx 24rpx; |
|
} |
|
} |
|
::v-deep .u-list { |
|
padding: 24rpx; |
|
} |
|
</style>
|
|
|