hengmei-two/components/list-pu.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>