forked from zhongyuanhaiju/uniapp
511 lines
13 KiB
Vue
511 lines
13 KiB
Vue
<template>
|
||
<page-meta :page-style="themeColor"></page-meta>
|
||
<view class="page">
|
||
<loading-cover v-if="loading" ref="loadingCover"></loading-cover>
|
||
<!--文章标题-->
|
||
<view class="help-title">{{ detail.article_title }}</view>
|
||
<view class="help-meta">
|
||
<text class="help-time">发表时间: {{ detail.create_time }}</text>
|
||
</view>
|
||
<!--文章内容-->
|
||
<view class="help-content">
|
||
<rich-text :nodes="content"></rich-text>
|
||
</view>
|
||
<!--浏览量和点赞-->
|
||
<view class="bottom">
|
||
<view class="browse">{{ set_info.browse_text || '浏览量' }}{{ detail.read_num }}次数</view>
|
||
<view class="bottom-list">
|
||
<view class="fabulous" @click="fabulous">
|
||
<van-icon v-if="detail.is_fabulous > 0" class="good-job" name="good-job" />
|
||
<van-icon v-else class="good-job-o" name="good-job-o" />
|
||
赞 {{ detail.dianzan_num }}
|
||
</view>
|
||
<!--<view class="share_panel" @click="share_panel = true"><image class="my-icon" :src="fenxiang"></image>分享</view>-->
|
||
</view>
|
||
</view>
|
||
<!-- 推荐阅读 -->
|
||
<view class="recommend">
|
||
<!--顶部内容-->
|
||
<view class="top">
|
||
<view class="title">推荐阅读</view>
|
||
<view class="more-info" @click="$util.redirectTo('/pages_rush/article/list')">
|
||
查看更多<van-icon class="arrow" name="arrow" />
|
||
</view>
|
||
</view>
|
||
<!--推荐列表-->
|
||
<view class="article">
|
||
<view class="article-block" v-for="(item,index) in list" :key="index" @click="goToDetail(item.article_id)">
|
||
<view class="block-content">
|
||
<view class="content-title">{{ item.article_title }}</view>
|
||
<view class="content-abstract">{{ item.article_abstract }}</view>
|
||
<view class="content-info">
|
||
<view class="content-info-item">
|
||
<image class="my-icon" :src="liulan"></image>
|
||
{{ item.read_num }}
|
||
</view>
|
||
<view class="content-info-item">
|
||
<image class="my-icon" :src="dianzan"></image>
|
||
{{ item.dianzan_num }}
|
||
</view>
|
||
<view class="content-info-item" style="width: 160rpx">{{ item.create_time.split(" ")[0] }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="img">
|
||
<image class="image" :src="$util.img(item.cover_img)"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 底部tabBar -->
|
||
<view class="page-bottom"><diy-bottom-nav></diy-bottom-nav></view>
|
||
<!--分享面板 todo:微信小程序分享有兼容性问题 并且这里不需要分享 做隐藏操作 -->
|
||
<!--<share :show="share_panel" @close="share_panel = false" :share="share_info" :shareParams="share_params"></share>-->
|
||
</template>
|
||
|
||
<script>
|
||
import htmlParser from '@/common/js/html-parser';
|
||
import share from '@/pages_rush/components/share-panel/share-panel';
|
||
|
||
export default {
|
||
components:{
|
||
share
|
||
},
|
||
data() {
|
||
return {
|
||
liulan: this.$util.img('public/picture/aijiu/liulan.png'),
|
||
dianzan: this.$util.img('public/picture/aijiu/dianzan.png'),
|
||
fenxiang: this.$util.img('public/picture/aijiu/fenxiang.png'),
|
||
set_info: {},
|
||
loading: true,
|
||
articleId: 0,
|
||
detail: {},
|
||
content: '',
|
||
share_panel: false,
|
||
member_id: 0,
|
||
member:{},
|
||
|
||
page: 1 ,
|
||
list: [],
|
||
list_loading: false, // 是否处于加载状态，加载过程中不触发load事件
|
||
finished: false, // 是否已加载完成，加载完成后不再触发load事件
|
||
|
||
share_info:{},
|
||
share_params: [
|
||
'article_id'
|
||
],
|
||
|
||
source_member: 0,
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.articleId = options.article_id || 0;
|
||
if (this.articleId == 0) {
|
||
this.$util.redirectTo('/pages_tool/help/list', {}, 'redirectTo');
|
||
return;
|
||
}
|
||
// 分享奖励
|
||
if(options.source_member && options.share_id) this.shareReward(options);
|
||
// 分享接收 source_member
|
||
if (options.source_member) uni.setStorageSync('source_member', options.source_member);
|
||
// 获取数据
|
||
this.getData();
|
||
this.getList();
|
||
},
|
||
onShow() {
|
||
//记录分享关系
|
||
if(uni.getStorageSync('token') && uni.getStorageSync('source_member')){
|
||
this.$util.onSourceMember(uni.getStorageSync('source_member'));
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getSetting()
|
||
},
|
||
methods: {
|
||
// 获取文章详情
|
||
getData() {
|
||
let _this = this;
|
||
let source_member = uni.getStorageSync('source_member') || 0;
|
||
|
||
_this.$api.sendRequest({
|
||
url: '/article/api/index/details',
|
||
data: { article_id: _this.articleId, source_member: source_member },
|
||
success: res => {
|
||
if (res.code === 0 && res.data) {
|
||
_this.detail = res.data;
|
||
// _this.member = res.member;
|
||
_this.$langConfig.title(this.detail.article_title);
|
||
_this.content = htmlParser(this.detail.article_content);
|
||
|
||
_this.share_info = {
|
||
title: _this.detail.article_title, // 分享标题
|
||
desc: _this.detail.article_abstract, // 分享描述
|
||
imgUrl: _this.detail.cover_img, // 分享图标
|
||
};
|
||
}
|
||
else {
|
||
this.$util.showToast({
|
||
title: res.message
|
||
});
|
||
setTimeout(() => {
|
||
this.$util.redirectTo('/pages_rush/article/list', {}, 'redirectTo');
|
||
}, 2000);
|
||
}
|
||
|
||
_this.loading = false;
|
||
},
|
||
fail: res => {
|
||
_this.loading = false;
|
||
}
|
||
});
|
||
},
|
||
// 获取基本设置
|
||
getSetting(){
|
||
let _this = this;
|
||
this.$api.sendRequest({
|
||
url: '/article/api/index/setInfo',
|
||
success: res => {
|
||
if(res.code === 0){
|
||
_this.set_info = res.data;
|
||
}
|
||
},
|
||
fail: res => {
|
||
console.log(res);
|
||
}
|
||
});
|
||
},
|
||
// 点击点赞按钮
|
||
fabulous(){
|
||
let _this = this;
|
||
_this.$api.sendRequest({
|
||
url: '/article/api/index/fabulous',
|
||
data: { article_id: _this.articleId },
|
||
success: res => {
|
||
this.$util.showToast({
|
||
title: res.message
|
||
});
|
||
if (res.code === 0) _this.getData();
|
||
},
|
||
fail: res => {}
|
||
});
|
||
},
|
||
// 获取文章列表
|
||
getList(){
|
||
let _this = this;
|
||
this.list_loading = true;
|
||
_this.$api.sendRequest({
|
||
url: '/article/api/index/articleList',
|
||
data: {
|
||
page_size: 10,
|
||
page: _this.page,
|
||
is_rand: 1,
|
||
},
|
||
success: res => {
|
||
if(res.code === 0){
|
||
_this.list_loading = false;
|
||
let data = res.data;
|
||
|
||
if(_this.page === 1) _this.list = data.list;
|
||
else _this.list = _this.list.concat(data.list);
|
||
_this.page++;
|
||
// 推荐列表 仅加载一页
|
||
_this.finished = true;
|
||
}
|
||
},
|
||
fail: res => {
|
||
console.log(res);
|
||
}
|
||
});
|
||
},
|
||
// 点击跳转 —— 文章详情
|
||
goToDetail(id) {
|
||
this.$util.redirectTo('/pages_rush/article/detail', { article_id: id });
|
||
},
|
||
// 获取分享奖励
|
||
shareReward(options){
|
||
this.$api.sendRequest({
|
||
url: '/article/api/index/getShareReward',
|
||
data: options,
|
||
success: res => {
|
||
console.log(res);
|
||
},
|
||
fail: res => {
|
||
console.log('分享奖励失败',res);
|
||
}
|
||
});
|
||
}
|
||
},
|
||
onShareAppMessage(res) {
|
||
var title = this.detail.article_title;
|
||
var path = '/pages_rush/article/detail?article_id=' + this.articleId;
|
||
return {
|
||
title: title,
|
||
path: path,
|
||
success: res => {},
|
||
fail: res => {}
|
||
};
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.page {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
background: #ffffff;
|
||
user-select: auto;
|
||
.help-title {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
text-align: left;
|
||
line-height: 60rpx;
|
||
}
|
||
.help-content {
|
||
margin-top: $margin-updown;
|
||
word-break: break-all;
|
||
user-select: auto;
|
||
}
|
||
.help-meta {
|
||
text-align: right;
|
||
margin-top: $margin-updown;
|
||
color: $color-tip;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
.share-o{
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
.help-time {
|
||
font-size: $font-size-tag;
|
||
}
|
||
}
|
||
.user{
|
||
margin: 40rpx 0;
|
||
background: #f6f7fb;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
width: calc(100% - 60rpx);
|
||
height: 120rpx;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.avatar{
|
||
height: 120rpx;
|
||
width: 120rpx;
|
||
|
||
.avatar-image{
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.info{
|
||
width: calc(100% - 120rpx - 170rpx);
|
||
padding-left: 20rpx;
|
||
|
||
.nickname{
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
.phone{
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
.btn{
|
||
width: 170rpx;
|
||
.btn-item{
|
||
background: #de3242;
|
||
border-radius: 40rpx;
|
||
width: 160rpx;
|
||
text-align: center;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
font-size: 28rpx;
|
||
color: #FFF;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
.bottom{
|
||
margin: 30rpx 0;
|
||
font-size: 26rpx;
|
||
display: inline-flex;
|
||
width: 100%;
|
||
height: 60rpx;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.browse{
|
||
color: #909399;
|
||
}
|
||
.bottom-list{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 280rpx;
|
||
.fabulous{
|
||
color: #909399;
|
||
border: 1px solid #dddddd;
|
||
border-radius: 100rpx;
|
||
height: 50rpx;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 30rpx;
|
||
|
||
.good-job-o{
|
||
color: #909399;
|
||
font-size: 34rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
.good-job{
|
||
color: #e02e42;
|
||
font-size: 34rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
.share_panel{
|
||
line-height: 64rpx;
|
||
color: #909399;
|
||
}
|
||
}
|
||
}
|
||
.recommend{
|
||
// #ifdef MP-WEIXIN
|
||
padding-bottom: 200rpx;
|
||
// #endif
|
||
.top{
|
||
width: 100%;
|
||
display: inline-flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
margin: 50rpx 0;
|
||
position: relative;
|
||
|
||
.title{
|
||
padding-left: 30rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
.title::after{
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 14rpx;
|
||
width: 6rpx;
|
||
height: calc(100% - (14rpx * 2));
|
||
background: #527010;
|
||
}
|
||
.more-info{
|
||
font-size: 26rpx;
|
||
color: #8f9298;
|
||
.arrow{}
|
||
}
|
||
}
|
||
.article{
|
||
.article-block{
|
||
width: 100%;
|
||
padding: 20rpx 0;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 180rpx;
|
||
position: relative;
|
||
.img{
|
||
width: 260rpx;
|
||
height: 180rpx;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
.image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.block-content{
|
||
width: calc(100% - 290rpx);
|
||
height: 100%;
|
||
display: inline-flex;
|
||
flex-wrap: wrap;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
|
||
.content-title{
|
||
width: 100%;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
line-height: 40rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
.content-abstract{
|
||
height: 40rpx;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
//text-align: center;
|
||
font-size: 24rpx;
|
||
//font-weight: bold;
|
||
line-height: 40rpx;
|
||
text-overflow: ellipsis;
|
||
display: block;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
.content-info{
|
||
width: 100%;
|
||
display: inline-flex;
|
||
justify-content: flex-start;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: flex-end;
|
||
.content-info-item{
|
||
width: 85rpx;
|
||
font-size: 26rpx!important;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.article-block::after{
|
||
content: "";
|
||
position: absolute;
|
||
width: calc(100% - 40rpx);
|
||
height: 1px;
|
||
bottom: 0;
|
||
left: 20rpx;
|
||
background: #f5f5f5;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.my-icon {
|
||
top: 3px;
|
||
height: 15px;
|
||
width: 15px;
|
||
position: relative;
|
||
display: inline-block;
|
||
font: normal normal normal 14px/1 'vant-icon';
|
||
font-size: inherit;
|
||
text-rendering: auto;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
</style>
|