抖音小程序端
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.
 
 
 
 

144 lines
3.0 KiB

<template>
<view class="myCollection">
<view class="myCollection-list">
<view class="imgList1">
<image v-for="(item,index) in imgList" :key='index' class="img-box"
:style="'width:'+imgWidth+';height:'+imgHeight" :src="item.imgUrl" @click="targetDetail(item)"
mode=""></image>
</view>
<!-- <view class="ad-view">
<ad adpid="__UNI__069D14D" type="banner" @load="onload" @close="onclose" @error="onerror"></ad>
</view> -->
</view>
</view>
</template>
<script>
import {
listTiktokCollection
} from '@/api/userInfo.js'
export default {
data() {
return {
userInfo: {}, // 用户信息
imgList: [], // 图片列表
imgWidth: 0, // 图片宽
imgHeight: 0, // 图片高
pageNum: 1,
pageSize: 4,
}
},
created() {
this.userInfo = uni.getStorageSync('userInfo')
uni.getSystemInfo({
success: res => {
this.imgWidth = res.windowWidth - 60 + 'rpx'
this.imgHeight = (res.windowWidth - 60) * 2 - 30 + 'rpx'
this.getImgList()
}
})
},
// 下拉刷新
onPullDownRefresh() {
//TODO 此處待優化
console.log(1111)
this.pageNum = 1
this.imgList = []
this.getImgList()
uni.stopPullDownRefresh()
},
// 上划加载更多
onReachBottom() {
if (this.imgList.length > 3) {
this.pageNum += 1
this.getImgList()
}
},
methods: {
// 收藏图片分頁
async getImgList() {
const res = await listTiktokCollection({
userId: this.userInfo.id,
pageNum: this.pageNum,
pageSize: this.pageSize
})
if (res.data.code === 200) {
this.imgList.push(...res.data.rows)
} else {
uni.showToast({
title: res.data.msg,
icon: 'none'
})
}
},
// 前往详情页 //TODO bug待修复
targetDetail(item) {
console.log('跳转', item)
if (item.id) {
uni.setStorage({
key: 'detailId',
data: item.imgId,
success() {
console.log(111111)
uni.navigateTo({
url: '../../creator/imgDetail'
})
}
})
}
},
},
// 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="less">
.myCollection {
padding-right: 40rpx;
padding-top: 40rpx;
.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>