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: 8rpx">
          {{ detail.enterprisesName }}
        </text>
      </view>
      <view class="address" @click="goView(detail)">
        <u-icon name="map" size="28rpx" color="#17C653"></u-icon>
        <text
          style="
            text-decoration: underline;
            color: #071437;
            font-size: 26rpx;
            padding-right: 3rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 528rpx;
            overflow: hidden;
          "
        >
          {{ detail.address }}
        </text>
      </view>
      <view class="tagList">
        <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: 24rpx">环保负责人</text>
        <text style="margin-right: 24rpx; color: #071437">
          {{ detail.contactName }}
        </text>
        <text class="address" style="margin-right: 24rpx">联系方式</text>
        <text
          style="text-decoration: underline; color: #071437"
          @click="callPhone(detail.environmentalContactPhone)"
        >
          {{ detail.environmentalContactPhone }}
        </text>
      </view>
      <view
        class="images-box"
        @click="$util.perviewImage(detail.files.map(i => i.url))"
      >
        <image
          v-for="(src, index) in detail.files"
          :key="index"
          :src="src.url"
          mode="aspectFill"
          class="image"
        ></image>
      </view>
      <cs-text-more :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: 18rpx; position: relative">
        <image
          :src="prove.files[0].url"
          style="width: 180rpx; height: 140rpx"
          mode="aspectFill"
          @click="$util.perviewImage([prove.files[0].url])"
        ></image>
        <view
          style="flex: 1; justify-content: space-between"
          class="wd-flex wd-flex-col"
        >
          <view class="wd-flex" style="gap: 18rpx; align-items: center">
            <text class="label" style="color: #78829d">资质名称</text>
            <view style="color: #071437">
              {{
                $dict.echoDicValue(
                  dictMap.enterprise_qua,
                  prove.qualificationName.toString()
                )
              }}
            </view>
          </view>
          <view class="wd-flex" style="gap: 18rpx; align-items: center">
            <text class="label">资质编号</text>
            <view style="color: #071437">
              {{ prove.enterpriseAuth }}
            </view>
          </view>
          <view class="wd-flex" style="gap: 18rpx; align-items: center">
            <text class="label">资质时限</text>
            <view style="color: #071437">
              {{
                prove.qualificationName == 99
                  ? '永久'
                  : $util.formatDate(prove.expiryDate, 'YYYY/M/D')
              }}
            </view>
          </view>
        </view>
      </view>
      <view class="status" v-if="prove.status != 1">
        <cs-dict-tag
          :dict="dictMap.enterprise_qualification_status"
          :value="prove.status"
        ></cs-dict-tag>
      </view>
    </view>

    <cs-bottom-wrapper v-if="isView">
      <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>

    <cs-bottom-wrapper v-if="isChange">
      <view class="operation">
        <view class="btn green">认领该企业</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: 32rpx; 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,
      isView: true,
      isChange: false
    }
  },
  onLoad(res) {
    if (res.id) {
      this.detail.id = res.id
    }
    if (res.view) {
      this.isView = false
    }
    if (res.change) {
      this.isView = false
      this.isChange = true
    }
    this.getDict()
    this.init()
  },
  methods: {
    /**
     * 获取字典
     */
    async getDict() {
      const dict = await getDictBatchByType({
        type: [
          'enterprises_type',
          'enterprises_area',
          'enterprises_status',
          'enterprise_qualification_status',
          'enterprise_qua'
        ].join(',')
      })
      this.dictMap = {
        ...dict.data
      }
    },
    callPhone(number) {
      uni.makePhoneCall({
        phoneNumber: number
      })
    },
    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,
        address: enterprise.address
      })
    },
    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: 24rpx;
  position: relative;
  .box {
    margin-bottom: 24rpx;
    background-color: #fff;
    border-radius: $cs-border-radius;
    padding: 24rpx;
  }
  .detail {
    display: flex;
    flex-flow: column nowrap;
    gap: 24rpx;
    .address {
      display: flex;
      flex-flow: row nowrap;
      gap: 10rpx;
      color: $uni-text-color-grey;
    }
    .tagList {
      display: flex;
      gap: 8rpx;
      flex-flow: row wrap;
      color: $uni-text-color-grey;
      .tag {
        font-size: 24rpx;
        display: flex;
        padding: 4rpx 12rpx;
        justify-content: center;
        align-items: center;
        border-radius: 4rpx;
        background: #f9f9f9;
      }
    }
    .status {
      position: absolute;
      right: -38rpx;
      top: 12rpx;
      transform: rotateZ(45deg) translateX(40rpx) translateY(-40rpx);
      transform-origin: 50% 50%;
      padding: 8rpx 40rpx;
      font-size: 24rpx;
      text-align: center;
    }
  }
  .prove {
    position: relative;
    overflow: hidden;
    .status {
      position: absolute;
      right: 0;
      top: 0;
      transform: rotateZ(45deg) translateX(60rpx) translateY(-41rpx);
      transform-origin: 50% 50%;
    }
  }
  .images-box {
    display: flex;
    flex-flow: row nowrap;
    gap: 24rpx;
    .image {
      width: 196rpx;
      height: 196rpx;
      border-radius: $cs-border-radius;
      flex-shrink: 0;
    }
  }
}

.label {
  color: $uni-text-color-grey;
}
.icon-box {
  position: absolute;
  left: 0;
}
.operation {
  padding: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24rpx;
  .red {
    background: var(--LightMode-Danger-Danger-Light, #ffeef3);
    color: var(--LightMode-Danger-Danger, #f8285a);
  }
  .btn {
    flex: 1;
    border-radius: 18rpx;
    display: flex;
    padding: 24rpx 0;
    align-items: center;
    font-weight: bold;
    justify-content: center;
  }
  .green {
    background-color: $cs-color-main;
    color: #fff;
  }
  .grey {
    background: #f1f1f4;
    color: #99a1b7;
  }
}
</style>