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-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="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 && 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="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 && 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){//查看详情
				if(this.jieDuan==false){
					let isAuth = this.$toolAll.tools.returnAuth()
					if(!isAuth){
						uni.navigateTo({
							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',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>