perry-mall/components/wfalls-flow.vue

<template>
	<view>
		<view v-if="list.length==0" 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>
		<view class="list-container">
			<view id="wf-list" class="list" v-for="(list,listIndex) of viewList" :key="listIndex">
				<view @tap="goDetail(listIndex,index)" class="item" style="position: relative;" v-for="(item,index) of list.list" :key="index">
					<image style="border-radius: 30rpx;min-height: 260rpx;" @load="handleViewRender(listIndex,index)" @error="handleViewRender(listIndex,index)" :src="item.main_img" mode="widthFix"></image>
					<view style="position: absolute;top: 18rpx;right: 18rpx;z-index: 3;" @tap.stop="chooseLike(listIndex,index)">
						<!-- <image src="/static/public/like.png" style="width: 69rpx;height: 69rpx;border-radius: 100%;" mode=""></image> -->
						<!-- 不喜欢 -->
						<image v-if="item.is_collected!=1" style="width: 69rpx;height: 69rpx;border-radius: 100%;" src="/static/public/no-like.png"></image>
						<!-- 喜欢 --> 
						<image v-if="item.is_collected==1" :class="item.is_collected==1?'bounceIn':'bounceOut'" style="width: 69rpx;height: 69rpx;border-radius: 100%;" class="animated" src="/static/public/like.png" mode="aspectFill"></image>
					</view>
					<view style="position: absolute;z-index: 1;bottom: 8rpx;color: #FFFFFF;background: -webkit-linear-gradient(bottom,rgba(0,0,0,0.79),rgba(255,255,255,0));width: 100%;padding-top: 100rpx;border-bottom-left-radius: 30rpx;border-bottom-right-radius: 30rpx;">
						<view style="margin: 20rpx;font-size: 22rpx;line-height: 40rpx;">
							<view style="display: flex;align-items: center;font-size: 30rpx;">
								<view class="clips1 mar-y10">{{item.title}}</view>
								<text v-if="item.isVideo" :style="{fontSize:(nFon-2)+'px',marginLeft:nmarz+'px'}" style="border-radius: 5rpx;padding: 0 6rpx;text-align: center;" class="pbackc flexs fon30">视频</text>
							</view>
							<view class="clips1" style="opacity: .7;">{{item.content}}</view>
							<view style="display: flex;align-items: center;">
								<image :src="item.head_img" style="width: 28rpx;height: 28rpx;border-radius: 100%;" mode=""></image>
								<view class="mar-z10" style="opacity: .7;">{{item.name}}</view>
							</view>
						</view>
					</view>
					<image v-if="item.isVideo" :style="{width:nWidth+'rpx',height:nHeight+'rpx'}" class="posia" style="top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 3;" src="/static/public/video.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 弹框 -->
		<pu-po :isShowT="isShowT" :contentVal="pu_content" @comfirmev="comfirmev" @cancleev="cancleev"></pu-po>
	</view>
</template>

<script>
	export default {
        props:{
            list:{
                type:Array, //实际请求获取的列表数据
            },
			nWidth:{
				type:String,
				default:'120'
			},
			nHeight:{
				type:String,
				default:'120'
			},
			nFon:{
				type:String,
				default:'15'
			},
        },
		data() {
			return {
                viewList:[{list:[]},{list:[]}],  //展示到视图的列表数据
                everyNum:2,
				jieDuan:false,
				pu_content:'是否需要取消收藏？',
				isShowT:false,
				current:{}
			}
		},
		watch:{
			list(oldVal,newVal){
				this.init()
			}
		},
		methods: {
			comfirmev(){
				// console.log('取消收藏成功');
				this.$emit('comfirmev',this.current)
				this.isShowT = false
			},
			cancleev(){
				// console.log('关闭弹框');
				this.isShowT = false
			},
			chooseLike(index,indext){//喜欢不喜欢事件
				// console.log('喜欢不喜欢：',index);
				if(this.jieDuan==false){
					let isAuth = this.$toolAll.tools.returnAuth()
					if(!isAuth){
						this.$emit('chooseLike',this.viewList[index].list[indext].id)
						this.current = this.viewList[index].list[indext].id
						if(this.viewList[index].list[indext].is_collected==1) {
							this.isShowT = true
						} else {
							let maiOjb = {
								e:3,//内容收藏
								c:this.viewList[index].list[indext].id,
								t:new Date().getTime()//当前时间戳
							}
							this.$toolAll.tools.maiDian(maiOjb)
						}
					} else this.jieDuan = true
				}
			},
			goDetail(index,indext){//查看详情
				if(this.jieDuan==false){
					let isAuth = this.$toolAll.tools.returnAuth()
					if(!isAuth){
						uni.navigateTo({
							// url:'/pagesB/problemDetail/problemDetail?isCate='+this.list[index].isCate
							url:'/pagesB/problemDetail/problemDetail?id='+this.viewList[index].list[indext].id+'&category_id='+this.viewList[index].list[indext].category_id
						})
					} else this.jieDuan = true
				}
			},
            init(){
                this.viewList = [{list:[]},{list:[]}];
                setTimeout(()=>{
                    this.handleViewRender(0,0)
                },0)
            },
			handleViewRender(x,y){
                const index = this.viewList.reduce((total,current)=>total + current.list.length,0)
                if(index>this.list.length-1) {
                    // 加载完成触发事件并返回加载过的图片数
                    return
                };
                const query = uni.createSelectorQuery().in(this);
                let listFlag = 0;
                query.selectAll('#wf-list').boundingClientRect(data => {
                    listFlag = data[0].bottom - data[1].bottom<=0?0:1;
                    this.viewList[listFlag].list.push(this.list[index])
                }).exec()
            },
		},
        mounted() {
            if(this.list.length){
                this.init()
            }
        }
	}
</script>

<style lang="stylus" scoped>
    .list-container
        display flex
        justify-content space-between
        align-items:flex-start
        padding-top 20rpx
        .list
            width calc(48%)
            display flex
            flex-direction column
            .item
                margin-bottom 30rpx
                image
                    width 100%
                .desc
                    padding 20rpx
                    font-size 22rpx
</style>