帧视界壹通告,付费看视频的微信小程序
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.
 
 
 

234 lines
4.1 KiB

<template>
<view class="postDetail">
<navbar leftClick @leftClick="leftClick" />
<view class="swipe">
<uv-swiper
:list="vedioList"
indicator
height="420rpx"></uv-swiper>
</view>
<view class="box">
<view class="topInfo">
<!-- <view class="title title1">
当前排名<text>{{ item.money || 1 }}</text>
</view> -->
<view class="price">
<view class="">
{{ item.title }}
</view>
<view class="">
票数 {{ item.num }}
</view>
</view>
<!-- <view class="right">
<view class="money30">
近30天收益
</view>
<view class="phone">
联系方式<text>付费查看</text>
</view>
</view> -->
</view>
<view class="createBy">
<view class="">
发布人{{ item.userId }}
</view>
<view class="">
发布时间{{ $dayjs(item.createTime).format('YYYY-MM-DD') }}
</view>
</view>
<view class="controls">
<contentControls
:type="0"
isWork
:up="isThumbs_up"
@loadData="getData"
:detail="item"/>
</view>
<view class="content">
<uv-parse :content="item.context"></uv-parse>
</view>
<view class="works"
v-if="isVedio">
<view class="item"
v-for="(t, index) in item.vod && item.vod.split(',')"
:key="index">
<view class="item-image">
<video :src="t" object-fit="fill"/>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import contentControls from '@/components/content/contentControls.vue'
import { mapGetters } from 'vuex'
export default {
components : {
contentControls
},
data() {
return {
item: {},
total : 0,
isThumbs_up: {},//是否点赞
id : 0,
}
},
computed : {
...mapGetters(['isVedio']),
vedioList(){
return this.isVedio ?
this.item.vod && this.item.vod.split(',') :
this.item.image && this.item.image.split(',')
},
},
onLoad(options) {
// this.$route.query的参数
console.log(options)
this.id = options.id
},
onPullDownRefresh(){
this.getData()
},
onShow() {
this.getData()
},
onShareAppMessage(res) {
return {
title: this.item.title,
desc: this.item.content && this.item.content.slice(0, 30),
path: '/pages_mine/publish/worksDetail?id=' + this.id
}
},
methods: {
leftClick(){
uni.navigateBack(-1)
},
getData(id){
this.$api('indexGetGetWorkDetail', {
id : this.id
}, res => {
uni.stopPullDownRefresh()
if(res.code == 200){
this.item = res.result.details
this.isThumbs_up = res.result.isThumbs_up//是否点赞
}
})
},
}
}
</script>
<style lang="scss" scoped>
.postDetail {
.box {
padding: 20rpx;
.topInfo{
position: relative;
.price{
display: flex;
justify-content: space-between;
margin: 10rpx 0;
}
.right{
position: absolute;
right: 20rpx;
top: 0rpx;
line-height: 50rpx;
text-align: right;
.money30{
font-size: 26rpx;
color: #D43030;
}
.phone{
text{
color: #3A6BF1;
margin-left: 10rpx;
}
}
}
}
.title {
font-size: 36rpx;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
font-style: italic;
text{
margin-left: 10rpx;
}
}
.title1{
color: #f00;
}
.title2{
color: #FFA200;
}
.title3{
color: #4739EA;
}
.createBy {
display: flex;
margin-top: auto;
margin-bottom: 10rpx;
font-size: 24rpx;
margin-top: 20rpx;
color: #555;
&>view {
display: flex;
align-items: center;
justify-content: center;
padding-right: 20rpx;
}
}
.controls {
margin-top: 30rpx;
}
.content {
margin-top: 30rpx;
color: #777;
}
.works{
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
.item{
width: 320rpx;
margin: 15rpx;
.item-title{
padding-bottom: 10rpx;
color: #000;
}
.item-image{
background-color: #999;
width: 100%;
height: 250rpx;
video{
width: 100%;
height: 100%;
}
}
}
}
}
}
</style>