186 lines
8.1 KiB
Vue
186 lines
8.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-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;top: 40rpx;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 mar-s10">
|
|
<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>
|
|
<!-- <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="clips2">{{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;top: 40rpx;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 mar-s10">
|
|
<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>
|
|
<!-- <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="clips2">{{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>
|