chore:底部加了标签栏

This commit is contained in:
2026-01-22 16:46:48 +08:00
parent 814931de80
commit baf9e56c82
2 changed files with 368 additions and 324 deletions

View File

@@ -19,17 +19,24 @@
<!-- 隐私弹窗 --> <!-- 隐私弹窗 -->
<privacy-popup ref="privacyPopup"></privacy-popup> <privacy-popup ref="privacyPopup"></privacy-popup>
<view class="page-bottom" v-if="openBottomNav">
<diy-bottom-nav @callback="callback" :name="name" />
</view>
</view> </view>
</template> </template>
<script> <script>
import htmlParser from '@/common/js/html-parser'; import htmlParser from '@/common/js/html-parser';
export default { export default {
data() { data() {
return { return {
articleId: 0, articleId: 0,
detail: {}, detail: {},
content: '' content: '',
openBottomNav: true,
name: 'article'
}; };
}, },
onLoad(options) { onLoad(options) {
@@ -83,6 +90,8 @@
link: shareUrl, link: shareUrl,
imgUrl: this.siteInfo ? this.$util.img(this.siteInfo.logo_square) : '' imgUrl: this.siteInfo ? this.$util.img(this.siteInfo.logo_square) : ''
}); });
},
callback(data) {
} }
}, },
onShareAppMessage(res) { onShareAppMessage(res) {
@@ -95,7 +104,7 @@
fail: res => {} fail: res => {}
}; };
}, },
//分享到朋友圈 // 分享到朋友圈
onShareTimeline() { onShareTimeline() {
var title = this.detail.article_title; var title = this.detail.article_title;
var query = 'article_id=' + this.articleId; var query = 'article_id=' + this.articleId;
@@ -105,30 +114,30 @@
imageUrl: '' imageUrl: ''
}; };
} }
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.page { .page {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 30rpx; padding: 30rpx;
box-sizing: border-box; box-sizing: border-box;
background: #ffffff; background: #ffffff;
} }
.help-title { .help-title {
font-size: $font-size-toolbar; font-size: $font-size-toolbar;
text-align: left; text-align: left;
font-weight: bold; font-weight: bold;
} }
.help-content { .help-content {
margin-top: $margin-updown; margin-top: $margin-updown;
word-break: break-all; word-break: break-all;
} }
.help-meta { .help-meta {
text-align: left; text-align: left;
margin-top: $margin-updown; margin-top: $margin-updown;
color: $color-tip; color: $color-tip;
@@ -136,9 +145,9 @@
.help-time { .help-time {
font-size: $font-size-tag; font-size: $font-size-tag;
} }
} }
.bottom-area { .bottom-area {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@@ -152,5 +161,12 @@
color: #999; color: #999;
font-size: 24rpx; font-size: 24rpx;
} }
} }
.page-bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 999;
}
</style> </style>

View File

@@ -1,13 +1,25 @@
<template> <template>
<view :style="themeColor"> <view :style="themeColor">
<!-- 主内容区域 -->
<view
class="page-img"
:style="{
backgroundColor: bgColor,
minHeight: openBottomNav ? 'calc(100vh - 55px)' : '100vh'
}"
>
<mescroll-uni @getData="getData" ref="mescroll"> <mescroll-uni @getData="getData" ref="mescroll">
<block slot="list"> <block slot="list">
<view class="article-wrap" v-if="list.length"> <view class="article-wrap" v-if="list.length">
<ns-adv keyword="NS_ARTICLE" class-name="adv-wrap"></ns-adv> <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="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
<view class="article-img"> <view class="article-img">
<image class="cover-img" :src="$util.img(item.cover_img)" mode="widthFix" <image
@error="imgError(index)" /> class="cover-img"
:src="$util.img(item.cover_img)"
mode="widthFix"
@error="imgError(index)"
/>
</view> </view>
<view class="info-wrap"> <view class="info-wrap">
<text class="title">{{ item.article_title }}</text> <text class="title">{{ item.article_title }}</text>
@@ -21,7 +33,9 @@
</view> </view>
</view> </view>
</view> </view>
<view v-else class="empty-wrap"><ns-empty text="暂无文章" :isIndex="false"></ns-empty></view> <view v-else class="empty-wrap">
<ns-empty text="暂无文章" :isIndex="false"></ns-empty>
</view>
<loading-cover ref="loadingCover"></loading-cover> <loading-cover ref="loadingCover"></loading-cover>
</block> </block>
</mescroll-uni> </mescroll-uni>
@@ -29,13 +43,21 @@
<!-- 隐私弹窗 --> <!-- 隐私弹窗 -->
<privacy-popup ref="privacyPopup"></privacy-popup> <privacy-popup ref="privacyPopup"></privacy-popup>
</view> </view>
<view class="page-bottom" v-if="openBottomNav">
<diy-bottom-nav @callback="callback" :name="name" />
</view>
</view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
list: [] list: [],
openBottomNav: true,
name: 'article',
bgColor: '#ffffff'
}; };
}, },
onShow() { onShow() {
@@ -60,9 +82,8 @@ export default {
}); });
} }
mescroll.endSuccess(newArr.length); mescroll.endSuccess(newArr.length);
//设置列表数据 if (mescroll.num == 1) this.list = [];
if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表 this.list = this.list.concat(newArr);
this.list = this.list.concat(newArr); //追加新数据
if (this.$refs.loadingCover) this.$refs.loadingCover.hide(); if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}, },
fail: res => { fail: res => {
@@ -79,7 +100,6 @@ export default {
imgError(index) { imgError(index) {
if (this.list[index]) this.list[index].cover_img = this.$util.getDefaultImage().article; if (this.list[index]) this.list[index].cover_img = this.$util.getDefaultImage().article;
}, },
// 设置公众号分享
setPublicShare() { setPublicShare() {
let shareUrl = this.$config.h5Domain + '/pages_tool/article/list'; let shareUrl = this.$config.h5Domain + '/pages_tool/article/list';
this.$util.setPublicShare({ this.$util.setPublicShare({
@@ -88,6 +108,8 @@ export default {
link: shareUrl, link: shareUrl,
imgUrl: this.siteInfo ? this.$util.img(this.siteInfo.logo_square) : '' imgUrl: this.siteInfo ? this.$util.img(this.siteInfo.logo_square) : ''
}); });
},
callback(data) {
} }
}, },
onShareAppMessage(res) { onShareAppMessage(res) {
@@ -96,11 +118,10 @@ export default {
return { return {
title: title, title: title,
path: path, path: path,
success: res => { }, success: res => {},
fail: res => { } fail: res => {}
}; };
}, },
//分享到朋友圈
onShareTimeline() { onShareTimeline() {
var title = '文章列表'; var title = '文章列表';
var query = '/pages_tool/article/list'; var query = '/pages_tool/article/list';
@@ -212,4 +233,11 @@ export default {
} }
} }
} }
.page-bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 999;
}
</style> </style>