menduner-uniapp/pagesA/seenMe/index.vue

<template>
  <view
    style="height: 100vh; position: relative;"
    :class="{
      'disable1': userInfo?.vipExpireDate > Date.now() && !userInfo?.entitlement?.viewersList,
      'disable2': !userInfo?.vipExpireDate || (userInfo?.vipExpireDate && userInfo?.vipExpireDate < Date.now())
    }"
  >
    <scroll-view v-if="showList" class="scrollBox" scroll-y="true" @scrolltolower="loadingMore">
      <view v-if="list.length > 0">
        <view v-for="(item, index) in list" :key="index" class="list-item default-border defaultBgc" @click="jumpToEnterpriseDetail(item.enterprise.id)">
          <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" style="font-size: 28rpx;">
              <span class="MiSans-Normal ss-m-r-10">{{ item.contact?.name }}</span>
              <span class="MiSans-Normal">{{ item.post?.nameCn }}</span>
            </view>
          </view>
          <view class="ss-m-y-30" style="border-top: 1rpx solid #E1E4E9"></view>
          <view>
            <view class="d-flex align-center">
              <view class="">
                <image class="default-radius default-border" :src="item.enterprise.logoUrl" style="width: 50px; height: 50px; object-fit: contain;"></image>
              </view>
              <view style="flex: 1;" class="ss-m-l-30">
                <view class="enterprise-name ellipsis default-text-color MiSans-Semibold">{{ formatName(item.enterprise.anotherName || item.enterprise.name) }}</view>
                <!-- 行业规模 -->
                <view>
                  <span class="tag-gap color-666" style="font-size: 24rpx;">
                    <span class="MiSans-Normal ss-m-r-10">{{item.enterprise.industryName }}</span>
                    <span class="MiSans-Normal">{{item.enterprise.scaleName }}</span>
                  </span>
                </view>
                <view class="color-666 ss-m-t-10 MiSans-Normal" style="font-size: 22rpx;">查看时间：{{ 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, computed } from 'vue'
import { getInterestedMePage } from '@/api/user'
import { dealDictObjData, jumpToEnterpriseDetail } from '@/utils/position'
import { getUserAvatar } from '@/utils/avatar'
import { timesTampChange } from '@/utils/date'
import { formatName } from '@/utils/getText'
import { userStore } from '@/store/user'
import { onShow } from '@dcloudio/uni-app'

const status = ref('more')
const queryParams = ref({
  pageNo: 1,
  pageSize: 10
})
const useUserStore = userStore()
const userInfo = computed(() => useUserStore?.userInfo)
// 当前会员套餐是否可查看此模块
const showList = computed(() => (new Date().getTime() < useUserStore?.userInfo?.vipExpireDate) && useUserStore?.userInfo?.entitlement?.viewersList)

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'
}

onShow(() => {
	// 有会员权益能查看才请求接口
	if (showList.value) getList()
})

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

// 跳转会员套餐
// const handleToBuyVip = () => {
// 	uni.navigateTo({
// 		url: '/pagesA/vipPackage/index'
// 	})
// }
</script>

<style scoped lang="scss">
.list-item {
  margin: 30rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 1px 2px 12px rgba(0, 0, 0, 0.17);
  &:last-child {
    margin-bottom: 0;
  }
  &:first-child {
    margin-top: 0;
  }
}
.sub-li-bottom {
  display: flex;
  align-items: center;
  .avatarBox {
    max-width: 40px;
    max-height: 40px;
  }
}
.enterprise-name {
  font-weight: bold;
  font-size: 16px;
  width: 70vw;
  max-width: 70vw;
}
.noviewlist {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 98%;
	text-align: center;
	transform: translate(-50%, -50%);
	color: #666;
}
.text-line {
	color: #00B760;
	font-weight: bold;
	padding-bottom: 2px;
	border-bottom: 1px solid #00B760;
}
.disable1 {
  position: relative;
  overflow: hidden;
  padding: 0 30rpx;
  &::after {
    content: '当前会员套餐的福利不包含谁关注我';
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: 'MiSans-Semibold';
    color: #fff;
    top: 0;
    // border-radius: 12px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
  }
}
.disable2 {
  position: relative;
  overflow: hidden;
  padding: 0 30rpx;
  &::after {
    content: '谁关注我为会员福利内容';
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: 'MiSans-Semibold';
    color: #fff;
    top: 0;
    // border-radius: 12px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
  }
}
</style>