175 lines
3.4 KiB
Vue
175 lines
3.4 KiB
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> |