ruoyi-miniapp/sub/task/detail.vue

<template>
  <cs-page>
    <view class="detail-container">
      <view class="box detail">
        <text class="wd-font-800 wd-text-16" style="margin-bottom: 4px">xxxx</text>
        <view class="tagList">
          <view v-for="(item, index) in 3" :key="index" class="tag">标签{{ index }}</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">2024/12/15~2025/12/15</text>
          </view>
          <view class="wd-flex" style="align-items: center; gap: 4px">
            <u-icon name="account" color="#17C653" />
            <text class="wd-text-13 wd-font-800">姓名</text>
            <text class="wd-text-13">部门</text>
          </view>
        </view>
        <view class="" style="font-size: 13px; line-height: 160%">
          任务要求任务要求任务要求任务要求任务要求任务要求任务要求任务要求任务要求任务要求任务要求任务要求任务要求任务要求任务要求任务要求任务要求任务要求任务要求任务要求
        </view>
        <view class="audit">111</view>
      </view>
      <scroll-view scroll-y="true" class="list">
        <view class="record" v-for="record in 10" :key="record.id">
          <view :class="{ select: true, isSelect: false }" @tap="select()">
            <u-icon name="checkbox-mark" size="16px" color="#fff"></u-icon>
          </view>
          <view class="info">
            <view class="name">义县某某环保企业名称</view>
            <view style="font-size: 13px">某某区工业产业园5-182号</view>
            <view class="tagList" style="margin-top: 8px">
              <view v-for="(item, index) in 3" :key="index" class="tag">标签{{ index }}</view>
            </view>
          </view>
          <view class="audit">111</view>
        </view>
        <u-loadmore :status="load" marginTop="20" />
      </scroll-view>
    </view>
  </cs-page>
</template>

<script>
import { getEnterPrise } from '@/api/enterprise/index.js'
import { getDictBatchByType } from '@/api/system/dict.js'
export default {
  data() {
    return {
      detail: {
        id: ''
      },
      isSelect: false,
      dictMap: {}
    }
  },
  onLoad(res) {
    if (res.id) {
      this.detail.id = res.id
    }
    // this.getDict()
    this.init()
  },
  methods: {
    /**
     * 获取字典
     */
    async getDict() {
      const dict = await getDictBatchByType({ type: ['enterprises_type', 'enterprise_qua'].join(',') })
      this.dictMap = {
        ...dict.data
      }
    },
    async init() {},
    goBack() {
      uni.switchTab({
        url: '/pages/task'
      })
    },
    select() {
      this.isSelect = !this.isSelect
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-container {
  padding: 12px;
  position: relative;
  color: $cs-color-grey;
  .box {
    margin-bottom: 12px;
    background-color: #fff;
    border-radius: $cs-border-radius;
    padding: 16px;
  }
  .detail {
    display: flex;
    flex-flow: column nowrap;
    gap: 12px;
    position: relative;
  }
  .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;
    }
  }
  .list {
    height: 65vh;
    padding-bottom: 30px;
    .record {
      background-color: #fff;
      display: flex;
      padding: var(--Number-12px, 12px);
      align-items: center;
      border-radius: var(--Number-8px, 8px);
      border: 1px solid var(--LightMode-Grey-Grey-100, #f9f9f9);
      margin-bottom: 12px;
      position: relative;
      .select {
        width: 24px;
        height: 24px;
        border: 2px solid $cs-color-main;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.2s all;
        margin-right: 16px;
      }
      .isSelect {
        background-color: $cs-color-main;
      }
      .info {
        font-size: 13px;
        .name {
          font-size: 16px;
          font-weight: 600;
          color: #071437;
          margin-bottom: 4px;
        }
      }
    }
  }
  .audit {
    position: absolute;
    right: -10px;
    top: 6px;
    transform: rotateZ(45deg);
    transform-origin: 50% 50%;
    padding: 4px 20px;
    font-size: 12px;
    text-align: center;
  }
}
</style>