sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

博客评论优化

master
gongfuxiang 2023-01-06 15:53:10 +08:00
parent 2efae51a63
commit bca825a66f
5 changed files with 106 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
components/blog-comments/blog-comments.vue
View File

@ -1,6 +1,6 @@
<template>
<view>
<view v-if="(data || null) != null && (data_base || null) != null" class="padding-top-main">
<view v-if="(data || null) != null && (data_base || null) != null" class="padding-vertical-main">
<view class="padding-horizontal-main">
<!-- 点赞、评论、分享 -->
<view v-if="propType == 'detail'" class="tc padding-vertical-main blog-comments-bottom-container">
@ -24,8 +24,8 @@
</view>
</view>
<!-- 评论回复表单 -->
<view v-if="!input_comments_modal_status" class="padding-top-lg margin-bottom-xl oh padding-bottom-xl blog-comments-reply-container">
<image :src="avatar" mode="aspectFill" class="user-avatar fl br circle"></image>
<view v-if="(data_base.is_blog_comments_add || 0) == 1 && !input_comments_modal_status" class="padding-top-lg margin-bottom-xl oh padding-bottom-xl blog-comments-reply-container">
<image :src="avatar" mode="aspectFill" class="user-avatar fl circle"></image>
<view class="right-base fr">
<view class="bg-white border-radius-main padding-main">
<textarea placeholder="期待您的发言..." placeholder-class="cr-grey" class="wh-auto" :value="input_comments_value" :maxlength="input_comments_length_max" @input="comments_input_event" @blur="comments_input_event"></textarea>
@ -43,7 +43,7 @@
<view v-if="(data_base.is_blog_comments_show || 0) == 1 && (data.comments_list || null) != null && data.comments_list.length > 0" class="blog-comments-list bg-white border-radius-main margin-bottom-xxxl">
<block v-for="(item, index) in data.comments_list" :key="index">
<view class="item oh padding-horizontal-main padding-top-xxl padding-bottom-xxl text-size-xs">
<image :src="item.user.avatar" mode="aspectFill" class="user-avatar br circle fl"></image>
<image :src="item.user.avatar" mode="aspectFill" class="user-avatar circle fl"></image>
<view class="fr right-content">
<view class="comments-base oh">
<span class="username cr-base">{{item.user.user_name_view}}</span>
@ -67,7 +67,7 @@
<view v-if="(item.reply_comments_list || null) != null && item.reply_comments_list.length > 0" class="reply-blog-comments-list">
<block v-for="(comments, index2) in item.reply_comments_list" :key="index2">
<view class="item margin-top-xl padding-bottom-lg oh">
<image :src="comments.user.avatar" mode="aspectFill" class="user-avatar br circle fl"></image>
<image :src="comments.user.avatar" mode="aspectFill" class="user-avatar circle fl"></image>
<view class="fr right-content">
<view class="comments-reply-base oh">
<span class="username cr-base">{{comments.user.user_name_view}}</span>
@ -233,17 +233,31 @@
// 评论弹窗开启
modal_open_event(e) {
var index = parseInt(e.currentTarget.dataset.index || 0);
var username = e.currentTarget.dataset.username;
var blog_comments_id = e.currentTarget.dataset.blogcommentsid || 0;
var reply_comments_id = e.currentTarget.dataset.replycommentsid || 0;
this.setData({
input_comments_modal_status: true,
input_comments_modal_index: index,
input_comments_modal_username: username,
input_comments_modal_blog_comments_id: blog_comments_id,
input_comments_modal_reply_comments_id: reply_comments_id
});
if(!app.globalData.is_single_page_check()) {
return false;
}
var user = app.globalData.get_user_info();
if (user != false) {
// 用户未绑定用户则转到登录页面
if (app.globalData.user_is_need_login(user)) {
uni.navigateTo({
url: "/pages/login/login?event_callback=favor_event"
});
return false;
} else {
var index = parseInt(e.currentTarget.dataset.index || 0);
var username = e.currentTarget.dataset.username;
var blog_comments_id = e.currentTarget.dataset.blogcommentsid || 0;
var reply_comments_id = e.currentTarget.dataset.replycommentsid || 0;
this.setData({
input_comments_modal_status: true,
input_comments_modal_index: index,
input_comments_modal_username: username,
input_comments_modal_blog_comments_id: blog_comments_id,
input_comments_modal_reply_comments_id: reply_comments_id
});
}
}
},
// 表情选择事件
@ -517,6 +531,7 @@
.blog-comments-reply-container .user-avatar {
width: 100rpx;
height: 100rpx !important;
border:1px solid #eee;
}
.blog-comments-reply-container .right-base {
width: calc(100% - 130rpx);
@ -527,16 +542,18 @@
.blog-comments-modal {
top: 0;
left: 0;
width: 100%;
width: calc(100% - 80rpx);
height: 100%;
background: rgba(0, 0, 0, 0.6);
padding: 40rpx;
z-index: 10;
}
.blog-comments-modal-content {
padding: 10px;
border-radius: 10px;
margin: 20px;
margin-top: 35%;
margin: 0 auto;
margin-top: 30%;
max-width: calc(800px - 180rpx);
}
.blog-comments-modal-content textarea {
height: 200rpx;
@ -552,6 +569,7 @@
.blog-comments-list > .item .user-avatar {
width: 50rpx;
height: 50rpx;
border:1px solid #eee;
}
.blog-comments-list > .item:not(:last-child) {
border-bottom: 1px dashed #f6f6f6;

10
pages/plugins/blog/detail/detail.vue
View File

@ -4,7 +4,7 @@
<view class="padding-horizontal-main">
<view class="padding-main border-radius-main bg-white spacing-mb">
<view class="fw-b text-size-xl">{{data.title}}</view>
<view class="cr-grey margin-top-lg oh br-t padding-top-main">
<view class="cr-grey margin-top-lg oh br-t padding-top-main text-size-xs">
<view class="fl">
<text>时间：</text>
<text>{{data.add_time}}</text>
@ -42,7 +42,7 @@
<!-- 推荐博文 -->
<view v-if="right_list.length > 0" class="plugins-blog-list">
<view class="spacing-nav-title">
<text class="text-wrapper">推荐博文</text>
<text class="text-wrapper">推荐{{blog_main_name}}</text>
<navigator url="/pages/plugins/blog/search/search" hover-class="none" class="arrow-right padding-right-xxxl cr-gray fr">更多</navigator>
</view>
<view v-for="(item, index) in right_list" class="item oh padding-main border-radius-main bg-white spacing-mb">
@ -108,7 +108,8 @@
data: null,
right_list: [],
last_next: null,
emoji_list: [],
emoji_list: [],
blog_main_name: '博文',
// 自定义分享信息
share_info: {}
};
@ -175,7 +176,8 @@
data: blog,
right_list: data.right_list || [],
last_next: data.last_next || null,
emoji_list: data.emoji_list || []
emoji_list: data.emoji_list || [],
blog_main_name: ((data.base || null) == null) ? '博文' : (data.base.blog_main_name || '博文')
});
// 基础自定义分享

27
pages/plugins/blog/index/index.css
View File

@ -29,4 +29,31 @@
.goods-list .item .goods-img {
width: 100%;
height: 380rpx !important;
}
/**
* 分类导航
*/
.nav-blog-category .item {
width: calc(50% - 10rpx);
}
.nav-blog-category .item:nth-child(odd) {
float: left;
}
.nav-blog-category .item:nth-child(even) {
float: right;
}
.nav-blog-category .item .icon,
.nav-blog-category .item .icon-text {
width: 74rpx;
height: 74rpx !important;
}
.nav-blog-category .item .icon-text {
line-height: 72rpx;
font-size: 48rpx;
background: #e6f2f8;
color: #3f51b5;
}
.nav-blog-category .item .right-base {
width: calc(100% - 84rpx);
}

36
pages/plugins/blog/index/index.vue
View File

@ -10,10 +10,32 @@
<view v-if="slide_list.length > 0" class="padding-horizontal-main padding-top-main">
<component-banner :propData="slide_list"></component-banner>
</view>
<!-- 分类导航 -->
<view v-if="(data_base.is_home_category_main_nav || 0) == 1 && (category || null) != null && category.length > 0" class="nav-blog-category padding-horizontal-main oh">
<block v-for="(item, index) in category" :key="index">
<view class="item oh padding-main margin-bottom-main radius bg-white bs-bb" :data-value="item.url" @tap="url_event">
<image v-if="(item.icon || null) != null" :src="item.icon" mode="aspectFill" class="fl icon radius"></image>
<view v-else class="fl radius icon-text tc">{{item.name.substr(0, 1)}}</view>
<view class="fr right-base">
<view class="single-text cr-base">
<text class="fw">{{item.name}}</text>
<text v-if="(item.blog_data || null) != null && item.blog_data.day_comments_count > 0" class="margin-left-sm cr-red fw">{{item.blog_data.day_comments_count}}</text>
</view>
<view v-if="(item.blog_data || null) != null" class="single-text cr-gray text-size-xs">
<text>{{blog_main_name}}: {{item.blog_data.blog_count}}</text>
<text v-if="(data_base.is_blog_comments_show || 0) == 1" class="margin-left">评论: {{item.blog_data.comments_count}}</text>
<text v-if="(data_base.is_blog_give_thumbs || 0) == 1" class="margin-left">点赞: {{item.blog_data.give_thumbs_count}}</text>
</view>
</view>
</view>
</block>
</view>
<!-- 分类 -->
<view class="spacing-nav-title padding-horizontal-main">
<text class="text-wrapper va-m">所有博文</text>
<text class="text-wrapper va-m">所有{{blog_main_name}}</text>
<scroll-view v-if="(category || null) != null && category.length > 0" class="nav-list scroll-view-horizontal dis-inline-block oh va-m margin-left-sm" scroll-x="true">
<block v-for="(item, index) in category" :key="index">
<view class="item cr-base dis-inline-block padding-horizontal-main" :data-value="item.url" @tap="url_event">{{item.name}}</view>
@ -38,7 +60,7 @@
<!-- 热门博文-滚动 -->
<view v-if="hot_list.length > 0" class="padding-horizontal-main spacing-mb">
<view class="spacing-nav-title">
<text class="text-wrapper">热门博文</text>
<text class="text-wrapper">热门{{blog_main_name}}</text>
<navigator url="/pages/plugins/blog/search/search" hover-class="none" class="arrow-right padding-right-xxxl cr-gray fr">更多</navigator>
</view>
<view class="rolling-horizontal border-radius-main oh">
@ -62,7 +84,7 @@
<!-- 推荐博文 -->
<view v-if="right_list.length > 0" class="padding-horizontal-main spacing-mb">
<view class="spacing-nav-title">
<text class="text-wrapper">推荐博文</text>
<text class="text-wrapper">推荐{{blog_main_name}}</text>
<navigator url="/pages/plugins/blog/search/search" hover-class="none" class="arrow-right padding-right-xxxl cr-gray fr">更多</navigator>
</view>
<view class="right-list padding-horizontal-main border-radius-main bg-white">
@ -129,6 +151,7 @@
goods_list: [],
hot_list: [],
right_list: [],
blog_main_name: '博文',
// 自定义分享信息
share_info: {}
};
@ -189,15 +212,17 @@
goods_list: data.goods_list || [],
hot_list: data.hot_list || [],
right_list: data.right_list || [],
blog_main_name: ((data.base || null) == null) ? '博文' : (data.base.blog_main_name || '博文'),
data_list_loding_msg: '',
data_list_loding_status: 0,
data_bottom_line_status: true
});
// 基础自定义分享
var title = this.data_base.seo_title || this.data_base.application_name;
this.setData({
share_info: {
title: this.data_base.seo_title || this.data_base.application_name,
title: title,
desc: this.data_base.seo_desc,
path: '/pages/plugins/blog/index/index',
img: ((this.slide_list || null) != null && this.slide_list.length > 0) ? this.slide_list[0]['images_url'] : ''
@ -211,6 +236,9 @@
});
}
// 标题
uni.setNavigationBarTitle({title: title});
// 分享菜单处理
app.globalData.page_share_handle(this.share_info);
},

5
pages/plugins/blog/search/search.vue
View File

@ -111,7 +111,10 @@
this.setData({
data_base: data.base || null,
category: data.category || []
});
});
// 标题
var blog_main_name = ((data.base || null) == null) ? '博文' : (data.base.blog_main_name || '博文');
uni.setNavigationBarTitle({title: blog_main_name+'搜索'});
// 基础自定义分享
var info = this.data_base;