jiuyiUniapp/jiuyi2/components/index/collectAdd.vue

<script setup>
	/**
	 * 新建收藏文件夹弹窗
	 */
	import {
		ref,
		getCurrentInstance,
		reactive,
		onMounted,
		onBeforeUnmount,
	} from 'vue'
	// 工具库
	import util from '@/common/js/util';
	// 接口
	import api from '@/api';

	const {
		proxy
	} = getCurrentInstance()
	// 收藏夹类
	class Form {
		// 收藏id
		folderId = ''
		// 收藏夹名称
		folderName = ''
		// 0公开1私密
		isLock = 0
		// 图片地址
		photographUrl = ''
	}

	// 
	const form = reactive(new Form())
	// 填充高度
	const paddingHeight = ref(0)

	onMounted(() => {
		// #ifdef APP
		uni.onKeyboardHeightChange((rs) => {
			paddingHeight.value = rs.height
		})
		// #endif
	})

	onBeforeUnmount(() => {
		// #ifdef APP
		uni.offKeyboardHeightChange(rs => {
			console.log('rs', rs)
		})
		// #endif
	})

	/**
	 * 打开弹窗
	 * @param {Object} value 
	 */
	function open(value) {
		// 如果是编辑
		if (value) {
			form.folderName = value.folderName
			form.isLock = value.isLock
			form.folderId = value.id
			form.photographUrl = value.photographUrl
		}
		proxy.$refs.addCollectRef.open()
	}

	// 关闭弹窗
	function close() {
		proxy.$refs.addCollectRef.close()
	}

	// 上传图片
	function upImage() {
		util.upload_image({
			type: 1,
			success: rs => {
				// 修改图片
				form.photographUrl = rs.value
				console.log('upload rs', rs, form)
			}
		})
	}

	// 切换是否公开收藏夹
	function handlePrivate() {
		form.isLock = form.isLock == 0 ? 1 : 0
	}

	// 提交表单
	function handleSubmit() {
		const data = {
			...form,
		}
		// 验证
		if (!form.photographUrl) {
			util.alert('请上传封面图')
			return
		}
		if (!form.folderName) {
			util.alert('请输入收藏夹名称')
			return
		}
		// 
		api.video.addfavorite({
			data: data,
		}).then(rs => {
			if (rs.code == 200) {
				// 收藏视频
				uni.$emit('collectsVideo')
				close()
				Object.assign(form, new Form());
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

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

<template>
	<uni-popup ref="addCollectRef" type="bottom">
		<view class="addCollect popBot ptb20 plr20 bfff">
			<view class="header fdr rows">
				<view class="w120">
					<uni-icons type="closeempty" @click="close" />
				</view>
				<view class="title">
					<text class="c333 f28">编辑收藏夹</text>
				</view>
				<view class="w120 tar">
					<text class="cFF9B27 f24" @click="handleSubmit">确认</text>
				</view>
			</view>

			<!-- 收藏夹信息 -->
			<view class="rows fdr mtb30">
				<view class="pic fmid wh80 beee br10" @click="upImage">
					<image class="wh80 br10" :src="form.photographUrl" mode="aspectFill" v-if="form.photographUrl" />
					<uni-icons type="plusempty" size="40rpx" v-else />
				</view>

				<view class="edit f1 ml20">
					<input type="text" :adjust-position="false" v-model="form.folderName" placeholder="输入收藏夹名称" />
				</view>
			</view>

			<!-- 公开收藏夹 -->
			<view class="rows fdr mtb30">
				<view class="df fdr aic">
					<text>是否快捷收藏夹</text>
					<image src="/static/lock.png" mode="aspectFit" class="wh24 ml10" />
				</view>

				<switch class="switch" :checked="form.isLock == 1" color="#F85050" @change="handlePrivate" />
			</view>

			<view :style="{height: paddingHeight + 'px',}"></view>
		</view>
	</uni-popup>
</template>

<style lang="scss" scoped>
	// 开关
	.switch {
		transform: scale(.7);
	}
</style>