diff --git a/api/inn.js b/api/inn.js
index 364d657..a5eec2b 100644
--- a/api/inn.js
+++ b/api/inn.js
@@ -273,4 +273,17 @@ export function getMerchantApply() {
     return request.get("/merchantApply/userHotels", {}, {login: true}) 
 }
 
+/**
+ * 获取用户评论列表
+ */
+export function getCommentList(params) {
+    return request.get("/user/reply/list", params, {login: true})
+}
+
+/**
+ * 添加用户评论
+ */
+export function addComment(data) {
+    return request.post("/user/reply/add", data, {login: true})
+}
 
diff --git a/components/cc-comment/cc-comment.vue b/components/cc-comment/cc-comment.vue
new file mode 100644
index 0000000..a876ff6
--- /dev/null
+++ b/components/cc-comment/cc-comment.vue
@@ -0,0 +1,485 @@
+<template>
+  <view>
+    <view class="c_total">资讯评论</view>
+    <template v-if="dataList && dataList.length">
+      <view class="c_comment" v-for="(item1, index1) in dataList" :key="item1.id">
+        <!-- 一级评论 -->
+        <CommonComp
+          :data="item1"
+          @likeClick="() => likeClick({ item1, index1 })"
+          @replyClick="() => replyClick({ item1, index1 })"
+          @deleteClick="() => deleteClick({ item1, index1 })"
+        />
+        <view class="children_item" v-if="item1.children && item1.children.length">
+          <!-- 二级评论 -->
+          <CommonComp
+            v-for="(item2, index2) in item1.childrenShow"
+            :key="item2.id"
+            :data="item2"
+            :pData="item1"
+            @likeClick="() => likeClick({ item1, index1, item2, index2 })"
+            @replyClick="() => replyClick({ item1, index1, item2, index2 })"
+            @deleteClick="() => deleteClick({ item1, index1, item2, index2 })"
+          />
+          <!-- 展开二级评论 -->
+          <view
+            class="expand_reply"
+            v-if="expandTxtShow({ item1, index1 })"
+            @tap="() => expandReplyFun({ item1, index1 })"
+          >
+            <span class="txt"> 展开{{ item1.children.length - item1.childrenShow.length }}条回复 </span>
+            <uni-icons type="down" size="24" color="#007aff"></uni-icons>
+          </view>
+          <!-- 折叠二级评论 -->
+          <view
+            class="shrink_reply"
+            v-if="shrinkTxtShow({ item1, index1 })"
+            @tap="() => shrinkReplyFun({ item1, index1 })"
+          >
+            <span class="txt"> 收起回复内容 </span>
+            <uni-icons type="up" size="24" color="#007aff"></uni-icons>
+          </view>
+        </view>
+      </view>
+    </template>
+    <!-- 空盒子 -->
+    <view class="empty_box" v-else>
+      <uni-icons type="chatboxes" size="36" color="#c0c0c0"></uni-icons>
+      <view>
+        <span class="txt"> 这里是一片荒草地, </span>
+        <span class="txt click" @click="() => newCommentFun()">说点什么...</span>
+      </view>
+    </view>
+    <!-- 评论弹窗 -->
+    <uni-popup ref="cPopupRef" type="bottom" @change="popChange">
+      <view class="c_popup_box">
+        <view class="reply_text">
+          <template v-if="Object.keys(replyTemp).length">
+            <span class="text_aid">回复给</span>
+            <img
+              class="user_avatar"
+              :src="replyTemp.item2 ? replyTemp.item2.user_avatar : replyTemp.item1.user_avatar"
+            />
+            <span class="text_main">{{ replyTemp.item2 ? replyTemp.item2.user_name : replyTemp.item1.user_name }}</span>
+          </template>
+          <span v-else class="text_main">发表新评论</span>
+        </view>
+        <view class="content">
+          <view class="text_area">
+            <uni-easyinput
+              class="text_area"
+              type="textarea"
+              v-model="commentValue"
+              :placeholder="commentPlaceholder"
+              :focus="focus"
+              trim
+              autoHeight
+              maxlength="300"
+            ></uni-easyinput>
+          </view>
+          <view class="send_btn" @tap="() => sendClick()">发送</view>
+        </view>
+      </view>
+    </uni-popup>
+    <!-- 删除弹窗 -->
+    <uni-popup ref="delPopupRef" type="dialog">
+      <uni-popup-dialog
+        mode="base"
+        title=""
+        content="确定删除这条评论吗?"
+        :before-close="true"
+        @close="delCloseFun"
+        @confirm="delConfirmFun"
+      ></uni-popup-dialog>
+    </uni-popup>
+  </view>
+</template>
+
+<script>
+import CommonComp from "./componets/common";
+export default {
+  components: { CommonComp },
+  props: {
+    /** 登陆用户信息
+     *    id: number // 登陆用户id
+     *    user_name: number // 登陆用户名
+     *    user_avatar: string // 登陆用户头像地址
+     */
+    myInfo: {
+      type: Object,
+      default: () => {},
+    },
+    /** 文章作者信息
+     *    id: number // 文章作者id
+     *    user_name: number // 文章作者名
+     *    user_avatar: string // 文章作者头像地址
+     */
+    userInfo: {
+      type: Object,
+      default: () => {},
+    },
+    /** 评论列表
+     *    id: number // 评论id
+     *    parent_id: number // 父级评论id
+     *    reply_id: number // 被回复人评论id
+     *    reply_name: string // 被回复人名称
+     *    user_name: string // 用户名
+     *    user_avatar: string // 评论者头像地址
+     *    user_content: string // 评论内容
+     *    is_like: boolean // 是否点赞
+     *    like_count: number // 点赞数统计
+     *    create_time: string // 创建时间
+     */
+    tableData: {
+      type: Array,
+      default: () => [],
+    },
+    // 评论总数
+    tableTotal: {
+      type: Number,
+      default: 0,
+    },
+    // 评论删除模式
+    // bind - 当被删除的一级评论存在回复评论, 那么该评论内容变更显示为[当前评论内容已被移除]
+    // only - 仅删除当前评论(后端删除相关联的回复评论, 否则总数显示不对)
+    // all - 删除所有评论包括回复评论
+    deleteMode: {
+      type: String,
+      default: "all",
+    },
+  },
+  data() {
+    return {
+      dataList: [], // 渲染数据(前端的格式)
+      replyTemp: {}, // 回复临时数据
+      isNewComment: false, // 是否为新评论
+      focus: false, // 评论弹窗
+      commentValue: "", // 输入框值
+      commentPlaceholder: "说点什么...", // 输入框占位符
+      delTemp: {}, // 删除临时数据
+    };
+  },
+  watch: {
+    tableData: {
+      handler(newVal) {
+        if (newVal.length !== this.dataList.length) {
+          this.dataList = this.treeTransForm(newVal);
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  mounted() {},
+  methods: {
+    // 数据转换
+    treeTransForm(data) {
+      let newData = JSON.parse(JSON.stringify(data));
+      let result = [];
+      let map = {};
+      newData.forEach((item, i) => {
+        item.owner = item.user_id === this.myInfo.user_id; // 是否为当前登陆用户 可以对自己的评论进行删除 不能回复
+        item.author = item.user_id === this.userInfo.user_id; // 是否为作者 显示标记
+        map[item.id] = item;
+      });
+      newData.forEach((item) => {
+        let parent = map[item.parent_id];
+        if (parent) {
+          (parent.children || (parent.children = [])).push(item); // 所有回复
+          if (parent.children.length === 1) {
+            (parent.childrenShow = []).push(item); // 显示的回复
+          }
+        } else {
+          result.push(item);
+        }
+      });
+      return result;
+    },
+    // 点赞
+    setLike(item) {
+      item.is_like = !item.is_like;
+      item.like_count = item.is_like ? item.like_count + 1 : item.like_count - 1;
+    },
+    likeClick({ item1, index1, item2, index2 }) {
+      let item = item2 || item1;
+      this.setLike(item);
+      this.$emit("likeFun", { params: item }, (res) => {
+        // 请求后端失败, 重置点赞
+        setLike(item);
+      });
+    },
+    // 回复
+    replyClick({ item1, index1, item2, index2 }) {
+      this.replyTemp = JSON.parse(JSON.stringify({ item1, index1, item2, index2 }));
+      this.$refs["cPopupRef"].open();
+    },
+    // 发起新评论
+    newCommentFun() {
+      this.isNewComment = true;
+      this.$refs["cPopupRef"].open();
+    },
+    // 评论弹窗
+    popChange(e) {
+      // 关闭弹窗
+      if (!e.show) {
+        this.commentValue = ""; // 清空输入框值
+        this.replyTemp = {}; // 清空被回复人信息
+        this.isNewComment = false; // 恢复是否为新评论默认值
+      }
+      this.focus = e.show;
+    },
+    // 发送评论
+    sendClick({ item1, index1, item2, index2 } = this.replyTemp) {
+      let item = item2 || item1;
+      let params = {};
+      // 新评论
+      if (this.isNewComment) {
+        params = {
+          id: Math.random(), // 评论id
+          parent_id: null, // 父级评论id
+          reply_id: null, // 被回复评论id
+          reply_name: null, // 被回复人名称
+        };
+      } else {
+        // 回复评论
+        params = {
+          id: Math.random(), // 评论id
+          parent_id: item?.parent_id ?? item.id, // 父级评论id
+          reply_id: item.id, // 被回复评论id
+          reply_name: item.user_name, // 被回复人名称
+        };
+      }
+      params = {
+        ...params,
+        user_id: this.myInfo.user_id, // 用户id
+        user_name: this.myInfo.user_name, // 用户名
+        user_avatar: this.myInfo.user_avatar, // 用户头像地址
+        user_content: this.commentValue, // 用户评论内容
+        is_like: false, // 是否点赞
+        like_count: 0, // 点赞数统计
+        create_time: "刚刚", // 创建时间
+        owner: true, // 是否为所有者 所有者可以进行删除 管理员默认true
+      };
+
+      uni.showLoading({
+        title: "正在发送",
+        mask: true,
+      });
+      this.$emit("replyFun", { params }, (res) => {
+        uni.hideLoading();
+        // 拿到后端返回的id赋值, 因为删除要用到id
+        params = { ...params, id: res.id };
+        // 新评论
+        if (this.isNewComment) {
+          this.dataList.push(params);
+        } else {
+          // 回复
+          let c_data = this.dataList[index1];
+          (c_data.children || (c_data.children = [])).push(params);
+          // 如果已展开所有回复, 那么此时插入children长度会大于childrenShow长度1, 所以就直接展开显示即可
+          if (c_data.children.length === (c_data.childrenShow || (c_data.childrenShow = [])).length + 1) {
+            c_data.childrenShow.push(params);
+          }
+        }
+        this.$emit("update:tableTotal", this.tableTotal + 1);
+        this.$refs["cPopupRef"].close();
+      });
+    },
+    //删除
+    deleteClick({ item1, index1, item2, index2 }) {
+      this.delTemp = JSON.parse(JSON.stringify({ item1, index1, item2, index2 }));
+      this.$refs["delPopupRef"].open();
+    },
+    // 关闭删除弹窗
+    delCloseFun() {
+      this.delTemp = {};
+      this.$refs["delPopupRef"].close();
+    },
+    // 确定删除
+    delConfirmFun({ item1, index1, item2, index2 } = this.delTemp) {
+      const deleteMode = this.deleteMode;
+      let c_data = this.dataList[index1];
+      uni.showLoading({
+        title: "正在删除",
+        mask: true,
+      });
+      // 删除二级评论
+      if (index2 >= 0) {
+        this.$emit("deleteFun", { params: [c_data.children[index2].id], mode: deleteMode }, (res) => {
+          uni.hideLoading();
+          this.$emit("update:tableTotal", this.tableTotal - 1);
+          c_data.children.splice(index2, 1);
+          c_data.childrenShow.splice(index2, 1);
+        });
+      } else {
+        // 删除一级评论
+        if (c_data?.children?.length) {
+          // 如果一级评论包含回复评论
+          switch (deleteMode) {
+            case "bind":
+              // 一级评论内容展示修改为: 当前评论内容已被移除
+              this.$emit(
+                "deleteFun",
+                {
+                  params: [c_data.id],
+                  mode: deleteMode,
+                },
+                (res) => {
+                  uni.hideLoading();
+                  c_data.user_content = "当前评论内容已被移除";
+                }
+              );
+              break;
+            case "only":
+              // 后端自行根据删除的一级评论id, 查找关联的子评论进行删除
+              this.$emit(
+                "deleteFun",
+                {
+                  params: [c_data.id],
+                  mode: deleteMode,
+                },
+                (res) => {
+                  uni.hideLoading();
+                  this.$emit("update:tableTotal", this.tableTotal - c_data.children.length + 1);
+                  this.dataList.splice(index1, 1);
+                }
+              );
+              break;
+            default:
+              // all
+              // 收集子评论id, 提交给后端统一删除
+              let delIdArr = [c_data.id];
+              c_data.children.forEach((_, i) => {
+                delIdArr.push(_.id);
+              });
+              this.$emit("deleteFun", { params: delIdArr, mode: deleteMode }, (res) => {
+                uni.hideLoading();
+                this.$emit("update:tableTotal", this.tableTotal - c_data.children.length + 1);
+                this.dataList.splice(index1, 1);
+              });
+              break;
+          }
+        } else {
+          // 一级评论无回复, 直接删除
+          this.$emit("deleteFun", { params: [c_data.id], mode: deleteMode }, (res) => {
+            uni.hideLoading();
+            this.$emit("update:tableTotal", this.tableTotal - 1);
+            this.dataList.splice(index1, 1);
+          });
+        }
+      }
+      this.delCloseFun();
+    },
+    // 展开评论if
+    expandTxtShow({ item1, index1 }) {
+      return item1.childrenShow?.length && item1.children.length - item1.childrenShow.length;
+    },
+    // 展开更多评论
+    expandReplyFun({ item1, index1 }) {
+      let csLen = this.dataList[index1].childrenShow.length;
+      this.dataList[index1].childrenShow.push(
+        ...this.dataList[index1].children.slice(csLen, csLen + 6) // 截取5条评论
+      );
+    },
+
+    // 收起评论if
+    shrinkTxtShow({ item1, index1 }) {
+      return item1.childrenShow?.length >= 2 && item1.children.length - item1.childrenShow.length === 0;
+    },
+    // 收起更多评论
+    shrinkReplyFun({ item1, index1 }) {
+      this.dataList[index1].childrenShow = [];
+      this.dataList[index1].childrenShow.push(
+        ...this.dataList[index1].children.slice(0, 1) // 截取1条评论
+      );
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+////////////////////////
+.center {
+  display: flex;
+  align-items: center;
+}
+////////////////////////
+.c_total {
+  padding: 20rpx 30rpx 0 30rpx;
+  font-size: 28rpx;
+}
+.empty_box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 150rpx 10rpx;
+  font-size: 28rpx;
+  .txt {
+    color: $uni-text-color-disable;
+  }
+  .click {
+    color: $uni-color-primary;
+  }
+}
+.c_comment {
+  padding: 20rpx 30rpx;
+  font-size: 28rpx;
+
+  .children_item {
+    padding: 20rpx 30rpx;
+    margin-top: 10rpx;
+    margin-left: 80rpx;
+    background-color: $uni-bg-color-grey;
+    .expand_reply,
+    .shrink_reply {
+      margin-top: 10rpx;
+      margin-left: 80rpx;
+      .txt {
+        font-weight: 600;
+        color: $uni-color-primary;
+      }
+    }
+  }
+}
+.c_popup_box {
+  background-color: #fff;
+  .reply_text {
+    @extend .center;
+    padding: 20rpx 20rpx 0 20rpx;
+    font-size: 26rpx;
+    .text_aid {
+      color: $uni-text-color-grey;
+      margin-right: 5rpx;
+    }
+    .user_avatar {
+      width: 48rpx;
+      height: 48rpx;
+      border-radius: 50%;
+      margin-right: 6rpx;
+      margin-left: 12rpx;
+    }
+    .text_main {
+    }
+  }
+  .content {
+    @extend .center;
+    .text_area {
+      flex: 1;
+      padding: 20rpx;
+    }
+    .send_btn {
+      @extend .center;
+      justify-content: center;
+      width: 120rpx;
+      height: 60rpx;
+      border-radius: 20rpx;
+      font-size: 28rpx;
+      color: #fff;
+      background-color: $uni-color-primary;
+      margin-right: 20rpx;
+      margin-left: 5rpx;
+    }
+  }
+}
+</style>
diff --git a/components/cc-comment/componets/common.vue b/components/cc-comment/componets/common.vue
new file mode 100644
index 0000000..ab19781
--- /dev/null
+++ b/components/cc-comment/componets/common.vue
@@ -0,0 +1,182 @@
+<template>
+  <view class="comment_item">
+    <view class="top">
+      <view class="top_left">
+        <img class="user_avatar" :src="data.user_avatar" />
+        <uni-tag v-if="data.author" class="tag" type="primary" :inverted="false" text="作者" size="mini" circle />
+        <span class="user_name">{{ data.user_name }}</span>
+        <span class="user_name">{{ cReplyName }}</span>
+      </view>
+      <view class="top_right" @click="likeClick(data)">
+        <span :class="[data.is_like ? 'active' : '', 'like_count']">{{ cLikeCount }}</span>
+        <uni-icons v-show="data.is_like" type="hand-up-filled" size="24" color="#007aff"></uni-icons>
+        <uni-icons v-show="!data.is_like" type="hand-up" size="24" color="#999"></uni-icons>
+      </view>
+    </view>
+    <view class="content" @click="replyClick(data)">
+      {{ c_content }}
+      <span class="shrink" v-if="isShrink" @click.stop="expandContentFun(data.user_content)">...展开</span>
+      <span
+        class="shrink"
+        v-if="!isShrink && user_content.length > contentShowLength"
+        @click.stop="shrinkContentFun(data.user_content)"
+      >
+        收起</span
+      >
+    </view>
+    <view class="bottom">
+      <span class="create_time">{{ data.create_time }}</span>
+      <span v-if="data.owner" class="delete" @click="deleteClick(data)">删除</span>
+      <!-- <span v-else class="reply" @click="replyClick(props.data)"
+          >回复</span
+        > -->
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    // 评论数据
+    data: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      // 评论过长处理
+      contentShowLength: 70, // 默认显示评论字符
+      user_content: "",
+      isShrink: false, // 是否收缩评论
+      c_content: "",
+    };
+  },
+  computed: {
+    // 被回复人名称
+    cReplyName: function () {
+      return this.data?.reply_name ? ` ▸ ` + this.data?.reply_name : "";
+    },
+    // 点赞数显示
+    cLikeCount: function () {
+      return this.data.like_count === 0 ? "" : this.data.like_count > 99 ? `99+` : this.data.like_count;
+    },
+  },
+  watch: {
+    // 删除变更显示定制
+    "data.user_content": function (newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.c_content = newVal;
+      }
+    },
+    // 监听isShrink变化，更新c_content
+    isShrink: function (newVal) {
+      this.c_content = newVal ? this.user_content.slice(0, this.contentShowLength + 1) : this.user_content;
+    },
+  },
+  methods: {
+    // 展开文字
+    expandContentFun() {
+      this.isShrink = false;
+    },
+    // 收起文字
+    shrinkContentFun() {
+      this.isShrink = true;
+    },
+    // 点赞
+    likeClick(item) {
+      this.$emit("likeClick", item);
+    },
+    // 回复
+    replyClick(item) {
+      // 自己不能回复自己
+      if (item.owner) return;
+      this.$emit("replyClick", item);
+    },
+    // 删除
+    deleteClick(item) {
+      this.$emit("deleteClick", item);
+    },
+  },
+  mounted() {
+    this.user_content = this.data.user_content;
+    this.isShrink = this.user_content.length > this.contentShowLength;
+    this.c_content = this.isShrink ? this.user_content.slice(0, this.contentShowLength + 1) : this.user_content;
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+////////////////////
+.center {
+  display: flex;
+  align-items: center;
+}
+.ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+////////////////////
+.comment_item {
+  font-size: 28rpx;
+  .top {
+    @extend .center;
+    justify-content: space-between;
+    .top_left {
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      .user_avatar {
+        width: 68rpx;
+        height: 68rpx;
+        border-radius: 50%;
+        margin-right: 12rpx;
+      }
+      .tag {
+        margin-right: 6rpx;
+      }
+      .user_name {
+        @extend .ellipsis;
+        max-width: 180rpx;
+        color: #8c8c8c;
+      }
+    }
+    .top_right {
+      @extend .center;
+      .like_count {
+        color: #8c8c8c;
+        &.active {
+          color: #007aff;
+        }
+      }
+    }
+  }
+  .content {
+    padding: 10rpx;
+    margin-left: 70rpx;
+    color: #333;
+    &:active {
+      background-color: #f2f2f2;
+    }
+    .shrink {
+      padding: 20rpx 20rpx 20rpx 0rpx;
+      color: #007aff;
+    }
+  }
+  .bottom {
+    padding-left: 80rpx;
+    font-size: 24rpx;
+    .create_time {
+      color: #8c8c8c;
+    }
+    .delete {
+      padding: 20rpx 20rpx 0 20rpx;
+      color: #c0c0c0;
+    }
+    .reply {
+      color: #007aff;
+    }
+  }
+}
+</style>
diff --git a/pages.json b/pages.json
index b1e051f..bcfd1e5 100644
--- a/pages.json
+++ b/pages.json
@@ -447,7 +447,8 @@
         {
           "path": "inn/innInfoDetail",
           "style": {
-            "navigationBarTitleText": "资讯详情"
+            "navigationBarTitleText": "资讯详情",
+            "navigationBarBackgroundColor": "#FFFFFF"
           }
         },
         {
diff --git a/pagesInn/inn/innHome.vue b/pagesInn/inn/innHome.vue
index 7e69ad8..253e055 100644
--- a/pagesInn/inn/innHome.vue
+++ b/pagesInn/inn/innHome.vue
@@ -293,6 +293,14 @@
                           class="seeNum-txt"
                         >{{ item.zan }}</text>
                       </view>
+                      <view class="flex">
+                        <!-- <image
+                          :src="webUrl + '/20230803152147141807.png'"
+                          class="icon"
+                        /> -->
+                        <u-icon name="chat" size="24"></u-icon>
+                        <text class="seeNum-txt">{{ item.replyCount || 0 }}</text>
+                      </view>
                       <view v-if="isMyInn" class="flex more-btn" @click="toggleMoreHandle(index)">
                         <image
                           :src="webUrl + '/page/hotel/more.png'"
@@ -453,7 +461,7 @@ import {
   getHotelNewsZan,
   getHotelShareBackgroundImage,
   hotelNewsView,
-  getMerchantApply
+  getMerchantApply,
 } from "@/api/inn.js"
 import {formatDateTime} from "@/utils"
 import {getUrlParam} from "@/utils/common.js"
@@ -723,7 +731,7 @@ export default {
       })
     },
     infoClick: function (info) {
-      // this.$yrouter.push('/pagesInn/inn/innInfoDetail?id=' + info.id)
+      this.$yrouter.push('/pagesInn/inn/innInfoDetail?id=' + info.id)
     },
     coverPlay(){
       this.videoPlayers.forEach(player => {
diff --git a/pagesInn/inn/innInfoDetail.vue b/pagesInn/inn/innInfoDetail.vue
index 0ae4578..1149f57 100644
--- a/pagesInn/inn/innInfoDetail.vue
+++ b/pagesInn/inn/innInfoDetail.vue
@@ -1,83 +1,874 @@
 <template>
-  <view class="pages-inn-info-detail">
-    <view class="top-box">
-      <view class="title more-t">{{ info.name }}</view>
-
-      <view class="sub flex jc-between ai-center">
-        <text class="datetime">{{ info.createdTime }}</text>
-        <view class="flex ai-center">
-          <view class="flex ai-center" style="margin-right: 28rpx">
-            <image :src="webUrl+'/20230803152147141807.png'"/>
-            <view class="num">{{ info.pv }}</view>
+  <view class="info-section">
+    <view class="info-item">
+      <view
+        :class="item.isTop === 1 ? 'info-item-top' : ''"
+        :style="{
+          'background-image': item.isTop
+            ? 'url(' + webUrl + '/page/hotel/info-top-bg.png)'
+            : 'none',
+        }"
+        class="info-item-header"
+      >
+        <view class="name">
+          {{ item.name }}
+        </view>
+        <view class="intro">
+          {{ item.intro }}
+        </view>
+      </view>
+      <view class="info-item-body">
+        <view v-if="item.type === 'NT_VIDEO'" class="video">
+          <video
+            :src="item.video"
+            :poster="item.video + '?vframe/jpg/offset/1'"
+            controls
+            play-btn-position="center"
+            class="video-item"
+            :id="'video-item' + index"
+          />
+        </view>
+        <view v-else>
+          <img-box
+            v-if="item.resources"
+            :imgList="item.resources"
+            :num="item.resources.length"
+            :img-radius="10"
+            style="width: 100%"
+          />
+        </view>
+      </view>
+      <view class="info-item-bottom">
+        <view class="time">
+          {{
+            item.publishTime
+              ? item.publishTime.replace(/-/g, ".").substr(0, 10)
+              : ""
+          }}
+        </view>
+        <view class="btns">
+          <view class="flex">
+            <image :src="webUrl + '/20230803152147141807.png'" class="icon" />
+            <text class="seeNum-txt">{{ item.pv }}</text>
           </view>
-          <view class="flex ai-center" @click="likeInfo">
-            <image :src="webUrl+'/20230803151308999742.png'" v-if="info.zanVo != null"/>
-            <image :src="webUrl+'/20230803151302213857.png'" v-else/>
-            <view class="num">{{ info.zan }}</view>
+          <view class="flex">
+            <image
+              v-if="!item.zanVo"
+              :src="webUrl + '/page/hotel/zan-off-2.png'"
+              class="zan-off-icon"
+              @click="likeInfo"
+            />
+            <image
+              v-else
+              :src="webUrl + '/page/hotel/zan-on-2.png'"
+              class="zan-on-icon"
+              @click="likeInfo"
+            />
+            <text
+              v-show="item.zan > 0"
+              :class="item.zanVo ? 'on' : ''"
+              class="seeNum-txt"
+              >{{ item.zan }}</text
+            >
+          </view>
+          <view class="flex">
+            <u-icon name="chat" size="24"></u-icon>
+            <text class="seeNum-txt">{{ item.replyCount || 0 }}</text>
           </view>
         </view>
       </view>
     </view>
-
-    <view class="video-box" v-if="info.type==='NT_VIDEO'">
-      <video style="width: 100%;height: 320rpx;" :src="info.video" controls play-btn-position="center"/>
+    <view class="comment-list">
+      <view class="v12-mt-2" v-for="(comment, index) in comments" :key="index" @click="selectComment(comment)">
+        <view class="user-info v12-align-center">
+          <view class="user-avatar">
+            <u-avatar :src="comment.userAvatar"></u-avatar>
+          </view>
+          <view class="user-name v12-ml-3">
+            <view class="v12-font-bold v12-dark-text v12-font-32">
+              <text>{{ comment.userNickName }}</text>
+              <text v-if="comment.isHotelAdmin" class="v12-ml-1 v12-primary v12-white-text v12-font-24 v12-font-weight-400 v12-px-1 v12-radius-8">
+                {{ '店主' }}
+              </text>
+            </view>
+            <view class="v12-font-22 v12-secondary-dark-text v12-mt-1">
+              <text>{{ formatterTime(comment.createTime) }}</text>
+              <text v-if="comment.at">
+                {{ '  回复  '  + comment.at.atNickName }}
+              </text>
+            </view>
+          </view>
+        </view>
+        <view class="user-info v12-d-flex" >
+          <view class="user-avatar">
+           <view style="opacity: 0;">
+              <u-avatar></u-avatar>
+           </view>
+          </view>
+          <view class="user-name v12-ml-3">
+            <view class="v12-font-28 v12-dark-text">
+              {{ comment.reply }}
+            </view>
+            <view v-if="comment.children">
+              <view class="v12-mt-2" v-for="(_comment, atIndex) in comment.children" :key="atIndex" @click.stop="selectComment(_comment)">
+                <view class="user-info v12-align-center">
+                  <view class="user-avatar">
+                    <u-avatar size="35" :src="_comment.userAvatar"></u-avatar>
+                  </view>
+                  <view class="user-name v12-ml-3">
+                    <view class="v12-font-bold v12-dark-text v12-font-32">
+                      <text>{{ _comment.userNickName }}</text>
+                      <text v-if="_comment.isHotelAdmin" class="v12-ml-1 v12-primary v12-white-text v12-font-24 v12-font-weight-400 v12-px-1 v12-radius-8">
+                        {{ '店主' }}
+                      </text>
+                    </view>
+                    <view class="v12-font-22 v12-secondary-dark-text v12-mt-1">
+                      <text>{{ formatterTime(_comment.createTime) }}</text>
+                      <text v-if="_comment.at">
+                        {{ '  回复  '  + _comment.at.atNickName }}
+                      </text>
+                    </view>
+                  </view>
+                </view>
+                <view class="user-info v12-align-center">
+                  <view class="user-avatar">
+                   <view style="opacity: 0;">
+                      <u-avatar size="35"></u-avatar>
+                   </view>
+                  </view>
+                  <view class="user-name v12-ml-3">
+                    <view class="v12-font-28 v12-dark-text">
+                      {{ _comment.reply }}
+                    </view>
+                  </view>
+                </view>
+              </view>
+              <view v-if="comment.hasMoreChildren" class="more-text" @click.stop="showMoreComment(comment)">
+                {{ '—— 点击展开更多回复 ——' }}
+              </view>
+            </view>
+          </view>
+        </view>
+       
+      </view>
     </view>
-
-    <view class="content-box">
-      <rich-text :nodes="info.content"/>
+    <view class="comment-input-wrap">
+      <view style="width: 100%;">
+        <u-input
+          @focus="commentInputFocus"
+          @change="commentInputChange" 
+          :prefixIcon="prefixIcon" 
+          class="comment-input" 
+          v-model="reply" 
+          placeholder="分享你的观点，让世界听见你的声音...">
+          
+          <template slot="prefix">
+            <view class="v12-align-center">
+              <u-icon :name="prefixIcon"></u-icon>
+              <u--text
+                v-if="currentComment.userNickName"
+                :text="'@' + currentComment.userNickName"
+                margin="0 3px 0 0"
+                type="tips"
+              ></u--text>
+            </view>
+          </template>
+        </u-input>
+      </view>
+      <view class="">
+        <view class="send-btn v12-primary v12-white-text" @click="sendComment">发送</view>
+      </view>
     </view>
   </view>
 </template>
 
 <script>
-import {getHotelNewsDetail, getHotelNewsZan} from "@/api/inn";
+import { getHotelNewsDetail, getHotelNewsZan, getCommentList, addComment } from "@/api/inn";
+import imgBox from '@/components/imageTypeSet/imagebox.vue'
 
 export default {
+  components: {
+    imgBox
+  },
   data() {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
       id: null,
-      info: null
-    }
+      item: {},
+      comments: [],
+      reply: '',
+      atUid: '',
+      currentComment: {},
+      prefixIcon: 'edit-pen'
+    };
   },
   onLoad(options) {
     this.id = options.id;
     this.init();
   },
   methods: {
-    init() {
-      getHotelNewsDetail(this.id).then(({data}) => this.info = data);
-    },
-
-    likeInfo() {
-      let that = this;
-      uni.showLoading();
-      getHotelNewsZan(this.id).then((res) => {
+    showMoreComment(comment) {
+      const params = {
+        contentId: this.id,
+        contentType: "hotelNews",
+        rootReplyId: comment.id,
+        page: 1,
+        limit: 99999,
+      }
+      uni.showLoading({
+        mask: true,
+      });
+      getCommentList(params).then((res) => {
         uni.hideLoading();
-
-        uni.showToast({
-          title: res.msg,
-          mask: false,
-          duration: 1500,
-          success() {
-            if (res.status === 200) that.info = res.data;
-          }
-        })
-      }).catch((err) => {
-        uni.hideLoading()
-        uni.showToast({
-          title: err.msg + '',
-          icon: 'none',
-          mask: false,
-          duration: 1500
-        });
+        comment.children = res.data.records
+        comment.hasMoreChildren = false
       })
     },
-  }
-}
+    commentInputChange(e) {
+      // 若删除直接将@用户名整个删除
+      if (e === '') {
+        this.currentComment = {}
+        return
+      }
+      const split = e.split(' ')
+      if(split[0] !== '' && this.currentComment.userNickName) {
+        this.currentComment = {}
+        return
+      }
+    },
+    commentInputFocus(e) {
+      // this.prefixIcon = ''
+    },
+    selectComment(comment) {
+      this.currentComment = comment;
+      // this.prefixIcon = ''
+      this.reply = ' '
+    },
+    /**
+     * 格式化时间
+     * @param {*} time 时间
+     * @returns 距离当前时间的时间差
+     * 1. 小于1分钟，显示刚刚
+     * 2. 小于1小时，显示xx分钟前
+     * 3. 小于1天，显示xx小时前
+     * 4. 小于1月，显示xx天前
+     * 5. 小于1年，显示xx月前
+     * 6. 大于1年，显示xxxx年xx月xx日
+     * 7. 其他，显示xxxx-xx-xx
+     */
+    formatterTime(time) {
+      const now = new Date();
+      const date = new Date(time);
+      const diff = now - date;  // 时间差
+      const diffDay = diff / (1000 * 60 * 60 * 24);   // 天数
+      const diffHour = diff / (1000 * 60 * 60);   // 小时
+      const diffMinute = diff / (1000 * 60);   // 分钟
+      if (diffMinute < 1) {
+        return '刚刚';
+      } else if (diffHour < 1) {
+        return `${Math.floor(diffMinute)}分钟前`;
+      } else if (diffDay < 1) {
+        return `${Math.floor(diffHour)}小时前`;
+      } else if (diffDay < 30) {
+        return `${Math.floor(diffDay)}天前`;
+      } else if (diffDay < 365) {
+        return `${Math.floor(diffDay / 30)}月前`;
+      } else if (diffDay < 365 * 10) {
+        return `${Math.floor(diffDay / 365)}年前`;
+      } else {
+        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+      }
+    },
+    /**
+     * 发评论
+     */
+    sendComment() {
+      if (!this.reply.trim()) {
+        uni.showToast({
+          title: '请输入评论内容',
+          icon: 'none'
+        })
+        return
+      }
+      uni.showLoading({
+        mask: true,
+      });
+      const params = {
+        contentId: this.id,
+        contentType: 'hotelNews',
+        parentReplyId: this.currentComment.parentId || this.currentComment.id,
+        reply: this.reply,
+        atUid: this.currentComment.uid || null,
+      }
+      addComment(params).then((res) => {
+        console.log(res);
+        uni.hideLoading();
+        this.getComment()
+        this.reply = ''
+        this.item.replyCount === null ? this.item.replyCount = 1 : this.item.replyCount++
+      })
+    },
+    init() {
+      getHotelNewsDetail(this.id).then(({ data }) => (this.item = data));
+      this.getComment();
+    },
+    // contentId int 评论的目标内容ID，必传
+    // contentType string 评论的目标内容类型，必传（店铺资讯传入值hotelNews）
+    // rootReplyId int 根评论ID
+    // page int 页码
+    // limit int 每页数量
+    getComment() {
+      const params = {
+        contentId: this.id,
+        contentType: "hotelNews",
+        page: 1,
+        limit: 99999,
+      }
+      getCommentList(params).then((res) => {
+        console.log(res);
+        this.comments = res.data.records
+      })
+    },
+    likeInfo() {
+      uni.showLoading({
+        mask: true,
+      });
+      getHotelNewsZan(this.id)
+        .then((res) => {
+          uni.hideLoading();
+          this.item = res.data;
+        })
+        .catch((err) => {
+          uni.hideLoading();
+        });
+    },
+  },
+};
 </script>
 
 <style lang="less">
+@import "@/assets/css/store.less";
+.more-text{
+  color:#1B76F0;
+  font-weight: 400;
+  font-size: 28rpx;
+}
+.comment-input-wrap{
+  padding: 20rpx 0 ;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  width: 100%;
+  box-sizing: border-box;
+  bottom: 0;
+  background: #fff;
+}
+.comment-input{
+  height: 70rpx;
+  background: rgba(246,246,246,0.39);
+  border-radius: 12rpx;
+}
+.send-btn{
+  border-radius: 16rpx;
+  width: 96rpx;
+  height: 70rpx;
+  line-height: 70rpx;
+  text-align: center;
+  margin-left: 30rpx;
+}
+.my-inn-page {
+  padding: 0 0 100rpx 0;
+  background-color: #f6f6f6;
+}
+.cover-box {
+  position: relative;
+
+  .full-img {
+    width: 750rpx;
+  }
+  .video {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.guarantee {
+  margin-right: 16rpx;
+  padding: 8rpx 16rpx;
+  border-radius: 8rpx;
+  background: #0DC5C5;
+  color: #fff;
+  font-size: 22rpx;
+  line-height: 1;
+}
+.zan-favorite-wrap {
+  font-size: 32rpx;
+  color: #333;
+  .on {
+    color: #FF564A;
+  }
+}
+.zan-box {
+  .img {
+    width: 36rpx;
+    height: 36rpx;
+    margin: 0 8rpx 0 0;
+    vertical-align: middle;
+  }
+}
+.favorite-box {
+  .icon {
+    width: 36rpx;
+    height: 36rpx;
+    margin: 0 8rpx 0 30rpx;
+  }
+}
+
+.store-img {
+  width: 686rpx;
+  margin-bottom: 20rpx;
+  vertical-align: middle;
+}
+
+.goods-section {
+  padding: 40rpx 32rpx 0;
+  background: #F5F5FA;
+
+  .item {
+    position: relative;
+    width: 332rpx;
+    height: 528rpx;
+    box-sizing: border-box;
+    margin-right: 22rpx;
+    margin-bottom: 24rpx;
+    border-radius: 8rpx;
+    background: #fff;
+
+    .name {
+      padding: 0 6rpx;
+      font-size: 26rpx;
+      color: #333333;
+    }
+
+    .price-line {
+      padding: 0 10rpx;
+      font-size: 26rpx;
+      line-height: 38rpx;
+      color: #ED0F0F;
+    }
+
+    .sales-line {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      padding: 8rpx 10rpx 18rpx;
+      border-top: 1rpx solid #EFEFEF;
+      font-size: 24rpx;
+      line-height: 34rpx;
+      color: #8D8D8D;
+    }
+  }
+
+  .item:nth-child(2n) {
+    margin-right: 0;
+  }
+
+  .cover {
+    width: 332rpx;
+    height: 332rpx;
+    background: rgba(255, 255, 255, 0.39);
+    border-radius: 8rpx;
+    vertical-align: middle;
+  }
+
+  .label {
+    width: 40rpx;
+    height: 24rpx;
+    margin-right: 4rpx;
+    vertical-align: middle;
+  }
+
+  .icon {
+    width: 24rpx;
+    height: 24rpx;
+    margin-right: 6rpx;
+    vertical-align: middle;
+  }
+  .btn {
+    display: flex;
+    padding: 20rpx 0 40rpx 0;
+    justify-content: center;
+    .btn-cont {
+      padding: 13rpx 30rpx;
+      border: 1px solid #0DC5C5;
+      border-radius: 8rpx;
+      color: #0DC5C5;
+      .iconfont {
+        margin: 0 0 0 20rpx;
+        font-size: 24rpx;
+      }
+    }
+  }
+}
+
+.container {
+  position: relative;
+  background: #FFFFFF;
+}
+
+.innInfoWrap {
+  position: relative;
+  margin-top: -76rpx;
+  padding: 20rpx 36rpx;
+  line-height: 1;
+  z-index: 1;
+  .bg-color {
+    position: absolute;
+    top: -5px;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    height: 50%;
+    background: linear-gradient(-180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
+
+    .box-mask {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      left: 166rpx;
+      box-sizing: border-box;
+      padding: 0 32rpx 12rpx 0;
+
+      .city-section {
+        width: 256rpx;
+        margin-left: 20rpx;
+      }
+    }
+  }
+  .body-cont {
+    position: relative;
+    z-index: 2;
+  }
+}
+
+.inn-logo {
+  flex-shrink: 0;
+  width: 56*2rpx;
+  height: 56*2rpx;
+  margin-right: 18rpx;
+}
+
+.inn-logo image {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.inn-name {
+  width: 280rpx;
+  font-size: 32rpx;
+  color: #FFFFFF;
+  line-height: 48rpx;
+}
+
+.inn-owner {
+  font-size: 24rpx;
+  color: #8B8F99;
+}
+
+.inn-tag-wrap {
+  margin-top: 10rpx;
+}
+.inn-signature-wrap {
+  position: relative;
+  z-index: 5;
+  padding: 0 32rpx;
+  margin: 20rpx 0 0 0;
+  .triangle {
+    position: absolute;
+    top: -20rpx;
+    left: 72rpx;
+    width: 0;
+    height: 0;
+    border-left: 20rpx solid transparent;
+    border-right: 20rpx solid transparent;
+    border-bottom: 24rpx solid rgba(243,243,246,0.39);
+  }
+  .inn-signature {
+    position: relative;
+    padding: 20rpx;
+    border-radius: 8rpx;
+    font-size: 24rpx;
+    color: #080F1A;
+    background: rgba(243,243,246,0.39);
+    box-shadow: 0px 6px 12px rgba(0,0,0,0.12);
+  }
+  .share-btn {
+    position: absolute;
+    right: 0;
+    bottom: -68rpx;
+    .img {
+      width: 212rpx;
+      height: 60rpx;
+    }
+  }
+}
+.btLine {
+  width: 100%;
+  height: 6rpx;
+  margin-top: 18rpx;
+  background: #0DC5C5;
+}
+.pics-box {
+  margin: 36rpx;
+  background: #fff;
+}
+.pics-list {
+  position: relative;
+  padding: 32rpx 0;
+  flex-wrap: wrap;
+}
+.pics-list .pics-item {
+  margin-left: 36rpx;
+  margin-top: 20rpx;
+}
+.bottom-view {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99;
+  display: flex;
+  height: 70rpx;
+  padding: 15rpx;
+  border-top: 1px solid #f1f1f1;
+  background: #FFFFFF;
+
+  .bottom-btn {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    font-size: 32rpx;
+    color: #333;
+    line-height: 70rpx;
+    &:first-child {
+      border-right: 1px solid #d5d5d5;
+    }
+    .img {
+      width: 40rpx;
+      height: 40rpx;
+      margin: 0 12rpx 0 0;
+    }
+  }
+}
+.tab-item-active {
+  color:#080F1A;
+  font-size:32rpx;
+}
+.tab-item-no-active {
+  color:#A6AAB3;
+  font-size:28rpx;
+}
+.map-wrapper {
+  position: relative;
+  z-index: 2;
+  height: 200rpx;
+  margin: 40rpx 0 0 0;
+  overflow: hidden;
+  .map-cont {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    opacity: 0.3;
+    transform: translateY(-50rpx);
+  }
+  .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 3;
+    height: 60rpx;
+    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
+  }
+  .map-info {
+    position: relative;
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    padding: 40rpx 10rpx 40rpx 32rpx;
+    color: #333;
+    font-size: 14px;
+    justify-content: space-between;
+    .map-info-hd {
+      .icon {
+        display: block;
+        width: 56rpx;
+        height: 56rpx;
+      }
+    }
+    .map-info-bd {
+      flex: 1;
+      padding: 0 60rpx 0 20rpx;
+      line-height: 60rpx;
+    }
+    .map-info-ft {
+      .item + .item {
+        margin: 0 0 0 6rpx;
+      }
+      .item {
+        text-align: center;
+        font-weight: 500;
+        .img {
+          display: block;
+          width: 96rpx;
+          height: 96rpx;
+          margin: 0 0 -16rpx 0;
+        }
+      }
+    }
+  }
+}
+.top-tab {
+  margin: 60rpx 0 0 0;
+  border-bottom: 1px solid #ddd;
+  .tab {
+    margin: 0 35rpx;
+    &.hide {
+      display: none;
+    }
+  }
+}
+.info-section,
+.pics-section,
+.qualifications-section {
+  position: relative;
+  background-color: #fff;
+}
+.info-section,
+.qualifications-section {
+  padding: 32rpx;
+}
+.info-section {
+  word-break: break-all;
+  .info-item + .info-item {
+    margin: 32rpx 0 0 0;
+  }
+  .info-item {
+    border-radius: 10rpx;
+    background-color: #fff;
+    .info-item-header {
+      position: relative;
+      padding: 20rpx 20rpx 0 20rpx;
+      &.info-item-top {
+        padding-top: 60rpx;
+        background-size: 100% 80rpx;
+        background-repeat: no-repeat;
+        background-image: url();
+      }
+      .name {
+        font-size: 16px;
+        color: #333;
+        font-weight: bold;
+      }
+      .intro {
+        margin: 10rpx 0 0 0;
+        color: #666;
+        font-size: 14px;
+      }
+    }
+    .info-item-body {
+      padding: 0 20rpx 20rpx 20rpx;
+      .video {
+        padding: 20rpx 0 0 0;
+        .video-item {
+          width: 100%;
+          height: 400rpx;
+          border-radius: 10rpx;
+        }
+      }
+    }
+    .info-item-bottom {
+      display: flex;
+      align-items: center;
+      padding: 20rpx;
+      border-top: 1px solid #f1f1f1;
+      font-size: 16px;
+      .time {
+        flex: 1;
+        color: #333;
+      }
+      .btns {
+        display: flex;
+        color: #999;
+        .flex + .flex {
+          margin: 0 0 0 32rpx;
+        }
+        .flex {
+          align-items: center;
+        }
+        .icon {
+          width: 32rpx;
+          height: 32rpx;
+          margin: 0 8rpx 0 0;
+        }
+        .zan-off-icon {
+          width: 40rpx;
+          height: 40rpx;
+        }
+        .zan-on-icon {
+          width: 40rpx;
+          height: 40rpx;
+        }
+        .seeNum-txt {
+          &.on {
+            color: #D81E06;
+          }
+        }
+        .more-btn {
+          position: relative;
+          .more-wrapper {
+            position: absolute;
+            right: -20rpx;
+            top: -150rpx;
+            z-index: 5;
+            width: 200rpx;
+            border-radius: 12rpx;
+            background-color: #fff;
+            box-shadow: 0px 1px 6px rgba(0,0,0,0.16);
+            .more-item + .more-item {
+              border-top: 1px solid #d5d5d5;
+            }
+            .more-item {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              height: 70rpx;
+              font-size: 14px;
+              color: #333;
+              .more-icon {
+                width: 36rpx;
+                height: 36rpx;
+                margin: 0 10rpx 0 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.tab-no-data {
+  text-align: center;
+  font-size: 32rpx;
+  color: #999;
+  line-height: 200rpx;
+}
 .pages-inn-info-detail {
   .top-box {
     padding: 40rpx 32rpx 20rpx;