Merge branch 'dev' into test

api/qianxian.js

@@ -267,3 +267,25 @@ export function getShareHousekeeper(id) {
 export function getJiaLouStewardDetail(id) {
     return request.get('/travel/steward/' + id, {}, {login: true})  
 }
+
+/**
+ * 获取县城资讯详情
+ */
+export function getCityNewsDetail(id) {
+    return request.get('/countyFamous/news/' + id, {}, {login: true})  
+}
+
+
+/**
+ * 获取县城资讯类别
+ */
+export function getCityNewsCategory() {
+    return request.get('/countyFamous/newsCategory', {}, {login: true})  
+}
+
+/**
+ * 获取县城店铺列表
+ */
+export function getCityShopList(params) {
+    return request.get('/countyFamous/hotel', params, {login: true})  
+}

mixins/goCartMixins.js

@@ -14,7 +14,7 @@ export default {
       isOpen: false,
       attrTxt: '',
       attrValue: '',
-      id: null,
+      m_id: null,
       productValueArr: [],
       attr: {
         cartAttr: false,
@@ -51,7 +51,7 @@ export default {
       }
     },
     getSkuActiveStatus(selectedSku) {
-      getProductSkuBySelected({ id: this.id, selectedSku }).then(res => {
+      getProductSkuBySelected({ id: this.m_id, selectedSku }).then(res => {
         const { success, data } = res
         if (success) {
           for (const key in data) {
@@ -75,7 +75,7 @@ export default {
       })
     },
     productCon() {
-      getProductDetail(this.id).then(res => {
+      getProductDetail(this.m_id).then(res => {
         const { data } = res
         this.storeInfo = {...data.storeInfo}
         if(data.storeInfo.stock === 0) {
@@ -235,7 +235,7 @@ export default {
     // 点击加入购物车按钮
     addToCart(item, id = 'id') {
       console.log(item, 'addToCart --------- item');
-      this.id = item[id]
+      this.m_id = item[id]
       
       this.$nextTick(() => {
         this.productCon()
@@ -259,7 +259,7 @@ export default {
         return
       }
       const q = {
-        productId: this.id,
+        productId: this.m_id,
         cartNum: this.attr.productSelect.cart_num,
         new: 0,
         uniqueId: this.attr.productSelect !== undefined ? this.attr.productSelect.unique : ''

pages.json

@@ -612,6 +612,12 @@
             "navigationStyle": "custom"
           }
         },
+        {
+          "path": "views/newsInfo",
+          "style": {
+            "navigationBarTitleText": "资讯详情"
+          }
+        },
         {
           "path": "views/famousQianxianTheme",
           "style": {

pkg_common/views/message.vue

@@ -33,21 +33,22 @@
           </view>
           <view class="user-name v12-ml-3" >
             <view
-              v-if="!comment.isRootReply"
+              
-              class="v12-font-30 v12-font-bold v12-my-2 v12-dark-text"
+              class="v12-font-30 v12-my-2 v12-dark-text"
               @click="toInfo(comment)"
             >
               <!-- {{ comment.parentReply }} -->
               <!-- <text class="v12-dark1-text">{{ "@" + comment.senderUserNickname }}</text> -->
-              {{ comment.parentReply }}
+               <text
-            </view>
-            <view class="v12-font-28 v12-dark2-text" @click="toInfo(comment)">
-              <text
                 v-if="comment.replyAt"
                 class="v12-dark1-text"
               >{{ "@" + comment.replyAt.atNickName + ' ' }}</text>
               {{ comment.reply }}
             </view>
+            <view v-if="!comment.isRootReply" class="v12-font-28 v12-dark2-text" @click="toInfo(comment)">
+              {{ comment.parentReply }}
+              
+            </view>
             <view class="v12-mt-3">
               <u-button
                 size="normal"
@@ -186,7 +187,11 @@ export default {
         })
         return
       }
-      this.$yrouter.push('/pagesInn/inn/innInfoDetail?id=' + comment.contentId)
+      if(comment.contentType === 'hotelNews') {
+        this.$yrouter.push('/pagesInn/inn/innInfoDetail?id=' + comment.contentId)
+      } else if(comment.contentType === 'countyFamousNews') {
+        this.$yrouter.push('/pkg_product/views/newsInfo?id=' + comment.contentId)
+      }
     },
     /**
      * 格式化时间
@@ -272,7 +277,7 @@ export default {
         // 评论的目标内容ID，必传
         contentId: this.currentComment.contentId,
         // 评论的目标内容类型，必传（店铺资讯传入值hotelNews）
-        contentType: 'hotelNews',
+        contentType: this.currentComment.contentType,
         // 评论内容，必传
         reply: this.content.replace('@' + this.currentComment.senderUserNickname, '').trim(),
         // @的用户ID

pkg_product/views/famousQianxianShop.vue

@@ -148,6 +148,21 @@
           v-if="activeIndex === 3"
           class="info-section"
         >
+      <view class="news-category">
+        <view scroll-x class="news-category-scroll" show-scrollbar="false">
+          <view class="news-category-wrapper">
+            <view
+              v-for="(item, index) in newsCategoryList"
+              :key="index"
+              class="category-item v12-mt-2"
+              :class="{ active: newsCurrent === index }"
+              @click="changeNewsTab(index)"
+            >
+              {{ item.name }}
+            </view>
+          </view>
+        </view>
+      </view>
           <view>
             <view v-if="infoArray.length > 0" class="info-wrapper">
               <view class="info-list">
@@ -222,7 +237,83 @@
                           :class="item.hasZan ? 'on' : ''"
                           class="seeNum-txt"
                         >{{ item.zan }}</text>
+                        
                       </view>
+                      <view class="flex"  @click="infoClick(item)">
+                        <u-icon name="chat" size="24"></u-icon>
+                        <text class="seeNum-txt">{{ item.replyCount || 0}}</text>
+                      </view>
+                    </view>
+                  </view>
+                  <view class="comment-list v12-px-3" v-if="item.latestReplyList" @click="infoClick(item)">
+                    <view class="v12-mt-2" v-for="(comment, i) in item.latestReplyList" :key="i">
+                      <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.userIsAdmin" 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">
+                              <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.userIsAdmin" 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.parentReplyId !== comment.id">
+                                      {{ '  回复  '  + _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>
+                        </view>
+                      </view>
+                     
                     </view>
                   </view>
                 </view>
@@ -374,54 +465,24 @@
                 </view>
               </view>
             </view>
-            <view class="project-wrap">
+            <view class="card-wrap v12-mt-3">
-              <view class="title">
-                <image
-                  :src="webUrl + '/page/qianxian/icon-01.png'"
-                  class="icon"
-                />
-                产业项目
-              </view>
-              <view v-if="industryProjectList.length > 0" class="list">
-                <view
-                  v-for="(item, index) in industryProjectList"
-                  :key="index"
-                  class="item"
-                >
-                  <image
-                    :src="item.image"
-                    class="img"
-                    @click="gotoInvestment(item.title, 'project', item.id)"
-                  />
-                </view>
-              </view>
-              <view v-else class="no-data">暂无产业项目</view>
-            </view>
-          </view>
-          <view v-if="industryTabIndex === 1">
-            <view class="card-wrap">
-              <!-- <image
-                :src="webUrl + '/page/qianxian/card-bg2.png'"
-                class="bg"
-              /> -->
               <view class="card-cont">
-                <view class="tab-wrap">
+                <view class="file-wrap v12-radius-20" :class="[{'v12-align-center': investmentFileList.length === 0}, {'v12-justify-center': investmentFileList.length === 0}]">
-                  <view
-                    v-for="(tab, tabIndex) in industryTab"
-                    :key="tabIndex"
-                    :class="industryTabIndex === tabIndex ? 'tab-item1' : ''"
-                    class="item"
-                    @click="industryTabItemClick(tabIndex)"
-                  >
-                    <!-- <image
-                      :src="webUrl + tab.icon"
-                      class="icon"
-                    /> -->
-                    {{ tab.name }}
-                  </view>
-                </view>
-                <view class="file-wrap" :class="[{'v12-align-center': investmentFileList.length === 0}, {'v12-justify-center': investmentFileList.length === 0}]">
                   <view v-if="investmentFileList.length > 0" class="file-list">
+                    <view class="title v12-justify-between">
+                      <view class="title">
+                        <image
+                          :src="webUrl + '/page/qianxian/icon-02.png'"
+                          class="icon"
+                        />
+                        招商政策
+                      </view>
+                      <view v-if="investmentFileList.length > 0" >
+                        <view @click="gotoInvestment('', 'investment')">
+                          更多政策>
+                        </view> 
+                      </view>
+                    </view>
                     <view class="list-cont">
                       <view
                         v-for="(file, fileIndex) in investmentFileList"
@@ -443,18 +504,99 @@
                 </view>
               </view>
             </view>
-            <view v-if="investmentFileList.length > 0" class="more-btn-wrap">
+            <!-- <view class="project-wrap">
-              <view class="more-btn" @click="gotoInvestment('', 'investment')">
+              <view class="title">
-                更多政策
+                <image
+                  :src="webUrl + '/page/qianxian/icon-01.png'"
+                  class="icon"
+                />
+                产业项目
               </view>
-            </view>
+              <view v-if="industryProjectList.length > 0" class="list">
+                <view
+                  v-for="(item, index) in industryProjectList"
+                  :key="index"
+                  class="item"
+                >
+                  <image
+                    :src="item.image"
+                    class="img"
+                    @click="gotoInvestment(item.title, 'project', item.id)"
+                  />
+                </view>
+              </view>
+              <view v-else class="no-data">暂无产业项目</view>
+            </view> -->
+            
           </view>
-          <view v-if="industryTabIndex === 2">
+          <view v-if="industryTabIndex === 1">
             <view class="card-wrap">
               <!-- <image
                 :src="webUrl + '/page/qianxian/card-bg3.png'"
                 class="bg bg3"
               /> -->
+              <view class="card-cont">
+                <view class="tab-wrap">
+                  <view
+                    v-for="(tab, tabIndex) in industryTab"
+                    :key="tabIndex"
+                    :class="industryTabIndex === tabIndex ? 'tab-item0' : ''"
+                    class="item"
+                    @click="industryTabItemClick(tabIndex)"
+                  >
+                    <!-- <image
+                      :src="webUrl + tab.icon"
+                      class="icon"
+                    /> -->
+                    {{ tab.name }}
+                  </view>
+                </view>
+                <view class="village-wrap v12-pt-3">
+                  <view v-if="shopList.length > 0" class="village-list">
+                    <view
+                      v-for="(shop, shopIndex) in shopList"
+                      :key="shopIndex"
+                      class="village-item v12-white"
+                      @click="villageItemClick(shop)"
+                    >
+                      <view class="img-wrap">
+                        <image
+                          :src="shop.cover + (shop.coverType === 2 ? '?vframe/jpg/offset/1' : '')"
+                          class="img"
+                        />
+                        <view class="location">
+                          <image
+                            :src="webUrl + '/page/qianxian/icon-08.png'"
+                            class="icon"
+                          />
+                          <view class="addr one-t">
+                            {{ shop.address }}
+                          </view>
+                        </view>
+                      </view>
+                      <view class="info">
+                        <view class="intro more-t">
+                          {{ shop.content }}
+                        </view>
+                        <view class="name-wrap">
+                          <image
+                            :src="shop.logo"
+                            class="logo"
+                          />
+                          <view class="name one-t">
+                            {{ shop.name }}
+                          </view>
+                        </view>
+                      </view>
+                    </view>
+                  </view>
+                  <view v-else class="no-data">暂无店铺</view>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view v-if="industryTabIndex === 2">
+            <view class="card-wrap">
               <view class="card-cont">
                 <view class="tab-wrap">
                   <view
@@ -732,7 +874,9 @@ import {
   getCountyFamousCityDetail,
   getShareImg,
   getSaleList,
-  getJiaLouList
+  getJiaLouList,
+  getCityNewsCategory,
+  getCityShopList
 } from '@/api/qianxian'
 import ProductWindow from '@/components/ProductWindow'
 import goCartMixin from '@/mixins/goCartMixins'
@@ -808,7 +952,7 @@ export default {
       villageList: [],
       industryTab: [
         { name: '项目', icon: '/page/qianxian/icon-04.png' },
-        { name: '招商', icon: '/page/qianxian/icon-03.png' },
+        { name: '店铺', icon: '/page/qianxian/icon-03.png' },
         { name: '旅居', icon: '/page/qianxian/icon-03.png' },
         { name: '租售', icon: '/page/qianxian/icon-07.png' }
       ],
@@ -819,6 +963,9 @@ export default {
       videoPlayers:[],
       jiaLouList: [],
       countyId: null,
+      newsCategoryList: [],
+      newsCurrent: 0,
+      shopList: [],
     }
   },
   onShareAppMessage() {
@@ -859,8 +1006,46 @@ export default {
     this.getListReq()
     this.getsaleList()
     this.queryGuide('countyFamousIndex')
+    this.getCityNewsCategoryReq()
   },
   methods: {
+    /**
+     * 获取县城资讯类别
+     */
+    getCityNewsCategoryReq() {
+      getCityNewsCategory().then(res => {
+        if(res.status === 200) {
+          this.newsCategoryList = [{name: '全部', id: ''}].concat(res.data || [])
+        }
+      })
+    },
+    changeNewsTab(index) {
+      if (this.newsCurrent === index) return
+      this.newsCurrent = index
+      this.getInfoReq()
+    },
+    formatterTime(time) {
+      const now = new Date();
+      const date = new Date(time);
+      const diff = now - date;
+      const diffMin = Math.floor(diff / 1000 / 60);
+      const diffHour = Math.floor(diff / 1000 / 60 / 60);
+      const diffDay = Math.floor(diff / 1000 / 60 / 60 / 24);
+      if (diffMin < 1) {
+        return "刚刚";
+      } else if (diffHour < 1) {
+        return diffMin + "分钟前";
+      } else if (diffDay < 1) {
+        return diffHour + "小时前";
+      } else if (diffDay < 7) {
+        return diffDay + "天前";
+      } else {
+        return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
+      }
+    },
+    infoClick(info) {
+      this.$yrouter.push('/pkg_product/views/newsInfo?id=' + info.id)
+    },
     showFunctionGuide() {
       if(this._step == this.functionGuideData.step) return
       if(this.functionGuideData.step == 1) {
@@ -1181,10 +1366,12 @@ export default {
       _this.isLoadInfoListSuccess = false
       _this.loading = true
       _this.infoArray = []
+      const categoryId = this.newsCategoryList[this.newsCurrent] ? this.newsCategoryList[this.newsCurrent].id : ''
       getCountyFamousCityNews({
         page: 1,
         limit: 9999,
-        countyFamousDataId: _this.id
+        countyFamousDataId: _this.id,
+        categoryId: categoryId
       }).then(res => {
         const { data } = res
         _this.loading = false
@@ -1345,9 +1532,6 @@ export default {
         })
       })
     },
-    infoClick(info) {
-      // this.$yrouter.push('/pagesInn/inn/innInfoDetail?id=' + info.id)
-    },
     coverPlay(){
       this.videoPlayers.forEach(player => {
         const playerCtx = uni.createVideoContext(player, this)
@@ -1471,6 +1655,16 @@ export default {
           this.jiaLouList = res.data.records || []
         })
       }
+      if(index === 1) {
+        const params = {
+          countyFamousDataId: this.id,
+          page: 1,
+          limit: 9999
+        }
+        getCityShopList(params).then(res => {
+          this.shopList = res.data.records || []
+        })
+      }
     },
     fileItemClick(file) {
       const url = file.attachment || ''
@@ -1874,6 +2068,31 @@ export default {
   padding: 22rpx;
 }
 .info-section {
+  .news-category {
+    padding-bottom: 20rpx;
+    .news-category-scroll {
+      white-space: nowrap;
+      width: 100%;
+    }
+    .news-category-wrapper {
+      overflow: scroll;
+      display: flex;
+      justify-content: space-between;
+    }
+    .category-item {
+      display: inline-block;
+      padding: 10rpx 30rpx;
+      margin-right: 20rpx;
+      border-radius: 16rpx;
+      font-size: 28rpx;
+      font-weight: bold;
+      color: #333;
+      &.active {
+        color: #fff;
+        background: #C52733
+      }
+    }
+  }
   .info-item + .info-item {
     margin: 22rpx 0 0 0;
   }

pkg_product/views/newsInfo.vue

@@ -0,0 +1,933 @@
+<template>
+  <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.title }}
+        </view>
+        <view class="intro">
+          {{ item.content }}
+        </view>
+      </view>
+      <view class="info-item-body">
+        <view v-if="item.type === 2" 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.images"
+            :imgList="item.images"
+            :num="item.images.length"
+            :img-radius="10"
+            style="width: 100%"
+          />
+        </view>
+      </view>
+      <view class="info-item-bottom">
+        <view class="time">
+          {{
+            item.createTime
+              ? item.createTime.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">
+            <image
+              v-if="!item.hasZan"
+              :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 || comments.length }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="v12-px-2">资讯评论</view>
+    <view v-if="comments.length === 0" class="v12-text-center v12-py-2 v12-dark1-text v12-font-24">
+      暂无评论
+    </view>
+    <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.userIsAdmin" 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.userIsAdmin" 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.parentReplyId !== comment.id">
+                        {{ '  回复  '  + _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">
+                      <!-- <text class="v12-dark1-text" v-if="_comment.at && _comment.parentReplyId !== comment.id">{{ "@" +_comment.at.atNickName }}</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="comment-input-wrap">
+      <view style="width: 100%;">
+        <u-textarea
+          v-model="reply"
+          :prefixIcon="prefixIcon" 
+          :maxlength="500"
+          :maxheight="200"
+          :showConfirmBar="false"
+          :autoHeight="reply.length < 40 ? true : false"
+          cursorSpacing="15"
+          placeholder="分享你的观点，让世界听见你的声音..."
+          class="comment-input" 
+          @focus="commentInputFocus"
+          @change="commentInputChange" 
+        >
+          
+          <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-textarea>
+      </view>
+      <view class="">
+        <view class="send-btn v12-primary v12-white-text" @click="sendComment">发送</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getCommentList, addComment } from "@/api/inn"
+import { getCityNewsDetail, postCountyFamousNewsZan } from "@/api/qianxian"
+import imgBox from '@/components/imageTypeSet/imagebox.vue'
+export default {
+  components: {
+    imgBox
+  },
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      id: null,
+      item: {},
+      comments: [],
+      reply: '',
+      atUid: '',
+      currentComment: {},
+      prefixIcon: 'edit-pen'
+    }
+  },
+  onLoad(options) {
+    this.id = options.id
+    this.init()
+  },
+  methods: {
+    showMoreComment(comment) {
+      const params = {
+        contentId: this.id,
+        contentType: "hotelNews",
+        rootReplyId: comment.id,
+        page: 1,
+        limit: 99999
+      }
+      getCommentList(params).then((res) => {
+        comment.children = res.data.records
+        comment.hasMoreChildren = false
+      })
+    },
+    commentInputChange(e) {
+      // 若删除直接将@用户名整个删除
+      if (e === '') {
+        this.currentComment = {}
+        return
+      }
+      // 若删除@用户名，将@用户名整个删除
+      const usernameLength = `@${this.currentComment.userNickName} `.length
+      if(!e.includes(`@${this.currentComment.userNickName} `) && this.currentComment.userNickName) {
+        this.currentComment = {}
+        // 去除@用户名
+        this.reply = e.slice(usernameLength - 1)
+      }
+    },
+    commentInputFocus(e) {
+      // this.prefixIcon = ''
+    },
+    selectComment(comment) {
+      this.currentComment = comment
+      this.reply = '@' + comment.userNickName + ' '
+    },
+    /**
+     * 格式化时间
+     * @param {*} time 时间
+     * @returns 距离当前时间的时间差
+     * 1. 小于1分钟，显示刚刚
+     * 2. 小于1小时，显示xx分钟前
+     * 3. 小于1天，显示xx小时前
+     * 4. 超过7天，显示日期 xxxx年xx月xx日
+     */
+    formatterTime(time) {
+      const now = new Date()
+      const date = new Date(time)
+      const diff = now - date
+      const diffMin = Math.floor(diff / 1000 / 60)
+      const diffHour = Math.floor(diff / 1000 / 60 / 60)
+      const diffDay = Math.floor(diff / 1000 / 60 / 60 / 24)
+      if (diffMin < 1) {
+        return "刚刚"
+      } else if (diffHour < 1) {
+        return diffMin + "分钟前"
+      } else if (diffDay < 1) {
+        return diffHour + "小时前"
+      } else if (diffDay < 7) {
+        return diffDay + "天前"
+      } else {
+        return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日"
+      }
+    },
+    /**
+     * 发评论
+     */
+    sendComment() {
+      if (!this.reply.trim()) {
+        uni.showToast({
+          title: '请输入评论内容',
+          icon: 'none'
+        })
+        return
+      }
+      if(this.reply.trim() === ('@' + this.currentComment.userNickName)) {
+        // 请输入回复内容
+        uni.showToast({
+          title: '请输入回复内容',
+          icon: 'none'
+        })
+        return
+      }
+      uni.showLoading({
+        mask: true
+      })
+      const params = {
+        contentId: this.id,
+        contentType: 'countyFamousNews',
+        parentReplyId: this.currentComment.parentId || this.currentComment.id,
+        reply: (this.reply.replace('@' + this.currentComment.userNickName, '')).trim(),
+        atUid: this.currentComment.uid || null
+      }
+      addComment(params).then((res) => {
+        uni.hideLoading()
+        this.init()
+        this.reply = ''
+        this.currentComment = {}
+        this.item.replyCount === null ? this.item.replyCount = 1 : this.item.replyCount++
+      })
+    },
+    init() {
+      getCityNewsDetail(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: "countyFamousNews",
+        page: 1,
+        limit: 99999
+      }
+      getCommentList(params).then((res) => {
+        this.comments = res.data.records
+      })
+    },
+    likeInfo() {
+      uni.showLoading({
+        mask: true
+      })
+      postCountyFamousNewsZan({ countyFamousNewsId: this.id }).then((res) => {
+        uni.hideLoading()
+        getCityNewsDetail(this.id).then(({ data }) => (this.item = data))
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less">
+@import "@/assets/css/store.less";
+.comment-list{
+  padding-bottom: 100rpx;
+}
+.more-text{
+  color:#1B76F0;
+  font-weight: 400;
+  font-size: 28rpx;
+}
+.comment-input-wrap{
+  padding: 20rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: -webkit-sticky;
+  position: fixed;
+  width: 100%;
+  box-sizing: border-box;
+  bottom: 0;
+  background: #fff;
+  left: 0;
+}
+.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;
+  min-height: 100vh;
+  .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: 0 20rpx 20rpx 20rpx;
+      margin-bottom: 20rpx;
+      border-bottom: 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;
+    box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.16);
+
+    .title {
+      margin-bottom: 20rpx;
+      font-size: 40rpx;
+      font-weight: bold;
+      line-height: 64rpx;
+      color: #333333;
+    }
+
+    .sub {
+      font-size: 32rpx;
+      line-height: 1;
+      color: #333333;
+
+      image {
+        width: 40rpx;
+        height: 40rpx;
+        margin-right: 4rpx;
+        vertical-align: middle;
+      }
+
+      .datetime {
+        color: #999999;
+      }
+
+      .num {
+        line-height: 40rpx;
+      }
+    }
+  }
+
+  .video-box {
+    box-sizing: border-box;
+    padding: 40rpx 32rpx 0;
+  }
+
+  .content-box {
+    padding: 40rpx 32rpx;
+    box-sizing: border-box;
+  }
+}
+.user-info{
+  view{
+    word-break: break-all;
+  }
+}
+</style>