328 lines
6.7 KiB
Vue
328 lines
6.7 KiB
Vue
<script setup>
|
|
/**
|
|
* 视频详情页
|
|
*/
|
|
|
|
import {
|
|
ref,
|
|
getCurrentInstance,
|
|
reactive,
|
|
computed,
|
|
} from 'vue'
|
|
import {
|
|
onLoad,
|
|
onHide
|
|
} from '@dcloudio/uni-app'
|
|
// 工具库
|
|
import util from '@/common/js/util';
|
|
// api
|
|
import api from '@/api/index.js'
|
|
// 手机状态栏
|
|
import statusBar from '@/components/header/statusBar.vue';
|
|
// 首页视频
|
|
import indexVideo from '@/components/index/indexVideo.vue'
|
|
// 评论弹窗
|
|
import commentAlt from '@/components/index/commentArea.vue'
|
|
// 收藏弹窗
|
|
import collectAlt from '@/components/index/collect.vue'
|
|
// 分享到好友弹窗
|
|
import shareFirendAlt from '@/components/index/shareFirend.vue'
|
|
// 产品详情弹窗
|
|
import productAlt from '@/components/index/proDetailAlt.vue'
|
|
// 产品规格弹窗
|
|
import productSpecAlt from '@/components/shop/detail/makeOrder.vue'
|
|
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance()
|
|
// 视频id
|
|
const videoId = ref('')
|
|
// 视频详情
|
|
const detail = reactive({})
|
|
// 是否是自己
|
|
const isMine = ref(false)
|
|
// 显示统计
|
|
const statistic = ref('0')
|
|
// 用户信息
|
|
const userinfo = computed(() => uni.$store.state.userinfo)
|
|
|
|
onLoad((option) => {
|
|
if (option.videoId) videoId.value = option.videoId
|
|
// 是否我的作品
|
|
if (option.isMine && option.isMine != 'false') isMine.value = option.isMine
|
|
// 是否显示统计
|
|
if (option.statistic) statistic.value = option.statistic
|
|
|
|
// 获取视频详情
|
|
getVideoDetail()
|
|
|
|
// 视频数据被修改
|
|
uni.$on('updateVideo', (item) => {
|
|
// 校验
|
|
if (!item && !item.videoId) return
|
|
// 当前下标
|
|
if (item.videoId == detail.videoId) Object.assign(detail, item)
|
|
})
|
|
})
|
|
|
|
onHide(() => {
|
|
proxy.$refs.indexVideo.pause()
|
|
})
|
|
|
|
// 获取视频详情
|
|
function getVideoDetail() {
|
|
api.video.getVideoById({
|
|
data: {
|
|
id: videoId.value,
|
|
}
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
Object.assign(detail, rs.data)
|
|
|
|
// 播放视频
|
|
proxy.$refs.indexVideo.play()
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 打开评论弹窗
|
|
* @param {Object} item 当前列表项
|
|
*/
|
|
function handleShowCommentAlt(item) {
|
|
proxy.$refs.commentRef.open(item)
|
|
// 暂停当前视频
|
|
proxy.$refs.indexVideo.pause()
|
|
}
|
|
|
|
/**
|
|
* 打开收藏弹窗
|
|
* @param {Object} item 视频项下标
|
|
*/
|
|
function handleShowCollectAlt(item) {
|
|
proxy.$refs.collectRef.open(item)
|
|
}
|
|
|
|
/**
|
|
* 打开分享给好友弹窗
|
|
*/
|
|
function handleShowShareFirend() {
|
|
proxy.$refs.shareFirendRef.open()
|
|
}
|
|
|
|
|
|
/**
|
|
* 视频点赞
|
|
* @param {Object} param 见下
|
|
* @param {Number} param.index 操作的视频下标
|
|
* @param {Number|String} param.isLike 0.点赞 1.取消点赞
|
|
* @param {Number|String} param.likeType 点赞类型 0.公开赞 1.隐私赞
|
|
*/
|
|
function videoLike(param) {
|
|
const item = detail
|
|
const data = {
|
|
// 视频id
|
|
videoId: item.id,
|
|
// 点赞用户id
|
|
likeUserId: userinfo.value.id,
|
|
// 被点赞用户id
|
|
targetUserId: item.userId,
|
|
// 点赞类型 0.公开赞 1.隐私赞
|
|
likeType: param.likeType,
|
|
// //点赞 0.点赞 1.取消点赞
|
|
isLike: param.isLike,
|
|
}
|
|
|
|
//
|
|
api.video.videoLike({
|
|
data,
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
uni.$emit('updateVideo', {
|
|
...item,
|
|
...rs.data,
|
|
})
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 点击详情菜单
|
|
* @param {Object} item
|
|
*/
|
|
function detailMenu(item) {
|
|
// 菜单
|
|
let menu = [{
|
|
name: '编辑',
|
|
fn: () => {
|
|
uni.navigateTo({
|
|
url: util.setUrl('/pages/release/video', {
|
|
videoId: detail.id,
|
|
})
|
|
})
|
|
}
|
|
},
|
|
{
|
|
name: '删除',
|
|
fn: () => {
|
|
util.alert({
|
|
content: '删除后不可恢复。确认删除？',
|
|
}).then(rs => {
|
|
// 删除视频
|
|
if (rs.confirm) api.video.removeVideo({
|
|
data: {
|
|
id: detail.id,
|
|
}
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
uni.$emit('deleteVideo', detail.videoId)
|
|
uni.navigateBack()
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
})
|
|
}
|
|
},
|
|
]
|
|
uni.showActionSheet({
|
|
itemList: menu.map(node => node.name),
|
|
success: rs => {
|
|
menu[rs.tapIndex].fn()
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 跳转数据中心
|
|
* @param {Object} detail
|
|
*/
|
|
function handleDataCenter(detail) {
|
|
uni.navigateTo({
|
|
url: util.setUrl('/pages/index/dataCenter/dataCenter', {
|
|
videoId: detail.id,
|
|
})
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 打开产品弹窗
|
|
* @param {Object} item 视频列表项
|
|
*/
|
|
function handleShowProduct(item) {
|
|
// 打开产品详情弹窗
|
|
proxy.$refs.productAltRef.init(item.productId)
|
|
}
|
|
|
|
/**
|
|
* 商品弹窗购买
|
|
* @param {Object} product
|
|
*/
|
|
function handleProductBuy(product) {
|
|
Object.assign(productDetail, {}, product)
|
|
//
|
|
proxy.$refs.productSpecAltRef.open()
|
|
}
|
|
|
|
/**
|
|
* 商品购买
|
|
* @param {Object} video 视频列表
|
|
*/
|
|
function handleProBuy(video) {
|
|
// 获取商品详情
|
|
api.shop.productDetail({
|
|
query: {
|
|
// 产品id
|
|
productionId: video.productId,
|
|
},
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
//
|
|
handleProductBuy(rs.data)
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 返回
|
|
*/
|
|
function handleBack() {
|
|
const pages = getCurrentPages()
|
|
|
|
// 如果页面栈数量大于1
|
|
if (pages.length > 1) {
|
|
uni.navigateBack()
|
|
} else {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="page f1">
|
|
<view class="apex">
|
|
<statusBar />
|
|
|
|
<view class="head df fdr jcsb">
|
|
<view class="back" @click="handleBack">
|
|
<uni-icons type="left" color="#fff" size="40rpx" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- -->
|
|
<indexVideo ref="indexVideo" :statistic="statistic" :item="detail" :tabIndex="0" :isMine="isMine" :index="0"
|
|
:current="0" mode="detail" @showComment="handleShowCommentAlt" @showCollect="handleShowCollectAlt"
|
|
@showShareFirend="handleShowShareFirend" @like="videoLike" @detailMenu="detailMenu"
|
|
@dataCenter="handleDataCenter" @showProduct="handleShowProduct" @proBuy="handleProBuy" />
|
|
|
|
<!-- 评论弹窗 -->
|
|
<commentAlt ref="commentRef" />
|
|
<!-- 收藏弹窗 -->
|
|
<collectAlt ref="collectRef" />
|
|
<!-- 分享到好友弹窗 -->
|
|
<shareFirendAlt ref="shareFirendRef" />
|
|
<!-- 产品详情弹窗 -->
|
|
<productAlt ref="productAltRef" @buy="handleProductBuy" />
|
|
<!-- 产品立即下单弹窗 -->
|
|
<productSpecAlt ref="productSpecAltRef" :detail="productDetail" @confirm="handlePay" />
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
// 顶部
|
|
.apex {
|
|
position: fixed;
|
|
top: 0%;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
// 返回
|
|
.back {
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: rgba(0, 0, 0, .8);
|
|
border-radius: 100rpx;
|
|
}
|
|
}
|
|
</style> |