Friendship-and-chat-uniapp/src/pages/tabbar/components/scroll-user.vue

<template>
  <scroll-list
    class="h-full"
    :loadMoreStatus="loadMoreStatus"
    @refresh="refreshList"
    @loadMore="listLoadMore"
    :scroll-top="scrollTop"
  >
    <view v-if="isRefreshing" class="py-2 px-4" v-for="index in 4" :key="index">
      <view class="flex">
        <wd-skeleton :row-col="[{ size: '100px', type: 'rect' }]" animation="gradient" />
        <wd-skeleton
          :custom-style="{ width: '100%', marginLeft: '12px' }"
          :row-col="[{ width: '100%' }, { width: '100%' }]"
          animation="gradient"
        />
      </view>
      <view class="flex -mt-50px">
        <wd-skeleton :row-col="[{ size: '100px', type: 'rect' }]" animation="gradient" />
        <wd-skeleton
          :custom-style="{ width: '100%', marginLeft: '12px' }"
          :row-col="[{ width: '100%' }, { width: '50%' }]"
          animation="gradient"
        />
      </view>
    </view>
    <user-card
      v-else-if="listData.length"
      v-for="user in listData"
      :key="user.id"
      :data="user"
      :backdropFilter="backdropFilter"
      @click="detail(user)"
    />
    <wd-status-tip v-else image="content" tip="暂无内容" />
  </scroll-list>
  <wd-config-provider theme="dark">
    <wd-message-box />
    <wd-popup
      v-model="authShow"
      custom-style="border-radius:32rpx;"
      closable
      :safe-area-inset-bottom="true"
    >
      <view class="w-80vw py-3 text-center">
        <view class="text-lg text-color-theme">魅力女生认证</view>
        <image class="size-400rpx" src="@/static/auth-message-box-bg.png" mode="aspectFill" />
        <view class="text-lg">— 认证特权 —</view>
        <view class="mx-6 flex flex-wrap gap-4 my-4">
          <view class="bg-#555 rounded-1 flex-1 text-xs flex items-center flex-nowrap">
            <view class="w-70rpx py-1 icon-bg-clip bg-#D29E52 rounded-l-1">
              <uni-icons type="vip-filled" color="#fff" size="12" />
            </view>
            <view class="flex-1 text-nowrap">优先推荐男士</view>
          </view>
          <view class="bg-#555 rounded-1 flex-1 text-xs flex items-center flex-nowrap">
            <view class="w-70rpx py-1 icon-bg-clip bg-#D29E52 rounded-l-1">
              <uni-icons type="hand-up-filled" color="#fff" size="12" />
            </view>
            <text class="flex-1 text-nowrap">免费私聊男士</text>
          </view>
        </view>
        <wd-button class="my-4 w-80%" size="medium" @click="goAuth">
          <text class="text-lg">魅力认证</text>
        </wd-button>
      </view>
    </wd-popup>
  </wd-config-provider>
</template>

<script setup lang="ts">
  import { computed, onMounted, reactive, ref, watch } from 'vue';
  // @ts-ignore
  import sheep from '@/sheep';
  import ScrollList from '@/sheep/components/scroll-list/scroll-list.vue';
  import UserCard from '@/sheep/components/user-card/user-card.vue';
  import useScroll from '@/sheep/hooks/use-scroll';
  import RecentApi from '@/sheep/api/member/recent';
  import { useMessage } from '@/uni_modules/wot-design-uni';

  const message = useMessage();

  const props = defineProps<{
    scene: string;
  }>();

  const userCity = computed(() => sheep.$store('user').userCity);
  const userInfo = computed(() => sheep.$store('user').userInfo);
  const backdropFilter = computed(() => {
    const vip = userInfo.value?.memberVip.vip;
    return (props.scene === 'SQUARE_NEW_PERSON' || props.scene === 'SQUARE_FEMALE') && !vip;
  });

  const scrollTop = ref(1);
  const authShow = ref(false);
  const params = reactive({
    scene: props.scene,
    province: '',
    city: userCity.value.t,
    memberId: '',
  });
  const { isRefreshing, listData, loadMoreStatus, refreshList, listLoadMore } = useScroll(
    RecentApi.quickPage,
    params,
  );

  onMounted(() => {
    refreshList();
  });

  watch(
    () => userCity.value,
    async (city) => {
      params.city = city.t;
      await refreshList();
      scrollTop.value = 0;
    },
  );

  const goAuth = () => {
    uni.navigateTo({
      url: '/pages/profile/verify-status',
    });
  };

  // 判断查看用户详情时有无权限
  const judgeGetByUserRole = async (user: any) => {
    const { code } = await RecentApi.judgeGetByUserRole({ id: user.memberId });
    if (code === 2001000007) {
      authShow.value = true;
      return;
    }

    if (code === 2001000008) {
      message
        .confirm({
          title: '获取VIP特权',
          msg: '请先开通VIP会员',
          confirmButtonText: '获取会员',
          zIndex: 9999,
        })
        .then(() => {
          uni.navigateTo({
            url: '/pages/profile/apply-vip',
          });
        });
      return;
    }

    uni.navigateTo({
      url: `/pages/home/detail?memberId=${user.memberId}`,
      success: function (res) {
        res.eventChannel.emit('viewRecordType', 'USER');
      },
    });
  };

  const detail = async (user: any) => {
    // 如果男生 查看‘新人’分类-SQUARE_NEW_PERSON 且 未开通会员
    if (props.scene === 'SQUARE_NEW_PERSON' && backdropFilter.value) {
      message
        .confirm({
          title: '获取VIP特权',
          msg: '请先开通VIP会员',
          confirmButtonText: '获取会员',
          zIndex: 9999,
        })
        .then(() => {
          uni.navigateTo({
            url: '/pages/profile/apply-vip',
          });
        });
      return;
    }

    // 如果女生 查看‘vip男士’分类-SQUARE_VIP_MALE 或 ‘女生’分类-SQUARE_FEMALE
    if (props.scene === 'SQUARE_VIP_MALE' || props.scene === 'SQUARE_FEMALE') {
      await judgeGetByUserRole(user);
      return;
    }

    uni.navigateTo({
      url: `/pages/home/detail?memberId=${user.memberId}`,
      success: function (res) {
        res.eventChannel.emit('viewRecordType', 'USER');
      },
    });
  };
</script>

<style>
  .icon-bg-clip {
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
  }
</style>