ruoyi-miniapp/sub/enterprise/detail.vue

<template>
  <scroll-view class="detail-container" scroll-y>
    <view class="box detail">
      <view>
        <text class="wd-font-800 wd-text-16" style="margin-bottom: 4px">
          {{ detail.enterprisesName }}
        </text>
      </view>
      <view class="address" @click="goView(detail)">
        <u-icon name="map" size="14" color="#17C653"></u-icon>
        <text style="text-decoration: underline">
          {{ detail.address }}
        </text>
      </view>
      <view class="tagList">
        <view class="tag">
          {{ $dict.echoDicValue(dictMap.enterprises_type, detail.type) }}
        </view>
        <view class="tag">
          {{ $dict.echoDicValue(dictMap.enterprises_area, detail.region) }}
        </view>
        <view
          class="tag"
          v-for="(tag, index) in detail.tagList"
          :key="index"
        >
          {{ tag }}
        </view>
      </view>
      <view class="wd-flex" style="align-items: center">
        <text class="address" style="margin-right: 8px">环保负责人</text>
        <text style="margin-right: 16px">
          {{ detail.contactName }}
        </text>
        <text class="address" style="margin-right: 8px">联系方式</text>
        <text style="text-decoration: underline">
          {{ detail.environmentalContactPhone }}
        </text>
      </view>
      <view class="images-box">
        <image
          v-for="(src, index) in detail.files"
          :key="index"
          :src="src.url"
          mode="widthFix"
          class="image"
        ></image>
      </view>
      <cs-text-more
        color="#4B5675"
        :value="detail.introduction"
      ></cs-text-more>
      <view class="status">
        <cs-dict-tag
          :dict="dictMap.enterprises_status"
          :value="detail.enterprisesStatus"
        ></cs-dict-tag>
      </view>
    </view>

    <view
      class="box wd-text-12 prove"
      v-for="prove in detail.qualificationList"
      :key="prove.id"
    >
      <view class="wd-flex" style="gap: 8px; position: relative">
        <image
          src="@/static/images/enterprise/zz.png"
          style="width: 90px; height: 70px"
          mode="widthFix"
        ></image>
        <view
          style="flex: 1; justify-content: space-between"
          class="wd-flex wd-flex-col"
        >
          <view class="wd-flex" style="gap: 8px; align-items: center">
            <text class="label">资质名称</text>
            <view>
              {{
                $dict.echoDicValue(
                  dictMap.enterprise_qua,
                  prove.qualificationName.toString()
                )
              }}
            </view>
          </view>
          <view class="wd-flex" style="gap: 8px; align-items: center">
            <text class="label">资质编号</text>
            <view>
              {{ prove.enterpriseAuth }}
            </view>
          </view>
          <view class="wd-flex" style="gap: 8px; align-items: center">
            <text class="label">资质时限</text>
            <view>
              {{ $util.formatDate(prove.handleDate, 'YYYY/M/D') }} ~
              {{ $util.formatDate(prove.expiryDate, 'YYYY/M/D') }}
            </view>
          </view>
        </view>
      </view>
      <view class="status">
        <cs-dict-tag
          :dict="dictMap.enterprise_qualification_status"
          :value="prove.status"
        ></cs-dict-tag>
      </view>
    </view>

    <cs-bottom-wrapper>
      <view class="operation">
        <view
          class="btn green"
          @tap="showModel = true"
          v-if="!detail.isAudit"
        >
          确认审核
        </view>
        <view
          :class="['btn', total > 0 ? 'green' : 'grey']"
          @tap="goInspections"
          v-else
        >
          执法记录
          <text v-if="total > 0">({{ total }})</text>
        </view>
      </view>
    </cs-bottom-wrapper>

    <u-modal
      :show="showModel"
      confirmText="返回"
      showCancelButton
      cancel-text="确认"
      cancel-color="#17C653"
      confirm-color="#071437"
      @confirm="showModel = false"
      @cancel="postApi"
    >
      <view class="wd-flex wd-flex-col wd-flex-center" style="gap: 10px">
        <view style="font-size: 18px; color: #071437; font-weight: 800">
          是否审核?
        </view>
        <view class="">请确保企业信息真实性</view>
      </view>
    </u-modal>
  </scroll-view>
</template>

<script>
import {
  getEnterPrise,
  checkEnterprise,
  getTaskList
} from '@/api/enterprise/index.js'
import { getDictBatchByType } from '@/api/system/dict.js'
export default {
  data() {
    return {
      detail: {
        id: '',
        type: '',
        region: ''
      },
      showModel: false,
      dictMap: {},
      total: 0
    }
  },
  onLoad(res) {
    if (res.id) {
      this.detail.id = res.id
    }
    this.getDict()
    this.init()
  },
  methods: {
    /**
     * 获取字典
     */
    async getDict() {
      const dict = await getDictBatchByType({
        type: [
          'enterprises_type',
          'enterprises_area',
          'enterprises_status',
          'enterprise_qualification_status'
        ].join(',')
      })
      this.dictMap = {
        ...dict.data
      }
    },
    async init() {
      const res = await getEnterPrise(this.detail.id)
      this.detail = res.data
      this.getTaskLength()
    },
    goBack() {
      uni.switchTab({
        url: '/pages/enterprise'
      })
    },
    goView(enterprise) {
      if (!enterprise.gpsLocation) {
        uni.showToast({
          icon: 'none',
          title: '暂无gps信息'
        })
        return
      }
      const position = enterprise.gpsLocation.split(',')
      this.$util.viewPosition({
        lat: position[0],
        lng: position[1],
        name: enterprise.enterprisesName
      })
    },
    postApi() {
      checkEnterprise(this.detail.id).then(() => {
        uni.showToast({
          icon: 'none',
          title: '操作成功'
        })
        this.showModel = false
        this.init()
      })
    },
    getTaskLength() {
      const data = {
        enterpriseId: this.detail.id,
        pageNo: 1,
        pageSize: 10
      }
      getTaskList(data).then(res => {
        this.total = res.data.total
      })
    },
    goInspections() {
      if (this.total > 0) {
        uni.navigateTo({
          url: `/sub/inspection/detail?enterprisesId=${this.detail.id}&enterprisesName=${this.detail.enterprisesName}`
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-container {
  padding: 12px;
  position: relative;
  .box {
    margin-bottom: 12px;
    background-color: #fff;
    border-radius: $cs-border-radius;
    padding: 16px;
  }
  .detail {
    display: flex;
    flex-flow: column nowrap;
    gap: 12px;
    .address {
      display: flex;
      flex-flow: row nowrap;
      gap: 5px;
      color: $uni-text-color-grey;
    }
    .tagList {
      display: flex;
      gap: 4px;
      flex-flow: row wrap;
      color: $uni-text-color-grey;
      .tag {
        font-size: 12px;
        display: flex;
        padding: 2px 6px;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
        background: #f9f9f9;
      }
    }
    .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;
    }
  }
  .prove {
    position: relative;
    overflow: hidden;
    .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;
    }
  }
  .images-box {
    display: flex;
    flex-flow: row nowrap;
    gap: 12px;
    .image {
      width: 96px;
      height: 96px;
      border-radius: $cs-border-radius;
    }
  }
}

.label {
  color: $uni-text-color-grey;
}
.icon-box {
  position: absolute;
  left: 0;
}
.operation {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  .btn {
    flex: 1;
    border-radius: 8px;
    display: flex;
    padding: 12px 0;
    align-items: center;
    justify-content: center;
  }
  .green {
    background-color: $cs-color-main;
    color: #fff;
  }
  .grey {
    background: #f1f1f4;
    color: #99a1b7;
  }
}
</style>