ruoyi-miniapp/sub/invite/index.vue

<template>
  <view class="view">
    <view class="emty" v-if="list.length == 0">
      <image
        src="/static/images/emty.png"
        style="width: 79px; height: 79px"
        mode="widthFix"
      ></image>
      <text>暂无数据</text>
    </view>

    <view
      class="enterprise"
      v-for="enterprise in list"
      :key="enterprise.id"
    >
      <view class="info">
        <view>
          {{ enterprise.enterprisesName }}
        </view>
        <view class="wd-flex" style="gap: 8px">
          <u-avatar
            :src="enterprise.files[0].url"
            shape="cricle"
            style="width: 53px; height: 53px"
          ></u-avatar>
          <view class="">
            <view class="">
              <view class="wd-flex wd-pb-8px">
                <u-icon name="map" size="14" color="#17C653"></u-icon>
                <text class="address wd-text-12" style="margin-left: 4px">
                  {{ enterprise.address }}
                </text>
              </view>
              <view class="tagList">
                <view class="tag">
                  {{
                    $dict.echoDicValue(
                      dictMap.enterprises_area,
                      enterprise.region
                    )
                  }}
                </view>
                <view
                  class="tag"
                  v-for="(tag, index) in enterprise.tagList"
                  :key="index"
                >
                  {{ tag }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="wd-flex" style="align-items: center">
          <text class="address" style="margin-right: 8px; color: #4b5675">
            环保负责人
          </text>
          <text style="margin-right: 16px">
            {{ enterprise.contactName }}
          </text>
          <text class="address" style="margin-right: 8px; color: #4b5675">
            联系方式
          </text>
          <text style="">
            {{ enterprise.environmentalContactPhone }}
          </text>
        </view>
      </view>
      <view class="opera">
        <view class="box-btn red">变更管理人</view>
        <view class="box-btn green" @tap="editEnterprise(enterprise.id)">
          编辑该企业
        </view>
      </view>
      <view
        class="audit"
        v-if="!enterprise.isAudit"
        style="color: #f6b100; background-color: #fff8dd"
      >
        待审核
      </view>
    </view>

    <cs-bottom-wrapper>
      <view class="operation">
        <button class="btn green" @tap="addEnterprise">新增企业</button>
      </view>
    </cs-bottom-wrapper>
  </view>
</template>

<script>
import { vertifyName } from '@/api/enterprise/index.js'
import { getTagData, getDictBatchByType } from '@/api/system/dict.js'
export default {
  data() {
    return {
      inviteId: '',
      list: [],
      dictMap: {}
    }
  },
  onLoad(res) {
    if (res.inviteId) {
      this.inviteId = res.inviteId
    }
    this.getDict()
    this.getList()
  },
  methods: {
    getList() {
      uni.showLoading({
        title: '加载中...'
      })
      vertifyName({ enterpriseUserId: this.$store.getters.userId }).then(
        res => {
          this.list = res.data.list
          uni.hideLoading()
        }
      )
    },
    async getDict() {
      const tags = await getTagData(['qy', ' hy', 'st', 'wr'].join(','))
      const dict = await getDictBatchByType({
        type: ['user_audit_type', 'enterprises_area'].join(',')
      })
      let tagMap = {}
      tags.data.forEach(t => {
        tagMap[t.tagCode] = t.children
      })
      this.dictMap = {
        ...tagMap,
        ...dict.data
      }
    },
    addEnterprise() {
      uni.navigateTo({
        url: `/sub/invite/addEnterprise?inviteId=${this.inviteId}`
      })
    },
    editEnterprise(id) {
      uni.navigateTo({
        url: `/sub/invite/addEnterprise?inviteId=${this.inviteId}&id=${id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.view {
  padding: 12px;
  display: flex;
  flex-flow: column nowrap;
  gap: 12px;
  overflow: hidden;
  overflow-y: scroll;
  max-height: 100vh;
  padding-bottom: 12vh;
}
.emty {
  border-radius: 8px;
  height: 550rpx;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  gap: 12px;
  color: #99a1b7;
}
.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;
  }
}
.enterprise {
  padding: 12px;
  border-radius: var(--Number-12px, 12px);
  border: 1px solid var(--LightMode-Grey-Grey-200, #f1f1f4);
  background: #fff;
  display: flex;
  padding: var(--Number-16px, 16px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Number-16px, 16px);
  align-self: stretch;
  position: relative;
  overflow: hidden;
  .audit {
    position: absolute;
    right: -19px;
    top: 6px;
    transform: rotateZ(45deg);
    transform-origin: 50% 50%;
    padding: 4px 20px;
    font-size: 12px;
    text-align: center;
  }
  .info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Number-12px, 12px);
    align-self: stretch;
    .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;
      }
    }
  }
  .opera {
    display: flex;
    flex-flow: row nowrap;
    gap: 16px;
    width: 100%;
    .box-btn {
      flex: 1;
      border-radius: var(--Number-8px, 8px);
      display: flex;
      padding: var(--Number-12px, 12px);
      justify-content: center;
      align-items: center;
      gap: var(--Number-12px, 12px);
      flex: 1 0 0;
    }
    .red {
      background: var(--LightMode-Orange-Orange-Light, #fff5ef);
      color: var(--LightMode-Orange-Orange, #ff6f1e);
    }
    .green {
      background: var(--LightMode-Success-Success-Light, #eafff1);
      color: var(--LightMode-Success-Success, #17c653);
    }
  }
}
</style>