You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
174 lines
4.3 KiB
174 lines
4.3 KiB
<template>
|
|
<view class="myCollection">
|
|
<waterfallList ref="waterfallRef" :col="2" :clickItem="targetDetail" ></waterfallList>
|
|
<!-- 显示加载中或者全部加载完成 -->
|
|
<view>
|
|
<uni-load-more :status="loadStatus"></uni-load-more>
|
|
</view>
|
|
<toTop :toTopFlag="toTopFlag" :toTop="toTop"></toTop>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getAiPaintPage
|
|
} from '@/api/paint.js'
|
|
import waterfallList from '@/components/waterfall-list/waterfall-list.vue'
|
|
import toTop from '@/components/toTop/toTop.vue'
|
|
export default {
|
|
components:{
|
|
waterfallList,
|
|
toTop
|
|
},
|
|
data() {
|
|
return {
|
|
userInfo: {}, // 用户信息
|
|
imgList: [], // 图片列表
|
|
imgWidth: 0, // 图片宽
|
|
imgHeight: 0, // 图片高
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
loadStatus:'noMore', //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式
|
|
isLoadMore:false, //是否加载中
|
|
toTopFlag: false
|
|
}
|
|
},
|
|
created() {
|
|
let that = this;
|
|
that.userInfo = uni.getStorageSync('userInfo')
|
|
if (that.userInfo) {
|
|
that.pageNum = 1;
|
|
that.$refs.waterfallRef && that.$refs.waterfallRef.init();
|
|
that.getImgList()
|
|
}
|
|
},
|
|
// 下拉刷新
|
|
// onPullDownRefresh() {
|
|
// this.pageNum = 1
|
|
// this.imgList = []
|
|
// this.getImgList()
|
|
// uni.stopPullDownRefresh()
|
|
// },
|
|
// 上划加载更多
|
|
onReachBottom() {//上拉触底函数
|
|
if(!this.isLoadMore) { //此处判断，上锁，防止重复请求
|
|
this.isLoadMore=true
|
|
if (this.loadStatus === "more") {
|
|
this.pageNum += 1 //每次上拉请求新的一页
|
|
this.getImgList();
|
|
}
|
|
}
|
|
},
|
|
onPageScroll(e){
|
|
// 监听页面滚动
|
|
this.toTopFlag = e.scrollTop > 200; //根据距离顶部距离是否显示回到顶部按钮
|
|
},
|
|
methods: {
|
|
toTop() {
|
|
uni.pageScrollTo({
|
|
scrollTop: 0,
|
|
duration: 100,
|
|
});
|
|
},
|
|
// ai图画分頁
|
|
async getImgList() {
|
|
let that = this
|
|
that.loadStatus = 'loading';
|
|
const res = await getAiPaintPage({
|
|
painterId: that.userInfo.id,
|
|
source: '1',
|
|
pageNum: that.pageNum,
|
|
pageSize: that.pageSize
|
|
})
|
|
console.log('res',res)
|
|
if (res && res.data.code === 200) {
|
|
let imgData = res.data.rows?.map?.(item => {
|
|
if (item.width == '1024' && item.height == '512') {
|
|
item.typeId = 4;
|
|
} else if (item.width == '512' && item.height == '1024') {
|
|
item.typeId = 3;
|
|
} else {
|
|
item.typeId = 1;
|
|
}
|
|
return item;
|
|
});
|
|
that.$refs.waterfallRef.addData(imgData);
|
|
if(res.data.rows.length < that.pageSize){ //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
|
that.isLoadMore = true
|
|
that.loadStatus = 'noMore'
|
|
}else{
|
|
this.loadStatus = 'more';
|
|
that.isLoadMore = false
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none'
|
|
})
|
|
that.isLoadMore = false
|
|
if(that.page > 1){
|
|
that.page -= 1
|
|
}
|
|
}
|
|
},
|
|
// 前往详情页
|
|
targetDetail(item) {
|
|
if (item.id) {
|
|
uni.navigateTo({
|
|
url: './aiPaintDetail?data='+JSON.stringify(item)
|
|
})
|
|
}
|
|
},
|
|
},
|
|
// onload(e) {
|
|
// console.log("加载了广告");
|
|
// },
|
|
// onclose(e) {
|
|
// console.log("关闭了广告: " + e.detail);
|
|
// },
|
|
// onerror(e) {
|
|
// console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
|
|
// }
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.myCollection {
|
|
|
|
.uni-searchbar {
|
|
border: 1px solid #11A8FD;
|
|
border-radius: 16rpx;
|
|
padding: 0;
|
|
margin-left: 40rpx;
|
|
|
|
.uni-searchbar__box {
|
|
padding: 0;
|
|
border-radius: 16rpx !important;
|
|
}
|
|
}
|
|
|
|
.myCollection-list {
|
|
display: flex;
|
|
|
|
.first-box {
|
|
border-radius: 16rpx;
|
|
font-size: 16px;
|
|
margin-top: 40rpx;
|
|
margin-left: 40rpx;
|
|
color: #fff;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
height: 60rpx;
|
|
background-color: #11A8FD;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
image {
|
|
margin-top: 40rpx;
|
|
margin-left: 40rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|