tijiao

2025-08-11 16:18:40 +08:00
parent 37657fa7d2
commit 54e657f53d
12 changed files with 1966 additions and 859 deletions
--- a/pages.json
+++ b/pages.json
@@ -88,7 +88,7 @@
 			"path": "pages/articleList/article",
 			"style": {
 				"navigationBarTitleText": "文章",
-				"enablePullDownRefresh": true, // 禁止下拉刷新
+				
 				"app-plus": {
 					"bounce": "none",
 					"titleNView": false,
--- a/pages/articleList/PrecisionImageGrid.vue
+++ b/pages/articleList/PrecisionImageGrid.vue
@@ -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>
+  
--- a/pages/articleList/article.vue
+++ b/pages/articleList/article.vue
--- a/pages/articleList/common-editor.vue
+++ b/pages/articleList/common-editor.vue
@@ -1,5 +1,6 @@
 <template>
    <view class="richtext" style="height: 100%;">
+       
        <piaoyiEditor :height="height" :placeholder="placeholder" :values="values"  @changes="saveContens" :readOnly="readOnly" :photoUrl="photoUrl" :api="api" :name="name"/>

        
@@ -43,6 +44,8 @@
        methods: {
            saveContens(e) {
                this.txt = e.html
+                this.$emit('saveContens', this.txt)
+
            }
        },
        onShareAppMessage(res) {
--- a/pages/articleList/index.vue
+++ b/pages/articleList/index.vue
@@ -4,18 +4,28 @@
      <template v-slot:right>
        <view class="top_right" @tap="createFolder">
          <uni-icons type="folder-add" size="17" color="#fff"></uni-icons>
-          <text>新建文章</text>
+          <text>发布文章</text>
        </view>
      </template>
    </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-y="true"
      :scroll-top="scrollTop"
      @scrolltolower="loadMore"
      style="
-        height: calc(100vh - 220rpx);
-        margin-top: 100rpx;
+        height: calc(100vh - 180rpx);
+        margin-top: 65rpx;
        padding-bottom: 120rpx;
      "
      v-if="show == true"
@@ -43,41 +53,58 @@
              ></image> -->

              <view class="item_right">
-                <view style="display: flex; align-items: center">
-                  <text class="card_label" v-if="statusTitle" :style="`background-color:${statusColor} ;`">{{ statusTitle }}</text>
-                  <text class="item_time">{{ item.createTime }}</text></view
+                <view class="item_top"
+                  >
+                  <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_name">{{ item.title }}</view>
-                  <rich-text
-                    class="item_content"
-                    :nodes="item.information"
-                  ></rich-text>
-                  <!-- <rich-text
-                    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"
+                  <view class="item_time item_bottom">
+                    <view class="left">
+                      <view><text>{{ item.readCount?item.readCount:0 }}</text>阅读</view
+                      ><text class="drop">·</text>
+                      <view><text>{{ item.likeCount?item.likeCount:0 }}</text>点赞</view
+                      ><text class="drop">·</text>
+                      <view><text>{{ item.commentCount?item.commentCount:0 }}</text>评论</view></view
                    >
-                  </u-upload>
+
+                    <view style="color: #5188e5"
+                      ><uni-icons
+                        type="redo-filled"
+                        size="18"
+                        color="#5188e5"
+                      ></uni-icons
+                      >分享</view
+                    >
+                  </view> 
                  </view>
                 
-                <view class="list_item_bt">
+                </view>
+
+                <!-- <view class="list_item_bt">
                  <text class="list_item_study" v-if="taihumedId == 0"
                    >编辑文章</text
                  >
                  <text class="list_item_study" v-else>文章详情</text>
-                </view>
+                </view> -->
                <!-- <text class="item_con">{{ item.taihuTalent.map(talent => talent.name).join(' ') }}</text> -->
              </view>
            </view>
@@ -96,7 +123,9 @@

 <script>
 import $http from "@/config/requestConfig.js";
+import PrecisionImageGrid from "./PrecisionImageGrid.vue";
 export default {
+  components: { PrecisionImageGrid },
  data() {
    return {
      tabsList: [],
@@ -108,8 +137,8 @@ export default {
      limit: 10,
      courseName: "",
      taihumedId: null,
-      statusTitle: '',
-      statusColor: '',
+      statusTitle: "",
+      statusColor: "",

      timer: null,
      showText: false,
@@ -140,9 +169,24 @@ export default {
    this.getTabData();
  },
  onShow() {
-    this.getListData(this.taihumedId);
+    // this.getListData(this.taihumedId);
  },
  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() {
      uni.navigateTo({
        url: `/pages/articleList/article?navTitle=创建文章&title=创建文章&type=add`,
@@ -174,15 +218,12 @@ export default {
      // .then(res=> {
      // if (res.list&&res.list.length>0) {
      this.tabsList = [
-        { id: 0, title: "草稿箱", statusTitle: '' },
-        { id: 1, title: "待审核",statusTitle: '待审核',color:'#f59442'  },
-        { id: 3, title: "质量检测中",statusTitle: '检测中' ,color:'#22be98' },
-        { id: 4, title: "已通过",statusTitle: '已通过' ,color:'#22be98' },
-        { id: 2, title: "未通过",statusTitle: '未通过',color:"#e78084" },
+        { id: 1, title: "已发布", statusTitle: "" },
+        { id: 0, title: "发布失败", statusTitle: "发布失败", color: "#f59442" },
      ];
      this.taihumedId = this.tabsList[0].id;
-      this.statusTitle = '';
-      this.statusColor = '';
+      this.statusTitle = "";
+      this.statusColor = "";
      this.getListData(this.taihumedId);
      // }
      // });
@@ -202,10 +243,12 @@ export default {
      });
      this.$http
        .request({
-          url: "common/articleList/articleRecordsList",
+          url: "common/taihuTalentArticle/myArticleList",
          method: "POST",
          data: {
-            state: taihumedId,
+            current: this.current,
+            limit: this.limit,
+            showFlag: taihumedId,
          },
          header: {
            "Content-Type": "application/json",
@@ -213,39 +256,38 @@ export default {
        })
        .then((res) => {
          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 {
                  ...e,
-              fileList1: e.img
-                ? e.img.split(",").map((image, i) => ({
-                    uid: i, // 假设 id 是唯一标识符
-                    name: i, // 文件名
-                    status: "done", // 状态
-                    url: image, // 文件 URL
-                  }))
-                : [],
+                  fileList1: e.img ? e.img.split(",") : [],
                };
-          });
-          this.count = this.list.length; //总数
-          let length = this.list.length;
-          if (res.medicalRecordsList && 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.pageRes.records];
-            // 	this.current += 1;  //更新页码
-            // 	//显示提示语
-            // 	this.showText = true;
+              }),
+            ];
+            this.current += 1; //更新页码
+            //显示提示语
+            this.showText = true;

-            // 	if(this.current==2||type){
-            // 		this.scrollTop = 0
-            // 		this.$nextTick(() => {
-            // 			this.scrollTop = 0.1;  // 确保触发滚动
-            // 		})
-            // 	}
+            if (this.current == 2 || type) {
+              this.scrollTop = 0;
+              this.$nextTick(() => {
+                this.scrollTop = 0.1; // 确保触发滚动
+              });
+            }
          } else {
            this.show = false;
            this.null_text = "暂无数据";
@@ -308,21 +350,25 @@ export default {
 .content {
  height: 100%;
  overflow: auto;
-  background-color: #fff;
+  background-color: #fff !important;
 }
 .doctors_list {
-  margin: 0 20rpx 20rpx;
+  margin: 0 30rpx 30rpx;
 }
 .doctors_item {
  // border: 1rpx solid $themeColor;
-  border-radius: 15rpx;
-  margin-bottom: 20rpx;
-  padding: 12rpx 30rpx 60rpx;
+  // border-radius: 15rpx;
+  // margin-bottom: 20rpx;
+  padding: 30rpx 0;
+  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
-  background-color: #fff;
-  box-shadow: 0 1px 8px #e3e1e1;
+  border-top: 2rpx solid #eee;
+  border-bottom: 2rpx solid #eee;
+
+  // background-color: #fff;
+  // box-shadow: 0 1px 8px #e3e1e1;
 }
 .item_image {
  display: block;
@@ -336,20 +382,29 @@ export default {
  //   margin-left: 30rpx;
  // padding-bottom: 20rpx;
 }
+.item_time {
+  color: #8e8d93;
+  margin-top: 14rpx;
+  line-height: 30rpx;
+}
 .item_top {
-  //   display: flex;
-  //   align-items: center;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
  // line-height: 30rpx;
-  margin-top: 8rpx;
+  // margin-top: 8rpx;
+}
+.right{
+  width: calc(100% - 186rpx);
 }
 .item_name {
-  font-size: 34rpx;
+  font-size: 32rpx;line-height: 26rpx;
  white-space: pre-wrap;
  word-wrap: break-word; /* 避免长单词造成溢出 */

-  color: #333;
+  color: #1b1b1d;
  font-weight: bold;
-  margin-bottom: 8rpx;
+  margin-bottom: 12rpx;
 }
 .item_content {
  h1 {
@@ -509,4 +564,40 @@ export default {
 //   transform: rotate(45deg); /* 旋转45度，形成斜角 */
 //   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>
--- a/pages/doctors/index.vue
+++ b/pages/doctors/index.vue
@@ -7,7 +7,7 @@
      :backState="2000"
    ></z-nav-bar>
    <view class="doctors_module" :style="`top: ${42 + statusBarHeight}px;`">
-      <!-- <view class="tab-bar">
+      <view class="tab-bar">
        <view
          class="tab-item left-tab"
          :class="{ active: activeTab === 0 }"
@@ -22,7 +22,7 @@
        >
          名医天地
        </view>
-      </view> -->
+      </view>
      <template v-if="activeTab == 0">
        <view class="cateList flexbox" >
          <common-sticky
@@ -58,15 +58,14 @@
        </view>
      </template>
    </view>
-    <!-- height: calc(100vh - ${activeTab==0?320:280}rpx);
-          margin-top: ${activeTab==0?280:180}rpx; -->
+  
      <scroll-view
        scroll-y="true"
        :scroll-top="scrollTop"
        @scrolltolower="loadMore"
        :style="`
-          height: calc(100vh - ${activeTab==0?280:280}rpx);
-          margin-top: ${activeTab==0?180:180}rpx;
+          height: calc(100vh - ${activeTab==0?320:280}rpx);
+          margin-top: ${activeTab==0?260:180}rpx;
          padding-bottom: 140rpx;`
        "
        v-if="show == true"
@@ -230,7 +229,10 @@ export default {
 	changeActiveTab(e){
 this.activeTab=e
 if(e==0){
+  if(!this.taihumedId){
    	this.taihumedId = this.tabsList[0].id;
+  }
+
            this.getListData(this.taihumedId);
 }
 else{
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -270,6 +270,11 @@ export default {
          url: "/pages/curriculum/index/index",
          type: "pageJump",
        },
+        {
+          name: "我的文章",
+          url: "/pages/articleList/index",
+          type: "pageJump",
+        },
        {
          name: "个人资料",
          url: "/pages/my/persData",
--- a/uni_modules/hb-comment/changelog.md
+++ b/uni_modules/hb-comment/changelog.md
@@ -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，更方便升级等
+* 修复一些问题
--- a/uni_modules/hb-comment/components/hb-comment/hb-comment.vue
+++ b/uni_modules/hb-comment/components/hb-comment/hb-comment.vue
@@ -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>
--- a/uni_modules/hb-comment/package.json
+++ b/uni_modules/hb-comment/package.json
@@ -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"
+        }
+      }
+    }
+  }
+}
--- a/uni_modules/hb-comment/readme.md
+++ b/uni_modules/hb-comment/readme.md
@@ -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)
+```
--- a/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue
+++ b/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue
@@ -7,7 +7,7 @@
 					<view class='toolbar' @tap="format">
 						<!-- <view class="iconfont icon-undo" @tap="undo"></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"
 							data-name="fontSize" data-value="24px"></view> -->
 						<view :class="formats.color? 'ql-active' : ''" class="iconfont icon-zitiyanse" data-name="color" :data-value="formats.color">
@@ -393,11 +393,18 @@
 	.toolbar {
 		box-sizing: border-box;
 		border-bottom: 0;
-		margin-bottom: 0;
-		position: fixed;
+		margin-bottom: 10rpx;
+		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;
 		left: 0;
-		right: 0;
+		right: 0; */
 		
 	}