|
|
|
@ -24,10 +24,17 @@ |
|
|
|
<uni-segmented-control :current="typeCurrent" :values="typeList" :style-type="styleType" |
|
|
|
:active-color="activeColor" @clickItem="onClickType" />--> |
|
|
|
<view class="choiceness-list"> |
|
|
|
<image v-for="(item,index) in creatorImgList" :key='index' class="img-box" |
|
|
|
:style="'width:'+imgWidth+';height:'+imgHeight" :src="item.imgUrl" @click="targetDetail(item)" |
|
|
|
mode=""></image> |
|
|
|
<view class="ivOver" v-if="flag">-----已经到底啦-----</view> |
|
|
|
<view class="images-box"> |
|
|
|
<image v-for="(item,index) in creatorImgList" :key='index' class="img-box" |
|
|
|
:class="[1, 2, 5, 6].includes(item.typeId) ? 'img-2x2' : [4].includes(item.typeId) ? 'img-1x1' : 'img-2x3'" |
|
|
|
:src="item.imgUrl" |
|
|
|
@click="targetDetail(item)" |
|
|
|
mode=""></image> |
|
|
|
</view> |
|
|
|
<!-- 显示加载中或者全部加载完成 --> |
|
|
|
<view> |
|
|
|
<uni-load-more :status="loadStatus"></uni-load-more> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
@ -40,7 +47,6 @@ |
|
|
|
data() { |
|
|
|
return { |
|
|
|
statusCurrent: 0, |
|
|
|
activeColor: '#007aff', |
|
|
|
styleType: 'text', |
|
|
|
statusList: ['待审核','审核拒绝','已上架','已下架'], |
|
|
|
typeList:[], |
|
|
|
@ -49,12 +55,14 @@ |
|
|
|
typeId: 1, |
|
|
|
status: 0, |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 10, |
|
|
|
pageSize: 18, |
|
|
|
creatorImgList: [], |
|
|
|
userInfo: {}, |
|
|
|
imgWidth: 0, // 图片宽 |
|
|
|
imgHeight: 0, // 图片高 |
|
|
|
flag: false |
|
|
|
flag: false, |
|
|
|
loadStatus:'noMore', //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式 |
|
|
|
isLoadMore:false, //是否加载中 |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(option) { |
|
|
|
@ -89,8 +97,7 @@ |
|
|
|
console.log('have userInfo') |
|
|
|
} |
|
|
|
this.queryListType(); |
|
|
|
this.imgWidth = 750/3-20 + 'rpx' |
|
|
|
this.imgHeight = 750/3-20 + 'rpx' |
|
|
|
|
|
|
|
}, |
|
|
|
// 下拉刷新 |
|
|
|
onPullDownRefresh(){ |
|
|
|
@ -100,16 +107,16 @@ |
|
|
|
this.flag = false; |
|
|
|
uni.stopPullDownRefresh(); |
|
|
|
}, |
|
|
|
// 上划加载更多 |
|
|
|
onReachBottom() { |
|
|
|
if (this.creatorImgList.length > this.pageSize*this.pageNum-1) { |
|
|
|
this.flag = false; |
|
|
|
this.pageNum += 1 |
|
|
|
this.listTiktokImgIn() |
|
|
|
}else{ |
|
|
|
this.flag = true; |
|
|
|
} |
|
|
|
}, |
|
|
|
// 上划加载更多 |
|
|
|
onReachBottom(e) {//上拉触底函数 |
|
|
|
if(!this.isLoadMore) { //此处判断，上锁，防止重复请求 |
|
|
|
this.isLoadMore=true |
|
|
|
if (this.loadStatus === "more") { |
|
|
|
this.pageNum += 1 //每次上拉请求新的一页 |
|
|
|
this.listTiktokImgIn(); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 前往详情页 |
|
|
|
targetDetail(item) { |
|
|
|
@ -120,14 +127,13 @@ |
|
|
|
key: 'detailId', |
|
|
|
data: item.id, |
|
|
|
success() { |
|
|
|
console.log(111111) |
|
|
|
uni.navigateTo({ |
|
|
|
url: `/pages/index/material/imgDetail?categoryId=${that.typeId}&categoryIndex=${that.typeCurrent}&status=${that.status}`, |
|
|
|
success:function(){ |
|
|
|
console.log('跳转成功!') |
|
|
|
// console.log('跳转成功!') |
|
|
|
}, |
|
|
|
fail:function(){ |
|
|
|
console.log('跳转失败!') |
|
|
|
// console.log('跳转失败!') |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
@ -144,31 +150,15 @@ |
|
|
|
// that.typeCurrent = 0; |
|
|
|
// that.typeId = that.typeIdList[0]; |
|
|
|
// console.log('status',that.status) |
|
|
|
that.pageNum = 1; |
|
|
|
that.loadStatus = 'loading'; |
|
|
|
that.isLoadMore = false; |
|
|
|
uni.showLoading({ |
|
|
|
title: "加载中", |
|
|
|
mask: true, |
|
|
|
success() { |
|
|
|
// 查询指定艺术家图片集合 |
|
|
|
const param = { |
|
|
|
creatorId: that.userInfo.id, |
|
|
|
typeId: that.typeId, |
|
|
|
pageSize: that.pageSize, |
|
|
|
pageNum: that.pageNum, |
|
|
|
status: that.status |
|
|
|
}; |
|
|
|
listTiktokImgIn(param).then(res => { |
|
|
|
console.log('that.typeId',that.typeId); |
|
|
|
console.log('that.status',that.status); |
|
|
|
if(res.data.code === 200){ |
|
|
|
that.creatorImgList.push(...res.data.rows) |
|
|
|
//console.log('调用成功1!', that.creatorImgList); |
|
|
|
}else { |
|
|
|
uni.showModal({ |
|
|
|
content: "艺术家图片列表数据加载失败！", |
|
|
|
showCancel: false, |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
that.listTiktokImgIn(); |
|
|
|
}, |
|
|
|
complete() { |
|
|
|
uni.hideLoading(); |
|
|
|
@ -181,52 +171,16 @@ |
|
|
|
that.creatorImgList = []; |
|
|
|
that.typeId = that.typeIdList[e2.currentIndex]; |
|
|
|
that.typeCurrent = e2.currentIndex; |
|
|
|
that.pageNum = 1; |
|
|
|
that.loadStatus = 'loading'; |
|
|
|
that.isLoadMore = false; |
|
|
|
//console.log('typeId',that.typeId) |
|
|
|
uni.showLoading({ |
|
|
|
title: "加载中", |
|
|
|
mask: true, |
|
|
|
success() { |
|
|
|
// 查询指定艺术家图片集合 |
|
|
|
const param = { |
|
|
|
creatorId: that.userInfo.id, |
|
|
|
typeId: that.typeId, |
|
|
|
pageSize: that.pageSize, |
|
|
|
pageNum: that.pageNum, |
|
|
|
status: that.status |
|
|
|
}; |
|
|
|
listTiktokImgIn(param).then(res => { |
|
|
|
// console.log('that.typeId',that.typeId); |
|
|
|
// console.log('that.status',that.status); |
|
|
|
if(res.data.code === 200){ |
|
|
|
that.creatorImgList.push(...res.data.rows) |
|
|
|
// console.log(that.creatorImgList) |
|
|
|
//console.log('调用成功2!', that.creatorImgList); |
|
|
|
if(that.typeId === 1){ |
|
|
|
that.imgWidth = 750/3-20 + 'rpx' |
|
|
|
that.imgHeight = 750/3-20 + 'rpx' |
|
|
|
}else if(that.typeId === 2){ |
|
|
|
that.imgWidth = 750/3-30 + 'rpx' |
|
|
|
that.imgHeight = 750/3+60 + 'rpx' |
|
|
|
}else if(that.typeId === 3){ |
|
|
|
that.imgWidth = 750/3-30 + 'rpx' |
|
|
|
that.imgHeight = 750/3+60 + 'rpx' |
|
|
|
}else if(that.typeId === 4){ |
|
|
|
that.imgWidth = 750/3+100 + 'rpx' |
|
|
|
that.imgHeight = 750/3 + 'rpx' |
|
|
|
}else if(that.typeId === 5){ |
|
|
|
that.imgWidth = 750/3-20 + 'rpx' |
|
|
|
that.imgHeight = 750/3-20 + 'rpx' |
|
|
|
}else if(that.typeId === 6){ |
|
|
|
that.imgWidth = 750/3-20 + 'rpx' |
|
|
|
that.imgHeight = 750/3-20 + 'rpx' |
|
|
|
} |
|
|
|
}else { |
|
|
|
uni.showModal({ |
|
|
|
content: "艺术家图片列表数据加载失败！", |
|
|
|
showCancel: false, |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
that.listTiktokImgIn(); |
|
|
|
}, |
|
|
|
complete() { |
|
|
|
uni.hideLoading(); |
|
|
|
@ -256,6 +210,7 @@ |
|
|
|
//查询指定艺术家图片集合 |
|
|
|
async listTiktokImgIn() { |
|
|
|
let that = this; |
|
|
|
that.loadStatus = 'loading'; |
|
|
|
const res = await listTiktokImgIn({ |
|
|
|
pageNum: that.pageNum, |
|
|
|
pageSize: that.pageSize, |
|
|
|
@ -264,20 +219,32 @@ |
|
|
|
creatorId: that.userInfo.id |
|
|
|
}) |
|
|
|
if (res.data.code === 200) { |
|
|
|
uni.hideLoading(); |
|
|
|
that.creatorImgList.push(...res.data.rows) |
|
|
|
console.log('creatorImgList',that.creatorImgList); |
|
|
|
// console.log('creatorImgList',that.creatorImgList); |
|
|
|
if(res.data.rows.length < that.pageSize){ //判断接口返回数据量小于请求数据量，则表示此为最后一页 |
|
|
|
that.isLoadMore = true |
|
|
|
that.loadStatus = 'noMore' |
|
|
|
}else{ |
|
|
|
this.loadStatus = 'more'; |
|
|
|
that.isLoadMore = false |
|
|
|
} |
|
|
|
} else { |
|
|
|
uni.showModal({ |
|
|
|
content: '艺术家图片列表加载失败！', |
|
|
|
showCancel: false |
|
|
|
}); |
|
|
|
that.isLoadMore = false |
|
|
|
if(that.page > 1){ |
|
|
|
that.page -= 1 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.choiceness { |
|
|
|
width: 750rpx; |
|
|
|
padding-top: 20rpx; |
|
|
|
@ -285,6 +252,10 @@ |
|
|
|
min-height: 100vh; |
|
|
|
|
|
|
|
.status-choice-comp { |
|
|
|
width: 670rpx; |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
background: #1d2734; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
@ -312,6 +283,11 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.type-choice-comp { |
|
|
|
width: 710rpx; |
|
|
|
background: $uni-bg-color; |
|
|
|
position: fixed; |
|
|
|
top: 68rpx; |
|
|
|
left: 0; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
flex-wrap: nowrap; |
|
|
|
@ -343,22 +319,43 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.choiceness-list { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: flex-start; |
|
|
|
flex-direction: row; |
|
|
|
width: 750rpx; |
|
|
|
width: 670rpx; |
|
|
|
margin: 128rpx auto; |
|
|
|
//border: 1rpx solid blue; |
|
|
|
|
|
|
|
|
|
|
|
.images-box { |
|
|
|
width: 690rpx; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: flex-start; |
|
|
|
flex-direction: row; |
|
|
|
margin-left: -10rpx; |
|
|
|
margin-right: -10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.img-box { |
|
|
|
margin-top: 10rpx; |
|
|
|
margin-left: 16rpx; |
|
|
|
//margin-right: 10rpx; |
|
|
|
//margin:8rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
//border: 1rpx solid red; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.img-2x2 { |
|
|
|
width: calc((670rpx - 40rpx) / 3); |
|
|
|
height: calc((670rpx - 40rpx) / 3); |
|
|
|
margin: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.img-1x1 { |
|
|
|
width: calc((670rpx - 20rpx) / 2); |
|
|
|
height: calc((670rpx - 20rpx) / 2 - ((670rpx - 20rpx) / 9)) ; |
|
|
|
margin: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.img-2x3 { |
|
|
|
width: calc((670rpx - 40rpx) / 3); |
|
|
|
height: calc((670rpx - 40rpx) / 3 + ((670rpx - 40rpx) / 6)) ; |
|
|
|
margin: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
