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.
303 lines
7.0 KiB
303 lines
7.0 KiB
<template>
|
|
<view class="creatorDetail">
|
|
<view class="avatar-box">
|
|
<view class="avatar-top">
|
|
<view class="avatar-left-box">
|
|
<image :src="creatorInfo.img" mode=""></image>
|
|
<text>{{creatorInfo.scanCode}}</text>
|
|
</view>
|
|
<view class="avatar-right-box">
|
|
<button class="" open-type="share" size="mini" type="default" style="background: none; outline: none;">
|
|
<uni-icons class="list-menu-icon" custom-prefix="iconfont" :type="'icon-fenxiang'" size="20" :color="'#FFFFFF'"></uni-icons>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
<view class="avatar-box-text">
|
|
<text>{{creatorInfo.intro}}</text>
|
|
</view>
|
|
<view class="avatar-box-tag">
|
|
<view class="avatar-box-tag-left">
|
|
<view class="tag-left-box">
|
|
<text>{{creatorInfo.imgTotalNum}}</text>
|
|
<text>图片</text>
|
|
</view>
|
|
<view class="tag-left-box">
|
|
<text>{{creatorInfo.imgCollectionNum}}</text>
|
|
<text>收藏</text>
|
|
</view>
|
|
<view class="tag-left-box">
|
|
<text>{{creatorInfo.imgLikeNum}}</text>
|
|
<text>喜欢</text>
|
|
</view>
|
|
</view>
|
|
<view class="avatar-box-tag-right">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="middle">
|
|
<uni-segmented-control :current="current" :values="arrList" @clickItem="onClickItem" styleType="text"
|
|
activeColor="#1a94bc"></uni-segmented-control>
|
|
</view>
|
|
<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 {
|
|
getTypeImgsPage
|
|
} from '@/api/creator.js'
|
|
import waterfallList from '@/components/waterfall-list/waterfall-list.vue'
|
|
import toTop from '@/components/toTop/toTop.vue'
|
|
export default {
|
|
components: {
|
|
waterfallList,
|
|
toTop
|
|
},
|
|
data() {
|
|
return {
|
|
creatorInfo: {},
|
|
current: 0,
|
|
typeId: 1,
|
|
typeIdList: [],
|
|
arrList: [],
|
|
imgList: [],
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
loadStatus:'noMore', //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式
|
|
isLoadMore:false, //是否加载中,
|
|
toTopFlag: false
|
|
}
|
|
},
|
|
created() {
|
|
uni.getStorage({
|
|
key: 'creatorDetail',
|
|
success: res => {
|
|
let that = this;
|
|
that.pageNum = 1;
|
|
that.creatorInfo = res.data
|
|
that.creatorInfo.typeList.forEach(item => {
|
|
that.arrList.push(item.typeName)
|
|
that.typeIdList.push(item.typeId)
|
|
})
|
|
that.typeId = that.typeIdList[0]
|
|
that.$refs.waterfallRef && that.$refs.waterfallRef.init();
|
|
that.getTypeImgsPage(that.typeId)
|
|
}
|
|
})
|
|
},
|
|
// 上划加载更多
|
|
onReachBottom() {//上拉触底函数
|
|
if(!this.isLoadMore) { //此处判断，上锁，防止重复请求
|
|
this.isLoadMore=true
|
|
if (this.loadStatus === "more") {
|
|
this.pageNum += 1 //每次上拉请求新的一页
|
|
this.getTypeImgsPage(this.typeId);
|
|
}
|
|
}
|
|
},
|
|
onShareAppMessage(res) {
|
|
if (res.from === 'button') { // 来自页面内分享按钮
|
|
// console.log(res)
|
|
}
|
|
uni.showToast({
|
|
title: '分享成功',
|
|
icon: 'none'
|
|
})
|
|
return {
|
|
title: `来看看艺术家${this.creatorInfo.scanCode}精心准备的图片吧~`,
|
|
path: `/pages/creator/imgDetail?id=${this.creatorInfo.id}`
|
|
}
|
|
},
|
|
watch: {
|
|
current(n, o) {
|
|
let that = this
|
|
that.typeId = that.typeIdList[n]
|
|
that.pageNum = 1
|
|
that.$refs.waterfallRef && that.$refs.waterfallRef.init();
|
|
this.getTypeImgsPage(that.typeId)
|
|
immediate: true
|
|
}
|
|
},
|
|
onPageScroll(e){
|
|
// 监听页面滚动
|
|
this.toTopFlag = e.scrollTop > 200; //根据距离顶部距离是否显示回到顶部按钮
|
|
},
|
|
methods: {
|
|
// 标签栏点击
|
|
onClickItem(e) {
|
|
this.current = e.currentIndex
|
|
},
|
|
// 前往详情页
|
|
targetDetail(item) {
|
|
if (item.id) {
|
|
uni.setStorage({
|
|
key: 'detailId',
|
|
data: item.id,
|
|
success() {
|
|
uni.navigateTo({
|
|
url: './imgDetail'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
//获取图片分页
|
|
async getTypeImgsPage(typeId) {
|
|
let that = this
|
|
that.loadStatus = 'loading';
|
|
const params = {
|
|
scanCode: that.creatorInfo.scanCode,
|
|
typeId: typeId,
|
|
pageNum: that.pageNum,
|
|
pageSize: that.pageSize,
|
|
}
|
|
const res = await getTypeImgsPage(params)
|
|
if (res.data.code === 200) {
|
|
|
|
that.$refs.waterfallRef.addData(res.data.rows);
|
|
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
|
|
}
|
|
}
|
|
},
|
|
toTop() {
|
|
uni.pageScrollTo({
|
|
scrollTop: 0,
|
|
duration: 100,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.creatorDetail {
|
|
.avatar-box {
|
|
padding: 20rpx 20rpx;
|
|
background-image: linear-gradient(-225deg, #007adf 0%, #00ecbc 100%);
|
|
|
|
.avatar-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 120rpx;
|
|
|
|
.avatar-left-box {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 80rpx;
|
|
}
|
|
|
|
text {
|
|
font-size: 26rpx;
|
|
color: $uni-white;
|
|
margin-left: 20rpx;
|
|
font-weight: 600;
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
|
|
}
|
|
}
|
|
|
|
.avatar-right-box {
|
|
|
|
button::after {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar-box-text {
|
|
color: $uni-white;
|
|
font-size: 24rpx;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.avatar-box-tag {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 24rpx;
|
|
|
|
.avatar-box-tag-left {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
.tag-left-box {
|
|
margin-right: 40rpx;
|
|
display: flex;
|
|
|
|
text {
|
|
display: block;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
}
|
|
|
|
text:last-child {
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.middle {
|
|
margin-bottom: 20rpx;
|
|
|
|
::v-deep .segmented-control {
|
|
border-radius: 8rpx 8rpx 0 0;
|
|
background-color: rgba(17, 168, 253, 0.1);
|
|
}
|
|
|
|
::v-deep .segmented-control__item {
|
|
|
|
view {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.bottom {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
padding-bottom: 20px;
|
|
|
|
image {
|
|
margin-top: 40rpx;
|
|
margin-left: 40rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|