ruoyi-miniapp/sub/inspection/detail.vue

<template>
  <scroll-view scroll-y flex-enable class="view-container" st>
    <view
      class="box"
      @tap="goDetail(task)"
      v-for="task in list"
      :key="task.id"
    >
      <view class="wd-font-800">{{ task.title }}</view>
      <view class="tagList">
        <view
          v-for="(tag, index) in task.tagList"
          :key="index"
          class="tag"
        >
          {{ tag }}
        </view>
      </view>
      <view
        class="wd-flex wd-text-13"
        style="justify-content: space-between"
      >
        <view class="wd-flex" style="align-items: center; gap: 4px">
          <u-icon name="calendar" color="#17C653" />
          <text class="wd-text-13 wd-ml-4px">
            {{
              `${$util.formatDate(
                task.startDate,
                'YYYY/M/D'
              )} ~ ${$util.formatDate(task.endDate, 'YYYY/M/D')}`
            }}
          </text>
        </view>
      </view>
      <cs-text-more :value="task.description"></cs-text-more>
      <view class="status">
        <cs-dict-tag
          :dict="dictMap.task_state"
          :value="task.taskType"
        ></cs-dict-tag>
      </view>
    </view>
    <u-loadmore :status="load" marginTop="12" marginBottom="12" />
  </scroll-view>
</template>

<script>
import { getDictBatchByType } from '@/api/system/dict.js'
import { getTaskList } from '@/api/enterprise/index.js'
export default {
  data() {
    return {
      queryParams: {
        enterpriseId: '',
        pageNo: 1,
        pageSize: 10
      },
      list: [],
      dictMap: {},
      load: 'loadmore'
    }
  },
  onLoad(res) {
    uni.setNavigationBarTitle({
      title: res.enterprisesName
    })
    this.queryParams.enterpriseId = res.enterprisesId
    this.getDict()
    this.getList()
  },
  onReachBottom() {
    this.loadMore()
  },
  onPullDownRefresh() {
    this.reset()
  },
  methods: {
    /**
     * 获取字典
     */
    async getDict() {
      const dict = await getDictBatchByType({
        type: ['task_state'].join(',')
      })
      this.dictMap = {
        ...dict.data
      }
    },
    async getList() {
      uni.showToast({
        title: '加载中',
        mask: true,
        icon: 'loading'
      })
      this.load = 'loading'
      const res = await getTaskList(this.queryParams)
      this.list.push(...res.data.list)
      this.load = 'loadmore'
      if (this.list.length == res.data.total) {
        this.load = 'nomore'
      }
      uni.hideToast()
    },
    loadMore() {
      if (this.load == 'nomore') {
        uni.showToast({
          title: '没有更多了',
          icon: 'none'
        })
        return
      }
      this.queryParams.pageNo++
      this.getList()
    },
    reset() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    goDetail(task) {
      console.log(task)
      uni.navigateTo({
        url: `/sub/inspection/record?taskId=${task.inspectionsId}&taskName=${task.title}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.view-container {
  padding: 12px;
  flex-direction: column;
  white-space: nowrap;
  .box {
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: #fff;
    position: relative;
    margin-bottom: 12px;
    overflow: hidden;
    .tagList {
      display: flex;
      align-items: center;
      gap: var(--Number-4px, 4px);
      .tag {
        display: flex;
        padding: var(--Number-2px, 2px) var(--Number-6px, 6px);
        justify-content: center;
        align-items: center;
        gap: var(--Number-4px, 4px);
        border-radius: var(--Number-2px, 2px);
        background: var(--LightMode-Grey-Grey-100, #f9f9f9);
        color: var(--LightMode-Grey-Grey-600, #78829d);
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
    }
    .status {
      position: absolute;
      right: -19px;
      top: 6px;
      transform: rotateZ(45deg) translateX(20px) translateY(-20px);
      transform-origin: 50% 50%;
      padding: 4px 20px;
      font-size: 12px;
      text-align: center;
    }
  }
}
</style>