170 lines
6.1 KiB
Vue
170 lines
6.1 KiB
Vue
<template>
|
|
<view>
|
|
<view class="disjb fw" v-if="list.length!=0">
|
|
<!-- 左侧列表 -->
|
|
<view class="list-box">
|
|
<view @tap="goDetail(index)" v-if="index%2==0" :class="radiu?'radius15 mar-x10':'radius30 mar-x30'" class="posir colf zou" v-for="(item,index) in list" :key="index">
|
|
<!-- 背景图 -->
|
|
<image :class="radiu?'radius15':'radius30'" class=" width100 list-min" :src="item.main_img" mode="widthFix"></image>
|
|
<view class="posia list-like-box" @tap.stop="chooseLike(index)">
|
|
<!-- 不喜欢 -->
|
|
<image v-if="item.is_collected!=1" src="/static/public/no-like.png" mode="aspectFill"></image>
|
|
<!-- 喜欢 -->
|
|
<image v-else :class="item.is_collected==1?'bounceIn':'bounceOut'" class="animated" src="/static/public/like.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view v-if="item.main_img!=''" :class="radiu?'list-cont-box15':'list-cont-box'" class="posia fon20">
|
|
<!-- 视频标题 -->
|
|
<view class="fon30 bold mar-x10 disac" :style="{fontSize:nFon+'px'}">
|
|
<view class="clips1">{{item.title}}</view>
|
|
<text v-if="item.isVideo" :style="{fontSize:(nFon-2)+'px',marginLeft:nmarz+'px'}" style="border-radius: 5rpx;padding: 0 6rpx;text-align: center;" class="pbackc flexs">视频</text></view>
|
|
<!-- 视频描述 -->
|
|
<view class="mar-x10 clips1 opc">{{item.content}}</view>
|
|
<view class="disac">
|
|
<!-- 发布者头像 -->
|
|
<image class="list-headimg" :src="item.head_img" mode="aspectFill"></image>
|
|
<!-- 发布者昵称 -->
|
|
<view class="clips1 opc">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<image v-if="item.isVideo" :style="{width:nWidth+'rpx',height:nHeight+'rpx'}" class="posia" style="top: 50%;left: 50%;transform: translate(-50%,-50%);" src="/static/public/video.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<!-- 右侧列表 -->
|
|
<view class="list-box">
|
|
<view @tap="goDetail(index)" v-if="index%2!=0" :class="radiu?'radius15 mar-x10':'radius30 mar-x30'" class="posir colf zou" v-for="(item,index) in list" :key="index">
|
|
<!-- 背景图 -->
|
|
<image :class="radiu?'radius15':'radius30'" class="width100 list-min" :src="item.main_img" mode="widthFix"></image>
|
|
<view class="posia list-like-box" @tap.stop="chooseLike(index)">
|
|
<!-- 不喜欢 -->
|
|
<image v-if="item.is_collected!=1" src="/static/public/no-like.png" mode="aspectFill"></image>
|
|
<!-- 喜欢 -->
|
|
<image v-else :class="item.is_collected==1?'bounceIn':'bounceOut'" class="animated" src="/static/public/like.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view v-if="item.main_img!=''" :class="radiu?'list-cont-box15':'list-cont-box'" class="posia fon20 ">
|
|
<!-- 视频标题 -->
|
|
<view class="fon30 bold mar-x10 disac" :style="{fontSize:nFon+'px'}">
|
|
<view class="clips1">{{item.title}}</view>
|
|
<text v-if="item.isVideo" :style="{fontSize:(nFon-2)+'px',marginLeft:nmarz+'px'}" style="border-radius: 5rpx;padding: 0 6rpx;text-align: center;" class="pbackc flexs">视频</text>
|
|
</view>
|
|
<!-- 视频描述 -->
|
|
<view class="mar-x10 clips1 opc">{{item.content}}</view>
|
|
<view class="disac">
|
|
<!-- 发布者头像 -->
|
|
<image class="list-headimg" :src="item.head_img" mode="aspectFill"></image>
|
|
<!-- 发布者昵称 -->
|
|
<view class="clips1 opc">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<image v-if="item.isVideo" :style="{width:nWidth+'rpx',height:nHeight+'rpx'}" class="posia" style="top: 50%;left: 50%;transform: translate(-50%,-50%);" src="/static/public/video.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="" style="display: flex;flex-direction: column;align-items: center;">
|
|
<image src="/static/public/nothing.png" style="width: 474rpx;height: 273rpx;" mode="aspectFill"></image>
|
|
<view class="fon24 col3" style="margin-bottom: 60rpx;">暂无内容</view>
|
|
</view>
|
|
<!-- 弹框 -->
|
|
<pu-po :isShowT="isShowT" :contentVal="pu_content" @comfirmev="comfirmev" @cancleev="cancleev"></pu-po>
|
|
<!-- 弹框授权 -->
|
|
<empower :vision="vision" :isWhere="2" @cancleEv="cancleEv"></empower>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import empower from '@/components/empower.vue';
|
|
export default {
|
|
components:{
|
|
empower
|
|
},
|
|
name:"list-pu",
|
|
props:{
|
|
list:{//数据
|
|
type:Array,
|
|
default:function(){
|
|
return []
|
|
}
|
|
},
|
|
nWidth:{
|
|
type:String,
|
|
default:'120'
|
|
},
|
|
nHeight:{
|
|
type:String,
|
|
default:'120'
|
|
},
|
|
nFon:{
|
|
type:String,
|
|
default:'15'
|
|
},
|
|
nmarz:{
|
|
type:String,
|
|
default:'10'
|
|
},
|
|
radiu:{
|
|
type:Boolean,
|
|
default:false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
vision:false,
|
|
isShowT:false,
|
|
pu_content:'是否需要取消收藏？',
|
|
current:'-1',
|
|
jieDuan:false
|
|
};
|
|
},
|
|
methods:{
|
|
cancleEv(e){
|
|
if(e==0) this.vision = false
|
|
},
|
|
goDetail(index){//查看详情
|
|
if(this.jieDuan==false){
|
|
let isAuth = this.$toolAll.tools.returnAuth()
|
|
if(!isAuth){
|
|
uni.navigateTo({
|
|
// url:'/pagesB/problemDetail/problemDetail?isCate='+this.list[index].isCate
|
|
url:'/pagesB/problemDetail/problemDetail?id='+this.list[index].id+'&category_id='+this.list[index].category_id
|
|
})
|
|
} else this.jieDuan = true
|
|
}
|
|
},
|
|
chooseLike(index){//喜欢不喜欢事件
|
|
// console.log('喜欢不喜欢：',index);
|
|
if(this.jieDuan==false){
|
|
let isAuth = this.$toolAll.tools.returnAuth()
|
|
if(!isAuth){
|
|
// this.$emit('chooseLike',this.list[index].id)
|
|
this.$emit('chooseLike',index)
|
|
this.current = index
|
|
if(this.list[index].is_collected==1) {
|
|
this.isShowT = true
|
|
} else {
|
|
let maiOjb = {
|
|
e:3,//内容收藏
|
|
c:this.list[index].id,
|
|
t:new Date().getTime()//当前时间戳
|
|
}
|
|
this.$toolAll.tools.maiDian(maiOjb)
|
|
}
|
|
} else this.jieDuan = true
|
|
}
|
|
},
|
|
comfirmev(){
|
|
// console.log('取消收藏成功');
|
|
// this.$emit('comfirmev',this.list[this.current].id)
|
|
this.$emit('comfirmev',this.current)
|
|
this.isShowT = false
|
|
},
|
|
cancleev(){
|
|
// console.log('关闭弹框');
|
|
this.isShowT = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|