修改：调整恋爱日记相关UI

components/scroll-btn/scroll-btn.vue

@@ -0,0 +1,79 @@
+<template>
+	<view class="scroll-btn" :style="{ bottom: bottom }" @click.stop="fnScroll()">
+		<text v-if="_scrollTop >= 180" class="iconfont icon-long-arrow-up"></text>
+		<text v-else class="iconfont icon-long-arrow-down"></text>
+	</view>
+</template>
+
+<script>
+import throttle from '@/utils/throttle.js';
+export default {
+	name: 'scroll-btn',
+	props: {
+		bottom: {
+			type: String,
+			default: '180rpx'
+		},
+		scrollTop: {
+			type: Number,
+			default: 0
+		}
+	},
+	data() {
+		return { _scrollTop: 0 };
+	},
+	watch: {
+		scrollTop(val) {
+			this._scrollTop = val;
+			console.log('监听1：', val);
+			this.$forceUpdate();
+		}
+	},
+	created() {
+		this._scrollTop = this.scrollTop;
+	},
+	methods: {
+		fnScroll() {
+			throttle(() => {
+				const isTop = this._scrollTop >= 180;
+				this._scrollTop = isTop ? 0 : 999999;
+				uni.pageScrollTo({
+					duration: 500,
+					scrollTop: this._scrollTop
+				});
+				this.$emit('update:scrollTop', this._scrollTop);
+			});
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+.scroll-btn {
+	position: fixed;
+	// bottom: 200rpx;
+	// right: -90rpx;
+	right: 52rpx;
+	width: 80rpx;
+	height: 80rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	border-radius: 50%;
+	border: 4rpx solid #ffffff;
+	background-color: #bfe9ef;
+	box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.1);
+	z-index: 99;
+	transition: right 0.5s ease-in-out;
+
+	&.is-show {
+		right: 52rpx;
+	}
+
+	.iconfont {
+		font-size: 36rpx;
+		color: #555;
+	}
+}
+</style>

pagesA/love/album.vue

@@ -1,14 +1,21 @@
 <template>
 	<view class="app-page">
 		<view v-if="loading != 'success'" class="loading-wrap">
-			<tm-skeleton model="card"></tm-skeleton>
-			<tm-skeleton model="card"></tm-skeleton>
-			<tm-skeleton model="card"></tm-skeleton>
-			<tm-skeleton model="card"></tm-skeleton>
+			<view v-if="loading == 'loading'" class="loading">
+				<view class="loading-icon flex flex-center"><text class="e-loading-icon iconfont icon-loading"></text></view>
+				<view class="loadig-text ">相册正在努力加载中啦~</view>
+			</view>
+			<tm-empty v-else icon="icon-shiliangzhinengduixiang-" color="red" label="啊偶,加载失败了呢~">
+				<tm-button theme="red" :shadow="0" size="m" @click="fnRefresh()">刷新试试</tm-button>
+			</tm-empty>
 		</view>
 		<!-- 内容区域 -->
 		<view v-else class="app-page-content">
-			<view v-if="dataList.length == 0" class="content-empty flex flex-center"><tm-empty icon="icon-shiliangzhinengduixiang-" label="相册暂时还没有数据~"></tm-empty></view>
+			<view v-if="dataList.length == 0" color="light-blue" class="content-empty flex flex-center">
+				<tm-empty icon="icon-shiliangzhinengduixiang-" label="相册暂时还没有数据~">
+					<tm-button :shadow="0" size="m" theme="light-blue" @click="fnRefresh()">刷新试试</tm-button>
+				</tm-empty>
+			</view>
 			<block v-else>
 				<swiper
 					class="swiper-album"
@@ -49,7 +56,11 @@
 						<text class="icon"><text class="iconfont icon-arrow-left"></text></text>
 						<text class="text">上一张</text>
 					</view>
-					<view class="refresh" @click="fnRefresh()">刷新</view>
+					<view class="refresh" @click="fnRefresh()">
+						<text class="refresh-text">点击</text>
+						<text class="refresh-heart iconfont icon-diagnose"></text>
+						<text class="refresh-text">刷新</text>
+					</view>
 					<view class="next" @click="fnChange(true)">
 						<text class="text">下一张</text>
 						<text class="icon"><text class="iconfont icon-arrow-right"></text></text>
@@ -62,14 +73,15 @@
 
 <script>
 import LoveConfig from '@/config/love.config.js';
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+import throttle from '@/utils/throttle.js';
+import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
 import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
 import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
 import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
 
 export default {
 	components: {
-		tmSkeleton,
+		tmButton,
 		tmFlotbutton,
 		tmTranslate,
 		tmEmpty
@@ -82,7 +94,7 @@ export default {
 				size: 99,
 				page: 0,
 				sort: 'takeTime',
-				team: LoveConfig.photoKeyName
+				team: LoveConfig.albumKeyName
 			},
 			result: {},
 			dataList: [],
@@ -113,11 +125,6 @@ export default {
 			this.fnGetData();
 		},
 		fnGetData() {
-			uni.showLoading({
-				mask: true,
-				title: '加载中...'
-			});
-
 			this.loading = 'loading';
 			this.$httpApi
 				.getPhotoListByPage(this.queryParams)
@@ -131,11 +138,7 @@ export default {
 								return item;
 							});
 							this.dataList = _list;
-							// this.fnCacheDataList(_list);
-							// this.dataList = this.dataList.concat(_list);
-
 							this.swiperIndex = 0;
-							uni.hideLoading();
 						}
 					} else {
 						this.loading = 'error';
@@ -168,23 +171,24 @@ export default {
 			});
 		},
 		fnOnChange(e) {
-			console.log('e', e);
 			this.swiperIndex = e.detail.current;
 		},
 		fnChange(isNext) {
-			if (isNext) {
-				if (this.swiperIndex == this.dataList.length - 1) {
-					this.swiperIndex = 0;
-				} else {
-					this.swiperIndex += 1;
-				}
-			} else {
-				if (this.swiperIndex == 0) {
-					this.swiperIndex = this.dataList.length - 1;
+			throttle(() => {
+				if (isNext) {
+					if (this.swiperIndex == this.dataList.length - 1) {
+						this.swiperIndex = 0;
+					} else {
+						this.swiperIndex += 1;
+					}
 				} else {
-					this.swiperIndex -= 1;
+					if (this.swiperIndex == 0) {
+						this.swiperIndex = this.dataList.length - 1;
+					} else {
+						this.swiperIndex -= 1;
+					}
 				}
-			}
+			});
 		}
 	}
 };
@@ -210,18 +214,42 @@ export default {
 		rgba(7, 179, 155, 0.1) 86%,
 		rgba(109, 186, 130, 0.1)
 	);
-	color: #55423b;
 }
 .app-page-content {
 }
+.loading-wrap {
+	width: 100vw;
+	height: 60vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	padding: 36rpx;
+
+	::v-deep {
+		.tm-icons {
+			margin-right: -20rpx;
+		}
+	}
+}
+.e-loading-icon {
+	font-size: 120rpx;
+	// color: #f88ca2;
+	color: #56bbf9;
+}
+
+.loadig-text {
+	margin-top: 28rpx;
+	font-size: 28rpx;
+	// color: #f88ca2;
+	color: #56bbf9;
+}
 .content-empty {
 	width: 100%;
 	height: 60vh;
 }
-.loading-wrap {
-	box-sizing: border-box;
-	padding: 0 24rpx;
-}
+
 .swiper-album {
 	width: 100vw;
 	height: calc(100vh - 24rpx - 144rpx);
@@ -286,7 +314,7 @@ export default {
 	}
 }
 .tabbar {
-	width: 80vw;
+	width: 90vw;
 	position: fixed;
 	left: 50%;
 	bottom: 40rpx;
@@ -300,18 +328,49 @@ export default {
 	// background-color: rgba(0, 0, 0, 0.5);
 	background-color: #ffffff;
 	color: #333;
-	box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.07);
+	box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
+	.refresh {
+		animation: refreshAni 6s ease-in-out infinite;
+		color: #56bbf9;
+		&-heart {
+			font-size: 42rpx;
+			color: inherit;
+			margin: 0 6rpx;
+		}
+		&-text {
+			font-size: 24rpx;
+		}
+	}
 	.pre {
 		color: #56bbf9;
+		transition: transform 0.1s ease-in-out;
+		&:hover {
+			transform: scale(1.05);
+		}
 		.text {
 			padding-left: 12rpx;
 		}
 	}
 	.next {
 		color: #f88ca2;
+		transition: transform 0.1s ease-in-out;
+		&:hover {
+			transform: scale(1.03);
+		}
 		.text {
 			padding-right: 12rpx;
 		}
 	}
 }
+@keyframes refreshAni {
+	0% {
+		color: #f88ca2;
+	}
+	50% {
+		color: #56bbf9;
+	}
+	100% {
+		color: #f88ca2;
+	}
+}
 </style>

pagesA/love/journey.vue

@@ -2,14 +2,19 @@
 	<view class="app-page">
 		<view class="page-title">我们的故事</view>
 		<view class="html-typed" v-html="html">内容渲染</view>
+
+		<scroll-btn bottom="60rpx" :scrollTop.sync="scrollTop"></scroll-btn>
 	</view>
 </template>
 
 <script>
 import LoveConfig from '@/config/love.config.js';
+import ScrollBtn from '@/components/scroll-btn/scroll-btn.vue';
 export default {
+	components: { ScrollBtn },
 	data() {
 		return {
+			scrollTop: 0,
 			html: '',
 			timer: null
 		};
@@ -17,6 +22,9 @@ export default {
 	created() {
 		this.fnInit();
 	},
+	onPageScroll(e) {
+		this.scrollTop = e.scrollTop;
+	},
 	onBackPress() {
 		clearTimeout(this.timer);
 	},

pagesA/love/list.vue

@@ -70,14 +70,18 @@
 				</view>
 			</block>
 		</view>
+		<scroll-btn :scrollTop.sync="scrollTop"></scroll-btn>
 	</view>
 </template>
 
 <script>
 import LoveConfig from '@/config/love.config.js';
+import ScrollBtn from '@/components/scroll-btn/scroll-btn.vue';
 export default {
+	components: { ScrollBtn },
 	data() {
 		return {
+			scrollTop: 0,
 			loveConfig: LoveConfig,
 			list: []
 		};
@@ -101,6 +105,9 @@ export default {
 	created() {
 		this.fnGetList();
 	},
+	onPageScroll(e) {
+		this.scrollTop = e.scrollTop;
+	},
 	methods: {
 		fnGetList() {
 			if (LoveConfig.loveList.useApi && LoveConfig.loveList.api) {
@@ -164,9 +171,8 @@ export default {
 		rgba(7, 179, 155, 0.1) 86%,
 		rgba(109, 186, 130, 0.1)
 	);
-	// background: rgba(247, 246, 242, 1);
-	// color: #55423b;
 }
+
 .love-card {
 	width: 100%;
 	display: flex;
@@ -182,10 +188,8 @@ export default {
 	background-color: rgba(255, 199, 184, 0.9);
 	margin-bottom: 52rpx;
 	box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.1);
-	transition: transform 0.5s ease-in-out;
-	&:hover {
-		transform: translateY(-6rpx);
-	}
+	animation: loveCardAni 3s ease-in-out infinite;
+
 	.head {
 		display: flex;
 		.avatar {
@@ -247,6 +251,17 @@ export default {
 		color: #f88ca2;
 	}
 }
+@keyframes loveCardAni {
+	0% {
+		transform: scale(1);
+	}
+	50% {
+		transform: scale(1.03);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
 .list {
 	display: flex;
 	flex-direction: column;
@@ -286,13 +301,9 @@ export default {
 	// background-color: #faf8eb;
 	background-color: #ffffff;
 	margin-bottom: 36rpx;
-	box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.1);
-	transition: transform 0.3s ease-in-out;
+	box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
 	animation: cardAni 3s ease-in-out infinite;
 	animation-delay: var(--delay);
-	&:hover {
-		transform: translateY(-8rpx);
-	}
 	.head {
 		width: 100%;
 		display: flex;
@@ -309,6 +320,7 @@ export default {
 				font-size: 24rpx;
 				line-height: 100rpx;
 				text-align: center;
+				color: #55423b;
 				&.finish {
 					background-color: #bfe9ef;
 				}
@@ -328,7 +340,7 @@ export default {
 			&-desc {
 				margin-top: 8rpx;
 				font-size: 26rpx;
-				color: rgba(96, 77, 68, 1);
+				color: #555;
 				text-overflow: ellipsis;
 				overflow: hidden;
 				white-space: nowrap;
@@ -388,6 +400,7 @@ export default {
 		width: 0;
 		flex-grow: 1;
 		line-height: 1.5;
+		color: #333;
 	}
 }
 </style>

pagesA/love/love.vue

@@ -141,6 +141,7 @@ export default {
 	background-size: cover;
 	background-repeat: no-repeat;
 	background-position: 50% 50%;
+
 	&::before {
 		position: absolute;
 		left: 0;
@@ -148,7 +149,7 @@ export default {
 		right: 0;
 		bottom: 0;
 		content: '';
-		background-color: rgba(0, 0, 0, 0.07);
+		background-color: rgba(255, 255, 255, 0.1);
 		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=);
 		z-index: 0;
 		backdrop-filter: blur(4rpx);