From baf9e56c82215ebe1db5ab3a3b5331bc5ba1378c Mon Sep 17 00:00:00 2001
From: jinhhanhan <1683105490@qq.com>
Date: Thu, 22 Jan 2026 16:46:48 +0800
Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E5=BA=95=E9=83=A8=E5=8A=A0?=
 =?UTF-8?q?=E4=BA=86=E6=A0=87=E7=AD=BE=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages_tool/article/detail.vue | 296 +++++++++++++------------
 pages_tool/article/list.vue   | 396 ++++++++++++++++++----------------
 2 files changed, 368 insertions(+), 324 deletions(-)

diff --git a/pages_tool/article/detail.vue b/pages_tool/article/detail.vue
index 6f18e5b..7359403 100644
--- a/pages_tool/article/detail.vue
+++ b/pages_tool/article/detail.vue
@@ -1,156 +1,172 @@
 <template>
-	<view class="page" :style="themeColor">
-		<view class="help-title">{{ detail.article_title }}</view>
-		<view class="help-meta" v-if="detail.is_show_release_time == 1">
-			<text class="help-time">发表时间: {{ $util.timeStampTurnTime(detail.create_time) }}</text>
-		</view>
-		<view class="help-content"><rich-text :nodes="content"></rich-text></view>
-		<view class="bottom-area">
-			<view v-if="detail.is_show_read_num == 1">
-				阅读：
-				<text class="price-font">{{ detail.read_num + detail.initial_read_num }}</text>
-			</view>
-			<view v-if="detail.is_show_dianzan_num == 1">
-				<text class="price-font">{{ detail.dianzan_num + detail.initial_dianzan_num }}</text>
-				人已赞
-			</view>
-		</view>
-		<loading-cover ref="loadingCover"></loading-cover>
+    <view class="page" :style="themeColor">
+        <view class="help-title">{{ detail.article_title }}</view>
+        <view class="help-meta" v-if="detail.is_show_release_time == 1">
+            <text class="help-time">发表时间: {{ $util.timeStampTurnTime(detail.create_time) }}</text>
+        </view>
+        <view class="help-content"><rich-text :nodes="content"></rich-text></view>
+        <view class="bottom-area">
+            <view v-if="detail.is_show_read_num == 1">
+                阅读：
+                <text class="price-font">{{ detail.read_num + detail.initial_read_num }}</text>
+            </view>
+            <view v-if="detail.is_show_dianzan_num == 1">
+                <text class="price-font">{{ detail.dianzan_num + detail.initial_dianzan_num }}</text>
+                人已赞
+            </view>
+        </view>
+        <loading-cover ref="loadingCover"></loading-cover>
 
-		<!-- 隐私弹窗 -->
-		<privacy-popup ref="privacyPopup"></privacy-popup>
-	</view>
+        <!-- 隐私弹窗 -->
+        <privacy-popup ref="privacyPopup"></privacy-popup>
+
+        
+        <view class="page-bottom" v-if="openBottomNav">
+            <diy-bottom-nav @callback="callback" :name="name" />
+        </view>
+    </view>
 </template>
 
 <script>
-	import htmlParser from '@/common/js/html-parser';
-	export default {
-		data() {
-			return {
-				articleId: 0,
-				detail: {},
-				content: ''
-			};
-		},
-		onLoad(options) {
-			this.articleId = options.article_id || 0;
-			// 小程序扫码进入
-			if (options.scene) {
-				var sceneParams = decodeURIComponent(options.scene);
-				this.articleId = sceneParams.split('-')[1];
-			}
-			if (this.articleId == 0) {
-				this.$util.redirectTo('/pages_tool/article/list', {}, 'redirectTo');
-			}
-		},
-		onShow() {
-			this.getData();
-		},
-		methods: {
-			getData() {
-				this.$api.sendRequest({
-					url: '/api/article/info',
-					data: {
-						article_id: this.articleId
-					},
-					success: res => {
-						if (res.code == 0 && res.data) {
-							this.detail = res.data;
-							this.$langConfig.title(this.detail.article_title);
-							this.content = htmlParser(this.detail.article_content);
-							this.setPublicShare();
-						} else {
-							this.$util.showToast({
-								title: res.message
-							});
-							setTimeout(() => {
-								this.$util.redirectTo('/pages_tool/article/list', {}, 'redirectTo');
-							}, 2000);
-						}
-						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
-					},
-					fail: res => {
-						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
-					}
-				});
-			},
-			// 设置公众号分享
-			setPublicShare() {
-				let shareUrl = this.$config.h5Domain + '/pages_tool/article/detail?article_id=' + this.articleId;
-				this.$util.setPublicShare({
-					title: this.detail.article_title,
-					desc: '',
-					link: shareUrl,
-					imgUrl: this.siteInfo ? this.$util.img(this.siteInfo.logo_square) : ''
-				});
-			}
-		},
-		onShareAppMessage(res) {
-			var title = this.detail.article_title;
-			var path = '/pages_tool/article/detail?article_id=' + this.articleId;
-			return {
-				title: title,
-				path: path,
-				success: res => {},
-				fail: res => {}
-			};
-		},
-		//分享到朋友圈
-		onShareTimeline() {
-			var title = this.detail.article_title;
-			var query = 'article_id=' + this.articleId;
-			return {
-				title: title,
-				query: query,
-				imageUrl: ''
-			};
-		}
-	};
+import htmlParser from '@/common/js/html-parser';
+export default {
+    data() {
+        return {
+            articleId: 0,
+            detail: {},
+            content: '',
+            openBottomNav: true, 
+            name: 'article'     
+        };
+    },
+    onLoad(options) {
+        this.articleId = options.article_id || 0;
+        // 小程序扫码进入
+        if (options.scene) {
+            var sceneParams = decodeURIComponent(options.scene);
+            this.articleId = sceneParams.split('-')[1];
+        }
+        if (this.articleId == 0) {
+            this.$util.redirectTo('/pages_tool/article/list', {}, 'redirectTo');
+        }
+    },
+    onShow() {
+        this.getData();
+    },
+    methods: {
+        getData() {
+            this.$api.sendRequest({
+                url: '/api/article/info',
+                data: {
+                    article_id: this.articleId
+                },
+                success: res => {
+                    if (res.code == 0 && res.data) {
+                        this.detail = res.data;
+                        this.$langConfig.title(this.detail.article_title);
+                        this.content = htmlParser(this.detail.article_content);
+                        this.setPublicShare();
+                    } else {
+                        this.$util.showToast({
+                            title: res.message
+                        });
+                        setTimeout(() => {
+                            this.$util.redirectTo('/pages_tool/article/list', {}, 'redirectTo');
+                        }, 2000);
+                    }
+                    if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
+                },
+                fail: res => {
+                    if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
+                }
+            });
+        },
+        // 设置公众号分享
+        setPublicShare() {
+            let shareUrl = this.$config.h5Domain + '/pages_tool/article/detail?article_id=' + this.articleId;
+            this.$util.setPublicShare({
+                title: this.detail.article_title,
+                desc: '',
+                link: shareUrl,
+                imgUrl: this.siteInfo ? this.$util.img(this.siteInfo.logo_square) : ''
+            });
+        },
+        callback(data) {
+        }
+    },
+    onShareAppMessage(res) {
+        var title = this.detail.article_title;
+        var path = '/pages_tool/article/detail?article_id=' + this.articleId;
+        return {
+            title: title,
+            path: path,
+            success: res => {},
+            fail: res => {}
+        };
+    },
+    // 分享到朋友圈
+    onShareTimeline() {
+        var title = this.detail.article_title;
+        var query = 'article_id=' + this.articleId;
+        return {
+            title: title,
+            query: query,
+            imageUrl: ''
+        };
+    }
+};
 </script>
 
 <style lang="scss">
-	.page {
-		width: 100%;
-		height: 100%;
-		padding: 30rpx;
-		box-sizing: border-box;
-		background: #ffffff;
-	}
+.page {
+    width: 100%;
+    height: 100%;
+    padding: 30rpx;
+    box-sizing: border-box;
+    background: #ffffff;
+}
 
-	.help-title {
-		font-size: $font-size-toolbar;
-		text-align: left;
-		font-weight: bold;
-	}
+.help-title {
+    font-size: $font-size-toolbar;
+    text-align: left;
+    font-weight: bold;
+}
 
-	.help-content {
-		margin-top: $margin-updown;
-		word-break: break-all;
-	}
+.help-content {
+    margin-top: $margin-updown;
+    word-break: break-all;
+}
 
-	.help-meta {
-		text-align: left;
-		margin-top: $margin-updown;
-		color: $color-tip;
+.help-meta {
+    text-align: left;
+    margin-top: $margin-updown;
+    color: $color-tip;
 
-		.help-time {
-			font-size: $font-size-tag;
-		}
-	}
+    .help-time {
+        font-size: $font-size-tag;
+    }
+}
 
-	.bottom-area {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-top: 40rpx;
+.bottom-area {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 40rpx;
 
-		.price-font {
-			font-weight: normal !important;
-		}
+    .price-font {
+        font-weight: normal !important;
+    }
 
-		view {
-			color: #999;
-			font-size: 24rpx;
-		}
-	}
+    view {
+        color: #999;
+        font-size: 24rpx;
+    }
+}
+.page-bottom {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: 999;
+}
 </style>
\ No newline at end of file
diff --git a/pages_tool/article/list.vue b/pages_tool/article/list.vue
index cd39c15..a1b2865 100644
--- a/pages_tool/article/list.vue
+++ b/pages_tool/article/list.vue
@@ -1,215 +1,243 @@
 <template>
-	<view :style="themeColor">
-		<mescroll-uni @getData="getData" ref="mescroll">
-			<block slot="list">
-				<view class="article-wrap" v-if="list.length">
-					<ns-adv keyword="NS_ARTICLE" class-name="adv-wrap"></ns-adv>
-					<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
-						<view class="article-img">
-							<image class="cover-img" :src="$util.img(item.cover_img)" mode="widthFix"
-								@error="imgError(index)" />
-						</view>
-						<view class="info-wrap">
-							<text class="title">{{ item.article_title }}</text>
-							<view class="read-wrap">
-								<block v-if="item.category_name">
-									<text class="category-icon"></text>
-									<text>{{ item.category_name }}</text>
-								</block>
-								<text class="date">{{ $util.timeStampTurnTime(item.create_time, 'date') }}</text>
-							</view>
-						</view>
-					</view>
-				</view>
-				<view v-else class="empty-wrap"><ns-empty text="暂无文章" :isIndex="false"></ns-empty></view>
-				<loading-cover ref="loadingCover"></loading-cover>
-			</block>
-		</mescroll-uni>
+    <view :style="themeColor">
+        <!-- 主内容区域 -->
+        <view
+            class="page-img"
+            :style="{
+                backgroundColor: bgColor,
+                minHeight: openBottomNav ? 'calc(100vh - 55px)' : '100vh'
+            }"
+        >
+            <mescroll-uni @getData="getData" ref="mescroll">
+                <block slot="list">
+                    <view class="article-wrap" v-if="list.length">
+                        <ns-adv keyword="NS_ARTICLE" class-name="adv-wrap"></ns-adv>
+                        <view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
+                            <view class="article-img">
+                                <image
+                                    class="cover-img"
+                                    :src="$util.img(item.cover_img)"
+                                    mode="widthFix"
+                                    @error="imgError(index)"
+                                />
+                            </view>
+                            <view class="info-wrap">
+                                <text class="title">{{ item.article_title }}</text>
+                                <view class="read-wrap">
+                                    <block v-if="item.category_name">
+                                        <text class="category-icon"></text>
+                                        <text>{{ item.category_name }}</text>
+                                    </block>
+                                    <text class="date">{{ $util.timeStampTurnTime(item.create_time, 'date') }}</text>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                    <view v-else class="empty-wrap">
+                        <ns-empty text="暂无文章" :isIndex="false"></ns-empty>
+                    </view>
+                    <loading-cover ref="loadingCover"></loading-cover>
+                </block>
+            </mescroll-uni>
 
-		<!-- 隐私弹窗 -->
-		<privacy-popup ref="privacyPopup"></privacy-popup>
-	</view>
+            <!-- 隐私弹窗 -->
+            <privacy-popup ref="privacyPopup"></privacy-popup>
+        </view>
+        <view class="page-bottom" v-if="openBottomNav">
+            <diy-bottom-nav @callback="callback" :name="name" />
+        </view>
+    </view>
 </template>
 
 <script>
 export default {
-	data() {
-		return {
-			list: []
-		};
-	},
-	onShow() {
-		this.setPublicShare();
-	},
-	methods: {
-		getData(mescroll) {
-			this.$api.sendRequest({
-				url: '/api/article/page',
-				data: {
-					page_size: mescroll.size,
-					page: mescroll.num
-				},
-				success: res => {
-					let newArr = [];
-					let msg = res.message;
-					if (res.code == 0 && res.data) {
-						newArr = res.data.list;
-					} else {
-						this.$util.showToast({
-							title: msg
-						});
-					}
-					mescroll.endSuccess(newArr.length);
-					//设置列表数据
-					if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
-					this.list = this.list.concat(newArr); //追加新数据
-					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
-				},
-				fail: res => {
-					mescroll.endErr();
-					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
-				}
-			});
-		},
-		toDetail(item) {
-			this.$util.redirectTo('/pages_tool/article/detail', {
-				article_id: item.article_id
-			});
-		},
-		imgError(index) {
-			if (this.list[index]) this.list[index].cover_img = this.$util.getDefaultImage().article;
-		},
-		// 设置公众号分享
-		setPublicShare() {
-			let shareUrl = this.$config.h5Domain + '/pages_tool/article/list';
-			this.$util.setPublicShare({
-				title: '文章列表',
-				desc: '',
-				link: shareUrl,
-				imgUrl: this.siteInfo ? this.$util.img(this.siteInfo.logo_square) : ''
-			});
-		}
-	},
-	onShareAppMessage(res) {
-		var title = '文章列表';
-		var path = '/pages_tool/article/list';
-		return {
-			title: title,
-			path: path,
-			success: res => { },
-			fail: res => { }
-		};
-	},
-	//分享到朋友圈
-	onShareTimeline() {
-		var title = '文章列表';
-		var query = '/pages_tool/article/list';
-		return {
-			title: title,
-			query: query,
-			imageUrl: ''
-		};
-	}
+    data() {
+        return {
+            list: [],
+            
+            openBottomNav: true, 
+            name: 'article',     
+            bgColor: '#ffffff' 
+        };
+    },
+    onShow() {
+        this.setPublicShare();
+    },
+    methods: {
+        getData(mescroll) {
+            this.$api.sendRequest({
+                url: '/api/article/page',
+                data: {
+                    page_size: mescroll.size,
+                    page: mescroll.num
+                },
+                success: res => {
+                    let newArr = [];
+                    let msg = res.message;
+                    if (res.code == 0 && res.data) {
+                        newArr = res.data.list;
+                    } else {
+                        this.$util.showToast({
+                            title: msg
+                        });
+                    }
+                    mescroll.endSuccess(newArr.length);
+                    if (mescroll.num == 1) this.list = [];
+                    this.list = this.list.concat(newArr);
+                    if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
+                },
+                fail: res => {
+                    mescroll.endErr();
+                    if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
+                }
+            });
+        },
+        toDetail(item) {
+            this.$util.redirectTo('/pages_tool/article/detail', {
+                article_id: item.article_id
+            });
+        },
+        imgError(index) {
+            if (this.list[index]) this.list[index].cover_img = this.$util.getDefaultImage().article;
+        },
+        setPublicShare() {
+            let shareUrl = this.$config.h5Domain + '/pages_tool/article/list';
+            this.$util.setPublicShare({
+                title: '文章列表',
+                desc: '',
+                link: shareUrl,
+                imgUrl: this.siteInfo ? this.$util.img(this.siteInfo.logo_square) : ''
+            });
+        },
+        callback(data) {
+        }
+    },
+    onShareAppMessage(res) {
+        var title = '文章列表';
+        var path = '/pages_tool/article/list';
+        return {
+            title: title,
+            path: path,
+            success: res => {},
+            fail: res => {}
+        };
+    },
+    onShareTimeline() {
+        var title = '文章列表';
+        var query = '/pages_tool/article/list';
+        return {
+            title: title,
+            query: query,
+            imageUrl: ''
+        };
+    }
 };
 </script>
 
 <style lang="scss" scoped>
 ::v-deep .fixed {
-	position: relative;
-	top: 0;
+    position: relative;
+    top: 0;
 }
 
 .empty-wrap {
-	padding-top: 200rpx;
+    padding-top: 200rpx;
 }
 
 .article-wrap {
-	background: #f8f8f8;
+    background: #f8f8f8;
 
-	.adv-wrap {
-		margin: 24rpx 24rpx 0 24rpx;
-		width: auto;
-	}
+    .adv-wrap {
+        margin: 24rpx 24rpx 0 24rpx;
+        width: auto;
+    }
 
-	.item {
-		display: flex;
-		padding: 20rpx;
-		background-color: #fff;
-		margin: 24rpx;
-		border-radius: 16rpx;
+    .item {
+        display: flex;
+        padding: 20rpx;
+        background-color: #fff;
+        margin: 24rpx;
+        border-radius: 16rpx;
 
-		.article-img {
-			margin-right: 20rpx;
-			width: 160rpx;
-			height: 160rpx;
-			overflow: hidden;
-			display: flex;
-			align-items: center;
-			justify-content: center;
+        .article-img {
+            margin-right: 20rpx;
+            width: 160rpx;
+            height: 160rpx;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
 
-			image {
-				width: 100%;
-			}
-		}
+            image {
+                width: 100%;
+            }
+        }
 
-		.info-wrap {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			justify-content: space-between;
+        .info-wrap {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
 
-			.title {
-				font-weight: bold;
-				margin-bottom: 10rpx;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				display: -webkit-box;
-				-webkit-line-clamp: 2;
-				-webkit-box-orient: vertical;
-				font-size: 30rpx;
-				line-height: 1.5;
-			}
+            .title {
+                font-weight: bold;
+                margin-bottom: 10rpx;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                font-size: 30rpx;
+                line-height: 1.5;
+            }
 
-			.abstract {
-				overflow: hidden;
-				text-overflow: ellipsis;
-				display: -webkit-box;
-				-webkit-line-clamp: 2;
-				-webkit-box-orient: vertical;
-				font-size: $font-size-tag;
-			}
+            .abstract {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                font-size: $font-size-tag;
+            }
 
-			.read-wrap {
-				display: flex;
-				color: #999ca7;
-				justify-content: flex-start;
-				align-items: center;
-				margin-top: 10rpx;
-				line-height: 1;
+            .read-wrap {
+                display: flex;
+                color: #999ca7;
+                justify-content: flex-start;
+                align-items: center;
+                margin-top: 10rpx;
+                line-height: 1;
 
-				text {
-					font-size: $font-size-tag;
-				}
+                text {
+                    font-size: $font-size-tag;
+                }
 
-				.iconfont {
-					font-size: 36rpx;
-					vertical-align: bottom;
-					margin-right: 10rpx;
-				}
+                .iconfont {
+                    font-size: 36rpx;
+                    vertical-align: bottom;
+                    margin-right: 10rpx;
+                }
 
-				.category-icon {
-					width: 8rpx;
-					height: 8rpx;
-					border-radius: 50%;
-					background: $base-color;
-					margin-right: 10rpx;
-				}
+                .category-icon {
+                    width: 8rpx;
+                    height: 8rpx;
+                    border-radius: 50%;
+                    background: $base-color;
+                    margin-right: 10rpx;
+                }
 
-				.date {
-					margin-left: 20rpx;
-				}
-			}
-		}
-	}
+                .date {
+                    margin-left: 20rpx;
+                }
+            }
+        }
+    }
+}
+.page-bottom {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: 999;
 }
 </style>
\ No newline at end of file