学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

201 lines
4.8 KiB

<template>
<view class="pageBgImg">
<view class="videoBox">
<view class="back">
<topNavbar title=""></topNavbar>
</view>
<video :src="vdoDetail.videoUrl" :poster="vdoDetail.videoCover" v-if="vdoDetail.videoUrl"></video>
</view>
<view class="pad">
<view class="card" style="margin: 28rpx 0 24rpx 0;">
<view class="info">
<view class="name">{{vdoDetail.title}}</view>
<view class="date">{{ $u.timeFormat(vdoDetail.createTime, 'yyyy/mm/dd') }}</view>
</view>
</view>
<view class="operate">
<view class="operateWith">
<view class="operateItem" @click="likeFn">
<view class="icon">
<image src="/static/images/index/dianzan_nor.png" mode="" v-if="!operateInfo.upvote"></image>
<image src="/static/images/index/dianzan_cli.png" mode="" v-else></image>
</view>
<view class="txt">点赞</view>
</view>
</view>
<view class="operateWith">
<view class="operateItem" @click="createCollectFn">
<view class="icon">
<image src="/static/images/index/shoucang_nor.png" mode="" v-if="!operateInfo.collect"></image>
<image src="/static/images/index/shoucang_cli.png" mode="" v-else></image>
</view>
<view class="txt">收藏</view>
</view>
</view>
<view class="operateWith">
<!-- #ifdef MP-WEIXIN -->
<view class="operateItem" @click="createRetransmissionFn">
<view class="icon">
<image src="/static/images/index/fenxiang_nor.png" mode=""></image>
</view>
<view class="txt">分享</view>
</view>
<!-- #endif -->
</view>
</view>
<!-- <view class="videolist">
<view class="flex-b">
<view class="h1">相关推荐</view>
<moreRight text="更多"></moreRight>
</view>
<view class="ul">
<view class="li" v-for="(item,index) in 10" :key="index" @click="$goPage('/pages/indexEntry/publicVideo/videoDetail/videoDetail')">
<videoItem></videoItem>
</view>
</view>
</view> -->
</view>
</view>
</template>
<script>
import videoItem from '../comp/videoItem'
import { publicGetvideo, createUpvote, getlikesCollection, createCollect, createRetransmission, deleteUpvote, deleteRetransmission } from '@/config/api.js'
export default {
components: { videoItem },
data() {
return {
operateInfo: {},
id: '',
vdoDetail: {},
params: {}
}
},
onLoad(options) {
this.id = options.id
this.params = {knowledge: this.id, mobile: this.vuex_userInfo.mobile}
this.publicGetvideoFn()
},
methods: {
async publicGetvideoFn() {
const {data: res} = await publicGetvideo({id: this.id})
this.vdoDetail = res
this.getlikesCollection()
console.log(res)
},
// 查否点赞收藏
async getlikesCollection() {
const {data: res} = await getlikesCollection(this.params)
this.operateInfo = res
},
// 点赞
async likeFn() {
if(this.operateInfo.upvote) {
await deleteUpvote({upvoteId: this.operateInfo.upvoteId,mobile: this.vuex_userInfo.mobile})
}else {
await createUpvote(this.params)
}
this.getlikesCollection()
},
// 收藏
async createCollectFn() {
if(this.operateInfo.collect) {
await deleteRetransmission({mobile: this.vuex_userInfo.mobile, CollectId: this.operateInfo.collectId})
}else {
await createCollect(this.params)
}
this.getlikesCollection()
},
// 转发
async createRetransmissionFn() {
const {data: res} = await createRetransmission(this.params)
this.getlikesCollection()
},
}
}
</script>
<style lang="scss" scoped>
.h1 {
line-height: 100rpx;
}
.info {
padding: 28rpx;
.name {
font-size: 34rpx;
color: #363A44;
font-weight: 500;
}
.date {
font-size: 28rpx;
color: #686B73;
margin-top: 4rpx;
}
}
.operate {
display: flex;
// justify-content: space-between;
.operateWith {
flex: 1;
}
.operateItem {
width: 188rpx;
height: 132rpx;
margin: 0 auto;
background: #FFFFFF;
border-radius: 16rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.icon {
width: 48rpx;
height: 48rpx;
}
.txt {
font-size: 24rpx;
color: #333;
font-weight: 500;
}
}
}
.videoBox {
width: 100%;
height: 492rpx;
position: relative;
.back {
position: absolute;
left: 0;
top: 0;
}
video {
width: 100%;
height: 100%;
display: block;
}
}
.ul {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.li {
width: 100%;
width: 48%;
height: 260rpx;
background: #FFFFFF;
box-shadow: 0px 8rpx 20rpx 0px rgba(0,0,0,0.04), 2rpx 2rpx 8rpx 0px rgba(0,0,0,0.06);
border-radius: 16rpx;
margin-bottom: 24rpx;
padding: 16rpx;
}
}
</style>