chore:底部加了标签栏
This commit is contained in:
@@ -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>
|
||||||
@@ -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>
|
||||||
Reference in New Issue
Block a user