From fba88cb4f24a1a43ed9e9d835d7cba8a2c58f47a Mon Sep 17 00:00:00 2001
From: gao1021514 <1328969651@qq.com>
Date: Sun, 24 Jul 2022 19:37:52 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B2=BE=E5=BD=A9=E5=9B=BE=E9=9B=86done?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/{img.js => atlas.js}  |  22 +++-
 main.js                   |   2 +-
 pages.json                |  41 +++----
 pages/atlas/atlas.vue     | 228 ++++++++++++++++++++++++++++++++++++++
 pages/atlas/atlasList.vue | 222 +++++++++++++++++++++++++++++++++++++
 pages/imgs/imgs.vue       |  26 -----
 6 files changed, 492 insertions(+), 49 deletions(-)
 rename api/{img.js => atlas.js} (51%)
 create mode 100644 pages/atlas/atlas.vue
 create mode 100644 pages/atlas/atlasList.vue
 delete mode 100644 pages/imgs/imgs.vue

diff --git a/api/img.js b/api/atlas.js
similarity index 51%
rename from api/img.js
rename to api/atlas.js
index 2eeb234..edfb09e 100644
--- a/api/img.js
+++ b/api/atlas.js
@@ -4,7 +4,16 @@ const prefix = '/img/mini/tiktok'
 //GET 传参需要用 params
 //POST 传参需要用 data
 
-//查询小程序端标签分页
+// 获取分类
+export function listType(data) {
+	return request({
+		url: `${serviceTitle}${prefix}/listType`,
+		method: 'get',
+		data
+	})
+}
+
+// 查询小程序端标签分页
 export function signImgList(data) {
 	return request({
 		url: `${serviceTitle}${prefix}/signImgList`,
@@ -13,7 +22,7 @@ export function signImgList(data) {
 	})
 }
 
-//根据分类id和便签Id查询图片分页
+// 根据分类id和便签Id查询图片分页
 export function querySignImg(data) {
 	return request({
 		url: `${serviceTitle}${prefix}/querySignImg`,
@@ -21,3 +30,12 @@ export function querySignImg(data) {
 		data
 	})
 }
+
+// 搜索标签
+export function querySignImgBySignName(data) {
+	return request({
+		url: `${serviceTitle}${prefix}/querySignImgBySignName`,
+		method: 'post',
+		data
+	})
+}
\ No newline at end of file
diff --git a/main.js b/main.js
index 8f9827b..4cf0e5e 100644
--- a/main.js
+++ b/main.js
@@ -3,7 +3,7 @@ import store from './store/'
 
 // const baseURL = 'http://localhost:7010'
 // const baseURL = 'http://81.69.47.31:7010'
-const baseURL = 'http://bnyer.vaiwan.com'
+const baseURL = 'http://veqf45.natappfree.cc'
 
 Vue.prototype.baseURL = baseURL;
 
diff --git a/pages.json b/pages.json
index f94daab..9a462c9 100644
--- a/pages.json
+++ b/pages.json
@@ -69,26 +69,27 @@
 				"enablePullDownRefresh": false
 			}
 
+		}, {
+			"path": "pages/creator/banner",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/atlas/atlas",
+			"style": {
+				"navigationBarTitleText": "精彩图集",
+				"enablePullDownRefresh": false
+			}
+		}, {
+			"path": "pages/atlas/atlasList",
+			"style": {
+				"navigationBarTitleText": "标签详情",
+				"enablePullDownRefresh": false
+			}
 		}
-	    ,{
-            "path" : "pages/creator/banner",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/imgs/imgs",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "精彩图集",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-    ],
+	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "bnyer",
@@ -114,7 +115,7 @@
 				"text": "艺术家"
 			},
 			{
-				"pagePath": "pages/imgs/imgs",
+				"pagePath": "pages/atlas/atlas",
 				"iconPath": "static/theme-default.png",
 				"selectedIconPath": "static/theme-select.png",
 				"text": "精彩图集"
diff --git a/pages/atlas/atlas.vue b/pages/atlas/atlas.vue
new file mode 100644
index 0000000..0555afc
--- /dev/null
+++ b/pages/atlas/atlas.vue
@@ -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>
diff --git a/pages/atlas/atlasList.vue b/pages/atlas/atlasList.vue
new file mode 100644
index 0000000..4e4f1c2
--- /dev/null
+++ b/pages/atlas/atlasList.vue
@@ -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>
diff --git a/pages/imgs/imgs.vue b/pages/imgs/imgs.vue
deleted file mode 100644
index cd194a8..0000000
--- a/pages/imgs/imgs.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-	<view>
-		
-	</view>
-</template>
-
-<script>
-	import {
-		signImgList,
-		querySignImg
-	} from '@/api/img.js'
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
-	}
-</script>
-
-<style>
-
-</style>