|
|
@ -70,19 +70,42 @@ |
|
|
|
{{item.title}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="hot-box"> |
|
|
|
<view class="hot-box" v-if="hotIndex==0"> |
|
|
|
<view class="hot-column" v-for="(column, index) in 2" :key="index"> |
|
|
|
<view v-for="(item,indexs) in getColumnItems(index)" :key="indexs" class="hot-item" @click="gotoHotDetail(item)"> |
|
|
|
<view v-if="indexs%2==1&&column==0" v-for="(item,indexs) in hotList" :key="indexs" class="hot-item" @click="gotoHotDetail(item)"> |
|
|
|
<view class="image-container"> |
|
|
|
<image :src="item.src" mode="widthFix" class="hot-img" lazy-load="true"></image> |
|
|
|
<!-- <image src="https://static.ticket.sz-trip.com/cgc/images/index/plays.png" mode="widthFix" class="play-img" v-if="hotIndex && item.genre == 'video'" lazy-load="true"></image> --> |
|
|
|
<image :src="showImg(item.goods.image)" mode="widthFix" class="hot-img" lazy-load="true"></image> |
|
|
|
</view> |
|
|
|
<view class="hot-content"> |
|
|
|
<view class="title text-overflowRows">{{item.title || item.goods.title}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-if="indexs%2==0&&column==1" v-for="(item,indexs) in hotList" :key="indexs" class="hot-item" @click="gotoHotDetail(item)"> |
|
|
|
<view class="image-container"> |
|
|
|
<image :src="showImg(item.goods.image)" mode="widthFix" class="hot-img" lazy-load="true"></image> |
|
|
|
</view> |
|
|
|
<view class="hot-content"> |
|
|
|
<view class="title text-overflowRows">{{item.title || item.goods.title}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="hot-box" v-else> |
|
|
|
<view class="hot-column" v-for="(column, index) in 2" :key="index"> |
|
|
|
<view v-if="indexs%2==1&&column==0" v-for="(item,indexs) in hotList1" :key="indexs" class="hot-item" @click="gotoHotDetail(item)"> |
|
|
|
<view class="image-container"> |
|
|
|
<image :src="showImg(item.goods.image)" mode="widthFix" class="hot-img" lazy-load="true"></image> |
|
|
|
</view> |
|
|
|
<view class="hot-content"> |
|
|
|
<view class="title text-overflowRows">{{item.title || item.goods.title}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-if="indexs%2==0&&column==1" v-for="(item,indexs) in hotList1" :key="indexs" class="hot-item" @click="gotoHotDetail(item)"> |
|
|
|
<view class="image-container"> |
|
|
|
<image :src="showImg(item.goods.image)" mode="widthFix" class="hot-img" lazy-load="true"></image> |
|
|
|
</view> |
|
|
|
<view class="hot-content"> |
|
|
|
<view class="title text-overflowRows">{{item.title || item.goods.title}}</view> |
|
|
|
<!-- <view class="subtitle" v-if="hotIndex && item.genre == 'video'"> |
|
|
|
<image src="https://static.ticket.sz-trip.com/tongli/images/index/user.png" mode="aspectFill"></image> |
|
|
|
{{item.author}} |
|
|
|
</view> --> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
@ -140,8 +163,10 @@ |
|
|
|
id: '41' |
|
|
|
} |
|
|
|
], |
|
|
|
|
|
|
|
hotIndex: 0, |
|
|
|
hotList: [], |
|
|
|
hotList1: [], |
|
|
|
isLoading: false, |
|
|
|
limit: 4, |
|
|
|
} |
|
|
@ -157,12 +182,14 @@ |
|
|
|
this.initRectInfo() |
|
|
|
|
|
|
|
this.getList() |
|
|
|
this.initHotList() |
|
|
|
this.changeType(0) |
|
|
|
}, |
|
|
|
onReachBottom() { |
|
|
|
setTimeout(() => { |
|
|
|
if (!this.isLoading) this.getHotList(); |
|
|
|
}, 1000); |
|
|
|
// setTimeout(() => { |
|
|
|
// // if (!this.isLoading) this.getHotList(); |
|
|
|
// this.getHotList() |
|
|
|
// }, 1000); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
viewDetail(item) { |
|
|
@ -263,30 +290,53 @@ |
|
|
|
} |
|
|
|
}, |
|
|
|
// 瀑布流 |
|
|
|
getColumnItems(columnIndex) { |
|
|
|
const columnItems = []; |
|
|
|
this.hotList.forEach((item, index) => { |
|
|
|
// switch (this.hotIndex) { |
|
|
|
// case 1: |
|
|
|
// item.src = this.showImg(item.image); |
|
|
|
// break; |
|
|
|
// default: |
|
|
|
// item.src = this.showImg(item.goods.image); |
|
|
|
// } |
|
|
|
item.src = this.showImg(item.goods.image); |
|
|
|
|
|
|
|
if (index % 2 === columnIndex) { |
|
|
|
columnItems.push(item); |
|
|
|
} |
|
|
|
}); |
|
|
|
return columnItems; |
|
|
|
}, |
|
|
|
// getColumnItems(columnIndex) { |
|
|
|
// const columnItems = []; |
|
|
|
// this.hotList.forEach((item, index) => { |
|
|
|
// // switch (this.hotIndex) { |
|
|
|
// // case 1: |
|
|
|
// // item.src = this.showImg(item.image); |
|
|
|
// // break; |
|
|
|
// // default: |
|
|
|
// // item.src = this.showImg(item.goods.image); |
|
|
|
// // } |
|
|
|
// item.src = this.showImg(item.goods.image); |
|
|
|
|
|
|
|
// if (index % 2 === columnIndex) { |
|
|
|
// columnItems.push(item); |
|
|
|
// } |
|
|
|
// }); |
|
|
|
// return columnItems; |
|
|
|
// }, |
|
|
|
// 更改热门推荐类型 |
|
|
|
changeType(index) { |
|
|
|
this.hotIndex = index |
|
|
|
this.isLoading = false |
|
|
|
// this.isLoading = false |
|
|
|
// if (index==0) { |
|
|
|
// this.hotList = this.hotList1 |
|
|
|
// } |
|
|
|
|
|
|
|
// this.getHotList() |
|
|
|
}, |
|
|
|
initHotList () { |
|
|
|
this.hotList = [] |
|
|
|
this.getHotList() |
|
|
|
this.hotList1 = [] |
|
|
|
this.Post({ |
|
|
|
tag_id: 51, |
|
|
|
offset: this.hotList.length, |
|
|
|
limit: 100, |
|
|
|
},'/api/tag/getGoodsByTagId').then(res => { |
|
|
|
if(res.data.length < this.limit) this.isLoading = true |
|
|
|
this.hotList = this.hotList.concat(res.data) |
|
|
|
}) |
|
|
|
this.Post({ |
|
|
|
tag_id: 52, |
|
|
|
offset: this.hotList1.length, |
|
|
|
limit: 100, |
|
|
|
},'/api/tag/getGoodsByTagId').then(res => { |
|
|
|
if(res.data.length < this.limit) this.isLoading = true |
|
|
|
this.hotList1 = this.hotList1.concat(res.data) |
|
|
|
}) |
|
|
|
}, |
|
|
|
getHotList() { |
|
|
|
if(this.hotIndex == 1) { |
|
|
@ -302,11 +352,11 @@ |
|
|
|
// }) |
|
|
|
this.Post({ |
|
|
|
tag_id: 52, |
|
|
|
offset: this.hotList.length, |
|
|
|
offset: this.hotList1.length, |
|
|
|
limit: this.limit, |
|
|
|
},'/api/tag/getGoodsByTagId').then(res => { |
|
|
|
if(res.data.length < this.limit) this.isLoading = true |
|
|
|
this.hotList = this.hotList.concat(res.data) |
|
|
|
this.hotList1 = this.hotList.concat(res.data) |
|
|
|
}) |
|
|
|
}else { |
|
|
|
this.Post({ |
|
|
|