Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore：底部加了标签栏

Browse Source
This commit is contained in:
jinhhanhan
2026-01-22 16:46:48 +08:00
parent 814931de80
commit baf9e56c82
2 changed files with 368 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
pages_tool/article/detail.vue
View File

@@ -1,156 +1,172 @@
<template> <template>
<view class="page" :style="themeColor"> <view class="page" :style="themeColor">
<view class="help-title">{{ detail.article_title }}</view> <view class="help-title">{{ detail.article_title }}</view>
<view class="help-meta" v-if="detail.is_show_release_time == 1"> <view class="help-meta" v-if="detail.is_show_release_time == 1">
<text class="help-time">发表时间: {{ $util.timeStampTurnTime(detail.create_time) }}</text> <text class="help-time">发表时间: {{ $util.timeStampTurnTime(detail.create_time) }}</text>
</view> </view>
<view class="help-content"><rich-text :nodes="content"></rich-text></view> <view class="help-content"><rich-text :nodes="content"></rich-text></view>
<view class="bottom-area"> <view class="bottom-area">
<view v-if="detail.is_show_read_num == 1"> <view v-if="detail.is_show_read_num == 1">
阅读： 阅读：
<text class="price-font">{{ detail.read_num + detail.initial_read_num }}</text> <text class="price-font">{{ detail.read_num + detail.initial_read_num }}</text>
</view> </view>
<view v-if="detail.is_show_dianzan_num == 1"> <view v-if="detail.is_show_dianzan_num == 1">
<text class="price-font">{{ detail.dianzan_num + detail.initial_dianzan_num }}</text> <text class="price-font">{{ detail.dianzan_num + detail.initial_dianzan_num }}</text>
人已赞 人已赞
</view> </view>
</view> </view>
<loading-cover ref="loadingCover"></loading-cover> <loading-cover ref="loadingCover"></loading-cover>
<!-- 隐私弹窗 --> <!-- 隐私弹窗 -->
<privacy-popup ref="privacyPopup"></privacy-popup> <privacy-popup ref="privacyPopup"></privacy-popup>
</view>
<view class="page-bottom" v-if="openBottomNav">
<diy-bottom-nav @callback="callback" :name="name" />
</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) { };
this.articleId = options.article_id || 0; },
// 小程序扫码进入 onLoad(options) {
if (options.scene) { this.articleId = options.article_id || 0;
var sceneParams = decodeURIComponent(options.scene); // 小程序扫码进入
this.articleId = sceneParams.split('-')[1]; if (options.scene) {
} var sceneParams = decodeURIComponent(options.scene);
if (this.articleId == 0) { this.articleId = sceneParams.split('-')[1];
this.$util.redirectTo('/pages_tool/article/list', {}, 'redirectTo'); }
} if (this.articleId == 0) {
}, this.$util.redirectTo('/pages_tool/article/list', {}, 'redirectTo');
onShow() { }
this.getData(); },
}, onShow() {
methods: { this.getData();
getData() { },
this.$api.sendRequest({ methods: {
url: '/api/article/info', getData() {
data: { this.$api.sendRequest({
article_id: this.articleId url: '/api/article/info',
}, data: {
success: res => { article_id: this.articleId
if (res.code == 0 && res.data) { },
this.detail = res.data; success: res => {
this.$langConfig.title(this.detail.article_title); if (res.code == 0 && res.data) {
this.content = htmlParser(this.detail.article_content); this.detail = res.data;
this.setPublicShare(); this.$langConfig.title(this.detail.article_title);
} else { this.content = htmlParser(this.detail.article_content);
this.$util.showToast({ this.setPublicShare();
title: res.message } else {
}); this.$util.showToast({
setTimeout(() => { title: res.message
this.$util.redirectTo('/pages_tool/article/list', {}, 'redirectTo'); });
}, 2000); setTimeout(() => {
} this.$util.redirectTo('/pages_tool/article/list', {}, 'redirectTo');
if (this.$refs.loadingCover) this.$refs.loadingCover.hide(); }, 2000);
}, }
fail: res => { if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
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({ setPublicShare() {
title: this.detail.article_title, let shareUrl = this.$config.h5Domain + '/pages_tool/article/detail?article_id=' + this.articleId;
desc: '', this.$util.setPublicShare({
link: shareUrl, title: this.detail.article_title,
imgUrl: this.siteInfo ? this.$util.img(this.siteInfo.logo_square) : '' desc: '',
}); link: shareUrl,
} imgUrl: this.siteInfo ? this.$util.img(this.siteInfo.logo_square) : ''
}, });
onShareAppMessage(res) { },
var title = this.detail.article_title; callback(data) {
var path = '/pages_tool/article/detail?article_id=' + this.articleId; }
return { },
title: title, onShareAppMessage(res) {
path: path, var title = this.detail.article_title;
success: res => {}, var path = '/pages_tool/article/detail?article_id=' + this.articleId;
fail: res => {} return {
}; title: title,
}, path: path,
//分享到朋友圈 success: res => {},
onShareTimeline() { fail: res => {}
var title = this.detail.article_title; };
var query = 'article_id=' + this.articleId; },
return { // 分享到朋友圈
title: title, onShareTimeline() {
query: query, var title = this.detail.article_title;
imageUrl: '' var query = 'article_id=' + this.articleId;
}; return {
} title: title,
}; query: query,
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;
.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;
margin-top: 40rpx; margin-top: 40rpx;
.price-font { .price-font {
font-weight: normal !important; font-weight: normal !important;
} }
view { view {
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>

396
pages_tool/article/list.vue
View File

@@ -1,215 +1,243 @@
<template> <template>
<view :style="themeColor"> <view :style="themeColor">
<mescroll-uni @getData="getData" ref="mescroll"> <!-- 主内容区域 -->
<block slot="list"> <view
<view class="article-wrap" v-if="list.length"> class="page-img"
<ns-adv keyword="NS_ARTICLE" class-name="adv-wrap"></ns-adv> :style="{
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)"> backgroundColor: bgColor,
<view class="article-img"> minHeight: openBottomNav ? 'calc(100vh - 55px)' : '100vh'
<image class="cover-img" :src="$util.img(item.cover_img)" mode="widthFix" }"
@error="imgError(index)" /> >
</view> <mescroll-uni @getData="getData" ref="mescroll">
<view class="info-wrap"> <block slot="list">
<text class="title">{{ item.article_title }}</text> <view class="article-wrap" v-if="list.length">
<view class="read-wrap"> <ns-adv keyword="NS_ARTICLE" class-name="adv-wrap"></ns-adv>
<block v-if="item.category_name"> <view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
<text class="category-icon"></text> <view class="article-img">
<text>{{ item.category_name }}</text> <image
</block> class="cover-img"
<text class="date">{{ $util.timeStampTurnTime(item.create_time, 'date') }}</text> :src="$util.img(item.cover_img)"
</view> mode="widthFix"
</view> @error="imgError(index)"
</view> />
</view> </view>
<view v-else class="empty-wrap"><ns-empty text="暂无文章" :isIndex="false"></ns-empty></view> <view class="info-wrap">
<loading-cover ref="loadingCover"></loading-cover> <text class="title">{{ item.article_title }}</text>
</block> <view class="read-wrap">
</mescroll-uni> <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> <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,
onShow() { name: 'article',
this.setPublicShare(); bgColor: '#ffffff'
}, };
methods: { },
getData(mescroll) { onShow() {
this.$api.sendRequest({ this.setPublicShare();
url: '/api/article/page', },
data: { methods: {
page_size: mescroll.size, getData(mescroll) {
page: mescroll.num this.$api.sendRequest({
}, url: '/api/article/page',
success: res => { data: {
let newArr = []; page_size: mescroll.size,
let msg = res.message; page: mescroll.num
if (res.code == 0 && res.data) { },
newArr = res.data.list; success: res => {
} else { let newArr = [];
this.$util.showToast({ let msg = res.message;
title: msg if (res.code == 0 && res.data) {
}); newArr = res.data.list;
} } else {
mescroll.endSuccess(newArr.length); this.$util.showToast({
//设置列表数据 title: msg
if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表 });
this.list = this.list.concat(newArr); //追加新数据 }
if (this.$refs.loadingCover) this.$refs.loadingCover.hide(); mescroll.endSuccess(newArr.length);
}, if (mescroll.num == 1) this.list = [];
fail: res => { this.list = this.list.concat(newArr);
mescroll.endErr(); if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
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 },
}); toDetail(item) {
}, this.$util.redirectTo('/pages_tool/article/detail', {
imgError(index) { article_id: item.article_id
if (this.list[index]) this.list[index].cover_img = this.$util.getDefaultImage().article; });
}, },
// 设置公众号分享 imgError(index) {
setPublicShare() { if (this.list[index]) this.list[index].cover_img = this.$util.getDefaultImage().article;
let shareUrl = this.$config.h5Domain + '/pages_tool/article/list'; },
this.$util.setPublicShare({ setPublicShare() {
title: '文章列表', let shareUrl = this.$config.h5Domain + '/pages_tool/article/list';
desc: '', this.$util.setPublicShare({
link: shareUrl, title: '文章列表',
imgUrl: this.siteInfo ? this.$util.img(this.siteInfo.logo_square) : '' desc: '',
}); link: shareUrl,
} imgUrl: this.siteInfo ? this.$util.img(this.siteInfo.logo_square) : ''
}, });
onShareAppMessage(res) { },
var title = '文章列表'; callback(data) {
var path = '/pages_tool/article/list'; }
return { },
title: title, onShareAppMessage(res) {
path: path, var title = '文章列表';
success: res => { }, var path = '/pages_tool/article/list';
fail: res => { } return {
}; title: title,
}, path: path,
//分享到朋友圈 success: res => {},
onShareTimeline() { fail: res => {}
var title = '文章列表'; };
var query = '/pages_tool/article/list'; },
return { onShareTimeline() {
title: title, var title = '文章列表';
query: query, var query = '/pages_tool/article/list';
imageUrl: '' return {
}; title: title,
} query: query,
imageUrl: ''
};
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .fixed { ::v-deep .fixed {
position: relative; position: relative;
top: 0; top: 0;
} }
.empty-wrap { .empty-wrap {
padding-top: 200rpx; padding-top: 200rpx;
} }
.article-wrap { .article-wrap {
background: #f8f8f8; background: #f8f8f8;
.adv-wrap { .adv-wrap {
margin: 24rpx 24rpx 0 24rpx; margin: 24rpx 24rpx 0 24rpx;
width: auto; width: auto;
} }
.item { .item {
display: flex; display: flex;
padding: 20rpx; padding: 20rpx;
background-color: #fff; background-color: #fff;
margin: 24rpx; margin: 24rpx;
border-radius: 16rpx; border-radius: 16rpx;
.article-img { .article-img {
margin-right: 20rpx; margin-right: 20rpx;
width: 160rpx; width: 160rpx;
height: 160rpx; height: 160rpx;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
image { image {
width: 100%; width: 100%;
} }
} }
.info-wrap { .info-wrap {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
.title { .title {
font-weight: bold; font-weight: bold;
margin-bottom: 10rpx; margin-bottom: 10rpx;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
font-size: 30rpx; font-size: 30rpx;
line-height: 1.5; line-height: 1.5;
} }
.abstract { .abstract {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
font-size: $font-size-tag; font-size: $font-size-tag;
} }
.read-wrap { .read-wrap {
display: flex; display: flex;
color: #999ca7; color: #999ca7;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin-top: 10rpx; margin-top: 10rpx;
line-height: 1; line-height: 1;
text { text {
font-size: $font-size-tag; font-size: $font-size-tag;
} }
.iconfont { .iconfont {
font-size: 36rpx; font-size: 36rpx;
vertical-align: bottom; vertical-align: bottom;
margin-right: 10rpx; margin-right: 10rpx;
} }
.category-icon { .category-icon {
width: 8rpx; width: 8rpx;
height: 8rpx; height: 8rpx;
border-radius: 50%; border-radius: 50%;
background: $base-color; background: $base-color;
margin-right: 10rpx; margin-right: 10rpx;
} }
.date { .date {
margin-left: 20rpx; margin-left: 20rpx;
} }
} }
} }
} }
}
.page-bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 999;
} }
</style> </style>