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.
337 lines
8.3 KiB
337 lines
8.3 KiB
<template>
|
|
<view class="container">
|
|
<view class="top">
|
|
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="banner" :current="current" :mode="mode" :dots-styles="dotsStyles" >
|
|
<swiper class="swiper-box" @change="changeSwiper" :current="swiperDotIndex" :autoplay="autoplay"
|
|
:interval="interval" :duration="duration" circular>
|
|
<swiper-item v-for="(item, index) in banner" :key="index">
|
|
<view class="swiper-item" :class="'swiper-item' + index">
|
|
<image class="img" :src="item.bannerImg" mode="aspectFill"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</uni-swiper-dot>
|
|
</view>
|
|
<view class="middle">
|
|
<uni-search-bar class="uni-mt-10" placeholder="请输入喜欢的艺术家搜索号吧~" clearButton="auto" cancelButton="none"
|
|
@confirm="search" />
|
|
<view class="title">
|
|
<text>热门艺术家</text>
|
|
</view>
|
|
<view class="user-list">
|
|
<view class="user-list-box" v-for="(item,index) in hotCreatorList" :key='item.id'
|
|
@click="$noMultipleClicks(goCreatorDetail,item.scanCode)">
|
|
<image :src="item.img" mode=""></image>
|
|
<text>{{item.scanCode}}</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="creatorLoading" class="user-list-loading">
|
|
<uni-load-more :status="'loading'"></uni-load-more>
|
|
</view>
|
|
</view>
|
|
<view class="footer">
|
|
<view class="title">
|
|
<text>近期精选</text>
|
|
</view>
|
|
<waterfallList ref="waterfallRef" :col="2" :clickItem="targetDetail" ></waterfallList>
|
|
<!-- 显示加载中或者全部加载完成 -->
|
|
<view>
|
|
<uni-load-more :status="loadStatus"></uni-load-more>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
listHotCreator,
|
|
creatorDetails,
|
|
imgLists,
|
|
getListBanner
|
|
} from '@/api/index.js'
|
|
// import Choiceness from './choiceness.vue'
|
|
import waterfallList from '@/components/waterfall-list/waterfall-list.vue'
|
|
export default {
|
|
data() {
|
|
return {
|
|
hotCreatorList: [],
|
|
isTarget: true,
|
|
showChoiceness:false,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
imgList: [],
|
|
loadStatus:'noMore', //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式
|
|
isLoadMore:false, //是否加载中
|
|
creatorLoading: false,
|
|
noClick:true, //防止重复提交
|
|
banner:[
|
|
{
|
|
bannerImg: "/static/uni.png"
|
|
}
|
|
],
|
|
current: 0,
|
|
mode: 'default',
|
|
dotsStyles: {
|
|
backgroundColor: 'rgba(255, 255, 255, .5)',
|
|
border: '1px rgba(0, 0, 0, .3) solid',
|
|
color: '#fff',
|
|
selectedBackgroundColor: 'rgba(26, 148, 188, .9)',
|
|
selectedBorder: '1px rgba(0, 0, 0, .9) solid',
|
|
bottom: 15
|
|
},
|
|
swiperDotIndex: 0,
|
|
autoplay: true,
|
|
interval: 5000,
|
|
duration: 500,
|
|
}
|
|
},
|
|
components:{
|
|
waterfallList
|
|
},
|
|
// 下拉刷新
|
|
onPullDownRefresh() {
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
created() {
|
|
let that = this;
|
|
that.pageNum = 1;
|
|
that.$refs.waterfallRef && that.$refs.waterfallRef.init();
|
|
that.getBanner();
|
|
that.getHotCreatorList()
|
|
that.getImgList();
|
|
},
|
|
onShow() {
|
|
/*let that = this;
|
|
that.pageNum = 1;
|
|
that.$refs.waterfallRef && that.$refs.waterfallRef.init();
|
|
that.getBanner();
|
|
that.getHotCreatorList()
|
|
that.getImgList();*/
|
|
},
|
|
// 上划加载更多
|
|
onReachBottom(e) {//上拉触底函数
|
|
if(!this.isLoadMore) { //此处判断，上锁，防止重复请求
|
|
this.isLoadMore=true
|
|
if (this.loadStatus === "more") {
|
|
this.pageNum += 1 //每次上拉请求新的一页
|
|
this.getImgList();
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
changeSwiper(e){
|
|
this.current = e.detail.current;
|
|
},
|
|
clickItem(e) {
|
|
this.swiperDotIndex = e
|
|
},
|
|
// 搜索
|
|
search(res) {
|
|
if (res.value) {
|
|
console.log('search', res.value)
|
|
this.goCreatorDetail(res.value)
|
|
} else {
|
|
uni.showToast({
|
|
title: '请输入艺术家代号',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
},
|
|
// 获取banner列表
|
|
async getBanner() {
|
|
let that = this;
|
|
const res = await getListBanner()
|
|
if (res.data.code === 200) {
|
|
that.banner = res.data.data
|
|
} else {
|
|
uni.showModal({
|
|
content: 'banner加载失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
// 获取热门艺术家列表
|
|
async getHotCreatorList() {
|
|
this.creatorLoading = true;
|
|
const res = await listHotCreator()
|
|
if (res.data.code === 200) {
|
|
this.creatorLoading = false;
|
|
this.hotCreatorList = res.data.data
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
|
|
// 图片列表
|
|
async getImgList() {
|
|
let that = this;
|
|
that.loadStatus = 'loading';
|
|
const res = await imgLists({
|
|
pageNum: that.pageNum,
|
|
pageSize: that.pageSize
|
|
})
|
|
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
|
|
}
|
|
}
|
|
},
|
|
// 前往艺术家空间
|
|
async goCreatorDetail(scanCode) {
|
|
if (scanCode) {
|
|
const res = await creatorDetails({
|
|
scanCode
|
|
})
|
|
console.log('creatorDetails', res)
|
|
if (res.data.code === 200) {
|
|
uni.setStorage({
|
|
key: 'creatorDetail',
|
|
data: res.data.data,
|
|
success() {
|
|
uni.navigateTo({
|
|
url: '../creator/creatorDetail'
|
|
})
|
|
}
|
|
})
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: '搜索码不能为空',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
// 前往详情页
|
|
targetDetail(item) {
|
|
if (item.id) {
|
|
uni.setStorage({
|
|
key: 'detailId',
|
|
data: item.id,
|
|
success() {
|
|
uni.navigateTo({
|
|
url: '../creator/imgDetail'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// 滚动监听
|
|
handleScroll() {
|
|
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.swiper-box {
|
|
height: 30vh;
|
|
background-color: $uni-bg-base-color;
|
|
}
|
|
|
|
.swiper-item {
|
|
background-color: $uni-bg-base-color;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
::v-deep image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
}
|
|
.container {
|
|
|
|
.top {
|
|
height: 30vh;
|
|
width: 100vw;
|
|
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
line-height: 48rpx;
|
|
font-weight: 600;
|
|
color: $uni-title-text;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.middle {
|
|
padding-top: 40rpx;
|
|
|
|
::v-deep .uni-searchbar {
|
|
border: 1px solid $uni-primary;
|
|
margin: 0 40rpx;
|
|
border-radius: 16rpx;
|
|
padding: 0;
|
|
|
|
}
|
|
::v-deep .uni-searchbar__box {
|
|
padding: 0;
|
|
border-radius: 16rpx !important;
|
|
}
|
|
|
|
.user-list-loading {
|
|
min-height: 200rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.user-list {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow-x: auto;
|
|
|
|
.user-list-box {
|
|
width: 140rpx;
|
|
padding: 20rpx;
|
|
text-align: center;
|
|
|
|
image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 100rpx;
|
|
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
text {
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|
|
|