hengmei-one/components/wfalls-flow.vue

160 lines
6.1 KiB
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>