ruoyi-miniapp/pages/task.vue

<template>
  <cs-page :selected="1" title="执法任务" isTab>
    <view class="page-container">
      <van-dropdown-menu safe-area-tab-bar active-color="#17C653">
        <van-dropdown-item
          :value="queryParams.dept"
          :options="getDropdownOption('dept')"
          @change="
            v => {
              querySelect(v, 'dept')
            }
          "
        />
        <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"
      >
        <view
          v-for="enterprise in list"
          :key="enterprise.id"
          class="wd-flex wd-items-center enterprise"
          @click="goDetail(enterprise.id)"
        >
          <van-circle :value="Math.random() * 100" size="56" color="#17c653" layer-color="#F1F1F4">
            <template>
              <u-count-to :startVal="0" :endVal="Math.random() * 100" fontSize="16" bold duration="1000"></u-count-to>
              %
            </template>
          </van-circle>
          <view class="wd-flex wd-flex-col" style="gap: 4px">
            <text class="wd-font-800 wd-text-15 wd-pb-2px">{{ enterprise.enterprisesName }}</text>
            <view class="wd-flex wd-pb-8px">
              <u-icon name="clock" size="14" color="#17C653"></u-icon>
              <text class="address wd-text-12" style="margin-left: 4px">于2024年12月15日结束</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="20" />
      </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: '',
        dept: '',
        tagList: ''
      },
      refresherTriggered: false,
      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 tags = await getTagData(['qy', ' hy', 'st', 'wr'].join(','))
      const dict = await getDictBatchByType({ type: ['user_audit_type'].join(',') })
      const dept = await getDeptTree()
      let tagMap = {}
      tags.data.forEach(t => {
        tagMap[t.tagCode] = t.children
      })
      this.dictMap = {
        ...tagMap,
        ...dict.data,
        dept: dept.data.map(i => {
          return {
            ...i,
            text: i.name,
            value: i.id
          }
        })
      }
    },
    getDropdownOption(key) {
      if (!this.dictMap[key]) return []
      const keyMap = {
        qy: '区域',
        hy: '行业',
        st: '生态',
        wr: '污染',
        dept: '全部部门'
      }
      if (key == 'dept') {
        return [...this.dictMap[key], { value: '', text: keyMap[key] }]
      } else {
        return [
          ...this.dictMap[key].map(d => {
            return {
              value: d.id,
              text: d.tagName
            }
          }),
          { value: '', text: keyMap[key] }
        ]
      }
    },
    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: '',
        dept: '',
        tagList: ''
      }
      await this.queryEnterprise()
    },
    goDetail(id) {
      uni.navigateTo({
        url: `/sub/task/detail?id=${id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  height: 100%;
  overflow: hidden;
}
.list {
  height: 75vh;
  padding: 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;
  }
  .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;
}

::v-deep .u-list {
  padding: 12px;
}

::v-deep .u-count-num {
  font-size: 16px;
  font-family: 'WeChat Sans Std';
  font-weight: 800;
}
</style>