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