修改：调整恋爱日记相关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>

config/love.config.js

@@ -45,7 +45,7 @@ export default {
 
 	// 关于我们：支持富文本内容
 	journey: `
-		    <p>有一只马，它的邻居是一只驴。</p><p>有一天，马和驴都被主人牵到外面晒太阳，马和驴聊起了天。</p><p>马说：“我叫马，你呢？”</p><p>驴说：“我叫驴。（哄小宝贝睡觉的甜甜睡前故事）”</p><p>马说：“为什么我俩的名字不一样呢？”</p><p>驴说：“因为我和你不一样。”</p><p>马说：“我们俩什么地方不一样呢？”</p><p>驴说：“我身材小巧，而你却比较粗壮，不如我耐看。”马看了看比自已矮小很多的驴，认为驴说的话有点道理。</p><p>马说：“我们俩除了身材不一样，还有什么不同呢？”</p><p>驴说：“我们俩的声音不一样，我的声音多动听呀！”说着驴伸长脖子叫了两声。“不信，你也叫两声试试。”马也伸长脖子嘶鸣了两声，的确和驴的声音有点不同，马不好意思地低下了头。</p><p>过了一会儿，马又说：“我们俩除了身材和声音不一样外，还有什么不同呢？”</p><p>驴说：“我的步伐多么优雅呀。”说着，驴迈开蹄子走了两步，“而你呢，却昂首阔步，一点儿也不优雅，（如何哄女朋友睡觉的睡前故事爱情浪漫）不信你走两步试试。”</p><p>马听驴这么一说，就高昂着头走了两步，旋即，马飞奔了起来，转了一圈回来后，驴得意地说：“怎么样，我没说错罢，你就是急性子，和优雅不沾边。”马听了驴的话，有点感到惭愧。</p><p>最后，马又鼓起勇气说：“我们俩还有什么不同呢？”</p><p>驴说：“我的家庭意识比你强，主人抽我一鞭子，我就跟着主人回家，而你呢？恐怕不会吧……”</p><p>马还没有来得及回答，马和驴的主人同时来到了马和驴的身边。只见驴的主人抽了驴一鞭子后，驴乖乖地跟着主人回家了。马把这一切都看在了眼里，它为自已和驴的诸多不同而感到惭愧，只见马的主人也抽了马一鞭子，马犹豫了一下，终于象驴一样乖乖地跟着主人回了家。</p><p>一个伯乐站在远处看到了这一幕后，叹口气离开了。</p>
+		准备晚安啦,睡觉前讲个故事吧~<p>槐树庄的村口有一棵大槐树，树下的村口第一家就是猫奶奶的家。</p><p>猫奶奶是一位孤寡老人，因为她经常收留和救治周围的流浪猫，所以村民就都管她叫“猫奶奶”。</p><p>一个月圆之夜，猫奶奶走到院门口，忽然发现门口石级上放着一个红毯子，里面包着一个啼（tí）哭的女婴。</p><p>猫奶奶找不到女婴的父母，只好收留了她，并给她起了个名字叫樱红。</p><p>猫奶奶辛苦地抚育着樱红成长，转眼之间，樱红已经九岁，上小学三年级了。</p><p>从樱红懂事起，猫奶奶就爱给她讲一个睡前故事，那是当地一个古老的传说。</p><p>在浓郁的树影深处有一个百花园，百花园里生长着奇花异草，还住了一个会唱歌的花仙子。花仙子的歌声美丽动人，能治百病。但是那里有一条奇怪的规矩，寻找花仙子的人在进入百花园后，见到花仙子之前，都不能发出一点声音，不然花仙子就不会出来见他。</p><p>受这个故事的影响，樱红特别喜欢唱歌。</p><p>这天晚上，樱红放学回家，家家户户炊烟袅（niǎo）袅，而自家烟囱却连一丝一缕（lǚ）的炊烟都没有。</p><p>樱红一惊，冲进院门一看，果然出事了！只见猫奶奶呻吟着倒在灶台前，双目紧闭，两只小脚也在不停地抽搐（chù）。</p><p>樱红慌了，好在有邻居的帮助，猫奶奶被送到了医院。经过抢救，猫奶奶总算醒过来，但是却半身不遂（suí），说话也不利落了。</p><p>猫奶奶不能下地行走做家务，小小的樱红，一夜之间就挑起了家庭的重担。</p><p>樱红一面求助于村委会，四处寻医问药，让猫奶奶获得进一步的治疗；一面在课余学做家务，悉心照顾猫奶奶，端水喂饭，不辞辛苦。</p><p>自从猫奶奶病倒以后，樱红每天早晨推开院门就会看见门前放着一朵小花，有时还会有一两尾鲜活的鲑（guī）鱼。</p><p>这样过了三个月，好奇的樱红在一个夜晚悄悄躲在院门的后面，想看看到底是谁。</p><p>到了午夜十二点，只见一只花猫衔着一棵风铃草来到院门前，把风铃草放下，转身就走。（浪漫童话小故事）樱红认出这只小花猫曾经被猫奶奶救助过，于是，她悄悄地尾随小花猫往前走。</p><p>不一会儿，她就发现自己进入了一个从未见过的世界：蔚蓝的天空飘着七色的云，阳光千丝万缕地落下来，鲜花盛开，彩蝶飞舞，百鸟齐鸣。</p><p>这到底是什么地方？她忽然想起了那个传说，这该不会就是花仙子住的百花园吧？</p><p>樱红几乎惊叫起来，但她立即想起了那条在见到花仙子之前，不能发出一点声音的规矩。于是她捂紧了嘴巴。</p><p>这时，她发现百花园里除了自己还有一个面色苍白的男孩子，闭着眼睛，右手攥着一根竹竿摸索着前行，应该是眼睛看不见了。</p><p>只见男孩子慢慢地偏离了路径，马上就要掉进路边的水沟里了。</p><p>樱红下意识地大声呼喊：“站住，小心脚底下！”一张口，樱红才想起来，自己已经坏了规矩！</p><p>此时，“轰隆”一声巨响后，眼前的一切都消失了，樱红仍然站在自家院门前的大槐树下。</p><p>真遗憾啊！樱红深深叹了口气，可为了救人，她并不觉得后悔。</p><p>第二天早上，樱红被一种美妙的歌声唤醒。</p><p>唱歌的人就是美丽的花仙子，她乘坐着奇花异草编成的花篮，飘进了她家的院子里。</p><p>奇迹发生了，只见猫奶奶起身下床，像健康人一样走出房门。</p><p>猫奶奶看到了花仙子，不敢相信地揉着眼睛说：“你就是传说中的花仙子吗？是你治好了我的病？”</p><p>花仙子说：“是的！是这个小女孩的善良打动了我，连我那不能出声的规矩都要为她破例了。”</p><p>樱红高兴地看着猫奶奶。从此，她和猫奶奶继续幸福地生活着。</p>
 	`,
 	// 恋爱相册
 	albumKeyName: '恋爱相册', // 对应后台的图库分组名称

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>
+			<view v-if="loading == 'loading'" class="loading">
-			<tm-skeleton model="card"></tm-skeleton>
+				<view class="loading-icon flex flex-center"><text class="e-loading-icon iconfont icon-loading"></text></view>
-			<tm-skeleton model="card"></tm-skeleton>
+				<view class="loadig-text ">相册正在努力加载中啦~</view>
-			<tm-skeleton model="card"></tm-skeleton>
+			</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) {
+			throttle(() => {
-				if (this.swiperIndex == this.dataList.length - 1) {
+				if (isNext) {
-					this.swiperIndex = 0;
+					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;
+					}
 				}
-			} else {
+			});
-				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;
+	animation: loveCardAni 3s ease-in-out infinite;
-	&:hover {
+
-		transform: translateY(-6rpx);
-	}
 	.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);
+	box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
-	transition: transform 0.3s ease-in-out;
 	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);