YzXyh_v3/UI/XYH.APP/src/pages-sub/friend/components/follow.vue

<template>
  <view v-if="appStore.amProfileStore.notDemo()" class="">
    <SearchBar
      v-model:query-type="queryType"
      v-model:search-input-value="searchInputValue"
      v-model:search-type="searchType"
      v-model:search-dropdown-value="searchDropdownValue"
      :search-dropdown-list="dropList"
      :search-placeholder="searchPlaceholder"
      :search-tab-list="searchTabList"
      :query-type-data="queryTypeData"
      :height="topHeight"
      @search="onSearch"
    ></SearchBar>
    <vb-list
      :query-fun="queryType == 0 ? apis.amActivity.friendApi.listFollowMe : apis.amActivity.friendApi.listFollow"
      :query-params="queryParams"
      :height="listHeight"
      :data-length="10"
      custom-class=" pt-10"
    >
      <template #item="{ item }">
        <vb-cell-group outset inset custom-class="">
          <view class="d-flex">
            <view class="d-fcv me-5" @click="onClick(item)">
              <view class="w-60px h-60px br-round bg-gray-3 pos-r">
                <view
                  class="w-20px h-20px m-auto br-round d-flex flex-center pos-a"
                  :class="{ 'bg-blue': item.friendGender == '0', 'bg-pink': item.friendGender == '1' }"
                  style="top: 0px; right: 0px"
                >
                  <i
                    class="iconfont fs-13 text-white"
                    :class="{
                      'icon-gender-male': item.friendGender == '0',
                      'icon-gender-female': item.friendGender == '1',
                    }"
                  ></i>
                </view>
                <image class="w-100 h-100 br-round" :src="getAvatar(item)"></image>
              </view>
            </view>
            <view class="w-100 px-10 flex-column justify-around" style="">
              <view class="d-flex align-center pb-3">
                <view class="text-black fs-20 font-bold">
                  {{ item.friendName }}
                </view>
                <!-- <view
                  class="px-8 py-3 fs-10 br-10 text-white ms-10"
                  :class="getStatusClass(item)"
                >
                  {{ getStatus(item) }}
                </view> -->
              </view>
              <view class="d-fcv fs-16">
                <text class="text-vb">{{ item.graduateYear }}届-{{ item.friendClass }}</text>
                <view class="text-gray-5 mx-8">|</view>
                <view class="text-vb">{{ item.friendCity }}</view>
              </view>
              <view class="d-fcv pt-5">
                <view class="text-gray-5 fs-14" v-if="item.friendLastLoginDate">{{ getLastLoginTime(item) }} 活跃</view>
              </view>
            </view>
            <view v-if="queryType == 0" class="flex-column d-fcv">
              <!-- <view class="bg-danger text-white text-center fs-14 py-3 w-50px br-5 mt-10" @click="onRemove(item)">
                删除
              </view> -->
              <!-- <view class="bg-gray-3 border border-1 text-center border-danger text-danger fs-14 py-3 w-50px br-5">
                拉黑
              </view> -->
            </view>
          </view>
        </vb-cell-group>
      </template>
    </vb-list>
  </view>
</template>

<script lang="ts" setup>
import apis from "@/api"
import route from "@/route"
import configs from "@/core/config"
import dayjs from "dayjs"
import relativeTime from "dayjs/plugin/relativeTime" // 导入插件
import "dayjs/locale/zh-cn" // 导入本地化语言
import appStore from "@/stores"
import SearchBar from "@/components/searchBar.vue"

dayjs.extend(relativeTime) // 使用插件
dayjs.locale("zh-cn") // 使用本地化语言

const props = withDefaults(
  defineProps<{
    type: number
    showRadiuChange?: boolean
    amId?: string | number
  }>(),
  {
    showRadiuChange: false,
  }
)

const wHeight = uni.getWindowInfo().windowHeight
const topHeight = ref(props.showRadiuChange ? 130 : 95)
const listHeight = computed(() => {
  return wHeight - topHeight.value - 15
})
const amId = computed(() => {
  return props.amId || appStore.amProfileStore.getProfileInfo()?.amId || ""
})

const queryType = ref(props.type)
const searchType = ref()
const searchInputValue = ref("")
const searchDropdownValue = ref([])
const queryParams = ref(
  queryType.value == 0
    ? {
        amId: amId.value,
      }
    : queryType.value == 1
    ? {
        followId: amId.value,
      }
    : {}
)

const searchPlaceholder = ref("搜索校友姓名")
const queryTypeData = computed(() => {
  return props.showRadiuChange
    ? [
        { value: 0, text: "好友申请" },
        { value: 1, text: "我的申请" },
      ]
    : []
})
const yearColumns = computed(() => {
  const cols = []
  cols.push({ text: "全部年级", value: "" })
  for (let i = new Date().getFullYear(); i >= 1930; i--) {
    cols.push({ text: i + "年", value: i })
  }
  return cols
})
const dropList = computed(() => {
  const arr = []
  arr.push({
    emptyTitle: "毕业年份",
    data: yearColumns.value,
  })
  return arr
})
const searchTabList = computed(() => {
  const arr = []
  if (!props.amId) {
    arr.push({ text: "同届", value: "year" })
    arr.push({ text: "同城", value: "city" })
    arr.push({ text: "同行", value: "industry" })
  }
  //arr.push({ text: "全部", value: "" })
  return arr
})

function getAvatar(item: any) {
  return item.friendAvatar ? configs.baseUrl + item.friendAvatar : `/static/images/avatars/empty.png`
}
function getLastLoginTime(item: any) {
  return dayjs(item.friendLastLoginDate).fromNow()
}

function onClick(item: any) {
  route.navigate("alumnusDetail", {
    from: "followMe",
    id: queryType.value == 0 ? item.followId : item.amId,
    userId: item.userId,
  })
}

function onSearch() {
  search()
}
function search() {
  const params: any = {
    friendName: searchInputValue.value || "",
    graduateYear: searchDropdownValue.value[0] || "",
  }
  if (searchType.value) {
    switch (searchType.value) {
      case "year":
        params.graduateYear = appStore.amProfileStore.getProfileInfo()?.graduateYear || ""
        break
      case "city":
        params.friendCity = appStore.amProfileStore.getProfileInfo()?.city || ""
        break
      case "industry":
        params.friendIndustry = appStore.amProfileStore.getProfileInfo()?.industry || ""
        break
    }
  }
  if (queryType.value == 0) {
    params.amId = amId.value
  } else if (queryType.value == 1) {
    params.friendId = amId.value
  }
  queryParams.value = params
}
</script>

<style scoped></style>