devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp实现一个评论区_uniapp 代码review

作者：小丑西瓜9 | 2024-04-28 06:34:55

赞

踩

uniapp 代码review

目录

1.  评论区效果

2. 代码实现

3. 封装组件代码index.vue

4. 组件代码

5.组件的使用

6. 评论区数据格式

1.  评论区效果

还是话不多说，先上效果图

2. 代码实现

分父级（主评论）和子级（子评论）

自己回复的评论可以进行crud,  对于他人的评论仅仅只能评论

所以我们需要画出大致的布局，先上组件代码Index.vue代码，再上comment.vue

3. 封装组件代码index.vue
  1. <template>
  2.   <view class="comment-eg">
  3.     <view class="comment-space"></view>
  4.     <hb-comment
  5.       ref="hbComment"
  6.       @share="share"
  7.       @fold="fold"
  8.       @add="add"
  9.       @del="del"
  10.       @like="like"
  11.       @focusOn="focusOn"
  12.       :deleteTip="'确认删除？'"
  13.       :cmData="commentData"
  14.       v-if="commentData"
  15.     ></hb-comment>
  16.   </view>
  17. </template>
  18.  
  19. <script>
  20. import hbComment from "./hb-comment.vue";
  21. import { getCommentList } from "../../apis/metaUniverse";
  22. import {
  23.   addMessageData,
  24.   delMessageData,
  25.   likeMessageData,
  26. } from "../../apis/index";
  27. export default {
  28.   name: "comment-eg",
  29.   data() {
  30.     return {
  31.       scriptCode: "",
  32.       // nickName: '',
  33.       userId: "",
  34.       commentData: null,
  35.       reqFlag: false, // 请求标志，防止重复操作，true表示请求中
  36.       foldList: [], // 不需要折叠的id集合
  37.       // userInfo: {},
  38.     };
  39.   },
  40.   props: {
  41.     articleId: {
  42.       type: String,
  43.       default: () => {
  44.         return null;
  45.       },
  46.     },
  47.   },
  48.   watch: {
  49.     articleId: {
  50.       handler: function (newVal, oldVal) {
  51.         if (newVal) {
  52.           console.log("触发监听", newVal);
  53.           this.scriptCode = newVal;
  54.           this.foldList = [];
  55.           this.getComment(newVal);
  56.         }
  57.       },
  58.       immediate: true,
  59.     },
  60.   },
  61.   created() {
  62.     this.userId = uni.getStorageSync("userId") || "";
  63.   },
  64.   onShow() {
  65.   },
  66.   methods: {
  67.     // 登录校验
  68.     checkLogin() {
  69.       // TODO 此处填写登录校验逻辑
  70.       if (true) {
  71.         return true;
  72.       } else {
  73.         uni.showModal({
  74.           title: "提示",
  75.           content: "请先登录",
  76.           confirmText: "前往登录",
  77.           success: function (res) {
  78.             if (res.confirm) {
  79.               uni.redirectTo({
  80.                 url: "/pages/login/login",
  81.               });
  82.             }
  83.           },
  84.         });
  85.         return false;
  86.       }
  87.     },
  88.     share() {
  89.       console.log("点击转发");
  90.       this.$emit("shareFriend");
  91.     },
  92.     // 输入框聚焦
  93.     focusOn() {
  94.       // this.checkLogin();
  95.     },
  96.     // 获取评论
  97.     getComment(articleId) {
  98.       // TODO 接入真实接口
  99.       let sData = {
  100.         scriptCode: this.scriptCode,
  101.         userId: this.userId,
  102.       };
  103.  
  104.       getCommentList(sData).then((res) => {
  105.         let _this = this;
  106.         res.data.forEach((item) => {
  107.           item.isFold =
  108.             !_this.foldList.includes(item.id) && item.children.length > 1
  109.               ? true
  110.               : false;
  111.         });
  112.         // console.log('评论结果', res.data)
  113.         _this.commentData = {
  114.           readNumer: res.data.length || 0,
  115.           commentSize: res.data.length || 0,
  116.           comment: res.data || [],
  117.         };
  118.         console.log("commentSize", _this.commentData.commentSize);
  119.       });
  120.  
  121.       // 下边假装请求成功
  122.  
  123.     },
  124.     fold(id) {
  125.       this.foldList.push(id);
  126.       console.log("需要展开的id合集", this.foldList);
  127.       const foldIndex = this.commentData.comment.findIndex(
  128.         (item) => item.id === id
  129.       );
  130.       console.log("展开评论222", foldIndex);
  131.       this.$set(this.commentData.comment[foldIndex], "isFold", false);
  132.       console.log("this.commentData", this.commentData.comment);
  133.     },
  134.     // 新增评论
  135.     add(req) {
  136.       req.userId = this.userId;
  137.       req.scriptCode = this.scriptCode;
  138.       console.log("新增评论接收到的结果", req);
  139.       if (this.reqFlag) {
  140.         return;
  141.       }
  142.       this.reqFlag = true;
  143.       addMessageData(req).then((res) => {
  144.         if (res.data) {
  145.           uni.showToast({
  146.             title: "评论成功",
  147.             icon: "none",
  148.           });
  149.           this.reqFlag = false;
  150.           this.$refs.hbComment.addComplete();
  151.           this.getComment();
  152.         } else {
  153.           this.reqFlag = false;
  154.         }
  155.       });
  156.       // TODO 接入真实接口
  157.     },
  158.     // 点赞评论
  159.     like(comment) {
  160.       if (this.reqFlag) {
  161.         return;
  162.       }
  163.       this.reqFlag = true;
  164.       console.log("点赞的参数", comment);
  165.       let sData = {
  166.         scriptCode: this.scriptCode,
  167.         commentId: comment.commentId,
  168.         status: comment.status,
  169.       };
  170.       let _this = this;
  171.       likeMessageData(sData).then((res) => {
  172.         if (res.data) {
  173.           if (comment.status) {
  174.             uni.showToast({
  175.               title: "点赞成功",
  176.               icon: "none",
  177.             });
  178.           }
  179.           _this.reqFlag = false;
  180.           _this.$refs.hbComment.likeComplete(comment.commentId);
  181.         } else {
  182.           _this.reqFlag = false;
  183.         }
  184.       });
  185.       // TODO 接入真实接口
  186.     },
  187.     // 删除评论
  188.     del(commentId) {
  189.       console.log("获取到的id", commentId);
  190.       if (this.reqFlag) {
  191.         return;
  192.       }
  193.       this.reqFlag = true;
  194.       let sData = {
  195.         userId: this.userId,
  196.         commentId: commentId,
  197.       };
  198.       let _this = this;
  199.       delMessageData(sData).then((res) => {
  200.         console.log("删除", res.data);
  201.         if (res.data) {
  202.           _this.reqFlag = false;
  203.           _this.$refs.hbComment.deleteComplete(commentId);
  204.           this.getComment();
  205.         } else {
  206.           _this.reqFlag = false;
  207.         }
  208.       });
  209.       // TODO 接入真实接口
  210.     },
  211.     // 列表按照父子转换成树
  212.     getTree(data) {
  213.       let result = [];
  214.       let map = {};
  215.       data.forEach((item) => {
  216.         map[item.id] = item;
  217.       });
  218.       data.forEach((item) => {
  219.         let parent = map[item.parentId];
  220.         if (parent) {
  221.           (parent.children || (parent.children = [])).push(item);
  222.         } else {
  223.           result.push(item);
  224.         }
  225.       });
  226.       console.log("父子树", result);
  227.       return result;
  228.     },
  229.   },
  230.   components: {
  231.     hbComment,
  232.   },
  233. };
  234. </script>
  235.  
  236. <style>
  237. .comment-space {
  238.   height: 12rpx;
  239.   background: #f8f8f8;
  240. }
  241. </style>
4. 组件代码

comment.vue

  1. <template>
  2.   <view class="hb-comment">
  3.     <view class="comment-space"></view>
  4.     <!-- 评论主体-start -->
  5.     <view class="comment-list" v-if="commentData.comment.length != 0">
  6.       <view class="comment-num">
  7.         <view>评论</view>
  8.       </view>
  9.       <!-- 评论列表-start -->
  10.       <view
  11.         class="comment-box"
  12.         v-for="(item, index) in commentData.comment"
  13.         :key="item.id"
  14.       >
  15.         <view class="comment-box-item">
  16.           <view>
  17.             <image
  18.               :src="item.headImg || emptyAvatar"
  19.               mode="aspectFill"
  20.               class="avatar-parent"
  21.             ></image>
  22.           </view>
  23.           <view
  24.             :class="[
  25.               'comment-main',
  26.               { border_bottom: index + 1 !== commentData.commentSize },
  27.             ]"
  28.           >
  29.             <!-- 父评论体-start -->
  30.             <view class="comment-main-top">
  31.               <view class="nick-name-box">
  32.                 <view class="nick-name">{{ item.nickName }}</view>
  33.               </view>
  34.             </view>
  35.             <view class="comment-main-content">
  36.               {{ item.content }}
  37.               <view v-if="item.picUrl" @click="prviewImage(item.picUrl)">
  38.                 <image class="img" :src="item.picUrl" mode="widthFix"></image>
  39.               </view>
  40.             </view>
  41.             <view class="comment-main-foot">
  42.               <!-- <view class="foot-time">{{item.createTime}}</view> -->
  43.               <view class="foot-time"
  44.                 >{{ getTimeInfo(item.commentTime)
  45.                 }}{{ `·${item.location}` }}</view
  46.               >
  47.               <view
  48.                 class="foot-btn foot-btn_common p-l40"
  49.                 @click="reply(item, 'reply')"
  50.                 >回复</view
  51.               >
  52.               <view
  53.                 class="foot-btn foot-btn_common p-l32"
  54.                 v-if="item.isMyComment"
  55.                 @click="confirmDelete(item.id)"
  56.                 >删除</view
  57.               >
  58.               <view class="zan-box">
  59.                 <span :class="item.isLike ? 'isLike' : 'notLike'">{{
  60.                   item.liked > 0 ? item.liked : ""
  61.                 }}</span>
  62.                 <!-- <span :class="item.isLike ? 'isLike' : 'notLike'">{{item.liked == 0 ? '抢首赞' : item.liked}}</span> -->
  63.                 <image
  64.                   @click.stop="like(item.id, 1)"
  65.                   v-if="!item.isLike"
  66.                   src="https://duoke-card.oss-cn-hangzhou.aliyuncs.com/A0gxSGwrgBvn890d208d4d79baec3a208abafd2096ee.png"
  67.                 />
  68.                 <image
  69.                   @click.stop="like(item.id, 0)"
  70.                   v-else
  71.                   src="https://duoke-card.oss-cn-hangzhou.aliyuncs.com/LQjAtVKGVRuT47750ea0ce1e2cb081672d92f52508c9.png"
  72.                 />
  73.               </view>
  74.             </view>
  75.             <!-- 父评论体-end -->
  76.             <!-- 子评论列表-start -->
  77.             <view
  78.               :class="[
  79.                 'comment-sub-box',
  80.                 { 'comment-sub-box_empty': !item.children.length },
  81.               ]"
  82.             >
  83.               <view v-for="(each, index) in item.children" :key="each.id">
  84.                 <view class="comment-sub-item" v-if="index < 1 && item.isFold">
  85.                   <view>
  86.                     <image
  87.                       :src="each.headImg || emptyAvatar"
  88.                       mode="aspectFill"
  89.                       class="avatar"
  90.                     >
  91.                     </image>
  92.                   </view>
  93.                   <view class="comment-main">
  94.                     <view class="sub-comment-main-top">
  95.                       <view class="nick-name">
  96.                         <view>{{ each.nickName }}</view>
  97.                         <view v-if="each.pnickName"
  98.                           ><span>回复</span>{{ each.pnickName }}</view
  99.                         >
  100.                       </view>
  101.                     </view>
  102.                     <view class="comment-main-content">
  103.                       {{ each.content }}
  104.                       <view
  105.                         v-if="each.picUrl"
  106.                         @click="prviewImage(each.picUrl)"
  107.                       >
  108.                         <image
  109.                           class="img"
  110.                           :src="each.picUrl"
  111.                           mode="widthFix"
  112.                         ></image>
  113.                       </view>
  114.                     </view>
  115.                     <view class="comment-main-foot">
  116.                       <view class="foot-time"
  117.                         >{{ getTimeInfo(each.commentTime)
  118.                         }}{{ `·${each.location}` }}</view
  119.                       >
  120.                       <view
  121.                         class="foot-btn foot-btn_common p-l40"
  122.                         @click="replyChild(each, item.id)"
  123.                       >
  124.                         回复</view
  125.                       >
  126.                       <view
  127.                         class="foot-btn foot-btn_common p-l32"
  128.                         v-if="each.isMyComment"
  129.                         @click="confirmDelete(each.id)"
  130.                       >
  131.                         删除
  132.                       </view>
  133.                       <view class="zan-box">
  134.                         <span :class="each.isLike ? 'isLike' : 'notLike'">{{
  135.                           each.liked > 0 ? each.liked : ""
  136.                         }}</span>
  137.                         <!-- <span :class="each.isLike ? 'isLike' : 'notLike'">{{each.liked == 0 ? '抢首赞' : each.liked}}</span> -->
  138.                         <image
  139.                           @click="like(each.id, 1)"
  140.                           v-if="!each.isLike"
  141.                           src="https://duoke-card.oss-cn-hangzhou.aliyuncs.com/A0gxSGwrgBvn890d208d4d79baec3a208abafd2096ee.png"
  142.                         />
  143.                         <image
  144.                           @click="like(each.id, 0)"
  145.                           v-else
  146.                           src="https://duoke-card.oss-cn-hangzhou.aliyuncs.com/LQjAtVKGVRuT47750ea0ce1e2cb081672d92f52508c9.png"
  147.                         />
  148.                       </view>
  149.                     </view>
  150.                   </view>
  151.                 </view>
  152.                 <view class="comment-sub-item" v-if="!item.isFold">
  153.                   <view>
  154.                     <image
  155.                       :src="each.headImg || emptyAvatar"
  156.                       mode="aspectFill"
  157.                       class="avatar"
  158.                     >
  159.                     </image>
  160.                   </view>
  161.                   <view class="comment-main">
  162.                     <view class="sub-comment-main-top">
  163.                       <view class="nick-name">
  164.                         <view>{{ each.nickName }}</view>
  165.                         <view v-if="each.pnickName"
  166.                           ><span>回复</span>{{ each.pnickName }}</view
  167.                         >
  168.                       </view>
  169.                     </view>
  170.                     <view class="comment-main-content">
  171.                       {{ each.content }}
  172.                       <view
  173.                         v-if="each.picUrl"
  174.                         @click="prviewImage(each.picUrl)"
  175.                       >
  176.                         <image
  177.                           class="img"
  178.                           :src="each.picUrl"
  179.                           mode="widthFix"
  180.                         ></image>
  181.                       </view>
  182.                     </view>
  183.                     <view class="comment-main-foot">
  184.                       <view class="foot-time"
  185.                         >{{ getTimeInfo(each.commentTime)
  186.                         }}{{ `·${each.location}` }}</view
  187.                       >
  188.                       <view
  189.                         class="foot-btn foot-btn_common p-l40"
  190.                         @click="replyChild(each, item.id)"
  191.                       >
  192.                         回复</view
  193.                       >
  194.                       <view
  195.                         class="foot-btn foot-btn_common p-l32"
  196.                         v-if="each.isMyComment"
  197.                         @click="confirmDelete(each.id)"
  198.                       >
  199.                         删除
  200.                       </view>
  201.                       <view class="zan-box">
  202.                         <span :class="each.isLike ? 'isLike' : 'notLike'">{{
  203.                           each.liked > 0 ? each.liked : ""
  204.                         }}</span>
  205.                         <!-- <span :class="each.isLike ? 'isLike' : 'notLike'">{{each.liked == 0 ? '抢首赞' : each.liked}}</span> -->
  206.                         <image
  207.                           @click="like(each.id, 1)"
  208.                           v-if="!each.isLike"
  209.                           src="https://duoke-card.oss-cn-hangzhou.aliyuncs.com/A0gxSGwrgBvn890d208d4d79baec3a208abafd2096ee.png"
  210.                         />
  211.                         <image
  212.                           @click="like(each.id, 0)"
  213.                           v-else
  214.                           src="https://duoke-card.oss-cn-hangzhou.aliyuncs.com/LQjAtVKGVRuT47750ea0ce1e2cb081672d92f52508c9.png"
  215.                         />
  216.                       </view>
  217.                     </view>
  218.                   </view>
  219.                 </view>
  220.               </view>
  221.               <view
  222.                 class="fold-more"
  223.                 v-if="item.isFold"
  224.                 @click="foldMsg(item.id)"
  225.                 >展开更多回复<u-icon size="14" name="arrow-down"></u-icon
  226.               ></view>
  227.             </view>
  228.             <!-- 子评论列表-end -->
  229.           </view>
  230.         </view>
  231.       </view>
  232.       <!-- 评论列表-end -->
  233.     </view>
  234.     <!-- 评论主体-end -->
  235.     <!-- 无评论-start -->
  236.     <view class="comment-none" v-else>
  237.       <view class="title">评论</view>
  238.       <image
  239.         mode="widthFix"
  240.         src="https://dby-front-resource.oss-cn-hangzhou.aliyuncs.com/static/images/duke/meta-empty.png"
  241.         class="top-bg"
  242.       ></image>
  243.       <view class="tips">快来抢沙发吧</view>
  244.       <!-- 暂无评论，<span @click="commentInput" style="color: #007AFF;">抢沙发</span> -->
  245.     </view>
  246.     <!-- 无评论-end -->
  247.     <!-- 发表评论-start -->
  248.     <view class="comment-footer">
  249.       <view class="comment-left" @click="reply('self')">说说你的想法</view>
  250.       <view class="comment-right" @click="click_share">
  251.         <image
  252.           src="https://duoke-card.oss-cn-hangzhou.aliyuncs.com/EehiPALe7txe47f84c7f6483b3a3bb455aba32927dee.png"
  253.         />
  254.         <view class="label">转发</view>
  255.       </view>
  256.     </view>
  257.     <!-- 评论弹框 -->
  258.     <view class="comment-submit-box" v-if="submit" @click="closeInput">
  259.       <view
  260.         class="comment-add"
  261.         @click.stop.prevent="stopPrevent"
  262.         :style="'bottom:' + KeyboardHeight + 'px'"
  263.       >
  264.         <view class="comment-add_top">
  265.           <textarea
  266.             class="textarea"
  267.             v-model="sendConf.content"
  268.             :placeholder="placeholderTxt"
  269.             :adjust-position="false"
  270.             :show-confirm-bar="false"
  271.             @blur="blur"
  272.             @focus="focusOn"
  273.             @input="sumfontnum"
  274.             :focus="focus"
  275.             maxlength="1000"
  276.             auto-height
  277.           ></textarea>
  278.           <view class="pic-box">
  279.             <view class="pic_box" v-if="sendConf.picUrl">
  280.               <image
  281.                 class="del"
  282.                 v-if="upLoad"
  283.                 @click="delImg"
  284.                 src="https://duoke-card.oss-cn-hangzhou.aliyuncs.com/OvHnS9bQSAj5c959ff8678314f225057b163bfb36fe6.png"
  285.                 mode="aspectFill"
  286.               ></image>
  287.               <image
  288.                 class="pic"
  289.                 :src="sendConf.picUrl"
  290.                 mode="aspectFill"
  291.               ></image>
  292.               <view class="mask_progress" v-if="!upLoad">
  293.                 <view class="progress">
  294.                   <view class="label">{{ progress }}%</view>
  295.                   <view class="long" :style="'width:' + progress + '%'"></view
  296.                 ></view>
  297.               </view>
  298.             </view>
  299.           </view>
  300.         </view>
  301.         <view
  302.           class="comment-submit flex"
  303.           :class="{ 'no-p': KeyboardHeight > 0 }"
  304.         >
  305.           <image
  306.             @click="chooseImg"
  307.             class="pic-icon"
  308.             src="https://duoke-card.oss-cn-hangzhou.aliyuncs.com/nEJ0FD9ERL53978e81ece9b7f00201e14789d8f10ba2.png"
  309.             mode="aspectFill"
  310.           ></image>
  311.           <view class="flex">
  312.             <view class="num">{{ fontNum }}/1000</view>
  313.             <view class="send" :class="{ nosend: permissSend }" @click="addMsg"
  314.               >发送</view
  315.             >
  316.           </view>
  317.         </view>
  318.       </view>
  319.     </view>
  320.     <!-- 新增评论-end -->
  321.   </view>
  322. </template>
  323.  
  324. <script>
  325. import { getCommentImg } from "../../apis/metaUniverse";
  326. import ossUpload from "@/utils/ossUpload";
  327. export default {
  328.   name: "hb-comment",
  329.   props: {
  330.     cmData: {
  331.       type: Object,
  332.       default: () => {
  333.         return null;
  334.       },
  335.     },
  336.     deleteTip: {
  337.       type: String,
  338.       default: () => {
  339.         return "确认删除您的评论？";
  340.       },
  341.     },
  342.     scriptCode: {
  343.       type: String,
  344.       default: "",
  345.     },
  346.   },
  347.   watch: {
  348.     cmData: {
  349.       handler: function (newVal, oldVal) {
  350.         console.log("监听到改变", newVal);
  351.         this.init(newVal);
  352.         this.$forceUpdate();
  353.       },
  354.       immediate: true,
  355.     },
  356.   },
  357.   computed: {
  358.     permissSend() {
  359.       return (!this.sendConf.content.trim() && !this.sendConf.picUrl) ||
  360.         !this.upLoad
  361.         ? true
  362.         : false;
  363.     },
  364.     fontNum() {
  365.       return this.sendConf?.content?.length || 0;
  366.     },
  367.     placeholderTxt() {
  368.       return this.sendConf.answerId === 0
  369.         ? "说说你的想法"
  370.         : `回复${this.sendConf.nickName}`;
  371.     },
  372.   },
  373.   data() {
  374.     return {
  375.       emptyAvatar:
  376.         "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",
  377.       commentData: null,
  378.       // placeholder: "说说你的想法",
  379.       // pUser: null, // 标签-回复人
  380.       showTag: false, // 标签展示与否
  381.       focus: false, // 输入框自动聚焦
  382.       submit: false, // 弹出评论
  383.       KeyboardHeight: 0, // 键盘高度
  384.       replayShow: false, // 展示弹框
  385.       sendConf: {
  386.         // id: 1,
  387.         // nickName: '',
  388.         // fileList: [],
  389.  
  390.         userId: null,
  391.         content: "",
  392.         picUrl: "",
  393.         answerId: 0, // 评论id
  394.         parentId: 0,
  395.         location: "", // 评论的地址所在地
  396.       },
  397.       specialArea: ["澳门", "香港"],
  398.       upLoad: true,
  399.       progress: 0,
  400.     };
  401.   },
  402.   onShow() {
  403.  
  404.   },
  405.   mounted: function () {
  406.     uni.onKeyboardHeightChange((res) => {
  407.       this.KeyboardHeight = res.height;
  408.     });
  409.   },
  410.   methods: {
  411.     getImgUrl(){
  412.       getCommentImg().then(res => {
  413.         this.sendConf.picUrl = res.data;
  414.       })
  415.     },
  416.     // 设置进度条
  417.     setProgressData() {
  418.       const timer = setInterval(() => {
  419.         this.progress += 11;
  420.         if (this.progress >= 99) {
  421.           clearInterval(timer);
  422.         }
  423.       }, 5);
  424.     },
  425.     // 计算时间差
  426.     getTimeInfo(time) {
  427.       // commentTime
  428.       let new_date = new Date(); //新建一个日期对象，默认现在的时间
  429.       let old_date = new Date(time);
  430.       let difftime = new_date - old_date;
  431.       let days = parseInt(difftime / 1000 / 60 / 60 / 24); // 天  24*60*60*1000
  432.       let hours = parseInt(difftime / 1000 / 60 / 60); // 小时 60*60*1000
  433.       let minutes = parseInt(difftime / 1000 / 60); // 分钟 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
  434.       if (hours >= 1 && hours < 24) {
  435.         return `${hours}个小时前`;
  436.       } else if (days >= 1) {
  437.         if (days > 7) {
  438.           return time.split(" ")[0];
  439.         } else {
  440.           return `${days}天前`;
  441.         }
  442.       } else {
  443.         return minutes < 1 ? "刚刚" : `${minutes}分钟前`;
  444.       }
  445.     },
  446.     sumfontnum(e) {
  447.       let str = e.detail.value.trim();
  448.       if (str.length >= 1000) {
  449.         this.sendConf.content = e.detail.value.substring(0, 1000);
  450.       } else {
  451.         this.sendConf.content = e.detail.value;
  452.       }
  453.     },
  454.     delImg() {
  455.       this.sendConf.picUrl = "";
  456.       this.progress = 0;
  457.       this.upLoad = true;
  458.     },
  459.     // 选择图片
  460.     chooseImg() {
  461.       let _this = this;
  462.       uni.getSetting({
  463.         success(res) {
  464.           if (res.authSetting["scope.writePhotosAlbum"]) {
  465.             _this.chooseImage();
  466.           } else {
  467.             uni.authorize({
  468.               scope: "scope.writePhotosAlbum",
  469.               success() {
  470.                 _this.chooseImage();
  471.               },
  472.               fail(res) {
  473.                 uni.showToast({
  474.                   title: "请点击右上角“…”打开相册权限设置",
  475.                   icon: "none",
  476.                   duration: 2000,
  477.                 });
  478.               },
  479.             });
  480.           }
  481.         },
  482.       });
  483.     },
  484.     chooseImage() {
  485.       uni.chooseImage({
  486.         count: 1,
  487.         sizeType: ["compressed"],
  488.         success: async (res) => {
  489.           let imageSize = res.tempFiles[0].size;
  490.           // 限制图片大小不超过2兆
  491.           if (imageSize > 2097152) {
  492.             uni.showToast({
  493.               title: "图片超过2M!",
  494.               icon: "none",
  495.             });
  496.             return;
  497.           }
  498.           this.upLoad = false;
  499.           this.setProgressData();
  500.           this.sendConf.picUrl = res.tempFiles[0].path;
  501.           await ossUpload(res.tempFiles[0].path).then((imageResult) => {
  502.             this.progress = 100;
  503.             this.sendConf.picUrl = imageResult.url;
  504.             this.upLoad = true;
  505.             uni.showToast({
  506.               title: "上传成功",
  507.               icon: "none",
  508.             });
  509.             this.progress = 0;
  510.           });
  511.           // console.log('选择的图片', this.sendConf.picUrl);
  512.         },
  513.         fail: () => {
  514.           this.upLoad = true;
  515.           this.progress = 0;
  516.           // uni.showToast({
  517.           //   title: "未",
  518.           //   icon: "none",
  519.           // });
  520.         },
  521.       });
  522.     },
  523.     sendData() {
  524.       // 调用接口
  525.     },
  526.     closePopup() {
  527.       this.replayShow = false;
  528.       this.resetSendData();
  529.     },
  530.     // 重置输入框的值
  531.     resetSendData() {
  532.       let keyNameList = ["content", "picUrl"];
  533.       keyNameList.forEach((item) => {
  534.         this.sendConf[item] = "";
  535.       });
  536.       this.sendConf.answerId = 0;
  537.       this.sendConf.parentId = 0;
  538.       this.progress = 0;
  539.       this.upload = true;
  540.     },
  541.     click_share() {
  542.       this.$emit("share");
  543.     },
  544.     foldMsg(id) {
  545.       this.$emit("fold", id);
  546.     },
  547.     // 初始化评论
  548.     init(cmData) {
  549.       this.commentData = cmData;
  550.     },
  551.     // 没用的方法，但不要删
  552.     stopPrevent() {},
  553.     replyChild(e, parentId) {
  554.       console.log("回复子评论");
  555.       this.sendConf.nickName = e.nickName;
  556.       this.sendConf.answerId = e.id;
  557.       this.sendConf.parentId = parentId;
  558.       this.showTag = true;
  559.       this.commentInput();
  560.     },
  561.     // 预览图片
  562.     prviewImage(imgUrl) {
  563.       // console.log('预览图片', imgUrl);
  564.       uni.previewImage({
  565.         current: 0,
  566.         urls: [imgUrl],
  567.       });
  568.     },
  569.     // 回复评论
  570.     reply(e, type) {
  571.       this.getImgUrl();
  572.       // let _this = this;
  573.       switch (type) {
  574.         case "self":
  575.           // this.sendConf.nickName = e.nickName;
  576.           this.sendConf.parentId = 0;
  577.           break;
  578.         case "reply":
  579.           this.sendConf.nickName = e.nickName;
  580.           this.sendConf.answerId = e.id;
  581.           this.sendConf.parentId = e.id;
  582.           break;
  583.       }
  584.       this.showTag = true;
  585.       this.commentInput();
  586.     },
  587.     // 删除评论前确认
  588.     confirmDelete(commentId) {
  589.       let that = this;
  590.       uni.showModal({
  591.         title: "提示",
  592.         content: "确认删除您的评论？",
  593.         confirmText: "确认",
  594.         success: function (res) {
  595.           if (res.confirm) {
  596.             that.$emit("del", commentId);
  597.           }
  598.         },
  599.       });
  600.     },
  601.     // 新增评论
  602.     addMsg() {
  603.       if (this.permissSend) {
  604.         return;
  605.       }
  606.       this.$emit("add", this.sendConf);
  607.     },
  608.     // 点赞评论
  609.     like(commentId, status) {
  610.       let sData = {
  611.         commentId: commentId,
  612.         status: status,
  613.       };
  614.       this.$emit("like", sData);
  615.     },
  616.     // 新增完成
  617.     addComplete() {
  618.       // this.sendConf.content = null;
  619.       this.tagClose();
  620.       this.closeInput();
  621.     },
  622.     // 点赞完成-本地修改点赞结果
  623.     likeComplete(commentId) {
  624.       for (var i in this.commentData.comment) {
  625.         if (this.commentData.comment[i].id == commentId) {
  626.           this.commentData.comment[i].isLike
  627.             ? this.commentData.comment[i].liked--
  628.             : this.commentData.comment[i].liked++;
  629.           this.commentData.comment[i].isLike =
  630.             !this.commentData.comment[i].isLike;
  631.           return;
  632.         }
  633.         for (var j in this.commentData.comment[i].children) {
  634.           if (this.commentData.comment[i].children[j].id == commentId) {
  635.             this.commentData.comment[i].children[j].isLike
  636.               ? this.commentData.comment[i].children[j].liked--
  637.               : this.commentData.comment[i].children[j].liked++;
  638.             this.commentData.comment[i].children[j].isLike =
  639.               !this.commentData.comment[i].children[j].isLike;
  640.             return;
  641.           }
  642.         }
  643.       }
  644.     },
  645.     // 删除完成-本地删除评论
  646.     deleteComplete(commentId) {
  647.       for (let i in this.commentData.comment) {
  648.         for (let j in this.commentData.comment[i].children) {
  649.           if (this.commentData.comment[i].children[j].id == commentId) {
  650.             this.commentData.comment[i].children.splice(Number(j), 1);
  651.             return;
  652.           }
  653.         }
  654.         if (this.commentData.comment[i].id == commentId) {
  655.           this.commentData.comment.splice(Number(i), 1);
  656.           return;
  657.         }
  658.       }
  659.     },
  660.     // 输入框失去焦点
  661.     blur() {
  662.       this.focus = false;
  663.     },
  664.     // 输入框聚焦
  665.     focusOn() {
  666.       this.$emit("focusOn");
  667.     },
  668.     // 标签关闭
  669.     tagClose() {
  670.       this.showTag = false;
  671.       // this.pUser = null;
  672.       // this.commentReq.pId = null;
  673.     },
  674.     // 输入评论
  675.     commentInput() {
  676.       // TODO 调起键盘方法
  677.       this.submit = true;
  678.       setTimeout(() => {
  679.         this.focus = true;
  680.       }, 50);
  681.     },
  682.     // 关闭输入评论
  683.     closeInput() {
  684.       console.log("关闭评论");
  685.       this.focus = false;
  686.       this.submit = false;
  687.       this.resetSendData();
  688.     },
  689.   },
  690. };
  691. </script>
  692.  
  693. <style lang="scss" scoped>
  694. .p-l32 {
  695.   padding-left: 32rpx;
  696. }
  697.  
  698. .p-l40 {
  699.   padding-left: 40rpx;
  700. }
  701.  
  702. .flex {
  703.   display: flex;
  704.   align-items: center;
  705.   justify-content: space-between;
  706. }
  707.  
  708. .fold-more {
  709.   display: flex;
  710.   font-size: 24rpx;
  711.   font-family: PingFangSC-Medium, PingFang SC;
  712.   font-weight: 500;
  713.   color: #666666;
  714.   line-height: 32rpx;
  715.   padding-bottom: 32rpx;
  716. }
  717.  
  718. .hb-comment {
  719.   // padding: 10rpx;
  720.   // margin-top: 12rpx;
  721.   padding: 32rpx 0 32rpx 32rpx;
  722.   background: #fff;
  723.   padding-bottom: calc(
  724.     64rpx + constant(safe-area-inset-bottom)
  725.   ); /** ios < 11.2 */
  726.   padding-bottom: calc(64rpx + env(safe-area-inset-bottom)); /** ios >= 11.2 */
  727. }
  728.  
  729. .top-read {
  730.   font-size: 28rpx;
  731.   padding-left: 10rpx;
  732.   color: #999999;
  733. }
  734.  
  735. .seg_line_box {
  736.   display: flex;
  737.   height: 5rpx;
  738.   justify-content: space-between;
  739.   margin: 5rpx 0;
  740. }
  741.  
  742. .seg_line {
  743.   width: 45%;
  744.   border-bottom: 1rpx solid #e1e1e1;
  745. }
  746.  
  747. .seg_dot {
  748.   width: 8%;
  749.   border-bottom: 5rpx dotted #dbdbdb;
  750. }
  751.  
  752. .comment-num {
  753.   display: flex;
  754.   justify-content: space-between;
  755.   align-items: center;
  756.  
  757.   // padding: 20rpx 0;
  758.   height: 44rpx;
  759.   font-size: 32rpx;
  760.   font-family: PingFangSC-Medium, PingFang SC;
  761.   font-weight: 500;
  762.   color: #333333;
  763.   line-height: 44rpx;
  764. }
  765.  
  766. .comment-box {
  767.   // padding: 10rpx 0;
  768.   width: 714rpx;
  769.   &:nth-last-child(1) {
  770.     padding-bottom: 200rpx;
  771.   }
  772. }
  773.  
  774. .comment-box-item {
  775.   display: flex;
  776.   margin-top: 32rpx;
  777. }
  778.  
  779. .comment-main {
  780.   // padding-left: 20rpx;
  781.   display: inline-block;
  782.   white-space: pre-wrap;
  783.   word-break: break-word;
  784.   margin-left: 12rpx;
  785.   width: 638rpx;
  786. }
  787.  
  788. .border_bottom {
  789.   position: relative;
  790. }
  791.  
  792. .border_bottom::after {
  793.   position: absolute;
  794.   content: "";
  795.   width: 100%;
  796.   left: 0;
  797.   bottom: 0;
  798.   height: 2rpx;
  799.   // padding: 0 28rpx;
  800.   box-sizing: border-box;
  801.   background-color: #e9e9e9;
  802.   // background-color: red;
  803.   -webkit-transform: scale(1, 0.5);
  804.   transform: scale(1, 0.5);
  805.   -webkit-transform-origin: center bottom;
  806.   transform-origin: center bottom;
  807. }
  808.  
  809. .comment-main-top {
  810.   width: 600rpx;
  811.   // padding-top: 6rpx;
  812.   padding-top: 2rpx;
  813.   display: flex;
  814.   justify-content: space-between;
  815. }
  816.  
  817. .sub-comment-main-top {
  818.   // width: 510rpx;
  819.   // padding-top: 6rpx;
  820.   display: flex;
  821.   justify-content: space-between;
  822.  
  823.   height: 34rpx;
  824.   font-size: 24rpx;
  825.   font-family: PingFangSC-Regular, PingFang SC;
  826.   font-weight: 400;
  827.   color: #999999;
  828.   line-height: 34rpx;
  829. }
  830.  
  831. .avatar {
  832.   width: 36rpx;
  833.   height: 36rpx;
  834.   border-radius: 50%;
  835. }
  836.  
  837. .avatar-parent {
  838.   width: 68rpx;
  839.   height: 68rpx;
  840.   border-radius: 50%;
  841. }
  842.  
  843. .nick-name-box {
  844.   display: flex;
  845.   align-items: center;
  846. }
  847.  
  848. .comLogo {
  849.   margin-right: 18rpx;
  850.   font-size: 22rpx;
  851.   border-radius: 10rpx;
  852.   padding: 5rpx 15rpx;
  853.   color: #ffffff;
  854. }
  855.  
  856. .com1 {
  857.   background-color: #d218b1;
  858. }
  859.  
  860. .com2 {
  861.   background-color: #f19c0b;
  862. }
  863.  
  864. .com3 {
  865.   background-color: #c8da85;
  866. }
  867.  
  868. .com4 {
  869.   background-color: #bfd0da;
  870. }
  871.  
  872. .nick-name {
  873.   // color: #2d8cf0;
  874.   display: flex;
  875.   height: 34rpx;
  876.   font-size: 24rpx;
  877.   font-family: PingFangSC-Regular, PingFang SC;
  878.   font-weight: 400;
  879.   color: #999999;
  880.   line-height: 34rpx;
  881.   span {
  882.     margin: 0 12rpx;
  883.   }
  884. }
  885.  
  886. .isLike {
  887.   font-size: 28rpx;
  888.   padding-right: 10rpx;
  889.   color: #476dff;
  890. }
  891.  
  892. .notLike {
  893.   font-size: 28rpx;
  894.   padding-right: 10rpx;
  895.   color: #999999;
  896. }
  897.  
  898. .comment-main-content {
  899.   // padding: 10rpx 10rpx 10rpx 0;
  900.   display: inline-block;
  901.   white-space: pre-wrap;
  902.   word-break: break-word;
  903.   padding: 12rpx 32rpx 12rpx 0rpx;
  904.   font-size: 28rpx;
  905.   font-family: PingFangSC-Regular, PingFang SC;
  906.   font-weight: 400;
  907.   color: #333333;
  908.   line-height: 40rpx;
  909.   .img {
  910.     width: 160rpx;
  911.     height: 160rpx;
  912.     border-radius: 8rpx;
  913.     margin-top: 12rpx;
  914.   }
  915. }
  916.  
  917. .comment-main-foot {
  918.   display: flex;
  919.   // font-size: 22rpx;
  920.  
  921.   font-size: 24rpx;
  922.   font-family: PingFangSC-Regular, PingFang SC;
  923.   font-weight: 400;
  924.   color: #999999;
  925.   line-height: 32rpx;
  926.   padding-bottom: 24rpx;
  927. }
  928.  
  929. .replayTag {
  930.   color: #909399;
  931.   margin-bottom: 5px;
  932.   border: 1px solid #c8c9cc;
  933.   background-color: #f4f4f5;
  934.   border-radius: 3px;
  935.   display: flex;
  936.   justify-content: space-between;
  937.   align-items: center;
  938.   font-size: 16rpx;
  939.   padding: 5px 10px;
  940. }
  941.  
  942. .replyTagClose {
  943.   font-size: 20px;
  944.   line-height: 12px;
  945.   padding: 0 0 2px 5px;
  946. }
  947.  
  948. .foot-btn {
  949.   // padding-left: 10rpx;
  950.   color: #007aff;
  951. }
  952.  
  953. .foot-btn_common {
  954.   height: 32rpx;
  955.   font-size: 24rpx;
  956.   font-family: PingFangSC-Medium, PingFang SC;
  957.   font-weight: 500;
  958.   color: #666666;
  959.   line-height: 32rpx;
  960. }
  961.  
  962. .zan-box {
  963.   display: flex;
  964.   align-items: center;
  965.   // margin-right: 32rpx;
  966.   margin-left: auto;
  967.   image {
  968.     width: 28rpx;
  969.     height: 28rpx;
  970.     padding-right: 32rpx;
  971.   }
  972. }
  973.  
  974. .comment-sub-box {
  975.   padding: 8rpx 0;
  976. }
  977.  
  978. .comment-sub-box_empty {
  979.   padding: 0;
  980.   padding-bottom: 8rpx;
  981. }
  982.  
  983. .comment-sub-item {
  984.   display: flex;
  985. }
  986.  
  987. .comment-none {
  988.   // padding: 0 20rpx calc(100rpx + env(safe-area-inset-bottom));
  989.   padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  990.   width: 100%;
  991.   text-align: center;
  992.   color: #999999;
  993.   .title {
  994.     // padding: 20rpx 0;
  995.     height: 44rpx;
  996.     text-align: left;
  997.     font-size: 32rpx;
  998.     font-family: PingFangSC-Medium, PingFang SC;
  999.     font-weight: 500;
  1000.     color: #333333;
  1001.     line-height: 44rpx;
  1002.   }
  1003.   .tips {
  1004.     font-size: 32rpx;
  1005.     font-family: PingFangSC-Regular, PingFang SC;
  1006.     font-weight: 400;
  1007.     color: #999999;
  1008.     line-height: 44rpx;
  1009.   }
  1010. }
  1011.  
  1012. .comment-footer {
  1013.   display: flex;
  1014.   justify-content: space-between;
  1015.   box-shadow: 0px -2rpx 0 0 rgba(0, 0, 0, 0.05);
  1016.   background: #fff;
  1017.   padding: 12rpx 32rpx 12rpx 24rpx;
  1018.   width: 750rpx;
  1019.   box-sizing: border-box;
  1020.   position: fixed;
  1021.   bottom: 0;
  1022.   left: 0;
  1023.   padding-bottom: calc(
  1024.     12rpx + constant(safe-area-inset-bottom)
  1025.   ); /** ios < 11.2 */
  1026.   padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
  1027.  
  1028.   .comment-left {
  1029.     box-sizing: border-box;
  1030.     // width: 622rpx;
  1031.     flex: 1;
  1032.     background: #f7f7f7;
  1033.     height: 80rpx;
  1034.     line-height: 80rpx;
  1035.     border-radius: 44rpx;
  1036.     padding-left: 40rpx;
  1037.     color: #9999;
  1038.     font-size: 28rpx;
  1039.   }
  1040.   .comment-right {
  1041.     padding-top: 6rpx;
  1042.     padding-left: 32rpx;
  1043.     image {
  1044.       width: 40rpx;
  1045.       height: 40rpx;
  1046.     }
  1047.     .label {
  1048.       font-size: 20rpx;
  1049.       font-family: PingFangSC-Regular, PingFang SC;
  1050.       font-weight: 400;
  1051.       color: #666666;
  1052.       line-height: 20rpx;
  1053.     }
  1054.   }
  1055. }
  1056.  
  1057. .comment-submit-box {
  1058.   position: fixed;
  1059.   display: flex;
  1060.   align-items: flex-end;
  1061.   z-index: 9900;
  1062.   left: 0;
  1063.   top: var(--window-top);
  1064.   bottom: 0;
  1065.   background-color: rgba($color: #000000, $alpha: 0.5);
  1066.   width: 100%;
  1067. }
  1068.  
  1069. .comment-add {
  1070.   position: fixed;
  1071.   width: 100%;
  1072.   box-sizing: border-box;
  1073.   // padding: 5rpx;
  1074.   // border: 1px solid #ddd;
  1075.   // transition: .3s;
  1076.   // -webkit-transition: .3s;
  1077.  
  1078.   // padding: 24rpx 32rpx 32rpx 40rpx;
  1079.   padding-top: 24rpx;
  1080.   border-radius: 24rpx 24rpx 0 0;
  1081.   background: #fff;
  1082.   .comment-add_top {
  1083.     overflow-y: scroll;
  1084.     height: 300rpx;
  1085.   }
  1086.   textarea {
  1087.     height: 184rpx;
  1088.     width: 100%;
  1089.     padding: 0 40rpx;
  1090.     box-sizing: border-box;
  1091.     // padding-right: 8rpx;
  1092.   }
  1093.   .pic_box {
  1094.     position: relative;
  1095.     width: 224rpx;
  1096.     margin-top: 54rpx;
  1097.     padding-left: 40rpx;
  1098.     .pic {
  1099.       width: 224rpx;
  1100.       height: 224rpx;
  1101.       border-radius: 8rpx;
  1102.     }
  1103.     .del {
  1104.       z-index: 10;
  1105.       width: 36rpx;
  1106.       height: 36rpx;
  1107.       border-radius: 50%;
  1108.       position: absolute;
  1109.       top: -18rpx;
  1110.       right: -18rpx;
  1111.     }
  1112.   }
  1113.   .mask_progress {
  1114.     width: 224rpx;
  1115.     height: 224rpx !important;
  1116.     padding: 108rpx 21rpx;
  1117.     border-radius: 8rpx;
  1118.     box-sizing: border-box;
  1119.     background: #333333;
  1120.     position: absolute;
  1121.     right: 0;
  1122.     bottom: 0;
  1123.     z-index: 2;
  1124.     opacity: 0.8;
  1125.     .progress {
  1126.       width: 100%;
  1127.       height: 100%;
  1128.       border-radius: 1rpx;
  1129.       .label {
  1130.         margin-bottom: 2rpx;
  1131.         text-align: center;
  1132.         color: #fff;
  1133.         font-size: 16rpx;
  1134.       }
  1135.       .long {
  1136.         height: 3rpx;
  1137.         background: white;
  1138.       }
  1139.     }
  1140.   }
  1141. }
  1142.  
  1143. .btn-click {
  1144.   color: #007aff;
  1145.   font-size: 28rpx;
  1146.   padding: 10rpx;
  1147. }
  1148.  
  1149. .cancel {
  1150.   color: #606266;
  1151. }
  1152.  
  1153. // .textarea {
  1154. // 	height: 100px;
  1155. // 	padding: 16rpx;
  1156. // 	width: 100%;
  1157. // }
  1158.  
  1159. .comment-submit {
  1160.   // padding: 5rpx 20rpx 0 20rpx;
  1161.   border-bottom: 1rpx dashed #ddd;
  1162.   // width: 100%;
  1163.   display: flex;
  1164.   justify-content: space-between;
  1165.   align-items: center;
  1166.   // padding: 16rpx 32rpx 16rpx 40rpx;
  1167.   padding: 16rpx 32rpx calc(16rpx + env(safe-area-inset-bottom)) 40rpx;
  1168.   box-shadow: 0 -2rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
  1169.   .num {
  1170.     height: 24rpx;
  1171.     font-size: 24rpx;
  1172.     font-family: PingFangSC-Regular, PingFang SC;
  1173.     font-weight: 400;
  1174.     color: #b3b3b3;
  1175.     line-height: 24rpx;
  1176.   }
  1177.   .send {
  1178.     width: 128rpx;
  1179.     height: 64rpx;
  1180.     background: #476dff;
  1181.     border-radius: 32rpx;
  1182.     margin-left: 24rpx;
  1183.     text-align: center;
  1184.     font-size: 32rpx;
  1185.     font-family: PingFangSC-Medium, PingFang SC;
  1186.     font-weight: 500;
  1187.     color: #ffffff;
  1188.     line-height: 64rpx;
  1189.   }
  1190.   .nosend {
  1191.     opacity: 0.5;
  1192.   }
  1193.   .pic-icon {
  1194.     width: 46rpx;
  1195.     height: 42rpx;
  1196.     margin: 5rpx 2rpx;
  1197.   }
  1198. }
  1199. .no-p {
  1200.   padding-bottom: 16rpx;
  1201. }
  1202. </style>
5.组件的使用
  1. <comment-eg v-if="!(!detailCollect.content && isNetWork)" :articleId="tempCode" @shareFriend="shareOthers"></comment-eg>
  2.  
  3. // articleId是文章详情，通过id去调用接口获取评论区详情数据， shareothers是唤起微信的分享操作

无非就是写个评论区页面，将需要的参数通过props传入，将需要抛出的事件通过emit抛出

6. 评论区数据格式
  1. answerContent: null
  2. answerId: "0"
  3. answerPicUrl: null
  4. answerUserId: "0"
  5. children: [{id: "484", userId: "405298514273243136", answerUserId: "417213072755658752",…}]
  6. 0: {id: "484", userId: "405298514273243136", answerUserId: "417213072755658752",…}
  7. answerContent: ""
  8. answerId: "468"
  9. answerPicUrl: "https://images.dby.cn/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230217095836%202023-10-20%2011_15_06.png"
  10. answerUserId: "417213072755658752"
  11. children: null
  12. commentTime: "2024-03-04 17:39:52"
  13. content: "评论组件"
  14. headImg: "https://duoke-card.oss-cn-hangzhou.aliyuncs.com/tmp_5ed263ea895cb9b6510b08375e350bdb0e2d7e915c739fc3.jpeg"
  15. id: "484"
  16. ipAddress: "124.90.42.134"
  17. isLike: false
  18. isMyComment: true
  19. liked: 0
  20. location: "浙江"
  21. nickName: "Mortimer"
  22. parentId: "468"
  23. pheadImg: "https://duoke-card.oss-cn-hangzhou.aliyuncs.com/tmp_7621a56009b34c01cc3c46feadcfbb8e.jpeg"
  24. picUrl: null
  25. pnickName: "你猜我猜你猜猜"
  26. scriptCode: "HJ1689172726976020481"
  27. status: false
  28. userId: "405298514273243136"
  29. commentTime: "2023-10-20 11:34:29"
  30. content: ""
  31. headImg: "https://duoke-card.oss-cn-hangzhou.aliyuncs.com/tmp_7621a56009b34c01cc3c46feadcfbb8e.jpeg"
  32. id: "468"
  33. ipAddress: "124.90.42.134"
  34. isLike: false
  35. isMyComment: false
  36. liked: 0
  37. location: "浙江"
  38. nickName: "你猜我猜你猜猜"
  39. parentId: "0"
  40. pheadImg: null
  41. picUrl: "https://images.dby.cn/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230217095836%202023-10-20%2011_15_06.png"
  42. pnickName: null
  43. scriptCode: "HJ1689172726976020481"
  44. status: false
  45. userId: "417213072755658752"

有问题可以一起沟通哦~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/500862
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号