uni-app-applet/components/list-pu.vue

168 lines
6.2 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 && 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 class="list-headimg" :src="item.head_img" mode="aspectFill"></image>
<!-- 发布者昵称 -->
<view class="clips1 opc">{{item.name}}</view>
</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>
<!-- <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-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 && 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 class="list-headimg" :src="item.head_img" mode="aspectFill"></image>
<!-- 发布者昵称 -->
<view class="clips1 opc">{{item.name}}</view>
</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>
<!-- <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>
<!-- 弹框授权 -->
<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,
isVedio:uni.getStorageSync('isVedio')
};
},
methods:{
cancleEv(e){
if(e==0) this.vision = false
},
goDetail(index){//查看详情
},
chooseLike(index){//喜欢不喜欢事件
// console.log('喜欢不喜欢:',index);
if(this.jieDuan==false){
let isAuth = this.$toolAll.tools.returnAuth()
if(!isAuth){
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.current)
this.isShowT = false
},
cancleev(){
// console.log('关闭弹框');
this.isShowT = false
}
}
}
</script>
<style>
</style>