gao1021514
4 years ago
6 changed files with 492 additions and 49 deletions
@ -0,0 +1,228 @@ |
|||||
|
<template> |
||||
|
<view class="atlas"> |
||||
|
<uni-search-bar class="uni-mt-10" placeholder="请输入标签名" clearButton="auto" cancelButton="none" |
||||
|
@confirm="search" /> |
||||
|
<view class="title"> |
||||
|
<uni-segmented-control :current="current" :values="arrList" @clickItem="onClickItem" styleType="text" |
||||
|
activeColor="#11A8FD"></uni-segmented-control> |
||||
|
</view> |
||||
|
<swiper class="swiper" :circular="false" :current="current" :indicator-dots="false" :autoplay="false" |
||||
|
@change="changeItem" :duration="500" |
||||
|
:style="'height:'+ imgBoxHeight * Math.ceil(imgList.length / 3) + 'rpx'"> |
||||
|
<swiper-item class="swiper-item" v-for="(item,index) in arrList" :key="index"> |
||||
|
<view class="imgBox" v-for="(val,i) in imgList" :key="i" @click="targetImgList(val)"> |
||||
|
<image :src="val.img" mode="" :style="'height:' + imgHeight + 'rpx;width:'+imgWidth+'rpx'"></image> |
||||
|
<view>{{val.signName}}</view> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
listType, |
||||
|
signImgList, |
||||
|
querySignImg |
||||
|
} from '@/api/atlas.js' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
imgWidth: 0, |
||||
|
imgHeight: 0, |
||||
|
imgBoxHeight: 0, |
||||
|
current: 0, |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
arrList: [], |
||||
|
arrListId: [], |
||||
|
imgList: [] |
||||
|
} |
||||
|
}, |
||||
|
async created() { |
||||
|
await uni.getSystemInfo({ |
||||
|
success: res => { |
||||
|
this.imgWidth = (res.windowWidth - 60) / 3 * 2 |
||||
|
this.imgHeight = (res.windowWidth - 60) / 3 * 2 + 16 |
||||
|
this.imgBoxHeight = (res.windowWidth - 60) / 3 * 2 + 108 |
||||
|
console.log('this.imgHeight', this.imgHeight) |
||||
|
} |
||||
|
}) |
||||
|
if (uni.getStorageSync('atlas_current')) { |
||||
|
this.current = await uni.getStorageSync('atlas_current') |
||||
|
} |
||||
|
await this.getListType() |
||||
|
await this.getSignImgList(this.current) |
||||
|
}, |
||||
|
watch: { |
||||
|
current(n, o) { |
||||
|
console.log('current', this.current, n, o) |
||||
|
this.imgList = [] |
||||
|
this.getSignImgList(this.current) |
||||
|
immediate: true |
||||
|
} |
||||
|
}, |
||||
|
// 上划加载更多 |
||||
|
onReachBottom() { |
||||
|
console.log(111) |
||||
|
if (this.imgList.length > 1) { |
||||
|
this.pageNum += 1 |
||||
|
this.getSignImgList(this.current) |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
search(res) { |
||||
|
if (res.value) { |
||||
|
uni.setStorage({ |
||||
|
key: 'atlas_detailId', |
||||
|
data: { |
||||
|
signName: res.value, |
||||
|
type:'search' |
||||
|
}, |
||||
|
success() { |
||||
|
uni.navigateTo({ |
||||
|
url: './atlasList' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: '请输入要搜索的标签名', |
||||
|
icon: 'none', |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
// 获取分类 |
||||
|
async getListType() { |
||||
|
this.arrList = [] |
||||
|
this.arrListId = [] |
||||
|
const res = await listType() |
||||
|
if (res.data.code === 200) { |
||||
|
res.data.data.forEach(item => { |
||||
|
this.arrList.push(item.typeName) |
||||
|
this.arrListId.push(item.id) |
||||
|
}) |
||||
|
} else { |
||||
|
uni.showModal({ |
||||
|
content: res.data.msg, |
||||
|
showCancel: false |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
// 获取分类下标签 |
||||
|
async getSignImgList(val) { |
||||
|
uni.showLoading({ |
||||
|
title: '加载中' |
||||
|
}); |
||||
|
const params = { |
||||
|
pageNum: this.pageNum, |
||||
|
pageSize: this.pageSize, |
||||
|
typeId: this.arrListId[val] |
||||
|
} |
||||
|
const res = await signImgList(params) |
||||
|
if (res.data.code === 200) { |
||||
|
this.$nextTick(() => { |
||||
|
this.imgList.push(...res.data.rows) |
||||
|
}) |
||||
|
this.$forceUpdate() |
||||
|
} else { |
||||
|
uni.showModal({ |
||||
|
content: res.data.msg, |
||||
|
showCancel: false |
||||
|
}); |
||||
|
} |
||||
|
uni.hideLoading() |
||||
|
}, |
||||
|
onClickItem(val) { |
||||
|
this.imgList = [] |
||||
|
this.pageNum = 1 |
||||
|
this.pageSize = 10 |
||||
|
this.current = val.currentIndex |
||||
|
}, |
||||
|
changeItem(val) { |
||||
|
console.log(val) |
||||
|
this.pageNum = 1 |
||||
|
this.pageSize = 10 |
||||
|
this.imgList = [] |
||||
|
this.current = val.detail.current |
||||
|
}, |
||||
|
// 前往标签详情页 |
||||
|
targetImgList(val) { |
||||
|
uni.setStorage({ |
||||
|
key: 'atlas_current', |
||||
|
data: this.current, |
||||
|
}) |
||||
|
uni.setStorage({ |
||||
|
key: 'atlas_detailId', |
||||
|
data: { |
||||
|
signId: val.signId, |
||||
|
typeId: val.typeId, |
||||
|
signName: val.signName, |
||||
|
type:'click' |
||||
|
}, |
||||
|
success() { |
||||
|
uni.navigateTo({ |
||||
|
url: './atlasList' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less"> |
||||
|
.atlas { |
||||
|
.uni-searchbar { |
||||
|
border: 1px solid #11A8FD; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 0; |
||||
|
margin-left: 40rpx; |
||||
|
margin-right: 40rpx; |
||||
|
|
||||
|
.uni-searchbar__box { |
||||
|
padding: 0; |
||||
|
border-radius: 16rpx !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.segmented-control { |
||||
|
overflow-x: auto; |
||||
|
|
||||
|
.segmented-control__item { |
||||
|
flex: none; |
||||
|
width: 20vw; |
||||
|
|
||||
|
.segmented-control__text { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper { |
||||
|
margin: 30rpx 0; |
||||
|
overflow-y: auto; |
||||
|
|
||||
|
.swiper-item { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: baseline; |
||||
|
height: calc(100vh - 90px) ! important; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
.imgBox { |
||||
|
text-align: center; |
||||
|
margin: 18rpx; |
||||
|
|
||||
|
image { |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
|
||||
|
text { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,222 @@ |
|||||
|
<template> |
||||
|
<view class="atlasList"> |
||||
|
<!-- <uni-search-bar class="uni-mt-10" placeholder="请输入喜欢的艺术家代号吧~" clearButton="auto" cancelButton="none" |
||||
|
@confirm="search" /> --> |
||||
|
<view class="atlasList-list"> |
||||
|
<!-- <view class="first-box" :style="'width:'+imgWidth" > |
||||
|
热门作品 |
||||
|
</view> --> |
||||
|
<!-- <view class="ad-view"> |
||||
|
<ad adpid="1111111111" type="banner" @load="onload" @close="onclose" @error="onerror"></ad> |
||||
|
</view> --> |
||||
|
<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> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
imgLists, |
||||
|
creatorDetails, |
||||
|
} from '@/api/index.js' |
||||
|
import { |
||||
|
querySignImg, |
||||
|
querySignImgBySignName |
||||
|
} from '@/api/atlas.js' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
imgList: [], //图片列表 |
||||
|
imgWidth: 0, // 图片宽 |
||||
|
imgHeight: 0, // 图片高 |
||||
|
checkId: {}, |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
uni.getSystemInfo({ |
||||
|
success: res => { |
||||
|
console.log(res) |
||||
|
this.imgWidth = res.windowWidth - 60 + 'rpx' |
||||
|
this.imgHeight = (res.windowWidth - 60) * 2 - 30 + 'rpx' |
||||
|
} |
||||
|
}) |
||||
|
if (uni.getStorageSync('atlas_detailId')) { |
||||
|
this.checkId = uni.getStorageSync('atlas_detailId') |
||||
|
console.log(this.checkId) |
||||
|
uni.setNavigationBarTitle({ |
||||
|
title: this.checkId.signName |
||||
|
}); |
||||
|
this.getImgList() |
||||
|
} |
||||
|
}, |
||||
|
// 下拉刷新 |
||||
|
onPullDownRefresh() { |
||||
|
console.log(1111) |
||||
|
this.pageNum = 1 |
||||
|
this.imgList = [] |
||||
|
this.getImgList() |
||||
|
uni.stopPullDownRefresh() |
||||
|
}, |
||||
|
// 上划加载更多 |
||||
|
onReachBottom() { |
||||
|
console.log(2222) |
||||
|
if (this.imgList.length > 9) { |
||||
|
this.pageNum += 1 |
||||
|
this.getImgList() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 搜索 |
||||
|
search(res) { |
||||
|
if (res.value) { |
||||
|
console.log('search', res.value) |
||||
|
this.goCreatorDetail(res.value) |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: '请输入艺术家代号', |
||||
|
icon: 'none', |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
// 前往艺术家空间 |
||||
|
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' |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
// 图片列表 |
||||
|
async getImgList() { |
||||
|
if (this.checkId.type === 'click') { |
||||
|
const res = await querySignImg({ |
||||
|
pageNum: this.pageNum, |
||||
|
pageSize: this.pageSize, |
||||
|
signId: this.checkId.signId, |
||||
|
typeId: this.checkId.typeId |
||||
|
}) |
||||
|
if (res.data.code === 200) { |
||||
|
this.imgList.push(...res.data.rows) |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: res.data.msg, |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
} |
||||
|
} else if (this.checkId.type === 'search') { |
||||
|
const params = { |
||||
|
pageNum: this.pageNum, |
||||
|
pageSize: this.pageSize, |
||||
|
signName: this.checkId.signName |
||||
|
} |
||||
|
const res = await querySignImgBySignName(params) |
||||
|
if (res.data.code === 200) { |
||||
|
this.imgList.push(...res.data.rows) |
||||
|
} else { |
||||
|
uni.showModal({ |
||||
|
content: res.data.msg, |
||||
|
showCancel: false |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 前往详情页 |
||||
|
targetDetail(item) { |
||||
|
console.log('跳转', item) |
||||
|
if (item.id) { |
||||
|
uni.setStorage({ |
||||
|
key: 'detailId', |
||||
|
data: item.id, |
||||
|
success() { |
||||
|
console.log(111111) |
||||
|
uni.navigateTo({ |
||||
|
url: '../creator/imgDetail' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
onload(e) { |
||||
|
console.log("加载了广告"); |
||||
|
}, |
||||
|
onclose(e) { |
||||
|
console.log("关闭了广告: " + e.detail); |
||||
|
}, |
||||
|
onerror(e) { |
||||
|
console.log("广告错误了: " + e.detail.errCode + " message:: " + e.detail.errMsg); |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less"> |
||||
|
.atlasList { |
||||
|
.uni-searchbar { |
||||
|
border: 1px solid #11A8FD; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 0; |
||||
|
margin-left: 40rpx; |
||||
|
margin-right: 40rpx; |
||||
|
|
||||
|
.uni-searchbar__box { |
||||
|
padding: 0; |
||||
|
border-radius: 16rpx !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.atlasList-list { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
align-items: flex-start; |
||||
|
justify-content: space-between; |
||||
|
padding: 0 20px 20px 20px; |
||||
|
|
||||
|
.first-box { |
||||
|
border-radius: 16rpx; |
||||
|
font-size: 16px; |
||||
|
margin-top: 40rpx; |
||||
|
margin-left: 30rpx; |
||||
|
color: #fff; |
||||
|
line-height: 60rpx; |
||||
|
text-align: center; |
||||
|
height: 60rpx; |
||||
|
background-color: #11A8FD; |
||||
|
display: inline-block; |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
|
||||
|
image { |
||||
|
margin-top: 40rpx; |
||||
|
border-radius: 16rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,26 +0,0 @@ |
|||||
<template> |
|
||||
<view> |
|
||||
|
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { |
|
||||
signImgList, |
|
||||
querySignImg |
|
||||
} from '@/api/img.js' |
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style> |
|
||||
|
|
||||
</style> |
|
||||
Loading…
Reference in new issue