jiuyiUniapp/jiuyi2/components/index/collect.vue

<script setup>
	/**
	 * 视频评论弹窗
	 */
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance,
		watch,
		defineExpose,
	} from 'vue'

	// 视频收藏夹列表
	import collectList from '@/components/index/collectList.vue'
	// api
	import api from '@/api/index.js';
	// 工具库
	import util from '@/common/js/util';
	// 收藏
	import collectAdd from '@/components/index/collectAdd.vue';

	const {
		proxy
	} = getCurrentInstance()

	// 收藏结果
	const collectResult = ref(false)
	// 当前视频项
	const detail = ref({})

	/**
	 * 收藏
	 * @param {Object} item 收藏当前项
	 */
	function handleCollect(item) {
		close()
		open('result')
	}

	/**
	 * 打开弹窗
	 * @param {Object} item 视频对象
	 */
	function open(item) {
		detail.value = item
		// 没有收藏选择收藏夹列表
		if (!item.isCollect) {
			proxy.$refs.collect.open()
			return
		}
		// 取消收藏
		cancelCollect()
	}

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

	/**
	 * 关闭弹窗
	 * @param {String} key 打开弹窗的key值
	 */
	function close(key) {
		if (!key) key = 'collect'
		proxy.$refs[key].close()
	}

	/**
	 * 收藏视频
	 * @param {Object} item 收藏夹对象
	 */
	function collectVideo(item) {
		// 
		api.video.collectVideo({
			data: {
				// 视频id
				videoId: detail.value.id,
				// 收藏夹id
				folderId: item.id,
			}
		}).then(rs => {
			console.log('collect result', rs)
			if (rs.code == 200) {
				proxy.$refs.collect.close()
				uni.$emit('updateVideo', {
					...detail.value,
					...rs.data,
				})

				// 打开收藏弹窗
				collectResult.value = true
				proxy.$refs.result.open()

				setTimeout(() => {
					proxy.$refs.result.close()
				}, 3000)
				return
			}
			// 
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 取消收藏
	function cancelCollect() {
		// 取消收藏
		api.video.cancelCollect({
			query: {
				// 视频id
				videoId: detail.value.videoId,
			},
		}).then(rs => {
			if (rs.code == 200) {
				uni.$emit('updateVideo', {
					...detail.value,
					...rs.data,
				})
				// 收藏了取消收藏
				collectResult.value = false
				proxy.$refs.result.open()

				setTimeout(() => {
					proxy.$refs.result.close()
				}, 3000)
				return
			}
			// 
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

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

<template>
	<!-- 收藏列表 -->
	<uni-popup ref="collect" type="bottom">
		<view class="popBot bfff">
			<view class="close" @click="$refs.collect.close()">
				<uni-icons type="close" size="36rpx" color="#333" />
			</view>

			<!-- 标题 -->
			<view class="title mt40">
				<text class="tac f40">选择收藏夹</text>
			</view>

			<scroll-view scroll-y class="scroll">
				<collectList @handleItem="handleItem" />
			</scroll-view>

			<view class="add df fdr aic ptb30 plr30" @click="$refs.collectAddRef.open()">
				<view class="icon fmid wh70">
					<uni-icons type="plusempty" color="#333" />
				</view>
				<text class="ml20 c333 f28">新建收藏夹</text>
			</view>
		</view>
	</uni-popup>

	<!-- 收藏结果 -->
	<uni-popup ref="result" type="bottom" mask-background-color="rgba(0,0,0,0)">
		<view class="resultAlt mlr30 df fdr aic ptb30 plr30 bfff br20">
			<view class="circle cir">
				<image class="wh30" src="/static/circle.png" mode="aspectFill" />
			</view>

			<template v-if="collectResult">
				<text class="f1 ml30 c333 f28">收藏成功</text>
				<view class="df fdr aic" v-if="0">
					<text class="mr20 c333 f28">去看看</text>
					<uni-icons type="right" />
				</view>
			</template>
			<template v-else>
				<text class="f1 ml30 c333 f28">已取消收藏</text>
			</template>
		</view>
	</uni-popup>

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

<style lang="scss">
	// 
	.close {
		position: absolute;
		right: 20rpx;
		top: 5rpx;
	}

	// 滚动
	.scroll {
		height: 550rpx;
	}

	// 添加
	.add {
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, .3);

		.icon {
			border: 5rpx solid #333;
			border-radius: 5rpx;
		}
	}

	// 结果弹窗
	.resultAlt {
		margin-bottom: 150rpx;

		// 圆
		.circle {
			background-color: #FF008C;
		}
	}
</style>