ruoyi-miniapp/pages/enterprise.vue

<template>
  <cs-page :selected="3" title="企业档案" isTab>
    <view class="page-container">
      <van-search
        :value="queryParams.enterprisesName"
        placeholder="输入企业名称或类型查询"
        @sreach="queryEnterprise"
        @clear="resetQuery('enterpriseName')"
      />
      <van-dropdown-menu safe-area-tab-bar>
        <van-dropdown-item
          :value="queryParams.region"
          :options="getDropdownOption('enterprises_area')"
          @change="queryEnterprise"
        />
        <van-dropdown-item :value="queryParams.dept" :options="getDropdownOption('dept')" @change="queryEnterprise" />
      </van-dropdown-menu>
      <u-list @scrolltolower="loadMore" class="list" height="67vh">
        <u-list-item v-for="enterprise in list" :key="enterprise.id">
          <view class="wd-flex wd-items-center enterprise" @click="goDetail(enterprise.id)">
            <u-avatar :src="enterprise.files[0]" shape="square" size="64"></u-avatar>
            <view class="wd-flex wd-flex-col" style="gap: 4px">
              <text class="wd-font-800">{{ enterprise.enterprisesName }}</text>
              <text class="address">{{ enterprise.address }}</text>
            </view>
            <view
              class="audit"
              v-if="enterprise.audit != 2"
              :style="{ color: enterprise.audit == 1 ? '#EAB308' : '#ea000c' }"
            >
              {{ $dict.echoDicValue(dictMap.user_audit_type, enterprise.audit) }}
            </view>
          </view>
        </u-list-item>
        <u-loadmore :status="load" />
      </u-list>
    </view>
  </cs-page>
</template>

<script>
import { getEnterPriseList } from '@/api/enterprise/index.js'
import { getDictBatchByType, getDeptTree } from '@/api/system/dict.js'
export default {
  data() {
    return {
      queryParams: {
        pageSize: 10,
        pageNo: 1,
        region: '',
        dept: '',
        enterprisesName: ''
      },
      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 dict = await getDictBatchByType({ type: ['enterprises_area', 'user_audit_type'].join(',') })
      const dept = await getDeptTree()
      this.dictMap = {
        ...dict.data,
        dept: dept.data.map(i => {
          return {
            ...i,
            label: i.name,
            value: i.id
          }
        })
      }
    },
    getDropdownOption(key) {
      if (!this.dictMap[key]) return []
      const keyMap = {
        enterprises_area: '全部区域',
        dept: '全部部门'
      }
      const data = this.dictMap[key].map(d => {
        return {
          value: d.value,
          text: d.label
        }
      })
      data.push({
        value: '',
        text: keyMap[key]
      })
      return data
    },
    queryEnterprise() {
      this.queryParams.pageNo = 1
      this.load = 'loadmore'
      this.list = []
      this.getList()
    },
    loadMore() {
      if (this.load == 'nomore') {
        uni.showToast({
          title: '没有更多了',
          icon: 'none'
        })
        return
      }
      this.queryParams.pageNo++
      this.getList()
    },
    resetQuery(key) {
      this.queryParams[key] = ''
      this.queryEnterprise()
    },
    goDetail(id) {
      uni.navigateTo({
        url: `/sub/enterprise/detail?id=${id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  height: 100%;
  overflow: hidden;
}
.enterprise {
  padding: 12px;
  background-color: #fff;
  border-radius: $cs-border-radius;
  gap: 12px;
  margin-top: 12px;
  position: relative;
  .address {
    color: $uni-text-color-grey;
  }
  .audit {
    position: absolute;
    right: 1%;
    top: 16%;
    transform: rotateZ(39deg);
    transform-origin: 50% 50%;
  }
}
::v-deep .van-dropdown-menu {
  box-shadow: none;
}

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