234 lines
4.2 KiB
Vue
234 lines
4.2 KiB
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> |