jiuyiUniapp/jiuyi/components/index/fastCollect.vue

<script setup>
	/**
	 * 快捷收藏弹窗
	 */
	import {
		onMounted,
		reactive,
		ref,
		getCurrentInstance,
		defineEmits,
	} 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 detail = ref({})
	// 
	const position = ref({})
	// 列表属性
	const listProperty = reactive({
		// 数据
		data: [],
		// 条数
		pageSize: 10,
		// 页码
		pageNum: 1,
		// 总数
		total: 0,
	})
	// 是否激活
	const active = ref(false)

	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: {
				// 私密
				isPrivate: 1,
				// 页码
				pageNum: listProperty.pageNum,
				pageSize: listProperty.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} ev
	 */
	function open(ev) {
		// 定位
		position.value = ev.position
		// 
		active.value = true
		// 详情
		detail.value = ev.item
		// 打开弹窗
		proxy.$refs.fastCollect.open()
	}

	// 关闭弹窗
	function close() {
		active.value = false
		proxy.$refs.fastCollect.close()
	}

	// 收藏
	function handleCollect(item) {
		// 
		api.video.collectVideo({
			query: {
				// 视频id
				videoId: detail.value.videoId,
				// 收藏夹id
				collectId: item.id,
				isPrivate: item.isPrivate,
			}
		}).then(rs => {
			if (rs.code == 200) {
				proxy.$refs.fastCollect.close()

				detail.value.isCollect = true
				detail.value.collect++
				uni.$emit('updateVideo', detail.value)
				return
			}
			// 
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 
	defineExpose({
		open,
		close,
	})
</script>

<template>
	<uni-popup ref="fastCollect" type="center" :animation="false">
		<view class="collectListBox" :style="{top: position.y + 'px', right: position.x + 'px',}">
			<uni-transition mode-class="slide-right" :show="active">
				<scroll-view scroll-x="true" :show-scrollbar="false" class="scroll df fdr f1" @scrolltolower="getMoreList">
					<view class="list fdr plr15">
						<view class="item wh70 br20" v-for="(item, index) in listProperty.data" :key="index" @click="handleCollect(item)">
							<image class="wh70 br20" :src="item.formatPic" mode="aspectFill" />
						</view>
						<view class="item create fmid ml15 wh70 br20" @click="$refs.collectAddRef.open()">
							<uni-icons type="plusempty" color="#fff" size="40rpx" />
						</view>
					</view>
				</scroll-view>
			</uni-transition>
		</view>
	</uni-popup>

	<!-- 新增收藏 -->
	<collectAdd ref="collectAddRef" />
</template>

<style lang="scss">
	// 收藏列表盒子
	.collectListBox {
		position: fixed;
		width: 300rpx;
		padding: 10rpx 10rpx;
		// height: 80rpx;
		// width: 400rpx;
		background-color: rgba(51, 51, 51, .5);
		border-radius: 25rpx;
		transition-property: width;
		transition-duration: .5s;

		&.active {
			width: 300rpx;
		}

		// 新建
		.create {
			background-color: rgba(255, 255, 255, .5);
		}

		.item {
			&+.item {
				margin-left: 15rpx;
			}
		}
	}
</style>