jiuyiUniapp/jiuyi/components/index/collectList.vue

<script setup>
	/**
	 * 收藏列表组件
	 */

	import {
		onMounted,
		reactive,
		ref,
		getCurrentInstance,
		defineEmits,
		defineProps,
	} from 'vue';
	// api
	import api from '@/api/index'
	// 工具库
	import util from "@/common/js/util.js"
	// 收藏
	import collectAdd from '@/components/index/collectAdd.vue';

	const {
		proxy
	} = getCurrentInstance()
	const props = defineProps({
		pageSize: {
			type: [String, Number],
			default: 10,
		}
	})

	// 加载
	const showLoad = ref(true)

	// 列表属性
	const listProperty = reactive({
		// 数据
		data: [],
		// 页码
		pageNum: 1,
		// 总数
		total: 0,
	})

	// 右侧菜单
	const options = [{
		text: '删除',
		style: {
			backgroundColor: '#F85050'
		}
	}, {
		text: '编辑',
		style: {
			backgroundColor: '#00ADEE'
		}
	}]

	const emit = defineEmits(['handleItem'])

	onMounted(() => {
		// 开启监听
		addListener()

		// 验证登录
		util.isLogin().then(() => {
			setTimeout(() => {
				// 获取列表
				getList()
			}, 1000)
		})
	})

	// 开启监听
	function addListener() {
		uni.$on('collectsVideo', () => {
			// 获取最新的收藏列表
			refrshList()
		})

		uni.$on('login', () => {
			// 获取列表
			refrshList()
		})
	}

	// 刷新列表
	function refrshList() {
		listProperty.pageNum = 1
		// 获取列表
		getList()
	}

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

	// 获取列表
	function getList() {
		// 获取收藏列表
		api.video.getCollectList({
			query: {
				pageNum: listProperty.pageNum,
				pageSize: props.pageSize,
			}
		}).then(rs => {
			if (rs.code === 200) {
				const result = rs.rows
				// 如果是第一页
				if (listProperty.pageNum == 1) listProperty.data.length = 0
				// 追加数据
				listProperty.data.push(...result.map(item => {
					// 格式化封面
					item.formatPic = util.format_url(item.pic, 'img')
					return item
				}))
				// 判断是否能加载
				listProperty.total = rs.total
				return
			}
			util.alert(rs.msg)
		}).finally(() => {
			// 关闭加载
			showLoad.value = false
		})
	}

	/**
	 * 删除收藏夹
	 * @param {Object} item 操作的收藏夹对象
	 * @param {Number} index 删除的收藏夹
	 */
	function delectList(item, index) {
		api.video.deleteCollect({
			query: {
				jyCollectId: item.id,
			}
		}).then(rs => {
			if (rs.code === 200) {
				listProperty.total--
				listProperty.data.splice(index, 1)
				return
			}

			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 滑动组件的点击事件
	 * @param {Object} ev
	 */
	function handleActionItem(ev, target) {
		// 点击的下标
		const index = ev.index
		const item = listProperty.data[target]
		switch (index) {
			case 0:
				// 删除
				util.alert({
					content: '确认删除收藏夹？',
				}).then(rs => {
					if (rs.confirm) delectList(item, target)
				})
				break
			case 1:
				// 编辑
				proxy.$refs.collectAddRef.open(item)
				break
		}

		// 关闭
		proxy.$refs.swipeActionRef.closeAll()
	}

	/**
	 * 点击收藏夹
	 * @param {Object} item 点击的列表项
	 */
	function handleItem(item) {
		emit('handleItem', item)
	}

	// 
	defineExpose({
		getList,
		getMoreList,
		refrshList,
	})
</script>

<template>
	<view class="showLoad fmid ptb30" v-if="showLoad">
		<uni-icons type="spinner-cycle"></uni-icons>
		<text class="c666 f28">加载中...</text>
	</view>

	<uni-swipe-action ref="swipeActionRef" v-else>
		<view class="collect">
			<uni-swipe-action-item :right-options="options" v-for="(item,index) in listProperty.data" :key="index"
				@click="handleActionItem($event,index)">
				<view class="item rows fdr mlr20 ptb20" @click.stop="handleItem(item)">
					<view class="poster">
						<image class="wh80 br20" :src="item.formatPic" mode="aspectFill" />
					</view>
					<view class="oh pl20">
						<text class="c333 f28">{{item.collectName}}</text>
					</view>
					<image class="wh24 ml10" src="/static/lock.png" mode="aspectFit" v-if="item.isPrivate == 1" />
					<view class="f1"></view>
				</view>
			</uni-swipe-action-item>

			<view class="nomore mtb20">
				<text class="nomore">暂无更多</text>
			</view>
		</view>
	</uni-swipe-action>

	<!-- 收藏添加 -->
	<collectAdd ref="collectAddRef" />
</template>

<style lang="scss" scoped>
	// 收藏
	.collect {

		// 
		.item {
			border-bottom: 2rpx solid #D8D8D8;
		}
	}
</style>