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"
        @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"
        />
        <view style="height: 96rpx; width: 100%" v-else></view>
        <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()
      query
        .select('#page')
        .boundingClientRect()
        .select('.drop-box')
        .boundingClientRect()
        .select('#sreach')
        .boundingClientRect()
        .exec(data => {
          this.listHeight =
            data[0].height - data[1].height - data[2].height - 25
        })
    },
    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: '行业类别'
      }
      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;
  &:last-child {
    margin-bottom: 48rpx;
  }
  .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;
    justify-content: space-between;
    padding: 12rpx 24rpx;
  }
}
::v-deep .van-search {
  padding-bottom: 0;
  .van-search__content {
    height: 44px;
    border-radius: 16rpx;
    align-items: center;
    .van-icon {
      font-size: 40rpx;
      font-weight: bold;
    }
    .van-field__body {
      height: 100%;
    }
    .select-title {
      font-size: 26rpx;
    }
  }
}
::v-deep .u-list {
  padding: 24rpx;
}
</style>