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="queryEnterprise"
        @clear="resetQuery('enterpriseName')"
        id="sreach"
      />
      <van-dropdown-menu safe-area-tab-bar active-color="#17C653">
        <van-dropdown-item
          :value="queryParams.qy"
          :options="getDropdownOption('qy')"
          @change="
            v => {
              querySelect(v, 'qy')
            }
          "
        />
        <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" 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="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'].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 = {
        qy: '区域',
        hy: '行业',
        st: '生态',
        wr: '污染'
      }
      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()
    },
    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>