menduner-uniapp/pagesA/seenMe/index.vue

<template>
  <view class="defaultBgc ss-p-x-20" style="height: 100vh;">
    <scroll-view class="scrollBox" scroll-y="true" @scrolltolower="loadingMore">
      <view v-if="list.length > 0">
        <view v-for="(item, index) in list" :key="index" class="ss-m-t-20" @click="toDetail(item)">
          <view class="sub-li-bottom">
            <view class="avatarBox">
              <image class="r-avatar" :src="getUserAvatar(item.contact.avatar, item.contact.sex)"></image>
            </view>
            <view class="ss-m-l-30">
              <span>{{ item.contact?.name }}</span>
              <span class="ss-m-x-10" v-if="item.contact?.name && item.contact?.nameCn"> | </span>
              <span>{{ item.post?.nameCn }}</span>
            </view>
          </view>
          <view style="background-color: #fff; border-radius: 0 0 12px 12px;" class="ss-p-30">
            <view class="d-flex align-center">
              <image :src="item.enterprise.logoUrl" style="width: 50px; height: 50px;"></image>
              <view style="flex: 1;" class="ss-m-l-30">
                <view class="enterprise-name ellipsis">{{ dealEnterpriseName(item.enterprise.anotherName || item.enterprise.name) }}</view>
                <!-- 行业规模 -->
                <view class="ss-m-y-15 font-size-12">
                  <span class="tag-gap color-666">
                    <span>{{item.enterprise.industryName }}</span>
                    <span class="ss-m-x-10" v-if="item.enterprise.industryName && item.enterprise.scaleName">|</span>
                    <span>{{item.enterprise.scaleName }}</span>
                  </span>
                </view>
                <!-- 标签 -->
                <view>
                  <uni-tag 
                    v-for="(tag, i) in item.enterprise.tagList || []"
                    :key="i"
                    class="ss-m-r-10"
                    :text="tag"
                    inverted="false"
                    size="mini"
                    custom-style="background-color: #eef1f7;color:#7f828b;border-color:#eef1f7;"
                  />
                </view>
                <view class="color-666 font-size-13 ss-m-t-20">查看时间：{{ timesTampChange(item.updateTime) }}</view>
              </view>
            </view>
          </view>
        </view>
        <uni-load-more :status="status" />
      </view>
      <view v-else class="nodata-img-parent">
        <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { getInterestedMePage } from '@/api/user'
import { dealDictObjData } from '@/utils/position'
import { getUserAvatar } from '@/utils/avatar'
import { timesTampChange } from '@/utils/date'
import { dealEnterpriseName } from '@/utils/getText'

const status = ref('more')
const queryParams = ref({
  pageNo: 1,
  pageSize: 10
})

const list = ref([])
const getList = async () => {
  const res = await getInterestedMePage(queryParams.value)
  const arr = res?.data?.list || []
  if (arr?.length) {
    arr.forEach(e => {
      e.enterprise = dealDictObjData({}, e.enterprise)
    })
    list.value = list.value.concat(arr)
  }
  status.value = list.value?.length === +res.data.total ? 'noMore' : 'more'
}

getList()

// 加载跟多
const loadingMore = () => { 
  status.value = 'loading'
  queryParams.value.pageNo++
  getList()
}

// 企业详情
const toDetail = (item) => {
  uni.navigateTo({
    url: `/pagesB/companyDetail/index?id=${item.enterprise.id}`
  })
}
</script>

<style scoped lang="scss">
.sub-li-bottom {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
  font-size: 13px;
  padding: 5px 30rpx;
  border-radius: 12px 12px 0 0;
  .avatarBox {
    max-width: 40px;
    max-height: 40px;
  }
}
.enterprise-name {
  color: #333;
  font-weight: bold;
  font-size: 16px;
  width: 70vw;
  max-width: 70vw;
}
</style>