tijiao

components/qizai-dynamic/Dynamic.vue

@@ -0,0 +1,541 @@
+<template>
+  <view class="dynamic" @click="clickDynamic()">
+    <view class="user__container">
+      <view class="user__header-warp">
+        <!-- 头像组 -->
+        <view class="user__header" @click.stop="clickUser()">
+          <image
+            v-if="avatar"
+            :src="avatar"
+            mode="aspectFill"
+            class="user__header-image"
+          ></image>
+          <image v-else
+            src="/static/icon/noIcon.png"
+            mode="aspectFill"
+            class="user__header-image"
+          ></image>
+        </view>
+      </view>
+      <view class="user__content">
+        <view class="user__content-main">
+          <text
+            class="user__content-title uni-ellipsis"
+            @click.stop="clickUser()"
+            >{{ name }}</text
+          >
+          <view style="display: flex; align-items: center"
+            ><text class="user__content-note uni-ellipsis">{{
+              createTime
+            }}</text>
+            <view style="display: flex; align-items: center; color: #808080"
+              ><uni-icons
+                type="eye"
+                size="22"
+                style="color: #808080; margin: 0 10rpx 0 30rpx"
+              ></uni-icons
+              >{{ readCount }}</view
+            >
+          </view>
+        </view>
+        <view class="user__content-extra">
+          <!-- <slot>
+						<text :class="isFocusOn?'user__focus-on':'user__focus-off'"  @click.stop="clickFocus()">{{isFocusOn?'关注':'已关注' }}</text>
+					</slot> -->
+        </view>
+      </view>
+    </view>
+    <view style="padding: 0rpx 30rpx"
+      >
+	 
+      <u-read-more showHeight="284" :toggle="true" color="#5a6988"> 
+		<view class="title" style="text-indent: 0 !important;">{{ title }}</view>
+        <rich-text
+          :nodes="content"
+          style="
+            height: auto;
+            color: #4b4b4b;
+            margin-bottom: 40rpx;
+          " /></u-read-more
+    ></view>
+
+    <view class="allImage">
+      <view class="imgList">
+        <view
+          class="images"
+          :class="`${imgList.length > 4 ? 'images3' : ''}`"
+          v-for="(item, index) in imgList"
+          :key="index"
+        >
+          <image
+            @click.stop="previewImg(index)"
+            class="oneimg"
+            :src="item"
+            mode="aspectFill"
+            :style="{ width: imgWidth + 'px', 'max-height': imgHeight + 'px' }"
+          ></image>
+        </view>
+      </view>
+    </view>
+	<view class="likeList" v-if="likeList.length > 0" style="color: #5188e5" @click.stop="clickThumbsup('likeList')">
+
+		<uni-icons
+          type="heart"
+          size="20"
+          style="color: #5188e5; margin-right: 10rpx"
+        ></uni-icons
+        >
+		<view class="hidden2">{{ likeList.map(item => item.user.nickname?item.user.nickname:'普通用户').join(' , ') }}</view>
+
+		
+	</view>
+    <view class="operate" style="width: 100%">
+      <view
+        @click.stop="clickThumbsup('like')"
+        style="display: flex; align-items: center; color: #9a9a9a"
+      >
+        <uni-icons
+          type="hand-up-filled"
+          size="24"
+          style="color: #9a9a9a; margin-right: 10rpx"
+          :style="{ color: thumbsupColor }"
+        ></uni-icons
+        >{{ likeCount ? likeCount : "0" }}
+      </view>
+      <view
+        style="display: flex; align-items: center; color: #9a9a9a"
+        @click.stop="clickThumbsup('pinglun')"
+        ><uni-icons
+          type="chat-filled"
+          size="24"
+          style="color: #9a9a9a; margin-right: 10rpx"
+        ></uni-icons
+        >{{ commentCount ? commentCount : "0" }}</view
+      >
+
+      <view
+        @click.stop="clickThumbsup()"
+        style="display: flex; align-items: center; color: #5188e5"
+      >
+        <uni-icons
+          type="redo-filled"
+          size="24"
+          style="color: #5188e5; margin-right: 10rpx"
+        ></uni-icons
+        >分享
+      </view>
+    </view>
+    <view class="bottom-line"></view>
+	
+
+  </view>
+  
+</template>
+
+<script>
+
+
+
+export default {
+  props: {
+    avatar: {
+      type: String,
+    },
+    name: {
+      type: String,
+    },
+    createTime: {
+      type: String,
+    },
+    isFocusOn: {
+      type: Boolean,
+    },
+    title: {
+      type: String,
+    },
+    content: {
+      type: String,
+    },
+    imgList: {
+      type: Array,
+    },
+    isLike: {
+      type: Number,
+    },
+    isGiveReward: {
+      type: Boolean,
+    },
+    likeCount: {
+      type: Number,
+    },
+    readCount: {
+      type: Number,
+    },
+    giveRewardNumber: {
+      type: Number,
+    },
+    commentCount: {
+      type: Number,
+    },
+    userNoShow: {
+      type: Boolean,
+    },
+    operateNoShow: {
+      type: Boolean,
+    },
+    likeList: {
+      type: Array,
+    },
+  },
+  watch: {
+    isLike(newVal, oldVal) {
+      console.log("newVal at line 163:", newVal);
+      this.initOperate();
+    },
+  },
+ 
+  data() {
+    return {
+      emptyAvatar: "/static/icon/noIcon.png",
+      windowWidth: 0, //屏幕可用宽度
+      windowHeight: 0, //屏幕可用高度
+      imgWidth: 0, //图片宽度
+      imgHeight: 0, //图片高度
+      thumbsupColor: "#9a9a9a",
+      heartColor: "#9a9a9a",
+      userDisplay: "block",
+      operateDisplay: "block",
+      shadowStyle: {
+        // #ifndef APP-NVUE
+        backgroundImage:
+          "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
+        // #endif
+        // #ifdef APP-NVUE
+        // nvue上不支持设置复杂的backgroundImage属性
+        backgroundImage:
+          "linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))",
+        // #endif
+        paddingTop: "100px",
+        marginTop: "-100px",
+      },
+    };
+  },
+  mounted() {
+    const res = uni.getSystemInfoSync();
+    this.windowHeight = res.windowHeight;
+    this.windowWidth = res.windowWidth;
+
+    if (this.userNoShow) {
+      this.userDisplay = "none";
+    }
+    console.log(this.operateNoShow);
+    if (this.operateNoShow) {
+      this.operateDisplay = "none";
+    }
+
+    this.judgeImg();
+    this.initOperate();
+  },
+  methods: {
+    // 预览图片
+    previewImg(index) {
+      uni.previewImage({
+        urls: this.imgList,
+        // longPressActions: {
+        //   itemList: ["保存图片"],
+        // },
+        current: index, // 设置当前预览的图片索引
+      });
+    },
+    initOperate() {
+      this.thumbsupColor = this.isLike ? "#fd514f" : "#9a9a9a";
+      if (this.isGiveReward) this.heartColor = "#fd514f";
+    },
+    // 自适应判断
+    judgeImg() {
+      if (this.imgList.length == 1) {
+        this.imgWidth = (this.windowWidth * 2) / 3;
+        this.imgHeight = (this.windowHeight * 3) / 5;
+      } else if (this.imgList.length == 4) {
+        this.imgWidth = this.windowWidth / 3.3;
+        this.imgHeight = this.imgWidth;
+      } else {
+        this.imgWidth = this.windowWidth / 3.4;
+        this.imgHeight = this.imgWidth;
+      }
+    },
+    timestampFormat(timestamp) {
+      if (!timestamp) return "";
+      function zeroize(num) {
+        return (String(num).length == 1 ? "0" : "") + num;
+      }
+
+      var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
+      var timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数
+
+      var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
+      var tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象
+
+      var Y = tmDate.getFullYear(),
+        m = tmDate.getMonth() + 1,
+        d = tmDate.getDate();
+      var H = tmDate.getHours(),
+        i = tmDate.getMinutes(),
+        s = tmDate.getSeconds();
+
+      if (timestampDiff < 60) {
+        // 一分钟以内
+        return "刚刚";
+      } else if (timestampDiff < 3600) {
+        // 一小时前之内
+        return Math.floor(timestampDiff / 60) + "分钟前";
+      } else if (
+        curDate.getFullYear() == Y &&
+        curDate.getMonth() + 1 == m &&
+        curDate.getDate() == d
+      ) {
+        return "今天" + zeroize(H) + ":" + zeroize(i);
+      } else {
+        var newDate = new Date((curTimestamp - 86400) * 1000); // 参数中的时间戳加一天转换成的日期对象
+        if (
+          newDate.getFullYear() == Y &&
+          newDate.getMonth() + 1 == m &&
+          newDate.getDate() == d
+        ) {
+          return "昨天" + zeroize(H) + ":" + zeroize(i);
+        } else if (curDate.getFullYear() == Y) {
+          return (
+            zeroize(m) +
+            "月" +
+            zeroize(d) +
+            "日 " +
+            zeroize(H) +
+            ":" +
+            zeroize(i)
+          );
+        } else {
+          return (
+            Y +
+            "年" +
+            zeroize(m) +
+            "月" +
+            zeroize(d) +
+            "日 " +
+            zeroize(H) +
+            ":" +
+            zeroize(i)
+          );
+        }
+      }
+    },
+
+    /** 触发父级事件 */
+    // 点击动态
+    clickDynamic() {
+      this.$emit("clickDynamic");
+    },
+    // 点击用户信息
+    clickUser() {
+      this.$emit("clickUser");
+    },
+    // 点击关注
+    clickFocus() {
+      this.$emit("clickFocus");
+    },
+    // 点赞
+    clickThumbsup(type) {
+      this.$emit("clickThumbsup", type);
+    },
+    // 点击打赏
+    clickGiveReward() {
+      this.$emit("clickGiveReward");
+    },
+    // 点击聊天
+    clickChat() {
+      this.$emit("clickChat");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/* 想法图片排列样式 */
+.uni-list-chat__content-extra-text {
+  color: #007aff;
+}
+.dynamic {
+  width: 100%;
+}
+.allImage {
+  display: flex;
+  margin-top: 10rpx;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+.imgList {
+  margin: 20rpx 30rpx;
+}
+.images:not(:nth-child(3n)) {
+  /* margin-right: 10rpx; */
+}
+.text {
+  margin: 1% 3% 2%;
+}
+.images {
+  margin-right: 10rpx;
+  display: inline-block;
+}
+.images3:nth-child(3n) {
+  margin-right: 0rpx;
+}
+.operate {
+  width: 94%;
+  padding: 10rpx 0;
+  margin-top: 10rpx;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  background-color: #e9f0ff73;
+  justify-content: space-around;
+}
+.chat-custom-right {
+  flex: 1;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.chat-custom-text {
+  font-size: 12px;
+  color: #999;
+}
+.bottom-line {
+  border-bottom: 4px solid #efefef;
+}
+
+.user__container {
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  /* -webkit-flex-direction: row; */
+  flex-direction: row;
+  -webkit-box-flex: 1;
+  /* -webkit-flex: 1; */
+  flex: 1;
+  padding: 10px 15px;
+  position: relative;
+  overflow: hidden;
+}
+.user__header {
+  display: flex;
+  width: 100rpx;
+  height: 100rpx;
+
+  overflow: hidden;
+  border-radius: 120rpx;
+}
+.user__header-image {
+  display: flex;
+  align-content: center;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  flex-direction: row;
+  -webkit-box-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  align-items: center;
+  flex-wrap: wrap-reverse;
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 100rpx;
+
+  overflow: hidden;
+}
+.user__content {
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  flex-direction: row;
+  -webkit-box-flex: 1;
+  flex: 1;
+  overflow: hidden;
+  padding: 2px 0;
+}
+.user__content-main {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding-left: 20rpx;
+  padding-top: 6rpx;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  flex: 1;
+  overflow: hidden;
+}
+.user__content-note {
+  margin-top: 3px;
+  color: #aaacab;
+  font-size: 26rpx;
+  letter-spacing: 1rpx;
+  font-weight: normal;
+  overflow: hidden;
+}
+.user__focus-on {
+  padding: 3px 10px;
+  border: 1px solid #fb5f5f;
+  color: #fb5f5f;
+  display: flex;
+  font-size: 14px;
+  border-radius: 3px;
+}
+.user__focus-off {
+  padding: 3px;
+  color: gray;
+  font-size: 14px;
+}
+.title {
+  text-align: justify;
+  color: #292929;
+  font-weight: 600;
+  font-size: 32rpx;
+  margin-bottom: 20rpx;
+}
+.user__content-title {
+  color: #5a6988;
+  font-weight: 600;
+  font-size: 34rpx;
+}
+::v-deep rich-text {
+  text-align: justify;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+::v-deep rich-text p {
+  text-indent: 0 !important;
+}
+.likeList{
+	background: #f7f7f7;
+	border-radius: 4rpx;
+	padding: 8rpx 20rpx;
+	box-sizing: border-box;
+	margin: 20rpx 32rpx;
+	display: flex;
+	align-items: center;
+}
+.hidden2{
+		line-height: 24px;
+		max-height: 120px;
+		-webkit-line-clamp: 5;
+		height: auto;
+	}
+</style>

components/qizai-dynamic/license.md

@@ -0,0 +1,212 @@
+# 微头条动态卡片
+
+## 说明
+
+本组件仿写今日头条的微头条，适用于朋友圈，朋友圈动态，空间说说，微头条等。
+
+组件主要包含三部分
+1.头像，名称，发布时间
+2.文字内容，图片内容
+3.对微头条的操作样式，包含数字显示，高亮显示。
+
+图片说明：本组件根据可用屏幕高宽度自动排列布局，可适应各种屏幕，多张图片布局和。
+
+
+## 基本用法
+
+组件引用了uniapp部分组件，所以得先导入uniapp组件,如果用不到该功能可不导入
+[Grid 宫格](https://ext.dcloud.net.cn/plugin?id=27)
+[Icons 图标](https://ext.dcloud.net.cn/plugin?id=28)
+
+在template中使用组件
+```html
+    <Dynamic v-for="(item,index) in list" key="id" 
+        :imgList="item.imgList" 
+        :avatar="item.avatar"
+        :name="item.name"
+        :publishTime="item.publishTime"
+        :content="item.content"
+        :isLike="item.isLike"
+        :isGiveReward="item.isGiveReward"
+        :likeNumber="item.likeNumber"
+        :giveRewardNumber="item.giveRewardNumber"
+        :chatNumber="item.chatNumber"
+        @clickDynamic="clickDynamic(index)"
+        @clickUser="clickUser(item.id)"
+        @clickFocus="clickFocus(index)"
+        @clickThumbsup="clickThumbsup(item.id)"
+        @clickGiveReward="clickGiveReward(item.id)"
+        @clickChat="clickChat(item.id)">
+    </Dynamic>
+```  
+
+
+```javascript
+import Dynamic from '../../components/Dynamic/Dynamic.vue'
+export default {
+    components: {
+        Dynamic
+    },
+    data() {
+        return {
+            title: 'Hello',
+            list:[
+                {
+                    id:1,
+                    avatar:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1950846641,3729028697&fm=26&gp=0.jpg',
+                    name:'小新',
+                    publishTime:1617086756,
+                    content:'中国外交官这样讽加拿大总理，算不算骂？该不该骂？',
+                    imgList:[
+                        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114,2993359804&fm=26&gp=0.jpg',
+                        'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151,826506100&fm=26&gp=0.jpg',
+                    ],
+                    isLike:true,
+                    isGiveReward:true,
+                    likeNumber:2,
+                    giveRewardNumber:2,
+                    chatNumber:2,
+                    isFocusOn:true,
+                },
+                
+                {
+                    id:2,
+                    avatar:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2291332875,175289127&fm=26&gp=0.jpg',
+                    name:'小白',
+                    publishTime:1617036656,
+                    content:'  足不出户享国内核医学领域顶级专家云诊断，“中山-联影”分子影像远程互联融合创新中心揭牌 ',
+                    imgList:[
+                        'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151,826506100&fm=26&gp=0.jpg',
+                    ],
+                    isLike:false,
+                    isGiveReward:false,
+                    likeNumber:0,
+                    giveRewardNumber:0,
+                    chatNumber:2,
+                    isFocusOn:false,
+                },
+                {
+                    id:3,
+                    avatar:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1950846641,3729028697&fm=26&gp=0.jpg',
+                    name:'小新',
+                    publishTime:1617046556,
+                    content:'  外交部：一小撮国家和个人编造所谓新疆“强迫劳动”的故事，其心何其毒也！ ',
+                    imgList:[
+                        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114,2993359804&fm=26&gp=0.jpg',
+                        'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151,826506100&fm=26&gp=0.jpg',
+                        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114,2993359804&fm=26&gp=0.jpg',
+                        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114,2993359804&fm=26&gp=0.jpg',
+                        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114,2993359804&fm=26&gp=0.jpg',
+                    ],
+                    isLike:true,
+                    isGiveReward:false,
+                    likeNumber:4,
+                    giveRewardNumber:22,
+                    chatNumber:52,
+                },
+                {
+                    id:4,
+                    avatar:'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3717120934,3932520698&fm=26&gp=0.jpg',
+                    name:'小龙马',
+                    publishTime:1616086456,
+                    content:'DCloud有800万开发者,uni统计手机端月活12亿。是开发者数量和案例最丰富的多端开发框架。 欢迎知名开发商提交案例或接入uni统计。 新冠抗疫专区案例 uni-app助力',
+                    imgList:[
+                        'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151,826506100&fm=26&gp=0.jpg',
+                        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114,2993359804&fm=26&gp=0.jpg',
+                        'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151,826506100&fm=26&gp=0.jpg',
+                    ],
+                    isLike:true,
+                    isGiveReward:false,
+                    likeNumber:25,
+                    giveRewardNumber:0,
+                    chatNumber:7,
+                },
+                {
+                    id:5,
+                    avatar:'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2590128318,632998727&fm=26&gp=0.jpg',
+                    name:'风清扬',
+                    publishTime:1607086356,
+                    content:'划个水',
+                    imgList:[
+                        'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151,826506100&fm=26&gp=0.jpg',
+                        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114,2993359804&fm=26&gp=0.jpg',
+                        'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151,826506100&fm=26&gp=0.jpg',
+                        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114,2993359804&fm=26&gp=0.jpg',
+                    ],
+                    isLike:true,
+                    isGiveReward:true,
+                    likeNumber:3,
+                    giveRewardNumber:2,
+                    chatNumber:2,
+                }
+        ]
+        }
+    },
+    methods:{
+        clickDynamic(e){
+            console.log('childDynamic');
+        },
+        // 点击用户信息
+        clickUser(e){
+            console.log(e);
+            console.log('childUser');
+        },
+        // 点击关注
+        clickFocus(e){
+            this.list[e].isFocusOn = this.list[e].isFocusOn ? false : true;
+            console.log(e);
+            console.log('childUser');
+        },
+        // 点赞
+        clickThumbsup(e){
+            console.log(e);
+            console.log('childThumbsup');
+        },
+        // 点击打赏
+        clickGiveReward(e){
+            console.log(e);
+            console.log('clickGiveReward');
+        },
+        // 点击聊天
+        clickChat(e){
+            console.log(e);
+            console.log('clickChat');
+        }
+    }
+}
+```
+
+## API
+
+**属性说明**
+
+|属性名|类型|默认值|说明|
+:---:|:----:|:---:|:--:|
+|avatar|String|null|头像路径|
+| name | String |  null  |     名称     |
+| publishTime | Number |  null  | 发布时间 |
+| isFocusOn | Boolean |  null  | 是否已关注。 |
+| content | String |  null  | 内容 |
+| imgList | Array |  null  | 显示的图片路径列表 |
+| isLike | Boolean |  null  | 是否已点赞，已点赞会高亮显示 |
+| isGiveReward | Boolean |  null  | 是否已打赏，已打赏会高亮显示 |
+| likeNumber | Boolean |  null  | 点赞数 |
+| giveRewardNumber | Number |  null  | 打赏数 |
+| chatNumber | Number |  null  | 评论数 |
+| chatNumber | Number |  null  | 评论数 |
+| userNoShow | Boolean |  null  | 是否不显示用户信息。包括头像，名称，发布时间 |
+| operateNoShow | Boolean |  null  | 是否不显示操作信息。|
+
+**事件说明**  
+
+|   事件名   |  说明  |返回值 |
+| :--- : | :--: | :----: |
+|  @clickDynamic   | 点击动态触发 | 按传参原值返回 |
+| @clickUser | 点击用户信息触发。包括头像，名称|  按传参原值返回    |
+| @clickFocus | 点击关注触发 |  按传参原值返回  |
+| @clickThumbsup | 点赞触发 |   按传参原值返回 |
+| @clickGiveReward | 点击打赏触发 |  按传参原值返回 |
+| @clickChat | 点击评论触发 |  null  | 按传参原值返回 |
+
+
+补充：有任何问题联系wx：chwlzgz 。在线求打扰~

pages/articleList/article.vue

@@ -3,8 +3,8 @@
     class="content"
     :class="`${options.type == 'detail' ? 'content_detail' : ''}`"
   >
-    <z-nav-bar :title="options.navTitle" bgColor="#fff" fontColor="#333">
+    <z-nav-bar :title="options.navTitle" bgColor="#5188e5" fontColor="#fff">
-      <template v-slot:right >
+      <template v-slot:right v-if="options.type != 'detail'">
         <view class="top_right" @tap="handleSubmit('submit')">
           <text
             style="
@@ -12,7 +12,7 @@
               margin-right: 10rpx;
               border-radius: 20rpx;
               line-height: 40rpx;
-              color: #333;
+              color: #fff;
             "
             >去发布</text
           >
@@ -104,39 +104,93 @@
       v-if="options.type == 'detail'"
       :style="`height: calc(100% - ${
         48 + statusBarHeight + 60
-      }px);padding: 0 20rpx;text-align: justify;`"
+      }px);padding:40rpx 20rpx;text-align: justify;`"
     >
-      <view class="analysis_box" style="height: 100%">
+      <view class="analysis_box" style="height: auto">
-        <view
-          class="analysis_title analysis_title_detail"
-          style="color: #302f35"
-        >
-          {{ articleInfo.title }}
-        </view>
-
         <view class="analysis_img_box">
           <view class="analysis_img">
-            <image :src="articleInfo.taihuTalent.icon"></image>
+            <image
+              v-if="
+                articleInfo &&
+                articleInfo.taihuTalent &&
+                articleInfo.taihuTalent.icon
+              "
+              :src="articleInfo.taihuTalent.icon"
+            />
+            <image v-else src="/static/icon/noIcon.png" />
+
             <view class="taihuTalentBox">
               <view class="taihuTalent_name">{{
+                articleInfo &&
+                articleInfo.taihuTalent &&
                 articleInfo.taihuTalent.name
+                  ? articleInfo.taihuTalent.name
+                  : "普通用户"
               }}</view>
-              <view class="taihuTalent_title"
+              <view
+                class="taihuTalent_title"
+                style="margin-top: 20rpx"
+                v-if="
+                  articleInfo &&
+                  articleInfo.taihuTalent &&
+                  articleInfo.taihuTalent.title
+                "
                 ><text class="zhicheng">{{
                   articleInfo.taihuTalent.title
                 }}</text></view
               >
             </view>
           </view>
-          <view style="color: #525156">{{ articleInfo.readCount }}人阅读</view>
+          <view style="color: #5188e5; text-align: right"
+            >{{ articleInfo.readCount }}人阅读</view
+          >
+        </view>
+        <view
+          class="analysis_title analysis_title_detail"
+          style="color: #302f35; font-size: 36rpx; line-height: 42rpx"
+        >
+          {{ articleInfo.title }}
         </view>
-
         <rich-text
           :nodes="articleInfo.content"
           style="height: auto; margin-bottom: 260rpx; color: #4b4b4b"
         />
       </view>
-
+      <view class="allImage">
+        <view class="imgList">
+          <view
+            class="images"
+            :class="`${fileList1.length > 4 ? 'images3' : ''}`"
+            v-for="(item, index) in fileList1"
+            :key="index"
+          >
+            <image
+              @click.stop="previewImg(index)"
+              class="oneimg"
+              :src="item"
+              mode="aspectFill"
+              :style="{
+                width: imgWidth + 'px',
+                'max-height': imgHeight + 'px',
+              }"
+            ></image>
+          </view>
+        </view>
+      </view>
+      <view class="likeList" v-if="likeList.length > 0" style="color: #5188e5">
+        <uni-icons
+          type="heart"
+          size="20"
+          style="color: #5188e5; margin-right: 10rpx"
+        ></uni-icons>
+        <view class="">{{
+          likeList
+            .map((item) =>
+              item.user.nickname ? item.user.nickname : "普通用户"
+            )
+            .join(" , ")
+        }}</view>
+      </view>
       <!-- 显示聊天记录 -->
       <!-- <articleDetail
         :loading="loading"
@@ -153,12 +207,17 @@
 
       <view class="footer_box">
         <template>
-          <view class="footer_item" style="color: #9a9a9a">
+          <view
+            class="footer_item"
+            style="color: #9a9a9a"
+            @click.stop="clickLike"
+          >
             <view class="footer_item_icon"
               ><uni-icons
                 type="hand-up-filled"
                 size="30"
                 style="color: #9a9a9a"
+                :style="{ color: articleInfo.likeFlag ? '#ff4949' : '#9a9a9a' }"
               ></uni-icons>
               <view class="footer_item_count" style="text-align: center">{{
                 articleInfo.likeCount ? articleInfo.likeCount : "0"
@@ -183,7 +242,11 @@
             </view>
             <text style="letter-spacing: 4rpx">评论</text>
           </view>
-          <view class="footer_item" style="color: #9a9a9a">
+          <view
+            class="footer_item"
+            style="color: #9a9a9a"
+            @click.stop="newOnShare"
+          >
             <view class="footer_item_icon"
               ><uni-icons
                 type="redo-filled"
@@ -196,14 +259,17 @@
         </template>
       </view>
     </view>
-
+    <uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
+      <uni-popup-share @select="haveSelected"></uni-popup-share>
+    </uni-popup>
     <!-- <z-navigation></z-navigation> -->
     <u-popup
       :show="orderModalShow"
       mode="bottom"
       :round="8"
-      background-color="#fff"
+      :background="'#fff'"
-      style="background-color: #fff"
+      style="background: #fff"
+      backgroundColor="#fff"
     >
       <view class="orderModalShow popup_box">
         <view style="text-align: center"
@@ -223,12 +289,11 @@
           "
         ></u-icon>
         <hb-comment
-          style="margin-top: 40rpx; height: 60vh;overflow: auto;padding-bottom: 60rpx;"
+          style="padding-top: 40rpx; overflow: auto; padding-bottom: 100rpx"
-          :user="articleInfo.taihuTalent"
+          :user="currentUser"
           ref="hbComment"
           @add="sendComment"
           @del="del"
-        
           @focusOn="focusOn"
           :deleteTip="'确认删除？'"
           :cmData="commentData"
@@ -253,6 +318,9 @@ export default {
   },
   data() {
     return {
+      currentUser: {},
+      likeList: [],
+
       orderModalShow: false,
       commentData: [],
       articleInfo: {},
@@ -311,6 +379,10 @@ export default {
       recordData: {},
       editableMap: {},
       isRefreshing: false, //刷新状态
+      windowWidth: 0, //屏幕可用宽度
+      windowHeight: 0, //屏幕可用高度
+      imgWidth: 0, //图片宽度
+      imgHeight: 0, //图片高度
     };
   },
   computed: {
@@ -319,46 +391,25 @@ export default {
   async onLoad(options) {
     this.options = options;
     this.medicalId = options.id;
-    if (this.options.type == "add") {
-      this.loading = true;
-    } else {
-      this.loading = true;
-      await this.getMedicalDetail(() => {
-        this.medicalForm = { ...this.medicalRecords };
-        console.log("this.medicalForm at line 193:", this.medicalForm);
-        if (this.medicalRecords.img) {
-          this.$refs.commonMedicalDetail.fileList1 = this.medicalRecords.img
-            .split(",")
-            .map((image, i) => ({
-              uid: i, // 假设 id 是唯一标识符
-              name: i, // 文件名
-              status: "done", // 状态
-              url: image, // 文件 URL
-            }));
-        }
-      });
 
-      //   this.tishi=true
-    }
     uni.hideTabBar();
     uni.removeStorageSync("homeParams");
     //获取设备信息
     const systemInfo = uni.getSystemInfoSync();
     this.containerHeight = systemInfo.windowHeight; //获取设备的窗口高度
     // this.sendQuestion();
+    this.windowHeight = systemInfo.windowHeight;
+    this.windowWidth = systemInfo.windowWidth;
   },
-  onShow() {
+  async onShow() {
-    // console.log('进入到onShow方法')
+    if (this.options.type == "add") {
-    // this.activeRecord = null;
+      this.loading = true;
-    // this.getRecordsData();
+    } else {
-    // this.getUserAiVipCount(); //更新次数
+      this.loading = true;
-    // //我的-会话记录跳转来的
+      await this.getMedicalDetail();
-    // this.pageData = uni.getStorageSync('homeParams').data;
+
-    // this.pageType = uni.getStorageSync('homeParams').type;
+      //   this.tishi=true
-    // let index = uni.getStorageSync('homeParams').index;
+    }
-    // if(this.pageData&&!this.pageType){
-    // 	this.clickRecord(this.pageData, index);
-    // }
   },
   async onPullDownRefresh() {
     this.isRefreshing = true;
@@ -371,20 +422,7 @@ export default {
       } else {
         this.showMessages = true;
         this.loading = true;
-        await this.getMedicalDetail(() => {
+        await this.getMedicalDetail();
-          this.medicalForm = { ...this.medicalRecords };
-          console.log("this.medicalForm at line 193:", this.medicalForm);
-          if (this.medicalRecords.img) {
-            this.$refs.commonMedicalDetail.fileList1 = this.medicalRecords.img
-              .split(",")
-              .map((image, i) => ({
-                uid: i, // 假设 id 是唯一标识符
-                name: i, // 文件名
-                status: "done", // 状态
-                url: image, // 文件 URL
-              }));
-          }
-        });
 
         //   this.tishi=true
       }
@@ -395,8 +433,101 @@ export default {
     }, 800);
   },
   methods: {
+    newOnShare() {
+      this.$refs.share.open();
+    },
+    haveSelected(data) {
+      let image = "";
+      this.articleInfo.img && this.articleInfo.img != ""
+        ? (image = this.articleInfo.img.split(",")[0])
+        : (image = "static/logo_zi.png");
+      console.log(data, " 选择的是");
+      if (data.index == 0) {
+        // 分享到好友
+        uni.share({
+          provider: "weixin",
+          scene: "WXSceneSession",
+          type: 0,
+          href: this.$apkUrl,
+          title: `【太湖云医】 ${this.articleInfo.title}`,
+          // summary: `${this.productInfo.content}`,
+          imageUrl: image,
+          success: function (res) {
+            console.log("success:" + JSON.stringify(res));
+          },
+          fail: function (err) {
+            console.log("fail:" + JSON.stringify(err));
+          },
+        });
+      } else if (data.index == 1) {
+        // 分享到朋友圈
+        uni.share({
+          provider: "weixin",
+          scene: "WXSceneTimeline",
+          type: 0,
+          href: this.$apkUrl,
+          title: `【太湖云医】 ${this.articleInfo.title}`,
+          // summary: `${this.taskInfo.content}`,
+          imageUrl: image,
+          success: function (res) {
+            console.log("success:" + JSON.stringify(res));
+          },
+          fail: function (err) {
+            console.log("fail:" + JSON.stringify(err));
+          },
+        });
+      }
+    },
+    // 自适应判断
+    judgeImg() {
+      if (this.fileList1.length == 1) {
+        this.imgWidth = ((this.windowWidth - 10) * 2) / 3;
+        this.imgHeight = (this.windowHeight * 3) / 5;
+      } else if (this.fileList1.length == 4) {
+        this.imgWidth = (this.windowWidth - 10) / 3.3;
+        this.imgHeight = this.imgWidth;
+      } else {
+        this.imgWidth = (this.windowWidth - 10) / 3.4;
+        this.imgHeight = this.imgWidth;
+      }
+    },
+    previewImg(index) {
+      uni.previewImage({
+        urls: this.fileList1,
+        // longPressActions: {
+        //   itemList: ["保存图片"],
+        // },
+        current: index, // 设置当前预览的图片索引
+      });
+    },
+    clickLike() {
+      console.log("childThumbsup");
+
+      this.$http
+        .request({
+          url: "common/taihuTalentArticle/addOrCancelArticleLike",
+          method: "POST",
+          data: {
+            articleId: this.articleInfo.id,
+          },
+          header: {
+            "Content-Type": "application/json",
+          },
+        })
+        .then((res) => {
+          console.log("res at line 308:", res);
+          this.getMedicalDetail();
+          this.$forceUpdate();
+        });
+      // common/taihuTalentArticle/addOrCancelArticleLike
+    },
     onHandleClickOpenComment() {
       console.log("111 at line 384:", 111);
+      console.log(
+        "this.currentUser at line 365:",
+        this.articleInfo.taihuTalent
+      );
+
       this.orderModalShow = true;
     },
     closeOrderModalShow() {
@@ -696,13 +827,13 @@ export default {
         });
     },
     //创建新对话
-    sendComment(comment,pid) {
+    sendComment(comment, pid) {
       this.$http
         .request({
           url: "common/taihuTalentArticle/addArticleComment",
           method: "POST",
           data: {
-            pid: pid?pid:0, //第一条评论为0
+            pid: pid ? pid : 0, //第一条评论为0
             articleId: this.options.id, //文章id
             content: comment, //内容
           },
@@ -713,6 +844,7 @@ export default {
         .then((res) => {
           console.log("res at line 713:", res);
           if (res.code == 0) {
+            this.getMedicalDetail();
           } else {
             this.$commonJS.showToast("评论失败");
           }
@@ -754,14 +886,32 @@ export default {
           console.log("res at line 682:", res);
           if (res.code == 0) {
             this.loading = false;
-            this.articleInfo = res.article;
-            this.commentData = res.comments;
 
+            this.articleInfo = res.article;
+            this.medicalForm = { ...this.articleInfo };
+            console.log("this.medicalForm at line 193:", this.articleInfo);
+            if (this.articleInfo.img) {
+              this.fileList1 = this.articleInfo.img.split(",");
+            }
+            this.$nextTick(() => {
+              // if (this.userInfo.id == this.articleInfo.userId) {
+              //   this.currentUser = this.articleInfo.taihuTalent;
+              // } else {
+              this.currentUser = {
+                ...this.userInfo,
+                icon: this.userInfo.avatar,
+              };
+
+              console.log("this.currentUser at line 823:", this.currentUser);
+              // }
+            });
+            this.likeList = res.article.likeList;
+            this.commentData = res.comments;
             this.commentData = {
-            
               commentSize: res.commentCount,
               comment: this.getTree(this.commentData),
             };
+            this.judgeImg();
             this.$forceUpdate();
 
             // 滚动到最底部锚点
@@ -1215,7 +1365,7 @@ h3 {
   display: flex;
   /* #endif */
   flex-direction: row;
-  z-index: 502;
+  z-index: 10;
   box-sizing: content-box;
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
@@ -1268,8 +1418,8 @@ h3 {
     font-weight: 700;
   }
   .analysis_title_detail {
-    margin-top: 30rpx;
+    margin-top: 20rpx;
-    margin-bottom: 50rpx;
+    margin-bottom: 30rpx;
     // color: #1781ff;
     font-size: 42rpx;
     font-weight: 700;
@@ -1313,7 +1463,7 @@ h3 {
   padding: 0;
 }
 .analysis_img_box {
-  margin-bottom: 30rpx;
+  margin-bottom: 4rpx;
 }
 .analysis_img {
   display: flex;
@@ -1330,7 +1480,6 @@ h3 {
   width: calc(100% - 140rpx);
   color: #1b1b1b;
   .taihuTalent_name {
-    margin-bottom: 20rpx;
     font-size: 36rpx;
     font-weight: 600;
   }
@@ -1360,4 +1509,36 @@ h3 {
     }
   }
 }
+.allImage {
+  margin-top: 40rpx;
+  display: flex;
+
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+.imgList {
+  // margin: 0 30rpx;
+}
+.images:not(:nth-child(3n)) {
+  /* margin-right: 10rpx; */
+}
+.text {
+  margin: 1% 3% 2%;
+}
+.images {
+  margin-right: 10rpx;
+  display: inline-block;
+}
+.images3:nth-child(3n) {
+  margin-right: 0rpx;
+}
+.likeList {
+  background: #f7f7f7;
+  border-radius: 4rpx;
+  padding: 8rpx 20rpx;
+  box-sizing: border-box;
+  margin: 20rpx 0;
+  display: flex;
+  align-items: center;
+}
 </style>

pages/articleList/index.vue

@@ -70,11 +70,11 @@
                     <view class="item_name hidden2">{{ item.title }}</view>
 
                   <view class="item_time"
-                    ><text style="margin-right: 30rpx; color: #e38d54"
+                    ><text style="margin-right: 30rpx; color: #e38d54" v-if="item.come==1"
-                      >医案</text
+                      >医案转发</text
-                    >{{
+                    ><text style="letter-spacing: 1rpx;">{{
-                      item.createTime ? item.createTime.split(" ")[0] : ""
+                      item.createTime ? item.createTime : ""
-                    }}</view
+                    }}</text></view
                   >
 
                   <view class="item_time item_bottom">
@@ -86,14 +86,14 @@
                       <view><text>{{ item.commentCount?item.commentCount:0 }}</text>评论</view></view
                     >
 
-                    <view style="color: #5188e5"
+                    <!-- <view style="color: #5188e5"
                       ><uni-icons
                         type="redo-filled"
                         size="18"
                         color="#5188e5"
                       ></uni-icons
                       >分享</view
-                    >
+                    > -->
                   </view> 
                   </view>
                  

pages/articleList/likeList.vue

@@ -0,0 +1,481 @@
+<template>
+  <view>
+    <u-popup
+      :show="orderModalShow"
+      mode="bottom"
+      :round="8"
+      :background="'#fff'"
+      style="background: #fff" backgroundColor="#fff"
+    >
+      <view class="orderModalShow popup_box">
+        <view style="text-align: center"
+          >全部 {{ articleInfo.likeCount }} 人点赞</view
+        >
+
+        <u-icon
+          name="close"
+          color="#333"
+          size="18"
+          @click="closeOrderModalShow"
+          style="
+            display: inline-block;
+            position: absolute;
+            right: 20rpx;
+            top: 20rpx;
+          "
+        ></u-icon>
+        <view style="padding-top: 40rpx; overflow: auto; padding-bottom: 0rpx">
+        
+        
+        
+        
+          <view class="hb-comment" style="height: 80vh">
+          <view class="comment-list" v-if="likeList.length != 0">
+          <view class="comment-box" v-for="(item, index) in likeList">
+        <view class="comment-box-item">
+          <view>
+            <image
+              v-if="item.user.avatar"
+              :src="item.user.avatar"
+              mode="aspectFill"
+              class="avatar"
+            ></image>
+            <image
+              v-else
+              src="/static/icon/noIcon.png"
+              mode="aspectFill"
+              class="avatar"
+            ></image>
+          </view>
+          <view class="comment-main">
+            <!-- 父评论体-start -->
+            <view class="comment-main-top">
+              <view class="nick-name-box">
+                <view class="nick-name"
+                  >{{ item.user.nickname ? item.user.nickname : "普通用户" }}
+                  </view
+                >
+              </view>
+            </view>
+        
+           
+          
+          </view>
+        </view>
+      </view>
+      </view>
+      </view>
+        </view>
+        <!-- <hb-comment
+          
+          :user="currentUser"
+          ref="hbComment"
+          @add="sendComment"
+          @del="del"
+          @focusOn="focusOn"
+          :deleteTip="'确认删除？'"
+          :cmData="commentData"
+          v-if="commentData"
+        ></hb-comment> -->
+      </view>
+    </u-popup>
+  </view>
+</template>
+
+<script>
+import $http from "@/config/requestConfig.js";
+import { mapState, mapMutations } from "vuex";
+
+
+export default {
+  components: {
+
+  },
+  props:[],
+  data() {
+    return {
+      articleId: null,
+      currentUser: {},
+
+      orderModalShow: false,
+      likeList: [],
+      articleInfo: {},
+
+    };
+  },
+  computed: {
+    ...mapState(["userInfo"]),
+  },
+  async onLoad(options) {
+
+  },
+   onShow() {
+
+
+
+  },
+
+  methods: {
+    // 自适应判断
+
+
+
+   async onHandleClickOpenComment(id) {
+      this.articleId=id;
+      console.log("111 at line 384:", 111);
+      console.log(
+        "this.currentUser at line 365:",
+        this.articleInfo.taihuTalent
+      );
+      await this.getMedicalDetail(()=>{
+        this.orderModalShow = true;
+      });
+
+      
+    },
+    closeOrderModalShow() {
+      this.orderModalShow = false;
+      this.$emit("close",this.articleId);
+
+    },
+    saveContens(content) {
+      console.log("content at line 322:", content);
+      this.formData.message = content;
+    },
+    handleSubmit(type, isNewSave) {
+      console.log("this.editableMap at line 243:", this.formData);
+
+      if (!this.formData.title) {
+        this.$commonJS.showToast("请输入文章标题");
+        return;
+      }
+      if (!this.formData.message) {
+        this.$commonJS.showToast("请输入文章正文内容");
+        return;
+      }
+      if (this.fileList1.length == 0) {
+        this.$commonJS.showToast("请至少上传一张图片");
+        return;
+      }
+
+      var data = {
+        img:
+          this.fileList1.length > 0
+            ? this.fileList1.map((e) => e.url).toString()
+            : "",
+        title: this.formData.title ? this.formData.title : "",
+        content: this.formData.message ? this.formData.message : "",
+      };
+
+      this.$http
+        .request({
+          url: "common/taihuTalentArticle/addArticle",
+          method: "POST",
+          data: {
+            ...data,
+          },
+          header: {
+            "Content-Type": "application/json",
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            uni.redirectTo({
+              url: "/pages/articleList/index",
+            });
+          } else {
+            this.$commonJS.showToast(res.msg);
+          }
+        })
+        .catch((err) => {});
+    },
+
+
+
+
+    //点击每个记录
+
+
+    //创建新对话
+    sendComment(comment, pid) {
+      this.$http
+        .request({
+          url: "common/taihuTalentArticle/addArticleComment",
+          method: "POST",
+          data: {
+            pid: pid ? pid : 0, //第一条评论为0
+            articleId: this.articleId, //文章id
+
+            content: comment, //内容
+          },
+          header: {
+            "Content-Type": "application/json",
+          },
+        })
+        .then((res) => {
+          console.log("res at line 713:", res);
+          if (res.code == 0) {
+            this.getMedicalDetail();
+          } else {
+            this.$commonJS.showToast("评论失败");
+          }
+        });
+    },
+
+    //交谈请求，获取回答
+    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;
+    },
+    getMedicalDetail(fn) {
+      //清空消息记录
+
+      this.$http
+        .request({
+          url: "common/taihuTalentArticle/getArticleLikeAndComment",
+          method: "POST",
+          data: {
+            articleId:  this.articleId,
+          },
+          header: {
+            "Content-Type": "application/json",
+          },
+        })
+        .then((res) => {
+          console.log("res at line 682:", res);
+          if (res.code == 0) {
+            this.loading = false;
+
+            this.articleInfo = res.article;
+            this.medicalForm = { ...this.articleInfo };
+            console.log("this.medicalForm at line 193:", this.articleInfo);
+           
+            this.$nextTick(() => {
+              // if (this.userInfo.id == this.articleInfo.userId) {
+              //   this.currentUser = this.articleInfo.taihuTalent;
+              // } else {
+                this.currentUser = {...this.userInfo,icon:this.userInfo.avatar};
+
+                console.log('this.currentUser at line 823:', this.currentUser)
+              // }
+            });
+            this.likeList = res.article.likeList;
+           
+           
+            if(fn){
+              fn();
+            }
+
+            // 滚动到最底部锚点
+            //   that.$nextTick(() => {
+            //     that.scrollToBottom();
+            //   });
+            // 停止轮询
+          }
+        })
+        .catch((error) => {
+          console.log("请求出错:", error);
+        });
+
+      //调用后端 SSE 接口，发送问题并接收实时回答
+      // this.startSSE(params);
+    },
+  },
+  onHide() {},
+  onUnload() {},
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/static/mixin.scss";
+
+.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: 20rpx 0;
+}
+
+.comment-box-item {
+  width: 100%;
+  display: flex;
+}
+
+.comment-main {
+  width: calc(100% - 70rpx);
+
+  padding-left: 20rpx;
+}
+
+.comment-main-top {
+  width: 600rpx;
+  padding-top: 12rpx;
+  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;
+  color: #494943;
+  line-height: 50rpx;
+  // font-size: 40rpx;
+}
+
+.isLike {
+  font-size: 28rpx;
+  padding-right: 10rpx;
+  color: #2d8cf0;
+}
+
+.notLike {
+  font-size: 28rpx;
+  padding-right: 10rpx;
+  color: #999999;
+}
+
+.comment-main-content {
+  width: 100%;
+  padding: 8rpx 10rpx 8rpx 0;
+  text-align: justify;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  //   font-size: 30rpx;
+}
+
+.comment-main-foot {
+  display: flex;
+  font-size: 22rpx;
+  line-height: 24rpx;
+  margin-top: 6rpx;
+  margin-top: 6rpx;
+}
+
+.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: 20rpx;
+  color: #007aff;
+}
+
+.comment-sub-box {
+  padding: 20rpx 0;
+}
+
+.comment-sub-item {
+  display: flex;
+  margin-bottom: 12rpx;
+}
+.popup_box {
+  padding: 20rpx;
+
+  box-sizing: border-box;
+  .curriulum_title_box {
+    .title {
+      text-align: center;
+      font-size: 34rpx !important;
+    }
+  }
+}
+</style>

pages/articleList/pinglun.vue

@@ -0,0 +1,860 @@
+<template>
+  <view>
+    <u-popup
+      :show="orderModalShow"
+      mode="bottom"
+      :round="8"
+      :background="'#fff'"
+      style="background: #fff" backgroundColor="#fff"
+    >
+      <view class="orderModalShow popup_box">
+        <view style="text-align: center"
+          >全部 {{ articleInfo.commentCount }} 条评论</view
+        >
+
+        <u-icon
+          name="close"
+          color="#333"
+          size="18"
+          @click="closeOrderModalShow"
+          style="
+            display: inline-block;
+            position: absolute;
+            right: 20rpx;
+            top: 20rpx;
+          "
+        ></u-icon>
+        <hb-comment
+          style="padding-top: 40rpx; overflow: auto; padding-bottom: 100rpx"
+          :user="currentUser"
+          ref="hbComment"
+          @add="sendComment"
+          @del="del"
+          @focusOn="focusOn"
+          :deleteTip="'确认删除？'"
+          :cmData="commentData"
+          v-if="commentData"
+        ></hb-comment>
+      </view>
+    </u-popup>
+  </view>
+</template>
+
+<script>
+import $http from "@/config/requestConfig.js";
+import { mapState, mapMutations } from "vuex";
+
+
+export default {
+  components: {
+
+  },
+  props:[],
+  data() {
+    return {
+      articleId: null,
+      currentUser: {},
+
+      orderModalShow: false,
+      commentData: [],
+      articleInfo: {},
+
+    };
+  },
+  computed: {
+    ...mapState(["userInfo"]),
+  },
+  async onLoad(options) {
+
+  },
+   onShow() {
+
+
+
+  },
+
+  methods: {
+    // 自适应判断
+
+
+
+   async onHandleClickOpenComment(id) {
+      this.articleId=id;
+      console.log("111 at line 384:", 111);
+      console.log(
+        "this.currentUser at line 365:",
+        this.articleInfo.taihuTalent
+      );
+      await this.getMedicalDetail(()=>{
+        this.orderModalShow = true;
+      });
+
+      
+    },
+    closeOrderModalShow() {
+      this.orderModalShow = false;
+      this.$emit("close",this.articleId);
+
+    },
+    saveContens(content) {
+      console.log("content at line 322:", content);
+      this.formData.message = content;
+    },
+    handleSubmit(type, isNewSave) {
+      console.log("this.editableMap at line 243:", this.formData);
+
+      if (!this.formData.title) {
+        this.$commonJS.showToast("请输入文章标题");
+        return;
+      }
+      if (!this.formData.message) {
+        this.$commonJS.showToast("请输入文章正文内容");
+        return;
+      }
+      if (this.fileList1.length == 0) {
+        this.$commonJS.showToast("请至少上传一张图片");
+        return;
+      }
+
+      var data = {
+        img:
+          this.fileList1.length > 0
+            ? this.fileList1.map((e) => e.url).toString()
+            : "",
+        title: this.formData.title ? this.formData.title : "",
+        content: this.formData.message ? this.formData.message : "",
+      };
+
+      this.$http
+        .request({
+          url: "common/taihuTalentArticle/addArticle",
+          method: "POST",
+          data: {
+            ...data,
+          },
+          header: {
+            "Content-Type": "application/json",
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            uni.redirectTo({
+              url: "/pages/articleList/index",
+            });
+          } else {
+            this.$commonJS.showToast(res.msg);
+          }
+        })
+        .catch((err) => {});
+    },
+
+
+
+
+    //点击每个记录
+
+
+    //创建新对话
+    sendComment(comment, pid) {
+      this.$http
+        .request({
+          url: "common/taihuTalentArticle/addArticleComment",
+          method: "POST",
+          data: {
+            pid: pid ? pid : 0, //第一条评论为0
+            articleId: this.articleId, //文章id
+
+            content: comment, //内容
+          },
+          header: {
+            "Content-Type": "application/json",
+          },
+        })
+        .then((res) => {
+          console.log("res at line 713:", res);
+          if (res.code == 0) {
+            this.getMedicalDetail();
+          } else {
+            this.$commonJS.showToast("评论失败");
+          }
+        });
+    },
+
+    //交谈请求，获取回答
+    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;
+    },
+    getMedicalDetail(fn) {
+      //清空消息记录
+
+      this.$http
+        .request({
+          url: "common/taihuTalentArticle/getArticleLikeAndComment",
+          method: "POST",
+          data: {
+            articleId:  this.articleId,
+          },
+          header: {
+            "Content-Type": "application/json",
+          },
+        })
+        .then((res) => {
+          console.log("res at line 682:", res);
+          if (res.code == 0) {
+            this.loading = false;
+
+            this.articleInfo = res.article;
+            this.medicalForm = { ...this.articleInfo };
+            console.log("this.medicalForm at line 193:", this.articleInfo);
+           
+            this.$nextTick(() => {
+              // if (this.userInfo.id == this.articleInfo.userId) {
+              //   this.currentUser = this.articleInfo.taihuTalent;
+              // } else {
+                this.currentUser = {...this.userInfo,icon:this.userInfo.avatar};
+
+                console.log('this.currentUser at line 823:', this.currentUser)
+              // }
+            });
+            this.commentData = res.comments;
+            this.commentData = {
+              commentSize: res.commentCount,
+              comment: this.getTree(this.commentData),
+            };
+           
+            if(fn){
+              fn();
+            }
+
+            // 滚动到最底部锚点
+            //   that.$nextTick(() => {
+            //     that.scrollToBottom();
+            //   });
+            // 停止轮询
+          }
+        })
+        .catch((error) => {
+          console.log("请求出错:", error);
+        });
+
+      //调用后端 SSE 接口，发送问题并接收实时回答
+      // this.startSSE(params);
+    },
+  },
+  onHide() {},
+  onUnload() {},
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/static/mixin.scss";
+
+.content {
+  height: 100%;
+  background: linear-gradient(to bottom, #d8e6ff 0%, #d8e6ff57 90%, #fff 98%);
+}
+
+.home_top {
+  width: 100%;
+  background: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  padding: 90rpx 50rpx 30rpx;
+  text-align: center;
+  box-sizing: border-box;
+  z-index: 999;
+
+  .home_top_icon {
+    position: absolute;
+    left: 40rpx;
+    top: 85rpx;
+    display: flex;
+    align-items: center;
+
+    .home_top_left,
+    .home_top_right {
+      width: 60rpx;
+      height: 60rpx;
+      padding: 10rpx;
+      box-sizing: border-box;
+    }
+
+    .home_top_right {
+      margin-left: 30rpx;
+    }
+  }
+
+  text {
+    font-size: 43rpx;
+    line-height: 44rpx;
+    font-weight: bold;
+    color: $themeColor;
+  }
+
+  .home_top_folder {
+    padding: 12rpx;
+    position: absolute;
+    right: 40rpx;
+    top: 75rpx;
+
+    image {
+      width: 50rpx;
+      height: 50rpx;
+    }
+  }
+}
+
+.home_wrap {
+  // padding-bottom: 300rpx;
+  overflow-y: auto;
+
+  .home_logo {
+    padding-top: 40rpx;
+
+    image {
+      display: block;
+      width: 130rpx;
+      height: 130rpx;
+      margin: 0 auto;
+    }
+
+    .logo_main {
+      text-align: center;
+      display: block;
+      padding-top: 30rpx;
+      font-size: 35rpx;
+      color: $themeColor;
+      line-height: 46rpx;
+    }
+
+    .logo_con {
+      display: block;
+      width: 510rpx;
+      margin: 30rpx auto;
+      font-size: 28rpx;
+      color: #303030;
+      line-height: 40rpx;
+      text-indent: 2em;
+    }
+  }
+}
+
+.home_form {
+  height: 100%;
+  // margin-top: 60rpx;
+
+  position: relative;
+
+  .form_item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 30rpx;
+
+    text {
+      line-height: 68rpx;
+      font-size: 38rpx;
+      color: #fff;
+      background: $themeBgColor;
+      text-align: center;
+      border-radius: 20rpx;
+      padding: 0 25rpx;
+      border: 1rpx solid $themeBgColor;
+      box-sizing: border-box;
+    }
+
+    textarea,
+    input {
+      display: inline-block;
+      width: calc(100%);
+      height: 70rpx;
+      line-height: 44rpx;
+      padding: 0 20rpx;
+      // padding: 17rpx 30rpx;
+      font-size: 38rpx;
+      color: #303030;
+
+      box-sizing: border-box;
+      resize: none;
+
+      overflow-y: scroll;
+    }
+  }
+}
+
+.custom-placeholder {
+  font-size: 38rpx;
+  font-weight: 500 !important;
+  color: #8b8c90 !important;
+}
+
+.submit_form {
+  width: 100%;
+  height: 90px;
+  background: #fff;
+  position: fixed;
+  left: 0;
+  bottom: 120rpx;
+  padding: 0 50rpx;
+  z-index: 999;
+}
+
+.submit_btn {
+  position: absolute;
+  right: 0rpx;
+  bottom: 10rpx;
+
+  image {
+    width: 55rpx;
+    height: 55rpx;
+  }
+}
+
+.active {
+  text {
+    color: $themeBgColor;
+  }
+
+  .assistants_img_1 {
+    display: none !important;
+  }
+
+  .assistants_img_2 {
+    display: block !important;
+  }
+}
+
+.message_wrap {
+  position: relative;
+  width: 100%;
+  //   background: #fff;
+  z-index: 99;
+  padding: 0 30rpx;
+  height: 85vh;
+}
+
+.message_title {
+  text-align: center;
+  font-size: 30rpx;
+  color: #333;
+  line-height: 50rpx;
+  display: block;
+  font-weight: bold;
+  padding: 10rpx 0;
+}
+
+.message-container-block {
+  padding-top: 20rpx;
+  padding-bottom: 80px;
+  font-size: 30rpx;
+}
+
+.message-container {
+  display: inline;
+  line-height: 48rpx;
+}
+
+/* 自定义的loading效果 */
+.loading-spinner {
+  margin-top: 10rpx;
+  border: 2px solid #f3f3f3;
+  /* 灰色背景 */
+  border-top: 2px solid #3498db;
+  /* 蓝色顶部 */
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  animation: spin 1s linear infinite;
+  /* 旋转动画 */
+}
+
+/* 旋转动画 */
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.bold-text {
+  display: block;
+  font-weight: bold;
+  font-size: 28rpx;
+  /* 增大字号 */
+}
+
+h3 {
+  font-size: 36rpx;
+  font-weight: bold;
+}
+
+h3 {
+  font-size: 32rpx;
+}
+
+.red-text {
+  color: red;
+  font-size: 28rpx;
+  /* 增大字号 */
+}
+
+.message-right {
+  display: block;
+  text-align: right;
+  margin: 30rpx 0;
+
+  text {
+    display: inline-block;
+    padding: 20rpx;
+    line-height: 38rpx;
+    background-color: rgba(81, 136, 229, 0.2);
+    border-radius: 15rpx;
+    color: #333;
+    font-size: 28rpx;
+    text-align: left;
+  }
+}
+
+.drawer-content {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.list_content {
+  padding: 70rpx 20rpx 30rpx;
+  overflow-y: auto;
+}
+
+.list_item {
+  padding: 18rpx 10rpx;
+}
+
+.text_item {
+  display: block;
+  width: 100%;
+  font-size: 30rpx;
+  line-height: 40rpx;
+  padding: 0 10rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.null_text {
+  display: block;
+  text-align: center;
+  font-size: 30rpx;
+  color: #999;
+  padding-top: 150rpx;
+}
+
+.active_item {
+  background: #d8e6ff;
+  border-radius: 15rpx;
+
+  text {
+    color: #5188e5;
+  }
+}
+
+.folder_popup {
+  z-index: 9999;
+
+  .popup-content {
+    padding: 30rpx;
+    width: 550rpx;
+    background: #fff;
+    border-radius: 10rpx;
+
+    .popup-top {
+      padding: 15rpx;
+      display: flex;
+      align-items: center;
+      background: #5188e5;
+      border-radius: 10rpx;
+      color: #fff;
+      font-size: 28rpx;
+      line-height: 45rpx;
+
+      .uni-icons {
+        margin-right: 2rpx;
+      }
+    }
+
+    .popup-list {
+      .item-list {
+        padding: 15rpx;
+        background: #d8e6ff;
+        border-radius: 10rpx;
+        font-size: 28rpx;
+        line-height: 45rpx;
+        color: #5188e5;
+        margin-top: 15rpx;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        position: relative;
+
+        text {
+          position: absolute;
+          right: 20rpx;
+          top: 12rpx;
+          font-size: 22rpx;
+          line-height: 45rpx;
+          color: #ff7800;
+        }
+      }
+
+      .popup-scroll {
+        max-height: 330rpx;
+      }
+    }
+  }
+}
+
+.aiFlag {
+  position: absolute;
+  bottom: 55px;
+  left: 20px;
+  width: calc(100% - 40px);
+  font-size: 11px;
+  line-height: 16px;
+  color: #f69e12;
+  z-index: 999;
+  background: rgba(254, 243, 225, 0.8);
+  border: 1px solid #f2d7aa;
+  padding: 5px;
+  border-radius: 6px;
+}
+.in {
+  border: 1rpx solid #eeeeee;
+  border-radius: 8rpx;
+
+  width: calc(100% - 200rpx);
+}
+.shangpin_editor {
+  width: 100%;
+}
+/deep/.h1_box {
+  height: 24px;
+  margin-top: 40rpx;
+  h1 {
+    margin: 0 !important;
+    font-size: 20px;
+    line-height: 24px;
+  }
+}
+#editor {
+  height: 300px;
+  border: 1px solid #ccc;
+}
+.ql-container {
+  height: auto;
+  min-height: auto;
+}
+.editor-wrapper {
+  //   background-color: #f0f0f080;
+  padding: 20rpx;
+  box-sizing: border-box;
+  border-radius: 20rpx;
+  border: 0.5px solid #777778;
+}
+
+.footer_box {
+  background: #fff;
+  padding-top: 10rpx;
+  height: 80rpx;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  z-index: 502;
+  box-sizing: content-box;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.1);
+}
+
+.footer_bg {
+  background-color: #fff;
+  box-shadow: 0 0px 10px 1px #0000001a;
+}
+
+.footer_item {
+  position: relative;
+  flex: 1;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.footer_item .footer_item_icon {
+  display: flex;
+  align-items: center;
+  margin-bottom: 4rpx;
+  // justify-content: space-around;
+}
+.footer_item_count {
+  margin-left: 10rpx;
+}
+/deep/.u-upload__button {
+  background-color: #fff;
+  .uicon-camera-fill {
+    color: #5188e5 !important;
+  }
+}
+.analysis_box {
+  height: 100%;
+  // padding-top: 20rpx;
+  width: 100%;
+
+  box-sizing: border-box !important;
+  uni-textarea {
+    border: none !important;
+  }
+  .analysis_title {
+    margin-top: 30rpx;
+    margin-bottom: 20rpx;
+    // color: #1781ff;
+    font-size: 32rpx;
+    font-weight: 700;
+  }
+  .analysis_title_detail {
+    margin-top: 20rpx;
+    margin-bottom: 30rpx;
+    // color: #1781ff;
+    font-size: 42rpx;
+    font-weight: 700;
+  }
+}
+/deep/.home_wrap_analysis {
+  .home_form {
+    padding-bottom: 0px;
+  }
+  .form_item {
+    margin-bottom: 0 !important;
+    textarea {
+      //     padding-top: 20rpx;
+      //   height: 80vh !important;
+    }
+    .uni-textarea-wrapper {
+      //   height: 100% !important;
+    }
+  }
+  .submit_btn {
+    padding: 0 40rpx;
+    position: absolute;
+    right: 24rpx;
+    bottom: 24rpx;
+    background-color: #1985fd;
+    margin: auto auto;
+    margin-top: 10rpx;
+    border-radius: 20rpx;
+    line-height: 62rpx;
+    height: 62rpx;
+    text-align: center;
+    color: #fff;
+    // font-weight: bold;
+  }
+}
+.content_detail {
+  background: #fff;
+  padding: 0 20rpx;
+}
+.message_wrap_detail {
+  padding: 0;
+}
+.analysis_img_box {
+  margin-bottom: 4rpx;
+}
+.analysis_img {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10rpx;
+  image {
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 120rpx;
+    margin-right: 20rpx;
+  }
+}
+.taihuTalentBox {
+  width: calc(100% - 140rpx);
+  color: #1b1b1b;
+  .taihuTalent_name {
+    font-size: 36rpx;
+    font-weight: 600;
+  }
+  .zhicheng {
+    background: #e4f0ff;
+    color: #1985fd;
+    padding: 4rpx 20rpx;
+    border-radius: 10rpx;
+    font-size: 24rpx;
+    line-height: 28rpx;
+  }
+}
+.orderModalShow {
+  width: 100%;
+  // max-height: 48vh;
+  // padding-bottom: 120rpx;
+}
+
+.popup_box {
+  padding: 20rpx;
+
+  box-sizing: border-box;
+  .curriulum_title_box {
+    .title {
+      text-align: center;
+      font-size: 34rpx !important;
+    }
+  }
+}
+.allImage {
+  margin-top: 40rpx;
+  display: flex;
+
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+.imgList {
+  // margin: 0 30rpx;
+}
+.images:not(:nth-child(3n)) {
+  /* margin-right: 10rpx; */
+}
+.text {
+  margin: 1% 3% 2%;
+}
+.images {
+  margin-right: 10rpx;
+  display: inline-block;
+}
+.images3:nth-child(3n) {
+  margin-right: 0rpx;
+}
+</style>

pages/doctors/index.vue

@@ -6,7 +6,11 @@
       fontColor="#fff"
       :backState="2000"
     ></z-nav-bar>
-    <view class="doctors_module" :style="`top: ${42 + statusBarHeight}px;`">
+    <view
+      class="doctors_module"
+      :style="`top: ${42 + statusBarHeight}px;`"
+      style="z-index: 10"
+    >
       <view class="tab-bar">
         <view
           class="tab-item left-tab"
@@ -24,7 +28,7 @@
         </view>
       </view>
       <template v-if="activeTab == 0">
-        <view class="cateList flexbox" >
+        <view class="cateList flexbox">
           <common-sticky
             itemStyle="width:33.3%; height: 38px;font-size:24rpx;"
             :list="tabsList"
@@ -45,7 +49,7 @@
         </view>
       </template>
       <template v-if="activeTab == 1">
-       
+        <!--        
         <view class="name_search">
           <uni-easyinput
             v-model="courseName"
@@ -55,128 +59,180 @@
             class="center-input"
           />
           <button @click="getArticleListData(true)">查询</button>
-        </view>
+        </view> -->
       </template>
     </view>
-  
-      <scroll-view
-        scroll-y="true"
-        :scroll-top="scrollTop"
-        @scrolltolower="loadMore"
-        :style="`
-          height: calc(100vh - ${activeTab==0?320:280}rpx);
-          margin-top: ${activeTab==0?260:180}rpx;
-          padding-bottom: 140rpx;`
-        "
-        v-if="show == true"
-      >
-        <view class="doctors_list" id="top">
-          <view
-            class="doctors_item"
-            v-for="(item, index) in list"
-            :key="index"
-            @click="goToDetail(item)"
-          >
-            <view class="flex">
-              <view class="flex">
-                <image
-                  v-if="item.squareImage"
-                  :src="item.squareImage"
-                  class="item_image"
-                  mode="aspectFit"
-                ></image>
-                <image
-                  v-else
-                  src="../../static/logo_zi.png"
-                  class="item_image"
-                  mode="aspectFit"
-                ></image>
 
-                <view class="item_right" v-if="currentCateIndex != 2">
+    <scroll-view
-                  <!-- <view class="item_top">
+      scroll-y="true"
+      :scroll-top="scrollTop"
+      @scrolltolower="loadMore"
+      :style="`
+          height: calc(100vh - ${activeTab == 0 ? 320 : 200}rpx);
+          margin-top: ${activeTab == 0 ? 260 : 100}rpx;
+          padding-bottom: 140rpx;`"
+      v-if="show == true"
+    >
+      <view class="doctors_list" id="top" v-if="activeTab == 0">
+        <view
+          class="doctors_item"
+          v-for="(item, index) in list"
+          :key="index"
+          @click="goToDetail(item)"
+        >
+          <view class="flex">
+            <view class="flex">
+              <image
+                v-if="item.squareImage"
+                :src="item.squareImage"
+                class="item_image"
+                mode="aspectFit"
+              ></image>
+              <image
+                v-else
+                src="../../static/logo_zi.png"
+                class="item_image"
+                mode="aspectFit"
+              ></image>
+
+              <view class="item_right" v-if="currentCateIndex != 2">
+                <!-- <view class="item_top">
                     <text
                       class="item_name"
                       v-if="item.taihuTalent && item.taihuTalent.length > 0"
                       >{{ item.taihuTalent[0].name }}</text
                     >
                   </view> -->
-                  <text class="item_con">{{ item.title }}</text>
+                <text class="item_con">{{ item.title }}</text>
-                   <view class="item_info hidden2" style="margin-top: 20rpx;">
+                <view class="item_info hidden2" style="margin-top: 20rpx">
-                    <rich-text style="color: #666;"
+                  <rich-text
-                     
+                    style="color: #666"
-                      :nodes="item.content"
+                    :nodes="item.content"
-
+                    v-if="item.content"
-                      v-if="item.content"
+                  ></rich-text>
-                      ></rich-text
-                    >
-                  </view>
-                </view>
-
-                <view class="item_right" v-else>
-                  <view class="item_top">
-                    <text class="item_name">{{ item.title }}</text>
-                  </view>
-                  <text class="item_con">{{
-                    item.taihuTalent.map((talent) => talent.name).join(" ")
-                  }}</text>
                 </view>
               </view>
-            </view>
 
-            <view class="list_item_bt">
+              <view class="item_right" v-else>
-              <view
+                <view class="item_top">
-                class="list_item_price"
+                  <text class="item_name">{{ item.title }}</text>
-                v-if="item.courseCatalogueEntityList.length == 1"
+                </view>
-              >
-                <text v-if="item.courseCatalogueEntityList[0].halfFee == 0"
-                  >免费</text
-                >
-                <text v-else
-                  >¥{{ item.courseCatalogueEntityList[0].halfFee }}/{{
-                    item.courseCatalogueEntityList[0].fee
-                  }}</text
-                >
-              </view>
-              <view
-                class="list_item_price"
-                v-if="item.courseCatalogueEntityList.length > 1"
-              >
-                <text v-for="(v, i) in item.courseCatalogueEntityList" :key="i">
-                  {{ formatContent(v.title)
-                  }}<text v-if="i !== item.courseCatalogueEntityList.length - 1"
-                    >/</text
-                  >
-                </text>
                 <text
-                  v-if="item.courseCatalogueEntityList[0].halfFee == 0"
+                  class="item_con"
-                  style="padding-left: 20rpx"
+                  v-if="item.taihuTalent && item.taihuTalent.length > 0"
-                  >免费</text
+                  >{{
-                >
+                    item.taihuTalent.map((talent) => talent.name).join(" ")
-                <text v-else style="margin-left: 20rpx"
-                  >各{{ item.courseCatalogueEntityList[0].halfFee }}/{{
-                    item.courseCatalogueEntityList[0].fee
                   }}</text
                 >
               </view>
-              <text class="list_item_study">了解课程</text>
             </view>
           </view>
+
+          <view class="list_item_bt">
+            <view
+              class="list_item_price"
+              v-if="
+                item.courseCatalogueEntityList &&
+                item.courseCatalogueEntityList.length == 1
+              "
+            >
+              <text v-if="item.courseCatalogueEntityList[0].halfFee == 0"
+                >免费</text
+              >
+              <text v-else
+                >¥{{ item.courseCatalogueEntityList[0].halfFee }}/{{
+                  item.courseCatalogueEntityList[0].fee
+                }}</text
+              >
+            </view>
+            <view
+              class="list_item_price"
+              v-if="
+                item.courseCatalogueEntityList &&
+                item.courseCatalogueEntityList.length > 1
+              "
+            >
+              <text v-for="(v, i) in item.courseCatalogueEntityList" :key="i">
+                {{ formatContent(v.title)
+                }}<text v-if="i !== item.courseCatalogueEntityList.length - 1"
+                  >/</text
+                >
+              </text>
+              <text
+                v-if="item.courseCatalogueEntityList[0].halfFee == 0"
+                style="padding-left: 20rpx"
+                >免费</text
+              >
+              <text v-else style="margin-left: 20rpx"
+                >各{{ item.courseCatalogueEntityList[0].halfFee }}/{{
+                  item.courseCatalogueEntityList[0].fee
+                }}</text
+              >
+            </view>
+            <text class="list_item_study">了解课程</text>
+          </view>
         </view>
-        <text v-show="showText && count > list.length" class="show-more"
+      </view>
-          >加载更多</text
+      <view
+        class="doctors_list"
+        id="top"
+        v-if="activeTab == 1"
+        style="margin: 0"
+      >
+        <!-- <view
+            class="doctors_item"
+            v-for="(item, index) in list"
+            :key="index"
+            @click="goToDetail(item)"
+          >
+           
+          </view> -->
+        <Dynamic
+          v-for="(item, index) in list"
+          key="id"
+          :imgList="item.fileList1"
+          :avatar="item.taihuTalent.icon"
+          :name="item.taihuTalent.name"
+          :createTime="item.createTime"
+          :title="item.title"
+          :content="item.content"
+          :isLike="item.likeFlag"
+          :isGiveReward="item.isGiveReward"
+          :likeCount="item.likeCount"
+          :likeList="item.likeList"
+          :readCount="item.readCount"
+          :giveRewardNumber="item.giveRewardNumber"
+          :commentCount="item.commentCount"
+          @clickDynamic="clickDynamic(index)"
+          @clickUser="clickUser(item.id)"
+          @clickFocus="clickFocus(index)"
+          @clickThumbsup="(type) => clickThumbsup(item.id, type)"
+          @clickGiveReward="clickGiveReward(item.id)"
+          @clickChat="clickChat(item.id)"
         >
-        <text v-show="noMore" class="no-more">没有更多了</text>
+        </Dynamic>
-      </scroll-view>
+      </view>
-      <text class="null_text" v-else>{{ null_text }}</text>
+      <text v-show="showText && count > list.length" class="show-more"
-   
+        >加载更多</text
+      >
+      <text v-show="noMore" class="no-more">没有更多了</text>
+    </scroll-view>
+    <text class="null_text" v-else>{{ null_text }}</text>
 
     <z-navigation></z-navigation>
+    <common-pinglun ref="pinglun" @close="close"></common-pinglun>
+    <common-likeList ref="commonLikeList" @close="close"></common-likeList>
+
   </view>
 </template>
 
 <script>
 import $http from "@/config/requestConfig.js";
 import commonArticle from "./article.vue";
+
+import Dynamic from "@/components/qizai-dynamic/Dynamic.vue";
+import commonPinglun from "../articleList/pinglun.vue";
+import commonLikeList from "../articleList/likeList.vue";
 export default {
   data() {
     return {
@@ -184,6 +240,7 @@ export default {
       tabsList: [],
       currentCateIndex: 0,
       list: [],
+
       null_text: "",
 
       current: 1,
@@ -202,9 +259,11 @@ export default {
   },
   components: {
     commonArticle,
+    Dynamic,
+    commonPinglun,
+    commonLikeList,
   },
 
-  
   onPullDownRefresh() {
     this.isRefreshing = true;
     console.log("下拉刷新");
@@ -226,19 +285,120 @@ export default {
   },
   onShow() {},
   methods: {
-	changeActiveTab(e){
+    clickDynamic(id) {
-this.activeTab=e
+      //评论
-if(e==0){
+      console.log("childDynamic");
-  if(!this.taihumedId){
+    },
-    	this.taihumedId = this.tabsList[0].id;
+    // 点击用户信息
-  }
+    clickUser(e) {
+      console.log(e);
+      console.log("childUser");
+    },
+    // 点击关注
+    clickFocus(e) {
+      this.list[e].isFocusOn = this.list[e].isFocusOn ? false : true;
+      console.log(e);
+      console.log("childUser");
+    },
+    close(id){
+      this.getArticleDetail(id);
+    },
 
-            this.getListData(this.taihumedId);
+    // 点赞
-}
+    clickThumbsup(id, type) {
-else{
+      console.log("childThumbsup");
-	this.getArticleListData(true);
+      if (type == "like") {
-}
+        this.$http
-	},
+          .request({
+            url: "common/taihuTalentArticle/addOrCancelArticleLike",
+            method: "POST",
+            data: {
+              articleId: id,
+            },
+            header: {
+              "Content-Type": "application/json",
+            },
+          })
+          .then((res) => {
+            console.log("res at line 308:", res);
+            this.getArticleDetail(id);
+            this.$forceUpdate();
+          });
+       
+      } else if (type == "pinglun") {
+        this.$refs.pinglun.onHandleClickOpenComment(id);
+      
+      } else if (type == "likeList") {
+
+        this.$refs.commonLikeList.onHandleClickOpenComment(id);
+      }
+    },
+
+    getArticleDetail(id) {
+      //清空消息记录
+
+      this.$http
+        .request({
+          url: "common/taihuTalentArticle/getArticleLikeAndComment",
+          method: "POST",
+          data: {
+            articleId: id,
+          },
+          header: {
+            "Content-Type": "application/json",
+          },
+        })
+        .then((res) => {
+          console.log("res at line 682:", res);
+          if (res.code == 0) {
+            this.list.forEach((item) => {
+              if (item.id == id) {
+                item.isLike = res.article.isLike;
+                item.likeCount = res.article.likeCount;
+                item.readCount = res.article.readCount;
+                item.commentCount = res.article.commentCount;
+                item.likeList = res.article.likeList;
+
+                item.likeFlag = res.article.likeFlag;
+              }
+            });
+          }
+        })
+        .catch((error) => {
+          console.log("请求出错:", error);
+        });
+
+      //调用后端 SSE 接口，发送问题并接收实时回答
+      // this.startSSE(params);
+    },
+    // 点击打赏
+    clickGiveReward(e) {
+      console.log(e);
+      console.log("clickGiveReward");
+    },
+    // 点击聊天
+    clickChat(e) {
+      console.log(e);
+      console.log("clickChat");
+    },
+    changeActiveTab(e) {
+      this.current = 1;
+      this.list = [];
+      this.noMore = false;
+      console.log("e at line 309:", e, this.taihumedId);
+      this.activeTab = e;
+      this.$forceUpdate();
+
+      if (e == 0) {
+        if (!this.taihumedId) {
+          this.taihumedId = this.tabsList[0].id;
+        }
+
+        this.getListData(this.taihumedId);
+      } else {
+        this.getArticleListData(true);
+      }
+    },
     //判断显示‘上/中/下’
     formatContent(content) {
       const keywords = ["上部", "中部", "下部"];
@@ -254,28 +414,26 @@ else{
     },
     //获取tab数据
     getTabData() {
-		if(this.activeTab==0){
+      if (this.activeTab == 0) {
-			 this.$http
+        this.$http
-        .request({
+          .request({
-          url: "taihumed/course/getCourseTaihumedList",
+            url: "taihumed/course/getCourseTaihumedList",
-          method: "POST",
+            method: "POST",
-          data: {},
+            data: {},
-          header: {
+            header: {
-            "Content-Type": "application/json",
+              "Content-Type": "application/json",
-          },
+            },
-        })
+          })
-        .then((res) => {
+          .then((res) => {
-          if (res.list && res.list.length > 0) {
+            if (res.list && res.list.length > 0) {
-            this.tabsList = res.list;
+              this.tabsList = res.list;
-            this.taihumedId = this.tabsList[0].id;
+              this.taihumedId = this.tabsList[0].id;
-            this.getListData(this.taihumedId);
+              this.getListData(this.taihumedId);
-          }
+            }
-        });
+          });
-		}
+      } else if (this.activeTab == 1) {
-		else if(this.activeTab==1){
+        this.getArticleListData();
-			this.getArticleListData();
+      }
-		}
-     
     },
     //获取列表数据
     getArticleListData(type) {
@@ -297,7 +455,6 @@ else{
           data: {
             current: this.current,
             limit: this.limit,
-           
           },
           header: {
             "Content-Type": "application/json",
@@ -306,9 +463,9 @@ else{
         .then((res) => {
           uni.hideLoading();
 
-          this.count = res.pageRes.total; //总数
+          this.count = res.page.total; //总数
-          let length = res.pageRes.records.length;
+          let length = res.page.records.length;
-          if (res.pageRes.records && length > 0) {
+          if (res.page.records && length > 0) {
             this.show = true;
             //如果返回的数据少于每页数量，表示没有更多数据
             if (
@@ -318,7 +475,15 @@ else{
             ) {
               this.noMore = true;
             }
-            this.list = [...this.list, ...res.pageRes.records];
+            this.list = [
+              ...this.list,
+              ...res.page.records.map((e) => {
+                return {
+                  ...e,
+                  fileList1: e.img ? e.img.split(",") : [],
+                };
+              }),
+            ];
             this.current += 1; //更新页码
             //显示提示语
             this.showText = true;
@@ -397,12 +562,11 @@ else{
     },
     //加载更多
     loadMore() {
-		if(this.activeTab==0){
+      if (this.activeTab == 0) {
-			this.getListData(this.taihumedId);
+        this.getListData(this.taihumedId);
-		}else{
+      } else {
-			this.getArticleListData();
+        this.getArticleListData();
-		}
+      }
-    
     },
     //切换tab状态
     ordersTabCLi(data, index) {
@@ -614,9 +778,9 @@ else{
   box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.04),
     /* 外部柔光阴影 */ inset -4rpx 0 6rpx rgba(0, 0, 0, 0.03); /* 内阴影模拟夹层效果 */
 }
-.hidden2{
+.hidden2 {
-		line-height: 24px;
+  line-height: 24px;
-		max-height: 48px;
+  max-height: 48px;
-		height: auto;
+  height: auto;
-	}
+}
 </style>

uni_modules/hb-comment/components/hb-comment/hb-comment.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="hb-comment">
+  <view class="hb-comment" style="height: 80vh">
     <!-- 阅读数-start -->
 
     <!-- 阅读数-end -->
@@ -27,7 +27,14 @@
         <view class="comment-box-item">
           <view>
             <image
-              :src="item.user.avatar || emptyAvatar"
+              v-if="item.user.avatar"
+              :src="item.user.avatar"
+              mode="aspectFill"
+              class="avatar"
+            ></image>
+            <image
+              v-else
+              src="/static/icon/noIcon.png"
               mode="aspectFill"
               class="avatar"
             ></image>
@@ -36,14 +43,19 @@
             <!-- 父评论体-start -->
             <view class="comment-main-top">
               <view class="nick-name-box">
-                <view class="nick-name" style="font-size: 32rpx">{{
+                <view class="nick-name"
-                  item.user.nickname ? item.user.nickname : "普通用户"
+                  >{{ item.user.nickname ? item.user.nickname : "普通用户" }}
-                }}</view>
+                  <text
+                    class="zuozhe"
+                    v-if="user.userId || user.id == item.user.userId"
+                    >作者</text
+                  ></view
+                >
               </view>
             </view>
             <view
               class="comment-main-content"
-              style="color: #555459; line-height: 38rpx"
+              style="color: #232325; line-height: 38rpx"
               @click="reply(item.user.nickname, item.user.nickname, item.id)"
             >
               {{ item.content }}
@@ -62,11 +74,12 @@
             <view class="comment-main-foot">
               <view
                 class="foot-time"
-                style="color: #555459; letter-spacing: 1rpx; font-size: 24rpx"
+                style="color: #b7b8ba; letter-spacing: 1rpx; font-size: 24rpx"
                 >{{ item.createTime }}</view
               >
               <view
                 class="foot-btn"
+                style="color: #777775"
                 @click="reply(item.user.nickname, item.user.nickname, item.id)"
                 >回复</view
               >
@@ -79,30 +92,38 @@
             </view>
             <!-- 父评论体-end -->
             <!-- 子评论列表-start -->
-            <view class="comment-sub-box">
+            <view class="comment-sub-box" v-if="item.children.length != 0">
               <view class="comment-sub-item" v-for="each in item.children">
                 <view>
                   <image
-                    :src="each.user.avatar || emptyAvatar"
+                    v-if="each.user.avatar"
+                    :src="each.user.avatar"
                     mode="aspectFill"
                     class="avatar"
-                  >
+                  ></image>
-                  </image>
+                  <image
+                    v-else
+                    src="/static/icon/noIcon.png"
+                    mode="aspectFill"
+                    class="avatar"
+                  ></image>
                 </view>
                 <view class="comment-main">
                   <view class="sub-comment-main-top">
-                    <view
+                    <view class="nick-name" v-if="each.user"
-                      class="nick-name"
-                      style="font-size: 32rpx"
-                      v-if="each.user"
                       >{{
                         each.user.nickname ? each.user.nickname : "普通用户"
-                      }}</view
+                      }}
-                    >
+                      <text
+                        class="zuozhe"
+                        v-if="user.userId || user.id == each.user.userId"
+                        >作者</text
+                      >
+                    </view>
                   </view>
                   <view
                     class="comment-main-content"
-                    style="color: #555459 !important; line-height: 38rpx"
+                    style="color: #232325 !important; line-height: 38rpx"
                   >
                     {{ each.content }}
                   </view>
@@ -110,7 +131,7 @@
                     <view
                       class="foot-time"
                       style="
-                        color: #555459;
+                        color: #b7b8ba;
                         letter-spacing: 1rpx;
                         font-size: 24rpx;
                       "
@@ -118,6 +139,7 @@
                     >
                     <view
                       class="foot-btn"
+                      style="color: #777775"
                       v-if="each.user"
                       @click="
                         reply(each.user.nickname, each.user.nickname, item.id)
@@ -144,8 +166,18 @@
     <!-- 评论主体-end -->
     <!-- 无评论-start -->
     <view class="comment-none">
-      <image
+      <image v-if="user.icon"
-        :src="user.icon ? user.icon : '/static/images/avatar.png'"
+        :src="user.icon"
+        style="
+          width: 70rpx;
+          height: 70rpx;
+          margin: 0 8rpx;
+          display: block;
+          border-radius: 70rpx;
+        "
+      />
+      <image v-else
+        src="/static/icon/noIcon.png"
         style="
           width: 70rpx;
           height: 70rpx;
@@ -169,9 +201,10 @@
           ><text @click="currentInputComment = ''">清空</text
           ><text @click="sendComment">发送</text></view
         >
+        <!-- @click="showInput = true" -->
         <view
           style="font-size: 30rpx; width: calc(100%)"
-          @click="showInput = true"
+          @click="reply('', '', 0)"
           v-if="!showInput"
           >写评论...</view
         >
@@ -289,8 +322,7 @@ export default {
       keyboardHeight: 0, // 软键盘高度
       keyboardListener: null, // 软键盘监听事件
       currentInputComment: "",
-      emptyAvatar:
+      emptyAvatar: "/static/icon/noIcon.png",
-        "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: {
@@ -364,7 +396,13 @@ export default {
       this.pUser = pUser;
       this.commentReq.pId = pId;
       this.pId = pId;
-      this.placeholder = "回复 " + pUser + ":";
+      if (pId != 0) {
+        var str = pUser ? pUser : "普通用户 ";
+        this.placeholder = "回复 " + str + ":";
+      } else {
+        var str = "";
+        this.placeholder = "写评论...";
+      }
 
       //   if (reUser) {
       //     this.commentReq.content = "@" + reUser + " ";
@@ -541,16 +579,19 @@ export default {
 }
 
 .comment-box-item {
+  width: 100%;
   display: flex;
 }
 
 .comment-main {
+  width: calc(100% - 70rpx);
+
   padding-left: 20rpx;
 }
 
 .comment-main-top {
   width: 600rpx;
-  padding-top: 6rpx;
+  padding-top: 12rpx;
   display: flex;
   justify-content: space-between;
 }
@@ -599,8 +640,9 @@ export default {
 
 .nick-name {
   color: #2d8cf0;
-  color: #262626;
+  color: #494943;
-  font-size: 40rpx;
+  line-height: 30rpx;
+  // font-size: 40rpx;
 }
 
 .isLike {
@@ -616,13 +658,20 @@ export default {
 }
 
 .comment-main-content {
+  width: 100%;
   padding: 8rpx 10rpx 8rpx 0;
+  text-align: justify;
+  white-space: pre-wrap;
+  word-wrap: break-word;
   //   font-size: 30rpx;
 }
 
 .comment-main-foot {
   display: flex;
   font-size: 22rpx;
+  line-height: 24rpx;
+  margin-top: 6rpx;
+  margin-top: 6rpx;
 }
 
 .replayTag {
@@ -655,6 +704,7 @@ export default {
 
 .comment-sub-item {
   display: flex;
+  margin-bottom: 12rpx;
 }
 
 .comment-none {
@@ -671,7 +721,6 @@ export default {
   border-top: 1rpx solid #e1e1e1;
   font-size: 32rpx !important;
   background-color: #fff;
-  
 }
 
 .comment-submit-box {
@@ -763,4 +812,17 @@ export default {
   font-size: 14px;
   line-height: 40px;
 }
+.foot-time {
+  // line-height: 24rpx;
+}
+.zuozhe {
+  background-color: #f72f56;
+  font-size: 20rpx;
+  border-radius: 6rpx;
+  color: #fff;
+  padding: 2rpx 10rpx;
+  margin-left: 20rpx;
+  line-height: 20rpx;
+  margin-top: -4rpx;
+}
 </style>