<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-x15'" class="posir colf zou" v-for="(item,index) in list" :key="index">
<!-- 背景图 -->
<image lazy-load :class="radiu?'radius15':'radius30'" class=" width100 list-min" :src="item.main_img" mode="widthFix"></image>
<view class="posia fon24 colf" style="right: 10rpx;bottom: 140rpx;z-index: 1;">
<view @tap.stop="praiseEv(index)" class="disjcac fc">
<image class="img-box" lazy-load :style="{width: radiu ?'40rpx':'60rpx',height: radiu ?'40rpx':'60rpx'}" :src="['/static/public/list-nlike.png','/static/public/detail-like.png'][item.is_liked]" mode="aspectFill"></image>
<view style="text-shadow: 0px 0px 3px #000000;">{{item.likes>1000 ? '999+':item.likes}}</view>
</view>
<view @tap.stop="chooseLike(index)" class="disjcac fc">
<image class="img-box" lazy-load :style="{width: radiu ?'40rpx':'60rpx',height: radiu ?'40rpx':'60rpx'}" :src="['/static/public/cnllection-no.png','/static/public/yconllection.png'][item.is_collected]" mode="aspectFill"></image>
<view style="text-shadow: 0px 0px 3px #000000;">{{item.collects>1000 ? '999+':item.collects}}</view>
</view>
<view class="disjcac fc">
<image class="img-box" lazy-load :style="{width: radiu ?'30rpx':'50rpx',height: radiu ?'30rpx':'50rpx'}" src="/static/public/looks-white.png" mode="aspectFill"></image>
<view style="text-shadow: 0px 0px 3px #000000;">{{item.views>1000 ? '999+':item.views}}</view>
</view>
</view>
<!-- <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-3+'px'}">
<view class="clips1">{{item.title}}</view>
<!-- <text v-if="item.isVideo && isVedio" :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="disjbac">
<view class="disac">
<!-- 发布者头像 -->
<image lazy-load class="list-headimg" :src="item.head_img" mode="aspectFill"></image>
<!-- 发布者昵称 -->
<view class="clips1 opc">{{item.name}}</view>
</view>
<text :style="{fontSize:(nFon-3)+'px',marginLeft:nmarz+'px'}" style="border-radius: 5rpx;padding: 0 6rpx;text-align: center;" class="pbackc flexs">{{item.tag_text}}</text>
</view>
</view>
<!-- <image v-if="item.isVideo && isVedio" :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-x15'" class="posir colf zou" v-for="(item,index) in list" :key="index">
<!-- 背景图 -->
<image lazy-load :class="radiu?'radius15':'radius30'" class="width100 list-min" :src="item.main_img" mode="widthFix"></image>
<view class="posia fon24 colf" style="right: 10rpx;bottom: 140rpx;z-index: 1;">
<view @tap.stop="praiseEv(index)" class="disjcac fc">
<image class="img-box" lazy-load :style="{width: radiu ?'40rpx':'60rpx',height: radiu ?'40rpx':'60rpx'}" :src="['/static/public/list-nlike.png','/static/public/detail-like.png'][item.is_liked]" mode="aspectFill"></image>
<view style="text-shadow: 0px 0px 3px #000000;">{{item.likes>1000 ? '999+':item.likes}}</view>
</view>
<view @tap.stop="chooseLike(index)" class="disjcac fc">
<image class="img-box" lazy-load :style="{width: radiu ?'40rpx':'60rpx',height: radiu ?'40rpx':'60rpx'}" :src="['/static/public/cnllection-no.png','/static/public/yconllection.png'][item.is_collected]" mode="aspectFill"></image>
<view style="text-shadow: 0px 0px 3px #000000;">{{item.collects>1000 ? '999+':item.collects}}</view>
</view>
<view class="disjcac fc">
<image class="img-box" lazy-load :style="{width: radiu ?'30rpx':'50rpx',height: radiu ?'30rpx':'50rpx'}" src="/static/public/looks-white.png" mode="aspectFill"></image>
<view style="text-shadow: 0px 0px 3px #000000;">{{item.views>1000 ? '999+':item.views}}</view>
</view>
</view>
<!-- <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-3+'px'}">
<view class="clips1">{{item.title}}</view>
<!-- <text v-if="item.isVideo && isVedio" :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="disjbac">
<view class="disac">
<!-- 发布者头像 -->
<image lazy-load class="list-headimg" :src="item.head_img" mode="aspectFill"></image>
<!-- 发布者昵称 -->
<view class="clips1 opc">{{item.name}}</view>
</view>
<text :style="{fontSize:(nFon-3)+'px',marginLeft:nmarz+'px'}" style="border-radius: 5rpx;padding: 0 6rpx;text-align: center;" class="pbackc flexs">{{item.tag_text}}</text>
</view>
</view>
<!-- <image v-if="item.isVideo && isVedio" :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>
</view>
</template>
<script>
export default {
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 {
isShowT:false,
pu_content:'是否需要取消收藏？',
current:'-1',
isVedio:false
};
},
mounted() {
this.$requst.get('index/base-config').then(res=>{
res.data.v==0 ? this.isVedio = false : this.isVedio = true;
})
},
methods:{
goDetail(index){//查看详情
if(this.$toolAll.tools.judgeAuth()){
uni.navigateTo({
url:'/pagesB/problemDetail/problemDetail?id='+this.list[index].id+'&category_id='+this.list[index].category_id
})
}
},
chooseLike(index){//喜欢不喜欢事件
// console.log('喜欢不喜欢：',index);
if(this.$toolAll.tools.judgeAuth()){
this.$emit('chooseLike',index)
this.current = index
if(this.list[index].is_collected==1) {
this.isShowT = true
} else {
// 调用tools.js中的种植埋点事件
this.$toolAll.tools.plantPoint(3,this.list[index].id);
}
}
},
// 点赞事件
praiseEv(index){
if(this.$toolAll.tools.judgeAuth()){
this.$emit('praise',index)
this.current = index
}
},
comfirmev(){
// console.log('取消收藏成功');
this.$emit('comfirmev',this.current)
this.isShowT = false
},
cancleev(){
// console.log('关闭弹框');
this.isShowT = false
}
}
}
</script>
<style>
.img-box {border-radius: 100%;}
</style>