ruoyi-miniapp/pages/enterprise.vue

<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"
			/>
			<van-dropdown-menu
				safe-area-tab-bar
				active-color="#17C653"
			>
				<van-dropdown-item
					:value="queryParams.qy"
					: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>
			<scroll-view
				scroll-y="true"
				:refresher-enabled="true"
				@refresherrefresh="refresherrefresh"
				:refresher-triggered="refresherTriggered"
				@refresherpulling="refresherpulling"
				@scrolltolower="loadMore"
				class="list"
				:style="{ maxHeight: `${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"
						style="gap: 4px"
					>
						<text class="wd-font-800 wd-text-15">
							{{ enterprise.enterprisesName }}
						</text>
						<view class="wd-flex wd-pb-8px">
							<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_type,
										enterprise.type
									)
								}}
							</view>
							<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"
				/>
			</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,
					qy: '',
					hy: '',
					st: '',
					wr: '',
					enterprisesName: '',
					tagList: '',
				},
				listHeight: 0,
				sreachHeight: 0,
				refresherTriggered: false,
				list: [],
				load: 'loadmore',
				dictMap: {},
			}
		},
		async onLoad() {
			await this.getDict()
		},
		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
					})
					.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
				})
        console.log(tagMap)
				this.dictMap = {
					...tagMap,
					...dict.data,
				}
			},
			getDropdownOption(key) {
				if (!this.dictMap[key]) return []
				const keyMap = {
					enterprises_area: '区域',
					hy: '行业',
					st: '生态',
					wr: '污染',
				}
				if (['enterprises_area'].includes(key)) {
					const data = this.dictMap[key].map(d => {
						return {
							value: d.value,
							text: d.label,
						}
					})
					data.push({
						value: '',
						text: keyMap[key],
					})
          return data
				}
				const data = this.dictMap[key].map(d => {
					return {
						value: d.id,
						text: d.tagName,
					}
				})
				data.push({
					value: '',
					text: keyMap[key],
				})

				return data
			},
			querySelect(v, key) {
				this.queryParams[key] = v.detail
				this.queryEnterprise()
			},
			handleSearch(e) {
				this.queryParams.pageNum = 1 // 重置页码
				this.queryParams.name = e.detail // 更新搜索关键字
				this.getPolicyList()
			},
			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: '',
					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: 12px;
		padding: 0 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;
		}
		&:active {
			background-color: $cs-color-touch;
		}
		.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;
		border-bottom: 1px solid #f1f1f4;
	}

	::v-deep .u-list {
		padding: 12px;
	}
</style>