ruoyi-miniapp/sub/invite/index.vue

<template>
  <scroll-view class="view-container">
    <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" @tap="goDetail(enterprise.id)">
        <view>
          {{ enterprise.enterprisesName }}
        </view>
        <view class="wd-flex" style="gap: 8px">
          <u-avatar
            :src="enterprise.files[0].url"
            shape="square"
            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">
                  {{
                    `${$dict.echoDicValue(
                      dictMap.enterprises_area,
                      enterprise.region
                    )} | ${enterprise.address}`
                  }}
                </text>
              </view>
              <view class="tagList">
                <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">
        <button
          class="box-btn red"
          open-type="share"
          @tap="shareEntprise(enterprise.id)"
        >
          变更管理人
        </button>
        <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 v-if="inviteId">
      <view class="operation">
        <button class="btn green" @tap="addEnterprise">新增企业</button>
      </view>
    </cs-bottom-wrapper>
  </scroll-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: {},
      share: {
        title: '企业变更管理', // 标题
        path: `/sub/invite/index?inviteId=${this.$store.getters.userId}`,
        imageUrl: 'https://hb.jzce.com/fx_bggl.png'
      }
    }
  },
  onShow() {
    this.getList()
  },
  onLoad(res) {
    if (res.inviteId) {
      this.inviteId = res.inviteId
    }
    this.getDict()
    this.getList()
  },
  onShareAppMessage() {
    return this.share
  },
  onPullDownRefresh() {
    this.getList()
  },
  methods: {
    getList() {
      uni.showLoading({
        title: '加载中...'
      })
      vertifyName({ enterpriseUserId: this.$store.getters.userId }).then(
        res => {
          this.list = res.data.list
          uni.stopPullDownRefresh()
          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}`
      })
    },
    goDetail(id) {
      uni.navigateTo({
        url: `/sub/enterprise/detail?id=${id}&view=true`
      })
    },
    shareEntprise(id) {
      this.share = {
        title: '企业变更管理', // 标题
        path: `/sub/enterprise/detail?id=${id}&view=true&change=true`,
        imageUrl: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.view-container {
  padding: 0 24rpx;
  display: flex;
  flex-flow: column nowrap;
  position: relative;
  padding-bottom: 13vh;
  &::-webkit-scrollbar {
    display: none;
  }
}
.emty {
  margin-top: 24rpx;
  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 {
  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);
  position: relative;
  overflow: hidden;
  margin-top: 24rpx;
  .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;
    overflow: hidden;
    .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;
      font-size: 14px;
    }
    .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>