<template>
|
<view class="find-wrapper wrapperLayer">
|
<view class="pageNavigationBar-container colCen">
|
<view class="topbarbox"></view>
|
<view class="headerNavigationbar rowCenBet borderBox">
|
<view class="backIcon rowCenSta">
|
|
</view>
|
<view class="pageState rowCen">
|
<block v-for="(items,index) in titleStates" :key="index">
|
<view class="items-box rowCenCen" :class="stateCurrent==index?'itm-active':''" @tap="exchangeState(index)">
|
<view>{{items.title}}</view>
|
</view>
|
</block>
|
</view>
|
<view class="emptybox rowCenEnd">
|
</view>
|
</view>
|
</view>
|
|
<view class="topbarbox">
|
</view>
|
<view class="pagebottom-container colCen">
|
<view class="warterfall_list" style="width: 100%;">
|
<view class="list_container">
|
<view class="water-flow-column colCen" v-for="(col, c) in currentArray" :key="c">
|
<view class="fallitem colCen" :id="col.id" style="width: 100%;">
|
<block v-for="(itms, idx) in col.list" :key="idx">
|
<view class="first-item" v-if="c==0 && idx==0 && itms.blist">
|
<swiper class="bannerswiper" :indicator-dots="true" :duration="1000">
|
<swiper-item v-for="(swiperitm,swiperidx) in itms.blist">
|
<view class="swiper-item" @tap='gobanersrc(swiperitm)'>
|
<image class="gifpic" :src="swiperitm.image" mode="widthFix"></image>
|
</view>
|
</swiper-item>
|
</swiper>
|
</view>
|
|
<view class="card-items" v-else @tap="gofindDetails(itms.album_id)">
|
<view class="topimg-area colCen">
|
<view class="bigimg defIcon">
|
<image :src="itms.good_list_json[0].pic" mode="aspectFill"></image>
|
</view>
|
<view class="smallimgs rowCen">
|
<image class="smimg" :src="itms.good_list_json[1].pic" mode="aspectFill"></image>
|
<image class="smimg" :src="itms.good_list_json[2].pic" mode="aspectFill"></image>
|
</view>
|
<view class="imgsnum-box rowCenCen">
|
<view>{{itms.goods_count}}款</view>
|
</view>
|
</view>
|
<view class="info-area colCen">
|
<view class="title">
|
{{itms.title}}
|
</view>
|
<view class="tipsList-box">
|
<!-- <block v-for="(tipsit,tipsid) in itms.tipsList" :key="tipsid"> -->
|
<view class="tips-container rowCen">
|
{{itms.label}}
|
</view>
|
<!-- </block> -->
|
</view>
|
|
<view class="userContent-likenum rowStaBet">
|
<view class="left-headerbox rowSta">
|
<image class="avator-img" :src="itms.anchor.head_img" mode="aspectFill"></image>
|
<view class="name-time">
|
<view class="name">
|
小官精选
|
</view>
|
<view class="time" v-text="getTimer(itms.update_time)">
|
<!-- {{getTimer(itms.updateTime)}} -->
|
</view>
|
</view>
|
</view>
|
<view class="right-likebtn rowCen" @click.stop="like(c,idx)">
|
<image class="heart" src="../../static/images/home/heartred.png" mode="aspectFill" v-if="itms.flag"></image>
|
<image class="heart" src="../../static/images/home/heart.png" mode="aspectFill" v-else></image>
|
<view class="likeNum" :style="itms.flag?'color:#FE3738':''">
|
{{itms.like_num}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</block>
|
</view>
|
</view>
|
</view>
|
<aLoadMore :status="loadstate" mode="loading3" :showTitle='true' color="#999999"></aLoadMore>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import drawtab from '../../utils/mineTab.js'
|
import util from '../../utils/utils.js'
|
var a = 0
|
export default {
|
|
data() {
|
return {
|
stateCurrent: 1,
|
titleStates: [{
|
title: '关注'
|
},
|
{
|
title: '发现'
|
}
|
],
|
|
pageDateList: [], //视频列表
|
refrenshColunmDataList: [], //缓存的数组
|
internalDataList: [],
|
|
currentArray: [{
|
id: 'water-fall-1',
|
list: []
|
},
|
{
|
id: 'water-fall-2',
|
list: []
|
}
|
],
|
|
loginBack:false,
|
|
loadstate: 'loading',
|
pageCurrent: 1,
|
canload: false
|
}
|
},
|
watch: {
|
pageDateList(nval, oval) {
|
console.log(nval.length, '新的列表数据进来了~');
|
this.canload = false
|
if (nval.length > 0) {
|
this.$nextTick(() => {
|
for (var i = this.refrenshColunmDataList.length; i < nval.length; i++) {
|
this.internalDataList.push(nval[i])
|
if(i==nval.length-1){
|
console.log(nval.length);
|
console.log(this.refrenshColunmDataList.length);
|
if(nval.length-this.refrenshColunmDataList.length<20){
|
this.canload = false
|
}else{
|
this.canload = true
|
}
|
}else{
|
this.canload = false
|
}
|
}
|
})
|
} else {
|
this.externalRefrensh()
|
this.internalDataList = []
|
}
|
},
|
|
internalDataList(nval, oval) {
|
this.getPushContainer();
|
}
|
},
|
created() {
|
this.getAlldata();
|
if(this.loginBack){
|
this.loginBack = false
|
this.getAlldata()
|
}
|
drawtab.nativeView.show()
|
},
|
onHide() {
|
drawtab.nativeView.hide()
|
},
|
onReachBottom() {
|
if (this.canload) {
|
if(this.stateCurrent==1){
|
this.getAlldata()
|
}else{
|
this.getMyfollow()
|
}
|
}
|
},
|
methods: {
|
like(a, b) {
|
this.currentArray.forEach((items, index) => {
|
if (a == index) {
|
items.list.forEach((itm, idx) => {
|
if (b == idx) {
|
if (!itm.flag) {
|
var that = this;
|
this.$u.api.likeAlbum({
|
album_id:itm.album_id
|
}).then(e => {
|
if(e.code != 0) return that.$alert(e.msg)
|
itm.flag = true
|
itm.like_num++
|
}).catch(function (err) {
|
})
|
}
|
}
|
})
|
}
|
})
|
},
|
|
exchangeState(idx) {
|
if (this.stateCurrent != idx) {
|
this.pageCurrent = 1
|
this.pageDateList = []
|
this.loadstate = 'loading'
|
this.canload = false
|
this.stateCurrent = idx
|
if(this.stateCurrent==1){
|
this.getAlldata()
|
}else{
|
this.getMyfollow()
|
}
|
}
|
},
|
|
getAlldata() {
|
var that = this;
|
this.$u.api.getAlbum({
|
pageSize: 20,
|
page: this.pageCurrent,
|
}).then(e => {
|
if(e.code != 0) return that.$alert(e.msg)
|
var res = e.data;
|
console.log(res)
|
uni.stopPullDownRefresh()
|
that.pageDateList = that.pageDateList.concat(res.list)
|
if (res.list.length < 20) {
|
that.loadstate = 'nomore';
|
that.canload = false;
|
} else {
|
that.loadstate = 'loading';
|
// this.canload = true;
|
that.pageCurrent ++;
|
}
|
if (res.banner.length > 0) {
|
var obj = {}
|
obj.blist = res.banner
|
that.pageDateList.unshift(obj)
|
console.log(that.pageDateList);
|
}
|
}).catch(function (err) {
|
})
|
},
|
|
getMyfollow(){
|
var user = uni.getStorageSync('userInfo');
|
if(user == ""){
|
uni.redirectTo({
|
url:"../login/wxlogin"
|
})
|
}
|
var that = this;
|
this.$u.api.myFollowAlbum({
|
pageSize:20,
|
page:this.pageCurrent,
|
}).then(e => {
|
if(e.code != 0) return that.$alert(e.msg)
|
var res = e.data.list;
|
console.log(res);
|
uni.stopPullDownRefresh()
|
that.pageDateList = that.pageDateList.concat(res)
|
if (res.length < 20) {
|
that.loadstate = 'nomore';
|
that.canload = false;
|
} else {
|
that.loadstate = 'loading';
|
that.canload = true;
|
that.pageCurrent ++;
|
}
|
}).catch(function (err) {
|
})
|
|
},
|
|
gofindDetails(id) {
|
console.log(id)
|
uni.navigateTo({
|
url: "/pages/find/findGoods?id=" + id
|
})
|
},
|
|
gobanersrc(info){
|
util.goUrl(info)
|
},
|
|
|
/**
|
* 获取节点信息
|
*/
|
getPushContainer() {
|
let sortList = [];
|
this.$nextTick(() => {
|
uni.createSelectorQuery().in(this)
|
.selectAll('.fallitem')
|
.boundingClientRect()
|
.exec(res => {
|
if (res) {
|
sortList = res[0];
|
sortList.sort((a, b) => {
|
return a.height - b.height;
|
});
|
this.pushShiftData(sortList[0]);
|
}
|
});
|
})
|
},
|
|
pushShiftData(pushObj) {
|
//内部数据internalDataList
|
if (this.internalDataList.length > 0) {
|
this.currentArray.forEach((items, index) => {
|
if (items.id == pushObj.id) {
|
items.list.push(this.internalDataList[0]);
|
let shiftObj = this.internalDataList.shift();
|
this.pushLoadData(shiftObj);
|
}
|
});
|
}
|
},
|
|
//缓存数组
|
pushLoadData(shiftObj) {
|
this.refrenshColunmDataList.push(shiftObj)
|
},
|
|
externalRefrensh() {
|
this.refrenshColunmDataList = [];
|
console.log(this.currentArray);
|
for (let i = 0; i < this.currentArray.length; i++) {
|
this.currentArray[i].list = [];
|
}
|
},
|
|
getTimer(stringTime) {
|
|
var minute = 1000 * 60;
|
var hour = minute * 60;
|
var day = hour * 24;
|
var week = day * 7;
|
var month = day * 30;
|
var time1 = new Date().getTime(); //当前的时间戳
|
var time2 = Date.parse(new Date((stringTime.replace(/\-/g, '/')))); //指定时间的时间戳
|
var time = time1 - time2;
|
|
var result = null;
|
if (time < 0) {} else if (time / month >= 1) {
|
result = parseInt(time / month) + "月前";
|
} else if (time / week >= 1) {
|
result = parseInt(time / week) + "周前";
|
} else if (time / day >= 1) {
|
result = parseInt(time / day) + "天前";
|
} else if (time / hour >= 1) {
|
result = parseInt(time / hour) + "小时前";
|
} else if (time / minute >= 1) {
|
result = parseInt(time / minute) + "分钟前";
|
} else {
|
result = "刚刚！";
|
}
|
return result;
|
}
|
},
|
onPullDownRefresh() {
|
this.pageCurrent = 1
|
this.pageDateList = []
|
this.loadstate = 'loading'
|
this.canload = false
|
if(this.stateCurrent==0){
|
this.getMyfollow()
|
}else{
|
this.getAlldata()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.find-wrapper {
|
width: 100%;
|
|
.pageNavigationBar-container {
|
width: 100%;
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 100;
|
background-color: #FFFFFF;
|
|
.headerNavigationbar {
|
width: 100%;
|
height: 90rpx;
|
padding: 0 32rpx;
|
|
.backIcon {
|
width: 60rpx;
|
height: 32rpx;
|
z-index: 1;
|
|
image {
|
width: 17rpx;
|
height: 32rpx;
|
}
|
}
|
|
.pageState {
|
.items-box {
|
width: 170rpx;
|
font-size: 36rpx;
|
font-weight: 500;
|
color: #666666;
|
}
|
|
.itm-active {
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #333333;
|
}
|
}
|
|
.emptybox {
|
width: 60rpx;
|
height: 32rpx;
|
}
|
}
|
}
|
|
.pagebottom-container {
|
width: 100%;
|
margin-top: 110rpx;
|
padding: 0 20rpx;
|
|
.warterfall_list {
|
width: 100%;
|
|
.list_container {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
|
.water-flow-column {
|
width: 346rpx;
|
|
.fallitem {
|
width: 100%;
|
|
.first-item {
|
width: 346rpx;
|
margin-bottom: 20rpx;
|
|
/deep/.bannerswiper {
|
width: 100%;
|
height: 500rpx;
|
overflow: hidden;
|
|
.gifpic {
|
border-radius: 16rpx;
|
}
|
|
.uni-swiper-dot {
|
box-sizing: border-box;
|
width: 13rpx;
|
height: 13rpx;
|
border: 1rpx solid #FFFFFF;
|
border-radius: 50%;
|
background-color: transparent;
|
}
|
|
.uni-swiper-dot-active {
|
width: 13rpx;
|
height: 13rpx;
|
background: #E75D00;
|
border: none;
|
}
|
}
|
}
|
|
.card-items {
|
width: 346rpx;
|
border-radius: 16rpx;
|
margin-bottom: 20rpx;
|
overflow: hidden;
|
background-color: #FFFFFF;
|
|
.topimg-area {
|
width: 100%;
|
position: relative;
|
|
.bigimg {
|
width: 100%;
|
height: 346rpx;
|
}
|
|
.smallimgs {
|
.smimg {
|
width: 173rpx;
|
height: 173rpx;
|
}
|
}
|
|
.imgsnum-box {
|
position: absolute;
|
height: 40rpx;
|
background: rgba(0, 0, 0, 0.6);
|
padding: 0 6rpx;
|
border-radius: 8rpx;
|
z-index: 10;
|
right: 20rpx;
|
bottom: 20rpx;
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
}
|
|
.info-area {
|
width: 100%;
|
padding: 10rpx;
|
|
.title {
|
width: 100%;
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #333333;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
margin-bottom: 15rpx;
|
}
|
|
.tipsList-box {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
|
.tips-container {
|
height: 34rpx;
|
background: #FFF3F3;
|
border-radius: 4rpx;
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #ED4015;
|
margin-right: 10rpx;
|
margin-bottom: 10rpx;
|
}
|
}
|
|
.userContent-likenum {
|
width: 100%;
|
margin-top: 15rpx;
|
|
.left-headerbox {
|
.avator-img {
|
width: 40rpx;
|
height: 40rpx;
|
border-radius: 50%;
|
}
|
|
.name-time {
|
margin-left: 15rpx;
|
|
.name {
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #333333;
|
}
|
|
.time {
|
font-size: 20rpx;
|
font-weight: 500;
|
color: #999999;
|
}
|
}
|
}
|
|
.right-likebtn {
|
.heart {
|
width: 26rpx;
|
height: 24rpx;
|
}
|
|
.likeNum {
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #333333;
|
margin-left: 15rpx;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
