|
|
@ -1,15 +1,34 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view class="choiceness"> |
|
|
<view class="choiceness"> |
|
|
|
|
|
<view class="status-choice-comp"> |
|
|
|
|
|
<view class="status-item uni-secondary-color" v-for="(val, i) in statusList" |
|
|
|
|
|
:index="i" :key="i" |
|
|
|
|
|
:class="statusCurrent === i ? 'status-active' : ''" |
|
|
|
|
|
@click="onClickStatus({currentIndex: i})" |
|
|
|
|
|
> |
|
|
|
|
|
<view class="status-text">{{val}}</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="type-choice-comp"> |
|
|
|
|
|
<view class="type-item uni-secondary-color" v-for="(val, i) in typeList" |
|
|
|
|
|
:index="i" :key="i" |
|
|
|
|
|
:class="typeCurrent === i ? 'type-active' : ''" |
|
|
|
|
|
@click="onClickType({currentIndex: i})" |
|
|
|
|
|
> |
|
|
|
|
|
<view class="type-text">{{val}}</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<!-- |
|
|
<uni-segmented-control :current="statusCurrent" :values="statusList" :style-type="styleType" |
|
|
<uni-segmented-control :current="statusCurrent" :values="statusList" :style-type="styleType" |
|
|
:active-color="activeColor" @clickItem="onClickStatus" /> |
|
|
:active-color="activeColor" @clickItem="onClickStatus" /> |
|
|
<uni-segmented-control :current="typeCurrent" :values="typeList" :style-type="styleType" |
|
|
<uni-segmented-control :current="typeCurrent" :values="typeList" :style-type="styleType" |
|
|
:active-color="activeColor" @clickItem="onClickType" /> |
|
|
:active-color="activeColor" @clickItem="onClickType" />--> |
|
|
<view class="choiceness-list"> |
|
|
<view class="choiceness-list"> |
|
|
<image v-for="(item,index) in creatorImgList" :key='index' class="img-box" |
|
|
<image v-for="(item,index) in creatorImgList" :key='index' class="img-box" |
|
|
:style="'width:'+imgWidth+';height:'+imgHeight" :src="item.imgUrl" @click="targetDetail(item)" |
|
|
:style="'width:'+imgWidth+';height:'+imgHeight" :src="item.imgUrl" @click="targetDetail(item)" |
|
|
mode=""></image> |
|
|
mode=""></image> |
|
|
<view class="ivOver" v-if="flag">-----已经到底啦-----</view> |
|
|
<view class="ivOver" v-if="flag">-----已经到底啦-----</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
@ -38,7 +57,17 @@ |
|
|
flag: false |
|
|
flag: false |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
onLoad() { |
|
|
onLoad(option) { |
|
|
|
|
|
if (option?.categoryId && option?.categoryIndex) { |
|
|
|
|
|
this.statusCurrent = 2; |
|
|
|
|
|
this.status = 2; |
|
|
|
|
|
this.typeId = option.categoryId * 1; |
|
|
|
|
|
this.typeCurrent = option.categoryIndex * 1; |
|
|
|
|
|
} |
|
|
|
|
|
if (option?.categoryId && option?.categoryIndex && option?.status) { |
|
|
|
|
|
this.statusCurrent = option.status * 1; |
|
|
|
|
|
this.status = option.status * 1; |
|
|
|
|
|
} |
|
|
this.listTiktokImgIn(); |
|
|
this.listTiktokImgIn(); |
|
|
}, |
|
|
}, |
|
|
created(){ |
|
|
created(){ |
|
|
@ -73,7 +102,6 @@ |
|
|
}, |
|
|
}, |
|
|
// 上划加载更多 |
|
|
// 上划加载更多 |
|
|
onReachBottom() { |
|
|
onReachBottom() { |
|
|
console.log(2222) |
|
|
|
|
|
if (this.creatorImgList.length > this.pageSize*this.pageNum-1) { |
|
|
if (this.creatorImgList.length > this.pageSize*this.pageNum-1) { |
|
|
this.flag = false; |
|
|
this.flag = false; |
|
|
this.pageNum += 1 |
|
|
this.pageNum += 1 |
|
|
@ -86,6 +114,7 @@ |
|
|
// 前往详情页 |
|
|
// 前往详情页 |
|
|
targetDetail(item) { |
|
|
targetDetail(item) { |
|
|
//console.log('跳转', item) |
|
|
//console.log('跳转', item) |
|
|
|
|
|
let that = this; |
|
|
if (item.id) { |
|
|
if (item.id) { |
|
|
uni.setStorage({ |
|
|
uni.setStorage({ |
|
|
key: 'detailId', |
|
|
key: 'detailId', |
|
|
@ -93,7 +122,7 @@ |
|
|
success() { |
|
|
success() { |
|
|
console.log(111111) |
|
|
console.log(111111) |
|
|
uni.navigateTo({ |
|
|
uni.navigateTo({ |
|
|
url: '/pages/index/material/imgDetail', |
|
|
url: `/pages/index/material/imgDetail?categoryId=${that.typeId}&categoryIndex=${that.typeCurrent}&status=${that.status}`, |
|
|
success:function(){ |
|
|
success:function(){ |
|
|
console.log('跳转成功!') |
|
|
console.log('跳转成功!') |
|
|
}, |
|
|
}, |
|
|
@ -111,7 +140,10 @@ |
|
|
that.flag = false; |
|
|
that.flag = false; |
|
|
that.creatorImgList = []; |
|
|
that.creatorImgList = []; |
|
|
that.status = e1.currentIndex; |
|
|
that.status = e1.currentIndex; |
|
|
//console.log('status',that.status) |
|
|
that.statusCurrent = e1.currentIndex; |
|
|
|
|
|
// that.typeCurrent = 0; |
|
|
|
|
|
// that.typeId = that.typeIdList[0]; |
|
|
|
|
|
// console.log('status',that.status) |
|
|
uni.showLoading({ |
|
|
uni.showLoading({ |
|
|
title: "加载中", |
|
|
title: "加载中", |
|
|
mask: true, |
|
|
mask: true, |
|
|
@ -148,6 +180,7 @@ |
|
|
that.flag = false; |
|
|
that.flag = false; |
|
|
that.creatorImgList = []; |
|
|
that.creatorImgList = []; |
|
|
that.typeId = that.typeIdList[e2.currentIndex]; |
|
|
that.typeId = that.typeIdList[e2.currentIndex]; |
|
|
|
|
|
that.typeCurrent = e2.currentIndex; |
|
|
//console.log('typeId',that.typeId) |
|
|
//console.log('typeId',that.typeId) |
|
|
uni.showLoading({ |
|
|
uni.showLoading({ |
|
|
title: "加载中", |
|
|
title: "加载中", |
|
|
@ -162,11 +195,11 @@ |
|
|
status: that.status |
|
|
status: that.status |
|
|
}; |
|
|
}; |
|
|
listTiktokImgIn(param).then(res => { |
|
|
listTiktokImgIn(param).then(res => { |
|
|
console.log('that.typeId',that.typeId); |
|
|
// console.log('that.typeId',that.typeId); |
|
|
console.log('that.status',that.status); |
|
|
// console.log('that.status',that.status); |
|
|
if(res.data.code === 200){ |
|
|
if(res.data.code === 200){ |
|
|
that.creatorImgList.push(...res.data.rows) |
|
|
that.creatorImgList.push(...res.data.rows) |
|
|
console.log(that.creatorImgList) |
|
|
// console.log(that.creatorImgList) |
|
|
//console.log('调用成功2!', that.creatorImgList); |
|
|
//console.log('调用成功2!', that.creatorImgList); |
|
|
if(that.typeId === 1){ |
|
|
if(that.typeId === 1){ |
|
|
that.imgWidth = 750/3-20 + 'rpx' |
|
|
that.imgWidth = 750/3-20 + 'rpx' |
|
|
@ -208,7 +241,7 @@ |
|
|
if (res.data.code === 200) { |
|
|
if (res.data.code === 200) { |
|
|
for (let s of res.data.data) { |
|
|
for (let s of res.data.data) { |
|
|
this.typeList.push(s.typeName); |
|
|
this.typeList.push(s.typeName); |
|
|
this.typeIdList.push(s.id); |
|
|
this.typeIdList.push(s.id); |
|
|
} |
|
|
} |
|
|
//console.log('typeList', this.typeList) |
|
|
//console.log('typeList', this.typeList) |
|
|
console.log('typeIdList', this.typeIdList) |
|
|
console.log('typeIdList', this.typeIdList) |
|
|
@ -246,8 +279,68 @@ |
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
<style lang="scss"> |
|
|
.choiceness { |
|
|
.choiceness { |
|
|
|
|
|
width: 750rpx; |
|
|
padding-top: 20rpx; |
|
|
padding-top: 20rpx; |
|
|
//width: 750rpx; |
|
|
background: #141b29; |
|
|
|
|
|
min-height: 100vh; |
|
|
|
|
|
|
|
|
|
|
|
.status-choice-comp { |
|
|
|
|
|
background: #1d2734; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
padding: 0 40rpx; |
|
|
|
|
|
|
|
|
|
|
|
.status-item { |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
line-height: 68rpx; |
|
|
|
|
|
height: 68rpx; |
|
|
|
|
|
padding: 0 20rpx; |
|
|
|
|
|
border-radius: 10rpx; |
|
|
|
|
|
|
|
|
|
|
|
.status-text { |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.status-active { |
|
|
|
|
|
background: #0a6375; |
|
|
|
|
|
color: #FFFFFF !important; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.type-choice-comp { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: flex-start; |
|
|
|
|
|
flex-wrap: nowrap; |
|
|
|
|
|
overflow: scroll; |
|
|
|
|
|
padding-left: 40rpx; |
|
|
|
|
|
padding-top: 20rpx; |
|
|
|
|
|
padding-bottom: 20rpx; |
|
|
|
|
|
|
|
|
|
|
|
.type-item { |
|
|
|
|
|
font-size: 24rpx; |
|
|
|
|
|
line-height: 40rpx; |
|
|
|
|
|
height: 40rpx; |
|
|
|
|
|
padding: 0 20rpx; |
|
|
|
|
|
border-radius: 20rpx; |
|
|
|
|
|
flex-shrink: 0; |
|
|
|
|
|
|
|
|
|
|
|
.type-text { |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.type-active { |
|
|
|
|
|
background: #0a6375; |
|
|
|
|
|
color: #FFFFFF !important; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.choiceness-list { |
|
|
.choiceness-list { |
|
|
display: flex; |
|
|
display: flex; |
|
|
|
