jiuyiUniapp/jiuyi/components/index/collectAdd.vue

184 lines
3.5 KiB
Vue
Raw Normal View History

2024-12-18 15:46:27 +08:00
<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 {
// 收藏夹名称
collectName = ''
// 0公开1私密
isPrivate = 0
// 图片地址
pic = ''
// 收藏id
collectId = ''
}
//
const paddingHeight = ref(0)
//
const form = reactive(new Form())
onMounted(() => {
// #ifndef H5
uni.onKeyboardHeightChange((rs) => {
paddingHeight.value = rs.height
})
// #endif
})
onBeforeUnmount(() => {
// #ifndef H5
uni.offKeyboardHeightChange(rs => {
console.log('rs', rs)
})
// #endif
})
/**
* 打开弹窗
* @param {Object} value
*/
function open(value) {
// 如果是编辑
if (value) {
form.collectName = value.collectName
form.isPrivate = value.isPrivate
form.collectId = value.id
form.pic = value.formatPic
}
proxy.$refs.addCollectRef.open()
}
// 关闭弹窗
function close() {
proxy.$refs.addCollectRef.close()
}
// 上传图片
function upImage() {
util.upload_image({
value: form.pic,
type: 1,
success: rs => {
// 修改图片
form.pic = rs.value
}
})
}
// 切换是否公开收藏夹
function handlePrivate() {
form.isPrivate = form.isPrivate == 0 ? 1 : 0
}
// 提交
function handleSubmit() {
const data = {
...form,
}
data.pic = util.replace_url(data.pic)
// 验证
if (!form.collectName) {
util.alert('请输入收藏夹名称')
return
}
if (!form.pic) {
util.alert('请上传封面图')
return
}
// 剔除路径
data.pic = util.replace_url(data.pic)
let requestApi = 'saveCollectList'
if (form.collectId) requestApi = 'updateCollectList'
//
api.video[requestApi]({
query: 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.pic" mode="aspectFill" v-if="form.pic" />
<uni-icons type="plusempty" size="40rpx" v-else />
</view>
<view class="edit f1 ml20">
<input type="text" :adjust-position="false" v-model="form.collectName" 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.isPrivate == 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>