新增：文章详情评论弹幕设置功能

components/article-card/article-card.vue

@@ -12,7 +12,7 @@
 		</view>
 		<view class="right">
 			<view class="title">
-				<text class="is-top" v-if="article.topped">置顶</text>
+				<text class="is-top bg-gradient-blue-accent" v-if="article.topped">置顶</text>
 				<text class="title-text text-overflow">{{ article.title }}</text>
 			</view>
 			<view class="content text-overflow-2">{{ article.summary }}</view>
@@ -33,8 +33,10 @@
 </template>
 
 <script>
+import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
 export default {
 	name: 'article-card',
+	components: { tmTags },
 	props: {
 		from: {
 			type: String,
@@ -253,6 +255,7 @@ export default {
 		box-sizing: border-box;
 		.title {
 			display: flex;
+			align-items: center;
 			font-size: 30rpx;
 			color: var(--main-text-color);
 			.is-top {
@@ -264,8 +267,9 @@ export default {
 				white-space: nowrap;
 				vertical-align: 4rpx;
 				color: #fff;
-				background-image: -webkit-linear-gradient(0deg, #3ca5f6 0, #a86af9 100%);
+				// background-image: -webkit-linear-gradient(0deg, #3ca5f6 0, #a86af9 100%);
-				border-radius: 4rpx 12rpx;
+				border-radius: 6rpx 12rpx;
+				box-shadow: none !important;
 			}
 			&-text {
 				color: #303133;

components/barrage/barrage.vue

@@ -53,6 +53,7 @@ export default {
 			listData: []
 		};
 	},
+
 	mounted() {
 		//leftBottom 使用参数
 		if (this.type === 'leftBottom') {
@@ -61,7 +62,6 @@ export default {
 	},
 	methods: {
 		add(obj) {
-			console.log('加载弹幕中...');
 			this.isShow = true;
 			this.showFlag = true;
 			let data = {
@@ -71,7 +71,6 @@ export default {
 				type: this.type
 			};
 			if (this.type === 'leftBottom') {
-				console.log('leftBottom，加载弹幕中...');
 				let objData = {
 					item: data,
 					type: 'leftBottomEnter',
@@ -110,7 +109,7 @@ export default {
 				}
 			} else if (this.type === 'rightToLeft') {
 				let objData = {
-					item: data.item,
+					item: data,
 					type: 'rightToLeft',
 					style: {
 						animationDuration: `${data.time}s`,
@@ -130,6 +129,16 @@ export default {
 			}
 		},
 		async remove(options = {}) {
+			if (this.type == 'rightToLeft') {
+				if (this.listData.length != 0) {
+					const last = this.listData[this.listData.length - 1];
+					setTimeout(() => {
+						this.listData = [];
+					}, last.item.time * 1200 + 1000);
+				}
+				return;
+			}
+
 			options = Object.assign(
 				{},
 				{
@@ -142,8 +151,8 @@ export default {
 			const _fnHandleRemove = item => {
 				return new Promise(resolve => {
 					setTimeout(() => {
-						item['type'] = 'leftBottomExitLeft';
+						// item['type'] = 'leftBottomExitLeft';
-						// this.$forceUpdate();
+						item['type'] = 'is-hide';
 						resolve();
 					}, options.speed);
 				});
@@ -162,7 +171,7 @@ export default {
 			await _fnHandleLoop();
 			setTimeout(() => {
 				this.listData = [];
-			}, 100);
+			}, options.duration + 200);
 		},
 		repaint(index, type) {
 			setTimeout(() => {
@@ -203,9 +212,12 @@ export default {
 		transform: translateX(0%);
 		opacity: 1;
 	}
-
+	50% {
+		transform: translateX(-50%);
+		opacity: 1;
+	}
 	100% {
-		transform: translateX(-200%);
+		transform: translateX(-100%);
 		opacity: 0;
 	}
 }
@@ -238,7 +250,12 @@ export default {
 	transition: all 1s ease-in-out;
 	&.leftBottom {
 		top: initial;
+		/* #ifdef H5 */
 		bottom: 130rpx;
+		/* #endif */
+		/* #ifndef H5 */
+		bottom: 36rpx;
+		/* #endif */
 	}
 }
 .danmu-li {
@@ -246,10 +263,11 @@ export default {
 	width: 100%;
 	transform: translateX(100%);
 	animation-timing-function: linear;
-	transition: transform 0.5s ease-in-out;
+	transition: all 0.5s ease-in-out;
-
+	opacity: 1;
 	&.is-hide {
-		transform: translateX(-100%) !important;
+		opacity: 0;
+		// transform: translateX(-100%) !important;
 	}
 	&.leftBottom {
 		left: 24rpx;

components/comment-list/comment-list.vue

@@ -34,14 +34,13 @@
 					:shadow="0"
 					label="Ծ‸Ծ博主已设置该文章禁止评论!"
 					:round="3"
-					close
 				></tm-alerts>
 				<view class="empty pt-50" v-if="dataList.length == 0">
 					<tm-empty v-if="disallowComment" icon="icon-shiliangzhinengduixiang-" label="暂无评论">
 						<text class="text-red text-size-s">- 文章已开启禁止评论 -</text>
 					</tm-empty>
 					<tm-empty v-else icon="icon-shiliangzhinengduixiang-" label="暂无评论">
-						<tm-button theme="bg-gradient-light-blue-accent" size="m" @click="fnToComment(null)">抢沙发</tm-button>
+						<tm-button theme="light-blue" :dense="true" :shadow="0" size="m" @click="fnToComment(null)">抢沙发</tm-button>
 					</tm-empty>
 				</view>
 				<block v-else>

pagesA/article-detail/article-detail.vue

@@ -116,7 +116,7 @@
 			</view>
 
 			<!-- 弹幕效果 -->
-			<barrage ref="barrage" :maxTop="240" type="leftBottom"></barrage>
+			<barrage ref="barrage" :maxTop="240" :type="globalAppSettings.barrage.type"></barrage>
 			<!-- 返回顶部 -->
 			<tm-flotbutton :offset="[16, 80]" icon="icon-angle-up" color="bg-gradient-light-blue-accent" @click="fnToTopPage()"></tm-flotbutton>
 			<tm-flotbutton :actions="btnOption.actions" actions-pos="left" :show-text="true" color="bg-gradient-orange-accent" @change="fnOnFlotButtonChange"></tm-flotbutton>
@@ -660,13 +660,15 @@ export default {
 			await _handleData(data);
 			if (this.globalAppSettings.barrage.use) {
 				this.$nextTick(() => {
+					if (_list.length != 0) {
 						_handleAddBarrage();
+					}
 				});
 			}
 			const _handleRemove = () => {
 				this.$refs['barrage'].remove({
 					duration: 5000, // 延迟关闭的时间
-					speed: 1000 // 弹幕消失的速度
+					speed: 600 // 弹幕消失的速度
 				});
 			};
 			let index = 0;

pagesA/love/journey.vue

@@ -3,7 +3,7 @@
 		<view class="page-title">我们的故事</view>
 		<view class="html-typed" v-html="html">内容渲染</view>
 
-		<scroll-btn bottom="60rpx" :scrollTop.sync="scrollTop"></scroll-btn>
+		<scroll-btn bottom="160rpx" :scrollTop.sync="scrollTop"></scroll-btn>
 	</view>
 </template>
 
@@ -76,6 +76,7 @@ export default {
 		rgba(7, 179, 155, 0.1) 86%,
 		rgba(109, 186, 130, 0.1)
 	);
+	color: rgba(26, 26, 26, 1);
 }
 .page-title {
 	font-size: 42rpx;

pagesA/setting/setting.vue

@@ -25,9 +25,10 @@
 						<tm-input
 							name="status"
 							required
-							title="首页布局"
+							title="首页文章布局"
-							placeholder="请选择首页布局"
+							placeholder="请选择首页文章布局"
 							disabled
+							align="right"
 							:value="homeLayout.selectLabel"
 							right-icon="icon-angle-right"
 						></tm-input>
@@ -43,9 +44,10 @@
 						<tm-input
 							name="status"
 							required
-							title="卡片样式"
+							title="文章卡片样式"
 							placeholder="请选择文章卡片样式"
 							disabled
+							align="right"
 							:value="articleCardStyle.selectLabel"
 							right-icon="icon-angle-right"
 						></tm-input>
@@ -78,10 +80,29 @@
 						<text class="text-size-m ">友链简洁模式</text>
 						<tm-switch v-model="appSettings.links.useSimple" color="light-blue" :text="['是', '否']"></tm-switch>
 					</view>
-					<view class="mx-32 my-24 border-b-1  pb-24 flex-between">
+					<view class="mx-32 mt-24 mb-0 border-b-1 pb-24 flex-between">
 						<text class="text-size-m">启用评论弹幕</text>
 						<tm-switch v-model="appSettings.barrage.use" color="light-blue" :text="['是', '否']"></tm-switch>
 					</view>
+					<tm-pickers
+						v-if="appSettings.barrage.use"
+						title="评论弹幕位置"
+						btn-color="light-blue"
+						:default-value.sync="barrage.selectDefault"
+						rang-key="name"
+						:list="barrage.list"
+						@confirm="fnOnBarrageConfirm"
+					>
+						<tm-input
+							name="status"
+							title="评论弹幕位置"
+							placeholder="请选择评论弹幕位置"
+							disabled
+							align="right"
+							:value="barrage.selectLabel"
+							right-icon="icon-angle-right"
+						></tm-input>
+					</tm-pickers>
 					<view class="mx-32 my-24 border-b-1  pb-24 flex-between">
 						<text class="text-size-m">是否圆形头像</text>
 						<tm-switch v-model="appSettings.isAvatarRadius" color="light-blue" :text="['是', '否']"></tm-switch>
@@ -177,7 +198,13 @@ export default {
 				selectLabel: '左图右文',
 				selectValue: 'lr_image_text'
 			},
-			dotPositionList: [{ name: '右边', value: 'right', checked: true }, { name: '下边', value: 'bottom', checked: false }]
+			dotPositionList: [{ name: '右边', value: 'right', checked: true }, { name: '下边', value: 'bottom', checked: false }],
+			barrage: {
+				list: [{ name: '顶部', value: 'rightToLeft' }, { name: '左下', value: 'leftBottom' }],
+				selectDefault: ['顶部'],
+				selectLabel: '顶部',
+				selectValue: 'rightToLeft'
+			}
 		};
 	},
 
@@ -223,6 +250,11 @@ export default {
 			this.articleCardStyle.selectDefault = [_articleCardStyle.name];
 			this.articleCardStyle.selectLabel = _articleCardStyle.name;
 			this.articleCardStyle.selectValue = _articleCardStyle.value;
+
+			const _barrage = this.fnFindObjInList(this.barrage.list, 'value', this.appSettings.barrage.type);
+			this.barrage.selectDefault = [_barrage.name];
+			this.barrage.selectLabel = _barrage.name;
+			this.barrage.selectValue = _barrage.value;
 		},
 		// 在集合中找匹配的对象
 		fnFindObjInList(list, key, value) {
@@ -253,10 +285,17 @@ export default {
 			this.articleCardStyle.selectValue = _select.value;
 			this.appSettings.layout.cardType = _select.value;
 		},
+		// 弹幕设置
+		fnOnBarrageConfirm(e) {
+			const _select = e[0].data;
+			this.barrage.selectDefault = [_select.name];
+			this.barrage.selectLabel = _select.name;
+			this.barrage.selectValue = _select.value;
+			this.appSettings.barrage.type = _select.value;
+		},
 		// 保存
 		fnOnSave() {
 			this.isSaved = true;
-			console.log('this.appSettings', this.appSettings);
 			this.$tm.vx.commit('setting/setSettings', this.appSettings);
 			uni.$tm.toast('保存成功，部分设置在重启后生效！');
 		},

utils/app.js

@@ -38,7 +38,7 @@ export const _DefaultAppSettings = {
 	// 评论弹幕（文章详情）
 	barrage: {
 		use: true, // 是否启用
-		type: 'leftBottom' // 弹幕类型
+		type: 'leftBottom' // 弹幕位置（rightToLeft leftBottom）
 	},
 	gallery: {
 		// 是否使用瀑布流
@@ -61,17 +61,19 @@ export const _DefaultAppSettings = {
 	contact: {
 		// 链接是否使用复制的方式，否则直接在内部打开（小程序需要配置对应链接的业务域名）
 		isLinkCopy: true,
-	}
+	},
-}
 
+}
+// 应用设置存储key值
+export const _AppSettingsKey = 'APP_GLOBAL_SETTINGS';
 /**
  * 获取应用设置
  */
 export const getAppSettings = () => {
-	let _appSettings = uni.getStorageSync('APP_GLOBAL_SETTINGS')
+	let _appSettings = uni.getStorageSync(_AppSettingsKey)
 	if (_appSettings) return JSON.parse(_appSettings)
 
-	uni.setStorageSync('APP_GLOBAL_SETTINGS', JSON.stringify(_DefaultAppSettings))
+	uni.setStorageSync(_AppSettingsKey, JSON.stringify(_DefaultAppSettings))
 	return _appSettings;
 }
 
@@ -79,5 +81,5 @@ export const getAppSettings = () => {
  * 保存应用设置
  */
 export const setAppSettings = (appSettings) => {
-	uni.setStorageSync('APP_GLOBAL_SETTINGS', JSON.stringify(appSettings))
+	uni.setStorageSync(_AppSettingsKey, JSON.stringify(appSettings))
 }