jiuyiUniapp/jiuyi2/pages/index/dataCenter/like.vue

<script setup>
	// 点赞中心
	import {
		reactive,
		ref,
		computed,
	} from 'vue';
	import {
		onLoad,
		onReady,
		onHide,
		onPullDownRefresh,
		onReachBottom,
		onUnload,
	} from '@dcloudio/uni-app'
	// 
	import api from '@/api/index.js'
	// 
	import util from '@/common/js/util.js'
	// 
	import apex from '@/components/header/apex.vue'
	// 详情
	const detail = reactive({})
	// 视频id
	const videoId = ref('')
	// 是否解锁
	const isLock = ref(false)
	// 类型列表
	const typeList = reactive([{
			img: '/static/indexLike1.png',
			total: 0,
			list: [],
			pageNum: 1,
			pageSize: 20,
			name: '公开赞',
			api: (ev) => api.video.openLikeData(ev),
		},
		{
			img: '/static/privateLike.png',
			total: 0,
			list: [],
			pageNum: 1,
			pageSize: 20,
			name: '隐私赞',
			api: (ev) => api.video.PrivacyLikeData(ev),
		}
	])
	// 类型下标
	const typeIndex = ref(0)
	// 当前type
	const typeCurrent = computed(() => {
		let result = typeList[typeIndex.value]
		return result
	})

	onLoad((option) => {
		if (option.videoId) videoId.value = option.videoId
		// 获取列表
		getList()
	})

	onPullDownRefresh(() => {
		// 重载列表
		refreshList()
	})

	onReachBottom(() => {
		// 获取更多列表
		getMoreList()
	})

	/**
	 * 点击下标
	 * @param {Object} index
	 */
	function handleTypeIndex(index) {
		if (typeIndex.value === index) return
		typeIndex.value = index
		// 重载列表
		refreshList()
	}

	// 重载列表
	function refreshList() {
		typeCurrent.value.pageNum = 1
		getList()
	}

	// 获取更多列表
	function getMoreList() {
		if (typeCurrent.value.total <= typeCurrent.value.list.length) return
		typeCurrent.value.pageNum++
		getList()
	}

	// 获取列表
	function getList() {
		typeCurrent.value.api({
			query: {
				pageSize: typeCurrent.value.pageSize,
				pageNum: typeCurrent.value.pageNum,
			},
			data: {
				videoId: videoId.value,
			},
		}).then(res => {
			if (res.code == 200) {
				if (typeCurrent.value.pageNum == 1) typeCurrent.value.list.length = 0
				typeCurrent.value.list.push(...res.rows.map(item => {
					item.formatName = formatString(item.userNickname)
					return item
				}))
				typeCurrent.value.total = res.total
				return
			}
			util.alert({
				content: res.msg,
				showCancel: false,
			})
		}).finally(() => {
			uni.stopPullDownRefresh()
		})
	}

	/**格式化字符串
	 * @param {Object} str 字符串
	 */
	function formatString(str) {
		// 获取字符串的长度
		const length = str.length;
		let result = '*'
		// 如果长度为 2，返回第一个字符和一个星号
		if (length === 2) result = str[0] + '*'
		// 如果长度大于等于 3，返回第一个字符、若干个星号和最后一个字符
		else if (length >= 3) result = str[0] + '*'.repeat(length - 2) + str[length - 1];
		// 如果长度小于 2，直接返回原字符串
		return result
	}
</script>

<template>
	<view class="appbw">
		<!-- 顶部导航 -->
		<apex title="点赞统计">
			<template #right>
				<view class="typeList rows f26">
					<view class="item ver mr10" :class="{'active': index === typeIndex}"
						v-for="(item,index) in typeList" :key="index" @click="handleTypeIndex(index)">
						<image class="wh26" :src="item.img" mode="aspectFit" />
						<view class="name">{{item.name}}</view>
					</view>
				</view>
			</template>
		</apex>

		<view class="count rows mtb30 mlr30 ptb20 plr30 f32 br20">
			<view class="key">{{typeCurrent.name}}</view>
			<view class="value b">{{typeCurrent.total}}</view>
		</view>

		<!-- 列表盒子 -->
		<view class="listBox mtb30 plr30">
			<view class="item df ptb20 plr10" v-for="(item,index) in typeCurrent.list" :key="index">
				<view class="avatar">
					<image class="wh100" :src="item.avatar" mode="aspectFill" />
				</view>
				<view class="info f1 ml20">
					<view class="nickname thd f30 c111">{{item.formatName}} {{typeCurrent.name}}了你</view>
					<view class="time mt10 c999 f28">2024.12.08 20:00</view>
				</view>
			</view>
		</view>

		<view class="nomore">暂无更多~</view>

		<view class="fill" style="height: 30rpx;"></view>
	</view>
</template>

<style lang="scss" scoped>
	// 类型列表
	.typeList {
		.item {
			color: #999;
			transition: .3s;

			&.active {
				color: #333;
				font-weight: bold;
			}
		}
	}

	// 点赞统计
	.count {
		background-color: #FAF8F8;

		.value {
			color: #F84259;
		}
	}

	// 列表盒子
	.listBox {
		.item+.item {
			border-top: 2rpx solid #eee;
		}
	}
</style>