对接小程序印象南岸专辑、专辑详细

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/album/album.js

@@ -20,45 +20,14 @@ Page({
 		albumTitle: [],
 		// 默认选中
 		currentTab: 0,
-		// 专辑详细
-		albumInfo: {
-			url: 'album.png',
-			name: '张三',
-			introduction: '专辑有论文专辑、音乐专辑等。论文专辑是指期刊的某一期专门对某一个大家关注的领域、问题、事件进行集中报道、讨论。',
-			albumList: [{
-					id: '1',
-					url: 'album-list.png',
-					date: '2019 10/24',
-					detail: '想要宜居生活，去南岸；想 要休憩放松，五南岸；想要 亲友伙伴欢聚，同样可以南岸南岸'
-				},
-				{
-					id: '2',
-					url: 'album-list.png',
-					date: '2019 10/24',
-					detail: '想要宜居生活，去南岸；想 要休憩放松，五南岸；想要 亲友伙伴欢聚，同样可以南岸南岸'
-				}, {
-					id: '3',
-					url: 'album-list.png',
-					date: '2019 10/24',
-					detail: '想要宜居生活，去南岸；想 要休憩放松，五南岸；想要 亲友伙伴欢聚，同样可以南岸南岸'
-				}, {
-					id: '4',
-					url: 'album-list.png',
-					date: '2019 10/24',
-					detail: '想要宜居生活，去南岸；想 要休憩放松，五南岸；想要 亲友伙伴欢聚，同样可以南岸南岸'
-				}, {
-					id: '5',
-					url: 'album-list.png',
-					date: '2019 10/24',
-					detail: '想要宜居生活，去南岸；想 要休憩放松，五南岸；想要 亲友伙伴欢聚，同样可以南岸南岸'
-				}, {
-					id: '6',
-					url: 'album-list.png',
-					date: '2019 10/24',
-					detail: '想要宜居生活，去南岸；想 要休憩放松，五南岸；想要 亲友伙伴欢聚，同样可以南岸南岸南岸'
-				}
-			]
-		}
+		// 分页参数
+		page: 1,
+		// 专辑介绍
+		introduction: '专辑有论文专辑、音乐专辑等。论文专辑是指期刊的某一期专门对某一个大家关注的领域、问题、事件进行集中报道、讨论。',
+		// 专辑内容
+		albumInfo: [],
+		// 专辑内容全部加载完毕
+		loadComplete: false
 	},
 	// 获取专辑列表
 	getAlbumList() {
@@ -75,16 +44,38 @@ Page({
 	},
 	// 获取专辑列表详细
 	getAlbumDetail() {
-		request({
-			url: '/yxna/getAlbumById/' + this.data.albumList[this.data.currentTab].id,
-			data: {
-				page: '1',
-				limit: '10'
-			},
-			method: 'GET'
-		}).then(res => {
-			console.log(res);
-		})
+		if (this.data.loadComplete == false) {
+			request({
+				url: '/yxna/getAlbumById/' + this.data.albumList[this.data.currentTab].id,
+				data: {
+					page: this.data.page,
+					limit: '6'
+				},
+				method: 'GET'
+			}).then(res => {
+				let temp = this.data.albumInfo;
+				if (temp.length >= res.count) {
+					wx.showToast({
+						title: "没有更多了",
+						icon: "none",
+						duration: 1500
+					})
+					this.setData({
+						loadComplete: true
+					})
+				} else {
+					for (let i = 0; i < res.data.length; i++) {
+						let time = res.data[i].vestingDate.split(" ")[0].split("-");
+						res.data[i].vestingDate = time[0] + " " + time[1] + "/" + time[2];
+						temp.push(res.data[i]);
+					}
+					this.setData({
+						albumInfo: temp,
+						page: this.data.page + 1
+					})
+				}
+			})
+		}
 	},
 	// 获取专辑标题
 	getAlbumTitle() {
@@ -116,7 +107,23 @@ Page({
 				currentTab
 			})
 		}
+		this.setData({
+			albumInfo: [],
+			loadComplete: false,
+			page: 1
+		})
 		this.getAlbumTitle();
+		this.getAlbumDetail();
+	},
+	// 前往专辑内容详细界面
+	toYXNADetailInfo(data) {
+		wx.navigateTo({
+			url: '/pages/albumDetail/albumDetail?id=' + data.currentTarget.dataset.id,
+		})
+	},
+	// 触底刷新
+	bindscrolltolower() {
+		this.getAlbumDetail();
 	},
 
 	/**
@@ -125,12 +132,6 @@ Page({
 	onLoad(options) {
 		this.getAlbumList();
 	},
-	// 前往专辑内容详细界面
-	toYXNADetailInfo(data) {
-		wx.navigateTo({
-			url: '/pages/albumDetail/albumDetail?id=' + data.currentTarget.dataset.id,
-		})
-	},
 
 	/**
 	 * 生命周期函数--监听页面初次渲染完成

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/album/album.wxml

@@ -6,9 +6,9 @@
 			<view class="currtline {{currentTab === index ? 'active' : ''}}" wx:if="{{currentTab === index}}"></view>
 		</view>
 	</scroll-view>
-	<swiper current="{{currentTab}}" style="margin-top: 15rpx;width: 100%;height: 99vh;" bindchange="handleSwiper">
+	<swiper current="{{currentTab}}" style="margin-top: 15rpx;width: 100%;height: 90vh;" bindchange="handleSwiper">
 		<swiper-item wx:for="{{albumList}}" wx:key="index">
-			<scroll-view class="swiper-album" style="height: 100%;" scroll-y="true">
+			<scroll-view class="swiper-album" bindscrolltolower="bindscrolltolower" style="height: 100%;" scroll-y="true">
 				<view style="background-image: url('{{imgUrl}}album-bg.png');height: 423rpx;width:750rpx;background-repeat: round;position: relative;">
 					<image src="{{imgUrl}}yxnaAlbum.png" style="width: 423rpx;height: 179rpx;text-align: center;position: absolute;top: 38rpx;left: 50%;transform: translateX(-50%);" />
 					<view style="display: flex;position: absolute;top: 247rpx;left: 50%;transform: translateX(-50%);">
@@ -19,20 +19,19 @@
 					<image src="{{baseUrl}}{{albumList[currentTab].picture}}" style="width: 275rpx;height: 328rpx;border-radius: 10rpx;margin: -50rpx 23rpx 0 22rpx;" />
 					<view style="width: 366rpx;margin: 0 18rpx 37rpx 0;">
 						<view style="font-size: 40rpx;font-weight: bold;color: #333333;margin: 34rpx 0 36rpx 10rpx;">{{albumList[currentTab].name}}</view>
-						<view style="overflow: hidden;font-size: 24rpx;font-weight: 500;line-height: 36rpx;height: 148rpx;text-overflow: ellipsis;-webkit-line-clamp:4;display: -webkit-box;-webkit-box-orient:vertical;">{{albumInfo.introduction}}</view>
+						<view style="overflow: hidden;font-size: 24rpx;font-weight: 500;line-height: 36rpx;height: 148rpx;text-overflow: ellipsis;-webkit-line-clamp:4;display: -webkit-box;-webkit-box-orient:vertical;">{{introduction}}</view>
 					</view>
 				</view>
 				<view style="display: flex;justify-content: space-between;flex-wrap: wrap;padding: 0 22rpx 20rpx 22rpx;">
-					<view bindtap="toYXNADetailInfo" data-id="{{item.id}}" style="width: 339rpx;height: 384rpx;background: #FFFFFF;box-shadow: 0 7rpx 10rpx 0 rgba(27,58,123,0.13);border-radius: 10rpx;margin: 10rpx 0" wx:for="{{albumInfo.albumList}}" wx:key="index">
+					<view bindtap="toYXNADetailInfo" data-id="{{item.id}}" style="width: 339rpx;height: 384rpx;background: #FFFFFF;box-shadow: 0 7rpx 10rpx 0 rgba(27,58,123,0.13);border-radius: 10rpx;margin: 10rpx 0" wx:for="{{albumInfo}}" wx:key="index">
 						<view>
-							<image src="{{imgUrl}}{{item.url}}" style="width: 339rpx;height: 191rpx;border-radius: 10rpx 10rpx 0 0;" />
-							<view style="padding: 0 21rpx 20rpx 21rpx;color: #333333;font-size: 30rpx;font-weight: 400;">{{item.date}}</view>
-							<view style="padding: 0 21rpx;height: 96rpx;color: #666666;font-size: 24rpx;font-weight: 400;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp:3;display: -webkit-box;-webkit-box-orient:vertical;">{{item.detail}}</view>
+							<image src="{{baseUrl}}{{item.urlAddress}}" style="width: 339rpx;height: 191rpx;border-radius: 10rpx 10rpx 0 0;" />
+							<view style="padding: 5rpx 21rpx 20rpx 21rpx;color: #333333;font-size: 30rpx;font-weight: 400;">{{item.vestingDate}}</view>
+							<view style="padding: 0 21rpx;height: 96rpx;color: #666666;font-size: 24rpx;font-weight: 400;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp:3;display: -webkit-box;-webkit-box-orient:vertical;">{{item.pictureDescription}}</view>
 						</view>
 					</view>
 				</view>
-</scroll-view>
-
-</swiper-item>
-</swiper>
+			</scroll-view>
+		</swiper-item>
+	</swiper>
 </view>

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/albumDetail/albumDetail.js

@@ -1,6 +1,6 @@
 // pages/albumDetail/albumDetail.js
 import {
-	imgUrl,
+	baseUrl,
 	request
 } from "../api/request"
 
@@ -11,18 +11,11 @@ Page({
 	 */
 	data: {
 		// 图片前缀
-		imgUrl: imgUrl,
+		baseUrl: baseUrl + '/',
 		// 专辑标题
 		titleList: ['1949年', '1949年-1980年', '1980年-2000年', '2000年-至今'],
 		// 详细
-		detail: {
-			urlAddress: 'album-bg.png',
-			vestingDate: '2019/10/24',
-			pictureTitle: '《南岸的创奇事迹》',
-			pictureAuthor: 'XXX',
-			pictureDescription: '想要宜居生活，去南岸；想要休憩放松，五南岸;想要亲友伙伴欢聚， 同样可以去南岸。南岸区就是这样一处天堂般的存在，它能带给人们的， 是一种随时随地都能亲近自然以及回归乡野的纯朴与感动。',
-			pictureType: 1
-		}
+		detail: {}
 	},
 
 	/**
@@ -33,7 +26,11 @@ Page({
 			url: '/yxna/getDocumentById/' + options.id,
 			method: 'GET'
 		}).then(res => {
-			console.log(res);
+			let temp = res.data.vestingDate.split(" ")[0].split("-");
+			res.data.vestingDate = temp[0] + '/' + temp[1] + '/' + temp[2];
+			this.setData({
+				detail:res.data
+			})
 		})
 	},
 

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/albumDetail/albumDetail.wxml

@@ -2,14 +2,14 @@
 <view style="background: #F0F0F0;height: 100vh;">
 	<view style="font-size: 36rpx;color: #333333;padding: 40rpx 0 5rpx 20rpx;font-weight: 400;">{{titleList[detail.pictureType]}}</view>
 	<view style="width: 705rpx;height: 782rpx;background: #FFFFFF;margin: 22rpx;">
-		<image src="{{imgUrl}}{{detail.urlAddress}}" style="width: 670rpx;height: 376rpx;padding: 18rpx;" />
+		<image src="{{baseUrl}}{{detail.urlAddress}}" style="width: 670rpx;height: 376rpx;padding: 18rpx;" />
 		<view style="padding: 0 22rpx;font-size: 30rpx;color: #333333;">{{detail.vestingDate}}</view>
 		<view style="display: flex; justify-content: space-between;padding: 0 22rpx;font-size: 30rpx;color: #333333;">
 			<view>作者：{{detail.pictureAuthor}}</view>
 			<view>{{detail.pictureTitle}}</view>
 		</view>
 		<view style="border-bottom: 1px solid #D7D7D7;margin: 26rpx 22rpx 31rpx 22rpx;" />
-		<view style="padding: 0 22rpx;font-size: 26rpx;color: #47413B;">
+		<view style="padding: 0 22rpx;font-size: 26rpx;color: #47413B;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp:6;display: -webkit-box;-webkit-box-orient:vertical;">
 			{{detail.pictureDescription}}</view>
 	</view>
 </view>