tijiao
This commit is contained in:
@@ -88,7 +88,7 @@
|
|||||||
"path": "pages/articleList/article",
|
"path": "pages/articleList/article",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "文章",
|
"navigationBarTitleText": "文章",
|
||||||
"enablePullDownRefresh": true, // 禁止下拉刷新
|
|
||||||
"app-plus": {
|
"app-plus": {
|
||||||
"bounce": "none",
|
"bounce": "none",
|
||||||
"titleNView": false,
|
"titleNView": false,
|
||||||
|
|||||||
245
pages/articleList/PrecisionImageGrid.vue
Normal file
245
pages/articleList/PrecisionImageGrid.vue
Normal file
@@ -0,0 +1,245 @@
|
|||||||
|
<template>
|
||||||
|
<view class="penBoxListImages com_Img_box">
|
||||||
|
<!-- tupian我设置的是数字暂无后端数据做循环啊，可替换为数组的长度 -->
|
||||||
|
<block v-for="(item, index) in imageList" wx:key="index">
|
||||||
|
<image :class="`img_list
|
||||||
|
${imageList.length == 1 ? 'com_Img_box_images1':''}
|
||||||
|
${imageList.length == 2 ? 'com_Img_box_images2':''}
|
||||||
|
${imageList.length == 3 ? 'com_Img_box_images3':''}
|
||||||
|
${imageList.length == 4 ? 'com_Img_box_images4':''}
|
||||||
|
${imageList.length == 5 ? 'com_Img_box_images5':''}
|
||||||
|
${imageList.length == 6 ? 'com_Img_box_images6':''}
|
||||||
|
${imageList.length == 7 ? 'com_Img_box_images7':''}
|
||||||
|
${imageList.length == 8 ? 'com_Img_box_images8':''}
|
||||||
|
${imageList.length == 9 ? 'com_Img_box_images9':''}`"
|
||||||
|
:src="item" mode="aspectFill" />
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
// 图片地址列表
|
||||||
|
imageList: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
// 网格间距（rpx）
|
||||||
|
gap: {
|
||||||
|
type: Number,
|
||||||
|
default: 10
|
||||||
|
},
|
||||||
|
// 容器宽度占父元素比例
|
||||||
|
containerRatio: {
|
||||||
|
type: Number,
|
||||||
|
default: 1 // 100%宽度
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 根据索引和总数计算每个图片的样式
|
||||||
|
getItemStyle(index, total) {
|
||||||
|
// 计算基础尺寸和间隙
|
||||||
|
const containerWidth = `calc(100% * ${this.containerRatio})`;
|
||||||
|
let width, height, gridTemplateColumns;
|
||||||
|
|
||||||
|
// 根据图片数量设置不同排列规则
|
||||||
|
switch(total) {
|
||||||
|
case 1:
|
||||||
|
// 1张图：占满容器
|
||||||
|
width = '100%';
|
||||||
|
height = '400rpx';
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
// 2张图：并排
|
||||||
|
width = `calc(50% - ${this.gap/2}rpx)`;
|
||||||
|
height = '250rpx';
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
// 3张图：1行2张，1行1张
|
||||||
|
if (index === 0) {
|
||||||
|
width = '100%';
|
||||||
|
height = '250rpx';
|
||||||
|
} else {
|
||||||
|
width = `calc(50% - ${this.gap/2}rpx)`;
|
||||||
|
height = '150rpx';
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
// 4张图：2x2网格
|
||||||
|
width = `calc(50% - ${this.gap/2}rpx)`;
|
||||||
|
height = '200rpx';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
// 5张及以上：3列网格
|
||||||
|
width = `calc(33.333% - ${this.gap*2/3}rpx)`;
|
||||||
|
height = '180rpx';
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
// 处理右边距（最后一列不加右边距）
|
||||||
|
marginRight: this.shouldAddMarginRight(index, total) ? `${this.gap}rpx` : '0',
|
||||||
|
// 处理下边距（最后一行不加下边距）
|
||||||
|
marginBottom: this.shouldAddMarginBottom(index, total) ? `${this.gap}rpx` : '0'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 判断是否需要添加右边距
|
||||||
|
shouldAddMarginRight(index, total) {
|
||||||
|
if (total <= 2) return index === 0;
|
||||||
|
if (total === 3) return index === 1;
|
||||||
|
if (total === 4) return index % 2 === 0;
|
||||||
|
return (index + 1) % 3 !== 0; // 3列布局最后一列不加右边距
|
||||||
|
},
|
||||||
|
|
||||||
|
// 判断是否需要添加下边距
|
||||||
|
shouldAddMarginBottom(index, total) {
|
||||||
|
if (total <= 3) return index < total - 2;
|
||||||
|
if (total === 4) return index < 2;
|
||||||
|
// 3列布局最后一行不加下边距
|
||||||
|
const rows = Math.ceil(total / 3);
|
||||||
|
const currentRow = Math.floor(index / 3) + 1;
|
||||||
|
return currentRow < rows;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 预览图片
|
||||||
|
previewImage(index) {
|
||||||
|
uni.previewImage({
|
||||||
|
current: index,
|
||||||
|
urls: this.imageList,
|
||||||
|
loop: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.com_Img_box {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.com_Img_box_images1:nth-child(1) {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images2 {
|
||||||
|
width: 49%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images2:nth-child(n) {
|
||||||
|
width: 49%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.com_Img_box_images3 {
|
||||||
|
width: 49%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images3:nth-child(2){
|
||||||
|
width: 49%;
|
||||||
|
height: 49%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images3:nth-child(3) {
|
||||||
|
width: 49%;
|
||||||
|
height: 49%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.com_Img_box_images4 {
|
||||||
|
width: 49%;
|
||||||
|
height: 49%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images5 {
|
||||||
|
width: 69%;
|
||||||
|
height: 69%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images5:nth-child(2) {
|
||||||
|
width: 28%;
|
||||||
|
height: 69%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images5:nth-child(n+3):nth-child(-n+5) {
|
||||||
|
width: 32%;
|
||||||
|
height: 29%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images6 {
|
||||||
|
width: 69%;
|
||||||
|
height: 69%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images6:nth-child(2) {
|
||||||
|
width: 29%;
|
||||||
|
height: 34%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images6:nth-child(3) {
|
||||||
|
width: 29%;
|
||||||
|
height: 34%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 29%;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.com_Img_box_images6:nth-child(n+4):nth-child(-n+5) {
|
||||||
|
width: 34%;
|
||||||
|
height: 29%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images6:nth-child(6) {
|
||||||
|
width: 29%;
|
||||||
|
height: 29%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images7 {
|
||||||
|
width: 32%;
|
||||||
|
height: 69%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images7:nth-child(3) {
|
||||||
|
width: 32%;
|
||||||
|
height: 34%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images7:nth-child(4) {
|
||||||
|
width: 32%;
|
||||||
|
height: 34%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 29%;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.com_Img_box_images7:nth-child(n+5):nth-child(-n+7) {
|
||||||
|
width: 32%;
|
||||||
|
height: 29%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images8 {
|
||||||
|
width: 32%;
|
||||||
|
height: 69%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images8:nth-child(n+2):nth-child(-n+3) {
|
||||||
|
width: 32%;
|
||||||
|
height: 34%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images8:nth-child(4) {
|
||||||
|
width: 32%;
|
||||||
|
height: 34%;
|
||||||
|
position: absolute;
|
||||||
|
right:33%;
|
||||||
|
bottom: 29%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images8:nth-child(5) {
|
||||||
|
width: 32%;
|
||||||
|
height: 34%;
|
||||||
|
position: absolute;
|
||||||
|
right:0;
|
||||||
|
bottom: 29%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images8:nth-child(n+6):nth-child(-n+8) {
|
||||||
|
width: 32%;
|
||||||
|
height: 29%;
|
||||||
|
}
|
||||||
|
.com_Img_box_images9 {
|
||||||
|
width: 32%;
|
||||||
|
height: 32%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="richtext" style="height: 100%;">
|
<view class="richtext" style="height: 100%;">
|
||||||
|
|
||||||
<piaoyiEditor :height="height" :placeholder="placeholder" :values="values" @changes="saveContens" :readOnly="readOnly" :photoUrl="photoUrl" :api="api" :name="name"/>
|
<piaoyiEditor :height="height" :placeholder="placeholder" :values="values" @changes="saveContens" :readOnly="readOnly" :photoUrl="photoUrl" :api="api" :name="name"/>
|
||||||
|
|
||||||
|
|
||||||
@@ -43,6 +44,8 @@
|
|||||||
methods: {
|
methods: {
|
||||||
saveContens(e) {
|
saveContens(e) {
|
||||||
this.txt = e.html
|
this.txt = e.html
|
||||||
|
this.$emit('saveContens', this.txt)
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onShareAppMessage(res) {
|
onShareAppMessage(res) {
|
||||||
|
|||||||
@@ -4,18 +4,28 @@
|
|||||||
<template v-slot:right>
|
<template v-slot:right>
|
||||||
<view class="top_right" @tap="createFolder">
|
<view class="top_right" @tap="createFolder">
|
||||||
<uni-icons type="folder-add" size="17" color="#fff"></uni-icons>
|
<uni-icons type="folder-add" size="17" color="#fff"></uni-icons>
|
||||||
<text>新建文章</text>
|
<text>发布文章</text>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</z-nav-bar>
|
</z-nav-bar>
|
||||||
|
<view class="doctors_module" :style="`top: ${42 + statusBarHeight}px;`">
|
||||||
|
<view class="cateList flexbox" style="background-color: #f8f7fc">
|
||||||
|
<common-sticky
|
||||||
|
itemStyle="width:50%; height: 38px;font-size:24rpx;"
|
||||||
|
:list="tabsList"
|
||||||
|
label="title"
|
||||||
|
:currentCateIndex="currentCateIndex"
|
||||||
|
@handleselectCate="ordersTabCLi"
|
||||||
|
></common-sticky>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
<scroll-view
|
<scroll-view
|
||||||
scroll-y="true"
|
scroll-y="true"
|
||||||
:scroll-top="scrollTop"
|
:scroll-top="scrollTop"
|
||||||
@scrolltolower="loadMore"
|
@scrolltolower="loadMore"
|
||||||
style="
|
style="
|
||||||
height: calc(100vh - 220rpx);
|
height: calc(100vh - 180rpx);
|
||||||
margin-top: 100rpx;
|
margin-top: 65rpx;
|
||||||
padding-bottom: 120rpx;
|
padding-bottom: 120rpx;
|
||||||
"
|
"
|
||||||
v-if="show == true"
|
v-if="show == true"
|
||||||
@@ -43,41 +53,58 @@
|
|||||||
></image> -->
|
></image> -->
|
||||||
|
|
||||||
<view class="item_right">
|
<view class="item_right">
|
||||||
<view style="display: flex; align-items: center">
|
<view class="item_top"
|
||||||
<text class="card_label" v-if="statusTitle" :style="`background-color:${statusColor} ;`">{{ statusTitle }}</text>
|
>
|
||||||
<text class="item_time">{{ item.createTime }}</text></view
|
<PrecisionImageGrid
|
||||||
|
:imageList="item.fileList1"
|
||||||
|
style="
|
||||||
|
width: 170rpx;
|
||||||
|
height: 170rpx;
|
||||||
|
/* position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0; */
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<view class="right">
|
||||||
|
|
||||||
|
<view class="item_name hidden2">{{ item.title }}</view>
|
||||||
|
|
||||||
|
<view class="item_time"
|
||||||
|
><text style="margin-right: 30rpx; color: #e38d54"
|
||||||
|
>医案</text
|
||||||
|
>{{
|
||||||
|
item.createTime ? item.createTime.split(" ")[0] : ""
|
||||||
|
}}</view
|
||||||
>
|
>
|
||||||
|
|
||||||
<view class="item_top">
|
<view class="item_time item_bottom">
|
||||||
<view class="item_name">{{ item.title }}</view>
|
<view class="left">
|
||||||
<rich-text
|
<view><text>{{ item.readCount?item.readCount:0 }}</text>阅读</view
|
||||||
class="item_content"
|
><text class="drop">·</text>
|
||||||
:nodes="item.information"
|
<view><text>{{ item.likeCount?item.likeCount:0 }}</text>点赞</view
|
||||||
></rich-text>
|
><text class="drop">·</text>
|
||||||
<!-- <rich-text
|
<view><text>{{ item.commentCount?item.commentCount:0 }}</text>评论</view></view
|
||||||
class="item_content"
|
|
||||||
:nodes="item.chiefComplaint"
|
|
||||||
></rich-text> -->
|
|
||||||
</view>
|
|
||||||
<view style="margin-top: 20rpx" v-if="item.img">
|
|
||||||
<u-upload
|
|
||||||
:fileList="item.fileList1"
|
|
||||||
multiple
|
|
||||||
width="50"
|
|
||||||
height="50"
|
|
||||||
:disabled="true"
|
|
||||||
:previewFullImage="true"
|
|
||||||
@click.stop="handleClick"
|
|
||||||
>
|
>
|
||||||
</u-upload>
|
|
||||||
|
<view style="color: #5188e5"
|
||||||
|
><uni-icons
|
||||||
|
type="redo-filled"
|
||||||
|
size="18"
|
||||||
|
color="#5188e5"
|
||||||
|
></uni-icons
|
||||||
|
>分享</view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="list_item_bt">
|
</view>
|
||||||
|
|
||||||
|
<!-- <view class="list_item_bt">
|
||||||
<text class="list_item_study" v-if="taihumedId == 0"
|
<text class="list_item_study" v-if="taihumedId == 0"
|
||||||
>编辑文章</text
|
>编辑文章</text
|
||||||
>
|
>
|
||||||
<text class="list_item_study" v-else>文章详情</text>
|
<text class="list_item_study" v-else>文章详情</text>
|
||||||
</view>
|
</view> -->
|
||||||
<!-- <text class="item_con">{{ item.taihuTalent.map(talent => talent.name).join(' ') }}</text> -->
|
<!-- <text class="item_con">{{ item.taihuTalent.map(talent => talent.name).join(' ') }}</text> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -96,7 +123,9 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import $http from "@/config/requestConfig.js";
|
import $http from "@/config/requestConfig.js";
|
||||||
|
import PrecisionImageGrid from "./PrecisionImageGrid.vue";
|
||||||
export default {
|
export default {
|
||||||
|
components: { PrecisionImageGrid },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tabsList: [],
|
tabsList: [],
|
||||||
@@ -108,8 +137,8 @@ export default {
|
|||||||
limit: 10,
|
limit: 10,
|
||||||
courseName: "",
|
courseName: "",
|
||||||
taihumedId: null,
|
taihumedId: null,
|
||||||
statusTitle: '',
|
statusTitle: "",
|
||||||
statusColor: '',
|
statusColor: "",
|
||||||
|
|
||||||
timer: null,
|
timer: null,
|
||||||
showText: false,
|
showText: false,
|
||||||
@@ -140,9 +169,24 @@ export default {
|
|||||||
this.getTabData();
|
this.getTabData();
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
this.getListData(this.taihumedId);
|
// this.getListData(this.taihumedId);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getGridColumns(length) {
|
||||||
|
if (length === 1) return "1fr"; // 1 张图 → 1 列
|
||||||
|
if (length === 2) return "repeat(2, 1fr)"; // 2 张图 → 2 列
|
||||||
|
if (length === 3) return "repeat(3, 1fr)"; // 3 张图 → 3 列
|
||||||
|
if (length === 4) return "repeat(2, 1fr)"; // 4 张图 → 2 列（类似朋友圈）
|
||||||
|
return "repeat(3, 1fr)"; // 其他数量 → 3 列
|
||||||
|
},
|
||||||
|
|
||||||
|
// 预览图片
|
||||||
|
previewImage(idx) {
|
||||||
|
uni.previewImage({
|
||||||
|
current: idx,
|
||||||
|
urls: this.imgList,
|
||||||
|
});
|
||||||
|
},
|
||||||
createFolder() {
|
createFolder() {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/articleList/article?navTitle=创建文章&title=创建文章&type=add`,
|
url: `/pages/articleList/article?navTitle=创建文章&title=创建文章&type=add`,
|
||||||
@@ -174,15 +218,12 @@ export default {
|
|||||||
// .then(res=> {
|
// .then(res=> {
|
||||||
// if (res.list&&res.list.length>0) {
|
// if (res.list&&res.list.length>0) {
|
||||||
this.tabsList = [
|
this.tabsList = [
|
||||||
{ id: 0, title: "草稿箱", statusTitle: '' },
|
{ id: 1, title: "已发布", statusTitle: "" },
|
||||||
{ id: 1, title: "待审核",statusTitle: '待审核',color:'#f59442' },
|
{ id: 0, title: "发布失败", statusTitle: "发布失败", color: "#f59442" },
|
||||||
{ id: 3, title: "质量检测中",statusTitle: '检测中' ,color:'#22be98' },
|
|
||||||
{ id: 4, title: "已通过",statusTitle: '已通过' ,color:'#22be98' },
|
|
||||||
{ id: 2, title: "未通过",statusTitle: '未通过',color:"#e78084" },
|
|
||||||
];
|
];
|
||||||
this.taihumedId = this.tabsList[0].id;
|
this.taihumedId = this.tabsList[0].id;
|
||||||
this.statusTitle = '';
|
this.statusTitle = "";
|
||||||
this.statusColor = '';
|
this.statusColor = "";
|
||||||
this.getListData(this.taihumedId);
|
this.getListData(this.taihumedId);
|
||||||
// }
|
// }
|
||||||
// });
|
// });
|
||||||
@@ -202,10 +243,12 @@ export default {
|
|||||||
});
|
});
|
||||||
this.$http
|
this.$http
|
||||||
.request({
|
.request({
|
||||||
url: "common/articleList/articleRecordsList",
|
url: "common/taihuTalentArticle/myArticleList",
|
||||||
method: "POST",
|
method: "POST",
|
||||||
data: {
|
data: {
|
||||||
state: taihumedId,
|
current: this.current,
|
||||||
|
limit: this.limit,
|
||||||
|
showFlag: taihumedId,
|
||||||
},
|
},
|
||||||
header: {
|
header: {
|
||||||
"Content-Type": "application/json",
|
"Content-Type": "application/json",
|
||||||
@@ -213,39 +256,38 @@ export default {
|
|||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
this.list=[...res.medicalRecordsList].filter(e=>e.data)
|
|
||||||
this.list = [...this.list].map((e) => {
|
this.count = res.page.total; //总数
|
||||||
|
let length = res.page.records.length;
|
||||||
|
if (res.page.records && length > 0) {
|
||||||
|
this.show = true;
|
||||||
|
//如果返回的数据少于每页数量，表示没有更多数据
|
||||||
|
if (
|
||||||
|
this.count == length ||
|
||||||
|
length < this.limit ||
|
||||||
|
this.count / this.current == this.limit
|
||||||
|
) {
|
||||||
|
this.noMore = true;
|
||||||
|
}
|
||||||
|
this.list = [
|
||||||
|
...this.list,
|
||||||
|
...res.page.records.map((e) => {
|
||||||
return {
|
return {
|
||||||
...e,
|
...e,
|
||||||
fileList1: e.img
|
fileList1: e.img ? e.img.split(",") : [],
|
||||||
? e.img.split(",").map((image, i) => ({
|
|
||||||
uid: i, // 假设 id 是唯一标识符
|
|
||||||
name: i, // 文件名
|
|
||||||
status: "done", // 状态
|
|
||||||
url: image, // 文件 URL
|
|
||||||
}))
|
|
||||||
: [],
|
|
||||||
};
|
};
|
||||||
});
|
}),
|
||||||
this.count = this.list.length; //总数
|
];
|
||||||
let length = this.list.length;
|
this.current += 1; //更新页码
|
||||||
if (res.medicalRecordsList && length > 0) {
|
//显示提示语
|
||||||
this.show = true;
|
this.showText = true;
|
||||||
// //如果返回的数据少于每页数量，表示没有更多数据
|
|
||||||
// if(this.count==length || length < this.limit ||this.count/this.current==this.limit){
|
|
||||||
// this.noMore = true;
|
|
||||||
// }
|
|
||||||
// this.list = [...this.list, ...res.pageRes.records];
|
|
||||||
// this.current += 1; //更新页码
|
|
||||||
// //显示提示语
|
|
||||||
// this.showText = true;
|
|
||||||
|
|
||||||
// if(this.current==2||type){
|
if (this.current == 2 || type) {
|
||||||
// this.scrollTop = 0
|
this.scrollTop = 0;
|
||||||
// this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
// this.scrollTop = 0.1; // 确保触发滚动
|
this.scrollTop = 0.1; // 确保触发滚动
|
||||||
// })
|
});
|
||||||
// }
|
}
|
||||||
} else {
|
} else {
|
||||||
this.show = false;
|
this.show = false;
|
||||||
this.null_text = "暂无数据";
|
this.null_text = "暂无数据";
|
||||||
@@ -308,21 +350,25 @@ export default {
|
|||||||
.content {
|
.content {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background-color: #fff;
|
background-color: #fff !important;
|
||||||
}
|
}
|
||||||
.doctors_list {
|
.doctors_list {
|
||||||
margin: 0 20rpx 20rpx;
|
margin: 0 30rpx 30rpx;
|
||||||
}
|
}
|
||||||
.doctors_item {
|
.doctors_item {
|
||||||
// border: 1rpx solid $themeColor;
|
// border: 1rpx solid $themeColor;
|
||||||
border-radius: 15rpx;
|
// border-radius: 15rpx;
|
||||||
margin-bottom: 20rpx;
|
// margin-bottom: 20rpx;
|
||||||
padding: 12rpx 30rpx 60rpx;
|
padding: 30rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: #fff;
|
border-top: 2rpx solid #eee;
|
||||||
box-shadow: 0 1px 8px #e3e1e1;
|
border-bottom: 2rpx solid #eee;
|
||||||
|
|
||||||
|
// background-color: #fff;
|
||||||
|
// box-shadow: 0 1px 8px #e3e1e1;
|
||||||
}
|
}
|
||||||
.item_image {
|
.item_image {
|
||||||
display: block;
|
display: block;
|
||||||
@@ -336,20 +382,29 @@ export default {
|
|||||||
// margin-left: 30rpx;
|
// margin-left: 30rpx;
|
||||||
// padding-bottom: 20rpx;
|
// padding-bottom: 20rpx;
|
||||||
}
|
}
|
||||||
|
.item_time {
|
||||||
|
color: #8e8d93;
|
||||||
|
margin-top: 14rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
}
|
||||||
.item_top {
|
.item_top {
|
||||||
// display: flex;
|
display: flex;
|
||||||
// align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
// line-height: 30rpx;
|
// line-height: 30rpx;
|
||||||
margin-top: 8rpx;
|
// margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
.right{
|
||||||
|
width: calc(100% - 186rpx);
|
||||||
}
|
}
|
||||||
.item_name {
|
.item_name {
|
||||||
font-size: 34rpx;
|
font-size: 32rpx;line-height: 26rpx;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
word-wrap: break-word; /* 避免长单词造成溢出 */
|
word-wrap: break-word; /* 避免长单词造成溢出 */
|
||||||
|
|
||||||
color: #333;
|
color: #1b1b1d;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 8rpx;
|
margin-bottom: 12rpx;
|
||||||
}
|
}
|
||||||
.item_content {
|
.item_content {
|
||||||
h1 {
|
h1 {
|
||||||
@@ -509,4 +564,40 @@ export default {
|
|||||||
// transform: rotate(45deg); /* 旋转45度，形成斜角 */
|
// transform: rotate(45deg); /* 旋转45度，形成斜角 */
|
||||||
// z-index: -1;
|
// z-index: -1;
|
||||||
// }
|
// }
|
||||||
|
.item_bottom {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.item_bottom {
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.drop {
|
||||||
|
margin: 0 10rpx;
|
||||||
|
}
|
||||||
|
text {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-section {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
display: block;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.hidden2{
|
||||||
|
line-height: 24px;
|
||||||
|
max-height: 48px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
:backState="2000"
|
:backState="2000"
|
||||||
></z-nav-bar>
|
></z-nav-bar>
|
||||||
<view class="doctors_module" :style="`top: ${42 + statusBarHeight}px;`">
|
<view class="doctors_module" :style="`top: ${42 + statusBarHeight}px;`">
|
||||||
<!-- <view class="tab-bar">
|
<view class="tab-bar">
|
||||||
<view
|
<view
|
||||||
class="tab-item left-tab"
|
class="tab-item left-tab"
|
||||||
:class="{ active: activeTab === 0 }"
|
:class="{ active: activeTab === 0 }"
|
||||||
@@ -22,7 +22,7 @@
|
|||||||
>
|
>
|
||||||
名医天地
|
名医天地
|
||||||
</view>
|
</view>
|
||||||
</view> -->
|
</view>
|
||||||
<template v-if="activeTab == 0">
|
<template v-if="activeTab == 0">
|
||||||
<view class="cateList flexbox" >
|
<view class="cateList flexbox" >
|
||||||
<common-sticky
|
<common-sticky
|
||||||
@@ -58,15 +58,14 @@
|
|||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
<!-- height: calc(100vh - ${activeTab==0?320:280}rpx);
|
|
||||||
margin-top: ${activeTab==0?280:180}rpx; -->
|
|
||||||
<scroll-view
|
<scroll-view
|
||||||
scroll-y="true"
|
scroll-y="true"
|
||||||
:scroll-top="scrollTop"
|
:scroll-top="scrollTop"
|
||||||
@scrolltolower="loadMore"
|
@scrolltolower="loadMore"
|
||||||
:style="`
|
:style="`
|
||||||
height: calc(100vh - ${activeTab==0?280:280}rpx);
|
height: calc(100vh - ${activeTab==0?320:280}rpx);
|
||||||
margin-top: ${activeTab==0?180:180}rpx;
|
margin-top: ${activeTab==0?260:180}rpx;
|
||||||
padding-bottom: 140rpx;`
|
padding-bottom: 140rpx;`
|
||||||
"
|
"
|
||||||
v-if="show == true"
|
v-if="show == true"
|
||||||
@@ -230,7 +229,10 @@ export default {
|
|||||||
changeActiveTab(e){
|
changeActiveTab(e){
|
||||||
this.activeTab=e
|
this.activeTab=e
|
||||||
if(e==0){
|
if(e==0){
|
||||||
|
if(!this.taihumedId){
|
||||||
this.taihumedId = this.tabsList[0].id;
|
this.taihumedId = this.tabsList[0].id;
|
||||||
|
}
|
||||||
|
|
||||||
this.getListData(this.taihumedId);
|
this.getListData(this.taihumedId);
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
|
|||||||
@@ -270,6 +270,11 @@ export default {
|
|||||||
url: "/pages/curriculum/index/index",
|
url: "/pages/curriculum/index/index",
|
||||||
type: "pageJump",
|
type: "pageJump",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "我的文章",
|
||||||
|
url: "/pages/articleList/index",
|
||||||
|
type: "pageJump",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "个人资料",
|
name: "个人资料",
|
||||||
url: "/pages/my/persData",
|
url: "/pages/my/persData",
|
||||||
|
|||||||
19
uni_modules/hb-comment/changelog.md
Normal file
19
uni_modules/hb-comment/changelog.md
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
## 1.2.2（2022-01-24）
|
||||||
|
* 去除示例项目中对uView的依赖，精简示例项目代码
|
||||||
|
* 修复bug
|
||||||
|
## 1.2.1（2022-01-24）
|
||||||
|
* 更新图标，由svg变为png，解决在App中图标不显示，且影响页面排版的问题
|
||||||
|
## 1.2.0（2021-11-18）
|
||||||
|
* 不再依赖uview，与1.1.4相比展开样式有调整，其他完全一致
|
||||||
|
## 1.1.4（2021-07-22）
|
||||||
|
* 降低弹出键盘的延时，显著提升流畅感
|
||||||
|
## 1.1.3（2021-07-22）
|
||||||
|
* 修改发布输入框，从原来的放在页面最底下改为弹出式
|
||||||
|
## 1.1.2（2021-07-21）
|
||||||
|
* 输入框聚焦前滚动到页面底部
|
||||||
|
## 1.1.1（2021-07-21）
|
||||||
|
* 修复了微信小程序中点赞删除等操作失败的问题
|
||||||
|
## 1.1.0（2021-07-20）
|
||||||
|
* 分离插件与接口逻辑
|
||||||
|
* 支持uni-modules，更方便升级等
|
||||||
|
* 修复一些问题
|
||||||
746
uni_modules/hb-comment/components/hb-comment/hb-comment.vue
Normal file
746
uni_modules/hb-comment/components/hb-comment/hb-comment.vue
Normal file
@@ -0,0 +1,746 @@
|
|||||||
|
<template>
|
||||||
|
<view class="hb-comment">
|
||||||
|
<!-- 阅读数-start -->
|
||||||
|
|
||||||
|
<!-- 阅读数-end -->
|
||||||
|
<!-- 阅读数下边那条线-start -->
|
||||||
|
<!-- <view class="seg_line_box">
|
||||||
|
<view class="seg_line"></view>
|
||||||
|
<view class="seg_dot"></view>
|
||||||
|
<view class="seg_line"></view>
|
||||||
|
</view> -->
|
||||||
|
<!-- 阅读数下边那条线-end -->
|
||||||
|
<!-- 评论主体-start -->
|
||||||
|
<view class="comment-list" v-if="commentData.comment.length != 0">
|
||||||
|
<!-- 评论主体-顶部数量及发表评论按钮-start -->
|
||||||
|
<view class="comment-num">
|
||||||
|
<view>共 {{ commentData.commentSize }} 条评论</view>
|
||||||
|
<view class="add-btn">
|
||||||
|
<button type="primary" size="mini" @click="commentInput">
|
||||||
|
发表评论
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 评论主体-顶部数量及发表评论按钮-end -->
|
||||||
|
<!-- 评论列表-start -->
|
||||||
|
<view class="comment-box" v-for="(item, index) in commentData.comment">
|
||||||
|
<view class="comment-box-item">
|
||||||
|
<view>
|
||||||
|
<image
|
||||||
|
:src="item.avatarUrl || emptyAvatar"
|
||||||
|
mode="aspectFill"
|
||||||
|
class="avatar"
|
||||||
|
></image>
|
||||||
|
</view>
|
||||||
|
<view class="comment-main">
|
||||||
|
<!-- 父评论体-start -->
|
||||||
|
<view class="comment-main-top">
|
||||||
|
<view class="nick-name-box">
|
||||||
|
<view class="comLogo com1" v-if="index == 0">沙发</view>
|
||||||
|
<view class="comLogo com2" v-if="index == 1">板凳</view>
|
||||||
|
<view class="comLogo com3" v-if="index == 2">地板</view>
|
||||||
|
<view class="comLogo com4" v-if="index > 2"
|
||||||
|
>{{ index + 1 }}楼</view
|
||||||
|
>
|
||||||
|
<view class="nick-name">{{ item.nickName }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="zan-box" @click="like(item.id)">
|
||||||
|
<span :class="item.hasLike ? 'isLike' : 'notLike'">{{
|
||||||
|
item.likeNum == 0 ? "抢首赞" : item.likeNum
|
||||||
|
}}</span>
|
||||||
|
<img
|
||||||
|
style="width: 14px; height: 14px"
|
||||||
|
v-if="!item.hasLike"
|
||||||
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAApVJREFUWEfFlz9oFEEUxr93SWEhFkIaBUljo4WgATEaiI0GwVLBQg2EzLd3hSBqLI2lRgWLY+ftSSQgggoWNv5pImLUwjQBg1goqCCIIBqwueSeTLg7Ln9Mcmdub7vdnZnvN9+8fe+toMWXtFgfDQGMjo52zM7OHgMwIyLTg4ODk41upG4A7/0OEbkPYGdFVEQuOOeuNQJRN4CqBvGw+3dm9kZEBsrCPSRf1gvRCIAFETPrjqLodZIkY2Z2SkQmnHMHUgMgOQ8fx3FvJpMZB/CDZEfqACEgi8XidwA/SW5uKkCN2AzJTYscmCTZ1VQA7/2AiNwSkefOuYNBLEmSnJnlATwgebypAKr6CMBRANdJng9i3vu8iORE5Mrc3NyTlQDM7HMul/tYO2bNX0GhUDhRKpXumtlvAPuiKJouOzBuZr117HyBU6sCqOpeAH0AhssiwyQvVwTjOO5va2s7vRaAGtCrJC+GOVUAVb1UTjDVDLd4URHJOuf8WsSWG5MkSbeZTYR3lc+4CpAkyUpWht3fI/m+UfEwL5/Pb2xvb59ZFkBV5zNchazsSBBeYPn/ABQKhZ5SqfQCwBTJXYuPoOkAqnoGwE0Ad0ieTB3Ae39bRPoBDJEcSR1AVd8C2CMifc65p6kCmJkkSfIHwAYAW0h+SxVAVXcDmDSzL1EUbasEc20eaGoQVuoIgMckj6QOoKo3AJwFMEJyqBUAIegOAegnOdYKgK8AtmYyma7aLjqVGPDebxeRDwB+AeggWUzVAVV1ABTAK5L7l+0HVPUTgM7Q7VQGhPJZe99oHagpw4dJPvsXQPixONeoyErzRGTKzB7W9hFLjiA8iOO4M7iw3hDZbLbq6pIeY73F6l1v1Zas3gXrHf8XhhNvMGSmtPYAAAAASUVORK5CYII="
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
style="width: 14px; height: 14px"
|
||||||
|
v-else
|
||||||
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfVJREFUWEfFl79LHEEUx7/vclr4g51TLFQQW9FNDFhFBDvjtcF0gXSp5eYuWJlUAW9NIP9BIFUEOxFtTKF2FrezKFgkkEBS3h4SAtHbJ6vu5W5d1F3cm20WZt+b7+e9mTfzlqD5Ic36SATw+OPJQP2ft+ABJwQ+VFIcJA0kEYBpVfcAehKIMqHoFISVBCI2wOS76mi9g76HxTLwZiqybzcuRGwAc7WWB/NGWIhBu440ZlIHmFitLRPzm+tC9EtJY1gjAP9VMtelEQC2kuJR6gCm5X4BsBAWImDdluJZqgBjH/4MZr3TYzB6IoRWmHnzJgDK0g+1KL4128SqgnD9x432yn5NSfE88L0VYPx9rS/jYR6EJTCPJxQNu60oKV77gw2Ai/Ly1/ZKRElx8c20XL4n0ZZpgvkbAKbl7gCYDax0ALREmjJAo2SbM9A+AKLPqmC8aNkD4bVOMwPEKNlFUdYGkAE9rUhjSxvA2YOOoaPF7t+6AH4qKUauHURt3AObSoq8NgAGyo4UJW0ABH5py9wnbQAAppq76HYfRLXOXmPg4BWdasoA7yuZm47sB0zL9Vvt0TQvI/bqc06pfzsS4KHlWgwUUgKwmWjdKRhvI1q5/0P+T8dZ9jILTjH31X9PlKuNKzppXxDMFeV/a0eUVPSuftoBzgHKR/ohZwAugwAAAABJRU5ErkJggg=="
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="comment-main-content">
|
||||||
|
{{
|
||||||
|
item.content.length > 60
|
||||||
|
? item.content.slice(0, 59)
|
||||||
|
: item.content
|
||||||
|
}}
|
||||||
|
<span v-if="item.content.length > 60">
|
||||||
|
{{ item.hasShowMore ? item.content.slice(59) : "..." }}
|
||||||
|
<span class="foot-btn" @click="showMore(item.id)">
|
||||||
|
{{ item.hasShowMore ? "收起" : "展开" }}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</view>
|
||||||
|
<view class="comment-main-foot">
|
||||||
|
<view class="foot-time">{{ item.createTime }}</view>
|
||||||
|
<view
|
||||||
|
class="foot-btn"
|
||||||
|
@click="reply(item.nickName, item.nickName, item.id)"
|
||||||
|
>回复</view
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="foot-btn"
|
||||||
|
v-if="item.owner"
|
||||||
|
@click="confirmDelete(item.id)"
|
||||||
|
>删除</view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
<!-- 父评论体-end -->
|
||||||
|
<!-- 子评论列表-start -->
|
||||||
|
<view class="comment-sub-box">
|
||||||
|
<view class="comment-sub-item" v-for="each in item.children">
|
||||||
|
<view>
|
||||||
|
<image
|
||||||
|
:src="each.avatarUrl || emptyAvatar"
|
||||||
|
mode="aspectFill"
|
||||||
|
class="avatar"
|
||||||
|
>
|
||||||
|
</image>
|
||||||
|
</view>
|
||||||
|
<view class="comment-main">
|
||||||
|
<view class="sub-comment-main-top">
|
||||||
|
<view class="nick-name">{{ each.nickName }}</view>
|
||||||
|
<view class="zan-box" @click="like(each.id)">
|
||||||
|
<span :class="each.hasLike ? 'isLike' : 'notLike'">{{
|
||||||
|
each.likeNum == 0 ? "抢首赞" : each.likeNum
|
||||||
|
}}</span>
|
||||||
|
<img
|
||||||
|
style="width: 14px; height: 14px"
|
||||||
|
v-if="!each.hasLike"
|
||||||
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAApVJREFUWEfFlz9oFEEUxr93SWEhFkIaBUljo4WgATEaiI0GwVLBQg2EzLd3hSBqLI2lRgWLY+ftSSQgggoWNv5pImLUwjQBg1goqCCIIBqwueSeTLg7Ln9Mcmdub7vdnZnvN9+8fe+toMWXtFgfDQGMjo52zM7OHgMwIyLTg4ODk41upG4A7/0OEbkPYGdFVEQuOOeuNQJRN4CqBvGw+3dm9kZEBsrCPSRf1gvRCIAFETPrjqLodZIkY2Z2SkQmnHMHUgMgOQ8fx3FvJpMZB/CDZEfqACEgi8XidwA/SW5uKkCN2AzJTYscmCTZ1VQA7/2AiNwSkefOuYNBLEmSnJnlATwgebypAKr6CMBRANdJng9i3vu8iORE5Mrc3NyTlQDM7HMul/tYO2bNX0GhUDhRKpXumtlvAPuiKJouOzBuZr117HyBU6sCqOpeAH0AhssiwyQvVwTjOO5va2s7vRaAGtCrJC+GOVUAVb1UTjDVDLd4URHJOuf8WsSWG5MkSbeZTYR3lc+4CpAkyUpWht3fI/m+UfEwL5/Pb2xvb59ZFkBV5zNchazsSBBeYPn/ABQKhZ5SqfQCwBTJXYuPoOkAqnoGwE0Ad0ieTB3Ae39bRPoBDJEcSR1AVd8C2CMifc65p6kCmJkkSfIHwAYAW0h+SxVAVXcDmDSzL1EUbasEc20eaGoQVuoIgMckj6QOoKo3AJwFMEJyqBUAIegOAegnOdYKgK8AtmYyma7aLjqVGPDebxeRDwB+AeggWUzVAVV1ABTAK5L7l+0HVPUTgM7Q7VQGhPJZe99oHagpw4dJPvsXQPixONeoyErzRGTKzB7W9hFLjiA8iOO4M7iw3hDZbLbq6pIeY73F6l1v1Zas3gXrHf8XhhNvMGSmtPYAAAAASUVORK5CYII="
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
style="width: 14px; height: 14px"
|
||||||
|
v-else
|
||||||
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfVJREFUWEfFl79LHEEUx7/vclr4g51TLFQQW9FNDFhFBDvjtcF0gXSp5eYuWJlUAW9NIP9BIFUEOxFtTKF2FrezKFgkkEBS3h4SAtHbJ6vu5W5d1F3cm20WZt+b7+e9mTfzlqD5Ic36SATw+OPJQP2ft+ABJwQ+VFIcJA0kEYBpVfcAehKIMqHoFISVBCI2wOS76mi9g76HxTLwZiqybzcuRGwAc7WWB/NGWIhBu440ZlIHmFitLRPzm+tC9EtJY1gjAP9VMtelEQC2kuJR6gCm5X4BsBAWImDdluJZqgBjH/4MZr3TYzB6IoRWmHnzJgDK0g+1KL4128SqgnD9x432yn5NSfE88L0VYPx9rS/jYR6EJTCPJxQNu60oKV77gw2Ai/Ly1/ZKRElx8c20XL4n0ZZpgvkbAKbl7gCYDax0ALREmjJAo2SbM9A+AKLPqmC8aNkD4bVOMwPEKNlFUdYGkAE9rUhjSxvA2YOOoaPF7t+6AH4qKUauHURt3AObSoq8NgAGyo4UJW0ABH5py9wnbQAAppq76HYfRLXOXmPg4BWdasoA7yuZm47sB0zL9Vvt0TQvI/bqc06pfzsS4KHlWgwUUgKwmWjdKRhvI1q5/0P+T8dZ9jILTjH31X9PlKuNKzppXxDMFeV/a0eUVPSuftoBzgHKR/ohZwAugwAAAABJRU5ErkJggg=="
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="comment-main-content">
|
||||||
|
{{
|
||||||
|
each.content.length > 60
|
||||||
|
? each.content.slice(0, 59)
|
||||||
|
: each.content
|
||||||
|
}}
|
||||||
|
<span v-if="each.content.length > 60">
|
||||||
|
{{ each.hasShowMore ? each.content.slice(59) : "..." }}
|
||||||
|
<span class="foot-btn" @click="showMore(each.id)">
|
||||||
|
{{ each.hasShowMore ? "收起" : "展开" }}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</view>
|
||||||
|
<view class="comment-main-foot">
|
||||||
|
<view class="foot-time">{{ each.createTime }}</view>
|
||||||
|
<view
|
||||||
|
class="foot-btn"
|
||||||
|
@click="reply(item.nickName, each.nickName, item.id)"
|
||||||
|
>
|
||||||
|
回复</view
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="foot-btn"
|
||||||
|
v-if="each.owner"
|
||||||
|
@click="confirmDelete(each.id)"
|
||||||
|
>删除
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 子评论列表-end -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 评论列表-end -->
|
||||||
|
</view>
|
||||||
|
<!-- 评论主体-end -->
|
||||||
|
<!-- 无评论-start -->
|
||||||
|
<view class="comment-none" v-else>
|
||||||
|
|
||||||
|
<image
|
||||||
|
:src="user.icon ? user.icon : '/static/images/avatar.png'"
|
||||||
|
style="
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
margin: 0 10rpx;
|
||||||
|
display: block;
|
||||||
|
border-radius: 80rpx;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
class="comment-btn"
|
||||||
|
@click="showInput = true"
|
||||||
|
v-if="!showInput"
|
||||||
|
>
|
||||||
|
写评论
|
||||||
|
</button>
|
||||||
|
<!-- background-color: #dadada59; -->
|
||||||
|
<!-- <view style="width: calc(100% - 120rpx);margin-right: 20rpx;position: relative;padding:20rpx 20rpx;border-radius: 10rpx;">
|
||||||
|
<view v-if="currentInputComment" style="position: absolute;top: 10rpx;"><text @click="currentInputComment=''">清空</text><text @click="sendComment">发送</text></view>
|
||||||
|
<textarea style="font-size: 26rpx;width: calc(100%);color: #333;"
|
||||||
|
v-model="currentInputComment"
|
||||||
|
|
||||||
|
auto-height
|
||||||
|
clear
|
||||||
|
maxlength="-1"
|
||||||
|
placeholder="写评论..."
|
||||||
|
placeholder-class=""
|
||||||
|
/>
|
||||||
|
|
||||||
|
</view> -->
|
||||||
|
<view
|
||||||
|
class="input-container"
|
||||||
|
:style="{ bottom: keyboardHeight + 'px' }"
|
||||||
|
v-if="showInput"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
v-model="commentContent"
|
||||||
|
class="comment-input"
|
||||||
|
placeholder="请输入评论..."
|
||||||
|
@focus="onInputFocus"
|
||||||
|
@blur="onInputBlur"
|
||||||
|
:auto-focus="showInput"
|
||||||
|
/>
|
||||||
|
<button class="send-btn" @click="sendComment">发送</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 暂无评论，<span @click="commentInput" style="color: #007AFF;">立即评论</span> -->
|
||||||
|
</view>
|
||||||
|
<!-- 无评论-end -->
|
||||||
|
<!-- 新增评论-start -->
|
||||||
|
<view class="comment-submit-box" v-if="submit" @click="closeInput">
|
||||||
|
<!-- 下边的click.stop.prevent用于让上边的click不传下去，以防点到下边的空白处触发closeInput方法 -->
|
||||||
|
<view
|
||||||
|
class="comment-add"
|
||||||
|
@click.stop.prevent="stopPrevent"
|
||||||
|
:style="'bottom:' + KeyboardHeight + 'px'"
|
||||||
|
>
|
||||||
|
<view class="comment-submit">
|
||||||
|
<view class="btn-click cancel" @click="closeInput">取消</view>
|
||||||
|
<view>
|
||||||
|
<view class="replayTag" v-show="showTag">
|
||||||
|
<view>回复在 {{ pUser }} 的评论下</view>
|
||||||
|
<view @click="tagClose" class="replyTagClose">×</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view class="btn-click" @click="add">发布</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<textarea
|
||||||
|
class="textarea"
|
||||||
|
v-model="commentReq.content"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
:adjust-position="false"
|
||||||
|
:show-confirm-bar="false"
|
||||||
|
@blur="blur"
|
||||||
|
@focus="focusOn"
|
||||||
|
:focus="focus"
|
||||||
|
maxlength="800"
|
||||||
|
></textarea>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 新增评论-end -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import text from 'uview-ui/libs/config/props/text';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "hb-comment",
|
||||||
|
props: {
|
||||||
|
cmData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
user: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
deleteTip: {
|
||||||
|
type: String,
|
||||||
|
default: () => {
|
||||||
|
return "操作不可逆，如果评论下有子评论，也将被一并删除，确认？";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
cmData: {
|
||||||
|
handler: function (newVal, oldVal) {
|
||||||
|
this.init(newVal);
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showInput: false, // 是否显示输入框
|
||||||
|
commentContent: '', // 评论内容
|
||||||
|
keyboardHeight: 0, // 软键盘高度
|
||||||
|
keyboardListener: null, // 软键盘监听事件
|
||||||
|
currentInputComment:'',
|
||||||
|
emptyAvatar:
|
||||||
|
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABF5JREFUWEfFl11oHFUUx//nbmKwxdJ9qFL7YPEhRJC2gljjF60WG0WsoNkWfSnZ7Jy7FVPF0AoKpmBFqyIG3Jk7G1iIQXHbBz+KbbGtRfBbMe2LseKjiVDoiqIhwZ0jV3fb3cnM7kQCuU+7M+ec/+9+nHPPEJZ50DLrY1EApVJp9fz8/BYRuZ2INgDYWJvAWRE5R0RnZmZmPh4ZGZlPOrFEAMVi8e4gCPYSUZ+IXGGFgiCYIaJpKyQi1yql1orIFgAXARxRSvm5XO67diBtAYwxRQCDAE4RUUkpdWxwcNCKLBiu665TSj0kIpqIbgTgMzO3gmgJYIz5CMB9AIaZ+bXGQMVi8RoRuZeI/lZKHc1ms3/U34+Pj6+cnZ3dC+AggGPMfH8cRCyAMUZqThlmPlwPUCgU0qlUyq7Kww1BrbjHzPsahYwx/QDK9hkzR2pFPjTGnAWwIexkjOkRkRIR3Rozo5Miskdr/VMIxE7mHDPXD+2l1wsA6nseBMHmfD7/dSjQOwB2tTlYC/bddd1blFJfARhj5lyjfxNA7bSfitpz3/d3iYgFaDuUUjeHM8AY8zSAV5VS9+RyudP1IE0Axpj3Aaxk5m1hFc/zPiWiO9uq/2dwiJn3h22NMScB/MnMOxYAjI6Orurq6rpgU0hrXYpw/hFAd0KAD5n5wbCt7/t7ROT1ubm5NUNDQ7/b95dWwHXd7Uqp452dnVcPDAxciACwDlclAbAFynGcdRGr2EtEnwdB0JfP5080ARhjDhLRbY7jbI0SMcZUAKxOAgDgN2ZOx8SxGfEiMz/bBOD7/lgQBCu01o/GOH4PYFNCgElmvinK1vf9X2xxchzHVtfLW2CMOQpgipmHYwBeBtBUaOJgRKSgtX48Js63AH5l5geaADzPe1cpddFxnHyM42YAXyZYAXt+epn557iVFJHzWuudYYDnlFJ9juPcESfi+35JRHa3gdjPzIfibIwxNtPe0Fq/EAZ4hIhcZl4T5+y67nql1CcA1kfZENFnrSZQ6ycqItKvtT4SBthIRJMdHR092WzW5nzk8H1/WEReiQHY4TjOB3G+nuf9qyEim7TW9r65fAjL5fKVlUrlPICXmPnNFquwWym1oFBZ+yAItubz+TMtAJ4gon3pdLo7k8nMNgHYP7ZeE5EWkbuYeaYx0NjY2HXValUDeApAV4zIJIADzPxe+H2hULg+lUp9U6sBl3qLprugXC6nKpXKF0R02nGcZ2wQ3/e3ichOEckQ0aoEWQDbsgF4a3p6eqLeH3qeN0FE3el0ujeTyVTrcaKuY1uIjIg8CaCfiLYnEW1hY4WPi8gEgMeY+e1G27iGxHYxtptZynGYmTPhgK1asqWEiBRfcAjDdMaYpYCIFW8LUMuM54nIsb3/YvbDXskiYtuzA6382n4X1CDWAnCSgNSFa98ETakcWbwWMytjzAoAPUEQ3JBKpXrs75r/VLVanVJK/VC7Uf9KGjfRCiQN9n/slh3gHz9i4jC+FVL5AAAAAElFTkSuQmCC",
|
||||||
|
commentData: null,
|
||||||
|
placeholder: "请输入评论",
|
||||||
|
commentReq: {
|
||||||
|
pId: null, // 评论父id
|
||||||
|
content: null, // 评论内容
|
||||||
|
},
|
||||||
|
pUser: null, // 标签-回复人
|
||||||
|
showTag: false, // 标签展示与否
|
||||||
|
focus: false, // 输入框自动聚焦
|
||||||
|
submit: false, // 弹出评论
|
||||||
|
KeyboardHeight: 0, // 键盘高度
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.keyboardListener = uni.onKeyboardHeightChange(res => {
|
||||||
|
this.keyboardHeight = res.height;
|
||||||
|
});
|
||||||
|
uni.onKeyboardHeightChange((res) => {
|
||||||
|
this.KeyboardHeight = res.height;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onUnload() {
|
||||||
|
// 移除监听
|
||||||
|
if (this.keyboardListener) {
|
||||||
|
uni.offKeyboardHeightChange(this.keyboardListener);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onInputFocus() {
|
||||||
|
// 可以在这里添加额外的逻辑，如滚动到输入框位置
|
||||||
|
},
|
||||||
|
|
||||||
|
// 输入框失去焦点
|
||||||
|
onInputBlur() {
|
||||||
|
// 如果输入框为空，点击空白处关闭输入框
|
||||||
|
if (!this.commentContent.trim()) {
|
||||||
|
this.showInput = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 发送评论
|
||||||
|
sendComment() {
|
||||||
|
if (this.commentContent.trim()) {
|
||||||
|
// 这里添加发送评论的逻辑
|
||||||
|
console.log('发送评论:', this.commentContent);
|
||||||
|
|
||||||
|
// 发送成功后清空并隐藏输入框
|
||||||
|
this.commentContent = '';
|
||||||
|
this.showInput = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 初始化评论
|
||||||
|
init(cmData) {
|
||||||
|
// for (var i in cmData.comment) {
|
||||||
|
// cmData.comment[i].hasShowMore = false;
|
||||||
|
// for (var j in cmData.comment[i].children) {
|
||||||
|
// cmData.comment[i].children[j].hasShowMore = false;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
this.commentData = cmData;
|
||||||
|
},
|
||||||
|
// 没用的方法，但不要删
|
||||||
|
stopPrevent() {},
|
||||||
|
// 回复评论
|
||||||
|
reply(pUser, reUser, pId) {
|
||||||
|
this.pUser = pUser;
|
||||||
|
this.commentReq.pId = pId;
|
||||||
|
if (reUser) {
|
||||||
|
this.commentReq.content = "@" + reUser + " ";
|
||||||
|
} else {
|
||||||
|
this.commentReq.content = "";
|
||||||
|
}
|
||||||
|
this.showTag = true;
|
||||||
|
this.commentInput();
|
||||||
|
},
|
||||||
|
// 删除评论前确认
|
||||||
|
confirmDelete(commentId) {
|
||||||
|
var that = this;
|
||||||
|
uni.showModal({
|
||||||
|
title: "警告",
|
||||||
|
content: that.deleteTip,
|
||||||
|
confirmText: "确认删除",
|
||||||
|
success: function (res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
that.$emit("del", commentId);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 新增评论
|
||||||
|
add() {
|
||||||
|
if (
|
||||||
|
this.commentReq.content == null ||
|
||||||
|
this.commentReq.content.length < 2
|
||||||
|
) {
|
||||||
|
uni.showToast({
|
||||||
|
title: "评论内容过短",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$emit("add", this.commentReq);
|
||||||
|
},
|
||||||
|
// 点赞评论
|
||||||
|
like(commentId) {
|
||||||
|
this.$emit("like", commentId);
|
||||||
|
},
|
||||||
|
// 新增完成
|
||||||
|
addComplete() {
|
||||||
|
this.commentReq.content = null;
|
||||||
|
this.tagClose();
|
||||||
|
this.closeInput();
|
||||||
|
},
|
||||||
|
// 点赞完成-本地修改点赞结果
|
||||||
|
likeComplete(commentId) {
|
||||||
|
for (var i in this.commentData.comment) {
|
||||||
|
if (this.commentData.comment[i].id == commentId) {
|
||||||
|
this.commentData.comment[i].hasLike
|
||||||
|
? this.commentData.comment[i].likeNum--
|
||||||
|
: this.commentData.comment[i].likeNum++;
|
||||||
|
this.commentData.comment[i].hasLike =
|
||||||
|
!this.commentData.comment[i].hasLike;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for (var j in this.commentData.comment[i].children) {
|
||||||
|
if (this.commentData.comment[i].children[j].id == commentId) {
|
||||||
|
this.commentData.comment[i].children[j].hasLike
|
||||||
|
? this.commentData.comment[i].children[j].likeNum--
|
||||||
|
: this.commentData.comment[i].children[j].likeNum++;
|
||||||
|
this.commentData.comment[i].children[j].hasLike =
|
||||||
|
!this.commentData.comment[i].children[j].hasLike;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 删除完成-本地删除评论
|
||||||
|
deleteComplete(commentId) {
|
||||||
|
for (var i in this.commentData.comment) {
|
||||||
|
for (var j in this.commentData.comment[i].children) {
|
||||||
|
if (this.commentData.comment[i].children[j].id == commentId) {
|
||||||
|
this.commentData.comment[i].children.splice(Number(j), 1);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.commentData.comment[i].id == commentId) {
|
||||||
|
this.commentData.comment.splice(Number(i), 1);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 展开评论
|
||||||
|
showMore(commentId) {
|
||||||
|
for (var i in this.commentData.comment) {
|
||||||
|
if (this.commentData.comment[i].id == commentId) {
|
||||||
|
this.commentData.comment[i].hasShowMore =
|
||||||
|
!this.commentData.comment[i].hasShowMore;
|
||||||
|
this.$forceUpdate();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for (var j in this.commentData.comment[i].children) {
|
||||||
|
if (this.commentData.comment[i].children[j].id == commentId) {
|
||||||
|
this.commentData.comment[i].children[j].hasShowMore =
|
||||||
|
!this.commentData.comment[i].children[j].hasShowMore;
|
||||||
|
this.$forceUpdate();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 输入框失去焦点
|
||||||
|
blur() {
|
||||||
|
this.focus = false;
|
||||||
|
},
|
||||||
|
// 输入框聚焦
|
||||||
|
focusOn() {
|
||||||
|
this.$emit("focusOn");
|
||||||
|
},
|
||||||
|
// 标签关闭
|
||||||
|
tagClose() {
|
||||||
|
this.showTag = false;
|
||||||
|
this.pUser = null;
|
||||||
|
this.commentReq.pId = null;
|
||||||
|
},
|
||||||
|
// 输入评论
|
||||||
|
commentInput() {
|
||||||
|
// TODO 调起键盘方法
|
||||||
|
this.submit = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.focus = true;
|
||||||
|
}, 50);
|
||||||
|
},
|
||||||
|
// 关闭输入评论
|
||||||
|
closeInput() {
|
||||||
|
this.focus = false;
|
||||||
|
this.submit = false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.hb-comment {
|
||||||
|
// padding: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-read {
|
||||||
|
font-size: 28rpx;
|
||||||
|
padding-left: 10rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seg_line_box {
|
||||||
|
display: flex;
|
||||||
|
height: 5rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 5rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seg_line {
|
||||||
|
width: 45%;
|
||||||
|
border-bottom: 1rpx solid #e1e1e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seg_dot {
|
||||||
|
width: 8%;
|
||||||
|
border-bottom: 5rpx dotted #dbdbdb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-num {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-box {
|
||||||
|
padding: 10rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-box-item {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-main {
|
||||||
|
padding-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-main-top {
|
||||||
|
width: 600rpx;
|
||||||
|
padding-top: 6rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-comment-main-top {
|
||||||
|
width: 510rpx;
|
||||||
|
padding-top: 6rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 70rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nick-name-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comLogo {
|
||||||
|
margin-right: 18rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 5rpx 15rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.com1 {
|
||||||
|
background-color: #d218b1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.com2 {
|
||||||
|
background-color: #f19c0b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.com3 {
|
||||||
|
background-color: #c8da85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.com4 {
|
||||||
|
background-color: #bfd0da;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nick-name {
|
||||||
|
color: #2d8cf0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.isLike {
|
||||||
|
font-size: 28rpx;
|
||||||
|
padding-right: 10rpx;
|
||||||
|
color: #2d8cf0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notLike {
|
||||||
|
font-size: 28rpx;
|
||||||
|
padding-right: 10rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-main-content {
|
||||||
|
padding: 10rpx 10rpx 10rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-main-foot {
|
||||||
|
display: flex;
|
||||||
|
font-size: 22rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.replayTag {
|
||||||
|
color: #909399;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
border: 1px solid #c8c9cc;
|
||||||
|
background-color: #f4f4f5;
|
||||||
|
border-radius: 3px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16rpx;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.replyTagClose {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 12px;
|
||||||
|
padding: 0 0 2px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.foot-btn {
|
||||||
|
padding-left: 10rpx;
|
||||||
|
color: #007aff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-sub-box {
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-sub-item {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-none {
|
||||||
|
padding: 20rpx 0;
|
||||||
|
width: 100%;
|
||||||
|
// text-align: center;
|
||||||
|
color: #999999;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-submit-box {
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
z-index: 9900;
|
||||||
|
left: 0;
|
||||||
|
top: var(--window-top);
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba($color: #000000, $alpha: 0.5);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-add {
|
||||||
|
position: fixed;
|
||||||
|
background-color: #ffffff;
|
||||||
|
width: 100%;
|
||||||
|
padding: 5rpx;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
transition: 0.3s;
|
||||||
|
-webkit-transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-click {
|
||||||
|
color: #007aff;
|
||||||
|
font-size: 28rpx;
|
||||||
|
padding: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel {
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textarea {
|
||||||
|
height: 100px;
|
||||||
|
padding: 16rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-submit {
|
||||||
|
padding: 5rpx 0rpx 0 0rpx;
|
||||||
|
border-bottom: 1px dashed #ddd;
|
||||||
|
width: calc(100%);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.comment-btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-radius: 20px;
|
||||||
|
text-align: left;
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-container {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition: bottom 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-input {
|
||||||
|
flex: 1;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 15px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-btn {
|
||||||
|
width: 60px;
|
||||||
|
height: 40px;
|
||||||
|
margin-left: 10px;
|
||||||
|
background-color: #007aff;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
83
uni_modules/hb-comment/package.json
Normal file
83
uni_modules/hb-comment/package.json
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
{
|
||||||
|
"id": "hb-comment",
|
||||||
|
"displayName": "评论列表，回复，点赞，删除，留言板",
|
||||||
|
"version": "1.2.2",
|
||||||
|
"description": "评论列表，回复，点赞，删除，留言板",
|
||||||
|
"keywords": [
|
||||||
|
"评论列表",
|
||||||
|
"评论回复",
|
||||||
|
"评论点赞",
|
||||||
|
"评论删除",
|
||||||
|
"留言板"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dr34-m/hb-comment",
|
||||||
|
"engines": {
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "插件不采集任何数据",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": ""
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "y",
|
||||||
|
"联盟": "y"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
261
uni_modules/hb-comment/readme.md
Normal file
261
uni_modules/hb-comment/readme.md
Normal file
@@ -0,0 +1,261 @@
|
|||||||
|
## 接口使用，包括点赞回复评论删除逻辑，建议参考示例项目进行二次封装；
|
||||||
|
|
||||||
|
## 本插件设计之初就是为小型项目设计，不支持分页，评论只有两级。如需改为多级或者需要支持分页，需要进行相当程度的改造。
|
||||||
|
|
||||||
|
直接使用
|
||||||
|
|
||||||
|
```html
|
||||||
|
<hb-comment ref="hbComment" @add="add" @del="del" @like="like" @focusOn="focusOn" :deleteTip="'确认删除？'"
|
||||||
|
:cmData="commentData" v-if="commentData"></hb-comment>
|
||||||
|
```
|
||||||
|
|
||||||
|
后端返回数据格式(给到前端后前端整合成树)：
|
||||||
|
|
||||||
|
```js
|
||||||
|
{
|
||||||
|
"readNumer": 193,
|
||||||
|
"commentList": [{
|
||||||
|
"id": 1, // 唯一主键
|
||||||
|
"owner": false, // 是否是拥有者，为true则可以删除，管理员全部为true
|
||||||
|
"hasLike": false, // 是否点赞
|
||||||
|
"likeNum": 2, // 点赞数量
|
||||||
|
"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797755537/0", // 评论者头像地址
|
||||||
|
"nickName": "超长昵称超长...", // 评论者昵称，昵称过长请在后端截断
|
||||||
|
"content": "啦啦啦啦", // 评论内容
|
||||||
|
"parentId": null, // 所属评论的唯一主键
|
||||||
|
"createTime": "2021-07-02 16:32:07" // 创建时间
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"owner": false,
|
||||||
|
"hasLike": false,
|
||||||
|
"likeNum": 2,
|
||||||
|
"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797761970/0",
|
||||||
|
"nickName": "寂寞无敌",
|
||||||
|
"content": "我是评论的评论",
|
||||||
|
"parentId": 1,
|
||||||
|
"createTime": "2021-07-02 17:05:50"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 4,
|
||||||
|
"owner": true,
|
||||||
|
"hasLike": true,
|
||||||
|
"likeNum": 1,
|
||||||
|
"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797763270/0",
|
||||||
|
"nickName": "name111",
|
||||||
|
"content": "评论啦啦啦啦啦啦啦啦啦啦",
|
||||||
|
"parentId": null,
|
||||||
|
"createTime": "2021-07-13 09:37:50"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 5,
|
||||||
|
"owner": false,
|
||||||
|
"hasLike": false,
|
||||||
|
"likeNum": 0,
|
||||||
|
"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797755537/0",
|
||||||
|
"nickName": "超长昵称超长...",
|
||||||
|
"content": "超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论",
|
||||||
|
"parentId": null,
|
||||||
|
"createTime": "2021-07-13 16:04:35"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 13,
|
||||||
|
"owner": false,
|
||||||
|
"hasLike": false,
|
||||||
|
"likeNum": 0,
|
||||||
|
"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797755537/0",
|
||||||
|
"nickName": "超长昵称超长...",
|
||||||
|
"content": "@寂寞无敌 你怕不是个大聪明",
|
||||||
|
"parentId": 1,
|
||||||
|
"createTime": "2021-07-14 11:01:23"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
假设后端返回数据为`res`，则`commentData`可以这样得到
|
||||||
|
|
||||||
|
```js
|
||||||
|
this.commentData = {
|
||||||
|
"readNumer": res.readNumer,
|
||||||
|
"commentSize": res.commentList.length,
|
||||||
|
"comment": this.getTree(res.commentList)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
其中`getTree`方法如下
|
||||||
|
|
||||||
|
```js
|
||||||
|
getTree(data) {
|
||||||
|
let result = [];
|
||||||
|
let map = {};
|
||||||
|
data.forEach(item => {
|
||||||
|
map[item.id] = item;
|
||||||
|
});
|
||||||
|
data.forEach(item => {
|
||||||
|
let parent = map[item.parentId];
|
||||||
|
if (parent) {
|
||||||
|
(parent.children || (parent.children = [])).push(item);
|
||||||
|
} else {
|
||||||
|
result.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
发布弹框借鉴了[@tenniswill](https://ext.dcloud.net.cn/publisher?id=74739)先生[评论内容发布组件](https://ext.dcloud.net.cn/plugin?id=1302)的思路，同时参照其评论区对代码作了优化
|
||||||
|
|
||||||
|
## 后端的Python实现核心代码，可以参考
|
||||||
|
|
||||||
|
* mysql结构，还有一张userlist表没有列出，请自己发挥
|
||||||
|
|
||||||
|
```sql
|
||||||
|
-- ----------------------------
|
||||||
|
-- Table structure for comment
|
||||||
|
-- ----------------------------
|
||||||
|
DROP TABLE IF EXISTS `comment`;
|
||||||
|
CREATE TABLE `comment` (
|
||||||
|
`id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
|
||||||
|
`article_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '所属文章id',
|
||||||
|
`comment_user_id` int(10) UNSIGNED NULL DEFAULT NULL COMMENT '评论人id',
|
||||||
|
`parent_id` int(10) UNSIGNED NULL DEFAULT NULL COMMENT '所属评论id，主评论为null',
|
||||||
|
`content` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL COMMENT '评论内容',
|
||||||
|
`like` text CHARACTER SET utf8 COLLATE utf8_general_ci NULL COMMENT '点赞(存储点赞人id数组)',
|
||||||
|
`status` tinyint(3) UNSIGNED NULL DEFAULT 0 COMMENT '状态，0-未审核，1-展现，2-审核驳回，3-已删除',
|
||||||
|
`create_time` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
`update_time` datetime(0) NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP(0),
|
||||||
|
PRIMARY KEY (`id`) USING BTREE
|
||||||
|
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '评论' ROW_FORMAT = Compact;
|
||||||
|
|
||||||
|
-- ----------------------------
|
||||||
|
-- Table structure for article_read
|
||||||
|
-- ----------------------------
|
||||||
|
DROP TABLE IF EXISTS `article_read`;
|
||||||
|
CREATE TABLE `article_read` (
|
||||||
|
`id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
|
||||||
|
`article_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '所属文章id',
|
||||||
|
`read_num` int(10) UNSIGNED NULL DEFAULT 1 COMMENT '阅读数',
|
||||||
|
`create_time` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
`update_time` datetime(0) NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP(0),
|
||||||
|
PRIMARY KEY (`id`) USING BTREE,
|
||||||
|
UNIQUE INDEX `unionKey`(`article_id`) USING BTREE COMMENT '文章唯一'
|
||||||
|
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '阅读数' ROW_FORMAT = Compact;
|
||||||
|
```
|
||||||
|
|
||||||
|
* python核心代码，其中`CS`为项目中封装的一个通用方法，请自己发挥并替换
|
||||||
|
|
||||||
|
```python
|
||||||
|
# 提交评论
|
||||||
|
def comment_article(articleId, userId, pId, content):
|
||||||
|
if userId is None:
|
||||||
|
raise CS.CustomException("请先登录", 500)
|
||||||
|
if pId == 'null':
|
||||||
|
pId = None
|
||||||
|
conn = CS.getCoon()
|
||||||
|
cursor = conn.cursor()
|
||||||
|
cursor.execute("insert into comment(article_id,comment_user_id,parent_id,content,status,`like`) values(%s,%s,%s,%s,1,'[]')",
|
||||||
|
(articleId, userId, pId, content))
|
||||||
|
conn.commit()
|
||||||
|
cursor.close()
|
||||||
|
conn.close()
|
||||||
|
return CS.ResultMap(None)
|
||||||
|
|
||||||
|
|
||||||
|
# 点赞评论
|
||||||
|
def like_comment(commentId, userId):
|
||||||
|
if userId is None:
|
||||||
|
raise CS.CustomException("请先登录", 500)
|
||||||
|
conn = CS.getCoon()
|
||||||
|
cursor = conn.cursor()
|
||||||
|
cursor.execute("select `like` from comment where id = %s", (commentId))
|
||||||
|
currentLike_json = cursor.fetchall()[0][0]
|
||||||
|
currentLike = json.loads(currentLike_json)
|
||||||
|
if userId in currentLike:
|
||||||
|
currentLike.remove(userId)
|
||||||
|
else:
|
||||||
|
currentLike.append(userId)
|
||||||
|
currentLike_json = json.dumps(currentLike)
|
||||||
|
cursor.execute("update comment set `like` = %s where id = %s", (currentLike_json, commentId))
|
||||||
|
conn.commit()
|
||||||
|
cursor.close()
|
||||||
|
conn.close()
|
||||||
|
return CS.ResultMap(None)
|
||||||
|
|
||||||
|
|
||||||
|
# 删除评论
|
||||||
|
def delete_comment(commentId, userId):
|
||||||
|
if userId is None:
|
||||||
|
raise CS.CustomException("请先登录", 500)
|
||||||
|
conn = CS.getCoon()
|
||||||
|
cursor = conn.cursor()
|
||||||
|
# userId = 1为超级管理员
|
||||||
|
if userId != 1:
|
||||||
|
cursor.execute("select comment_user_id from comment where id = %s and status = 1",(commentId))
|
||||||
|
commentUserIdRst = cursor.fetchall()
|
||||||
|
if str(commentUserIdRst) == '()':
|
||||||
|
raise CS.CustomException("评论不存在或已删除", 500)
|
||||||
|
if userId != commentUserIdRst[0][0]:
|
||||||
|
cursor.close()
|
||||||
|
conn.close()
|
||||||
|
raise CS.CustomException("无删除权限", 500)
|
||||||
|
cursor.execute("update comment set status=3 where id = %s or parent_id = %s", (commentId, commentId))
|
||||||
|
conn.commit()
|
||||||
|
cursor.close()
|
||||||
|
conn.close()
|
||||||
|
return CS.ResultMap(None)
|
||||||
|
|
||||||
|
|
||||||
|
# 获取评论列表
|
||||||
|
def get_article_comment(articleId, userId):
|
||||||
|
conn = CS.getCoon()
|
||||||
|
cursor = conn.cursor()
|
||||||
|
cursor.execute(
|
||||||
|
'''select
|
||||||
|
c.id,
|
||||||
|
c.comment_user_id,
|
||||||
|
u.avatar_url,
|
||||||
|
u.nick_name,
|
||||||
|
c.content,
|
||||||
|
c.like,
|
||||||
|
c.parent_id,
|
||||||
|
c.create_time
|
||||||
|
from comment c
|
||||||
|
left join userlist u on c.comment_user_id = u.id
|
||||||
|
where article_id = %s and status = 1''', (articleId))
|
||||||
|
commentList = cursor.fetchall()
|
||||||
|
cursor.execute("insert into article_read(article_id) values(%s) on DUPLICATE KEY UPDATE read_num=read_num+1", (articleId))
|
||||||
|
conn.commit()
|
||||||
|
cursor.execute("select read_num from article_read where article_id = %s", (articleId))
|
||||||
|
readNum = cursor.fetchall()[0][0]
|
||||||
|
cursor.close()
|
||||||
|
conn.close()
|
||||||
|
commentResult = []
|
||||||
|
for comment in commentList:
|
||||||
|
like = json.loads(comment[5])
|
||||||
|
commentEach = {
|
||||||
|
"id": comment[0],
|
||||||
|
"owner": False,
|
||||||
|
"hasLike": False,
|
||||||
|
"likeNum": len(like),
|
||||||
|
"avatarUrl": comment[2],
|
||||||
|
"nickName": "用户" if comment[3] == None else comment[3],
|
||||||
|
"content": comment[4],
|
||||||
|
"parentId": comment[6],
|
||||||
|
"createTime": time.strftime("%Y-%m-%d %H:%M:%S", datetime.datetime.timetuple(comment[7]))
|
||||||
|
}
|
||||||
|
if len(commentEach['nickName']) > 7:
|
||||||
|
commentEach['nickName'] = commentEach['nickName'][0:6] + '...'
|
||||||
|
if userId is not None:
|
||||||
|
# userId = 1为超级管理员
|
||||||
|
if userId == comment[1] or userId == 1:
|
||||||
|
commentEach["owner"] = True
|
||||||
|
if userId in like:
|
||||||
|
commentEach["hasLike"] = True
|
||||||
|
commentResult.append(commentEach)
|
||||||
|
result = {
|
||||||
|
"readNumer": readNum,
|
||||||
|
"commentList": commentResult
|
||||||
|
}
|
||||||
|
return CS.ResultMap(result)
|
||||||
|
```
|
||||||
@@ -7,7 +7,7 @@
|
|||||||
<view class='toolbar' @tap="format">
|
<view class='toolbar' @tap="format">
|
||||||
<!-- <view class="iconfont icon-undo" @tap="undo"></view>
|
<!-- <view class="iconfont icon-undo" @tap="undo"></view>
|
||||||
<view class="iconfont icon-redo" @tap="redo"></view> -->
|
<view class="iconfont icon-redo" @tap="redo"></view> -->
|
||||||
<view class="iconfont icon-charutupian" @tap="insertImage"></view>
|
<!-- <view class="iconfont icon-charutupian" @tap="insertImage"></view> -->
|
||||||
<!-- <view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-font-size"
|
<!-- <view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-font-size"
|
||||||
data-name="fontSize" data-value="24px"></view> -->
|
data-name="fontSize" data-value="24px"></view> -->
|
||||||
<view :class="formats.color? 'ql-active' : ''" class="iconfont icon-zitiyanse" data-name="color" :data-value="formats.color">
|
<view :class="formats.color? 'ql-active' : ''" class="iconfont icon-zitiyanse" data-name="color" :data-value="formats.color">
|
||||||
@@ -393,11 +393,18 @@
|
|||||||
.toolbar {
|
.toolbar {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 10rpx;
|
||||||
position: fixed;
|
padding-bottom: 4rpx;
|
||||||
|
position: -webkit-sticky; /* Safari */
|
||||||
|
position: sticky;
|
||||||
|
top: -1px; /* 距离顶部的距离 */
|
||||||
|
z-index: 10; /* 确保在其他内容之上 */
|
||||||
|
background-color: #d8e6ff;
|
||||||
|
border-bottom: 1rpx solid #5188e5;
|
||||||
|
/* position: fixed;
|
||||||
bottom: 10upx;
|
bottom: 10upx;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0; */
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user