1

src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="app">
     <router-view />
-    <ChatFloatButton v-if="!showChat && this.$store.state.user.name" @open="showChat = true" />
-    <ChatPanel v-if="showChat && this.$store.state.user.name" @close="showChat = false" />
+    <ChatFloatButton v-show="!showChat && this.$store.state.user.name" @open="showChat = true" />
+    <ChatPanel v-show="showChat && this.$store.state.user.name" @close="showChat = false" />
   </div>
 </template>
 

src/layout/components/Chat/ChatFloatButton.vue

@@ -1,19 +1,99 @@
 <template>
-  <div class="chat-float-button" @click="handleClick">
+  <div
+    class="chat-float-button"
+    @mousedown="onDragStart"
+    @click="onButtonClick"
+  >
     <img class="chat-icon" src="@/assets/chat/chat_line.png" alt="在线会话" />
-    <span class="chat-label">在线会话</span>
+    <span class="chat-label" @click.stop="onLabelClick">在线会话</span>
   </div>
 </template>
 
 <script>
+let dragSuppressClick = false;
 export default {
   name: 'ChatFloatButton',
+  data() {
+    return {
+      isDragging: false,
+      fixedWidth: null,
+      fixedHeight: null,
+    };
+  },
   methods: {
-    handleClick() {
-      this.$emit('open');
-    }
-  }
-}
+    onLabelClick(e) {
+      if (!dragSuppressClick) {
+        this.$emit('open');
+      }
+    },
+    onButtonClick(e) {
+      if (dragSuppressClick) {
+        dragSuppressClick = false;
+        e.stopImmediatePropagation && e.stopImmediatePropagation();
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    },
+    onDragStart(e) {
+      if (e.button !== 0) return;
+      const btn = this.$el;
+      const rect = btn.getBoundingClientRect();
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const startLeft = rect.left;
+      const startTop = rect.top;
+      const width = rect.width;
+      const height = rect.height;
+
+      // 固定宽高，拖动过程中始终不变
+      btn.style.width = width + 'px';
+      btn.style.height = height + 'px';
+      this.fixedWidth = width;
+      this.fixedHeight = height;
+
+      btn.style.left = startLeft + 'px';
+      btn.style.top = startTop + 'px';
+      btn.style.right = '';
+      btn.style.bottom = '';
+      btn.style.position = 'fixed';
+      btn.style.cursor = 'move';
+      document.body.style.userSelect = 'none';
+
+      let moved = false;
+
+      const onMouseMove = (moveEvent) => {
+        const dx = moveEvent.clientX - startX;
+        const dy = moveEvent.clientY - startY;
+        if (!moved && (Math.abs(dx) > 2 || Math.abs(dy) > 2)) {
+          moved = true;
+        }
+        let newLeft = startLeft + dx;
+        let newTop = startTop + dy;
+        const maxLeft = window.innerWidth - width;
+        const maxTop = window.innerHeight - height;
+        newLeft = Math.max(0, Math.min(newLeft, maxLeft));
+        newTop = Math.max(0, Math.min(newTop, maxTop));
+        btn.style.left = newLeft + 'px';
+        btn.style.top = newTop + 'px';
+      };
+
+      const onMouseUp = () => {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+        document.body.style.userSelect = '';
+        btn.style.cursor = 'pointer';
+        // 拖动结束后，宽高依然保持固定，不恢复自适应
+        // btn.style.width/height 保持不变
+        if (moved) {
+          dragSuppressClick = true;
+          setTimeout(() => { dragSuppressClick = false; }, 100);
+        }
+      };
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+    },
+  },
+};
 </script>
 
 <style scoped>
@@ -30,17 +110,16 @@ export default {
   cursor: pointer;
   z-index: 9999;
   border: 1px solid #eee;
+  /* 不设置 width/height，JS 控制 */
 }
 .chat-icon {
-  width: 32px;
-  height: 32px;
+  width: 24px;
+  height: 24px;
   margin-right: 8px;
-  border-radius: 50%;
-  border: 1px solid #e0e0e0;
-  object-fit: cover;
 }
 .chat-label {
   font-size: 16px;
   color: #333;
+  user-select: none;
 }
 </style>

src/layout/components/Chat/ChatPanel.vue

@@ -927,7 +927,7 @@
                         <div class="fileWindowMessageItemName">用户名称</div>
                         <div class="fileWindowMessageItemTime">12:40</div>
                       </div>
-                      <div class="fileWindowMessageItemText">用用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息</div>
+                      <div class="fileWindowMessageItemText">用用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息</div>
                     </div>
                   </div>
                 </div>
@@ -1281,6 +1281,7 @@
         ones:0,
         messageContent:{},
         avatar:this.$store.state.user.avatar,
+        user_id:this.$store.state.user.userid,
         showfrindDialog:false,
         activeTab: 0,
         groupList: [],
@@ -1452,7 +1453,6 @@
       clickShowMessage() {
         // 先关闭所有旧消息
         this.$message.closeAll();
-
         this.$message({
           dangerouslyUseHTMLString: true,
           message: `
@@ -1463,7 +1463,8 @@
               <span>收到新消息</span>
             </div>
           `,
-          duration: 3000,
+          duration: 300000,
+          customClass:'message-new'
         });
 
         setTimeout(() => {
@@ -2421,20 +2422,23 @@
       //5.1 接受消息
       handleIncomingMessage(event) {
         const message = JSON.parse(event.data);
-        this.clickShowMessage();
-        console.log("监听消息1：",message)
-        if(this.ones==0){
-          this.ones = 1
-          this.getConversationList();          
-        }
-        console.log(message.receiver_id)
-        this.conversationList.forEach(item => {
-          if(item.receiver_id==message.receiver_id){
-            console.log("当前消息属于当前的聊天窗口！")
-            this.messageContent = message;
-          }
-        });
+        // this.clickShowMessage();
+        console.log("监听消息1：",message.user_id,"===",this.myUserId,"##",this.user_id)
+        // if(this.ones==0){
+        //   this.ones = 1
+        //   this.getConversationList();          
+        // }
+        // console.log(message.receiver_id)
+        // this.conversationList.forEach(item => {
+        //   if(item.receiver_id==message.receiver_id){
+        //     console.log("当前消息属于当前的聊天窗口！")
+        //     this.messageContent = message;
+        //   }
+        // });
         // console.log(message.receiver_id.length == 18)
+        if(message.user_id && (message.user_id !=this.user_id)){
+          this.clickShowMessage(message);
+        }
         //第一步：先判断是否为群消息
         if (message.receiver_id && message.receiver_id.length == 18) {
           //第二步：判断当前接收的消息是否显示到聊天框中
@@ -3016,9 +3020,60 @@
           }, 50); // 动画结束后再修正一次
         });
       },
+      initDrag() {
+        const panel = this.$el;
+        const header = panel.querySelector('.chat-header');
+        if (!header) return;
+        let isDragging = false;
+        let startX, startY, startLeft, startTop;
+
+        header.style.cursor = 'move';
+
+        header.addEventListener('mousedown', (e) => {
+          // 只允许鼠标左键拖动
+          if (e.button !== 0) return;
+          isDragging = true;
+          startX = e.clientX;
+          startY = e.clientY;
+          const rect = panel.getBoundingClientRect();
+          startLeft = rect.left;
+          startTop = rect.top;
+          // 防止选中文字
+          document.body.style.userSelect = 'none';
+
+          const onMouseMove = (moveEvent) => {
+            if (!isDragging) return;
+            const dx = moveEvent.clientX - startX;
+            const dy = moveEvent.clientY - startY;
+            let newLeft = startLeft + dx;
+            let newTop = startTop + dy;
+
+            // 限制不拖出屏幕
+            const maxLeft = window.innerWidth - panel.offsetWidth;
+            const maxTop = window.innerHeight - panel.offsetHeight;
+            newLeft = Math.max(0, Math.min(newLeft, maxLeft));
+            newTop = Math.max(0, Math.min(newTop, maxTop));
+
+            panel.style.left = newLeft + 'px';
+            panel.style.top = newTop + 'px';
+            panel.style.right = '';
+            panel.style.bottom = '';
+          };
+
+          const onMouseUp = () => {
+            isDragging = false;
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            document.body.style.userSelect = '';
+          };
+
+          document.addEventListener('mousemove', onMouseMove);
+          document.addEventListener('mouseup', onMouseUp);
+        });
+      },
     },
     mounted() {
-      console.log("=====fuck")
+      console.log("用户头像信息：",this.$store.state.user.avatar)
       //开启websocket连接 start---------------------------------------->
       //1.获取admin-token
       const adminToken = document.cookie.split('; ').find(row => row.startsWith('Admin-Token=')).split('=')[1];
@@ -3103,6 +3158,7 @@
       //   `;
       //   document.head.appendChild(style);
       // }
+      this.initDrag();
     },
     beforeDestroy() {
       //页面销毁的时候清除定时器获取列表
@@ -3113,6 +3169,25 @@
         this.ws.close();
       }
       clearInterval(this.getFriendApplyListStatus);
+    },
+    watch: {
+      // 监听 user.avatar 的变化
+      '$store.state.user.avatar'(newVal, oldVal) {
+        if (newVal) {
+          // 这里可以安全地使用 avatar
+          this.avatar = newVal
+          console.log('avatar 变化了:', newVal);
+          // 你的逻辑...
+        }
+      },
+      '$store.state.user.userid'(newVal, oldVal) {
+        if (newVal) {
+          // 这里可以安全地使用 avatar
+          this.user_id = newVal
+          console.log('user_id 变化了:', newVal);
+          // 你的逻辑...
+        }
+      }
     }
   };
   </script>
@@ -5746,8 +5821,8 @@
         color: #999;
       }
     }
-        //发送名片
-        .messageTypeCard {
+    //发送名片
+    .messageTypeCard {
       width: 321px;
       background: #fff;
       border-radius: 16px;
@@ -5788,8 +5863,8 @@
         border: 1px solid #ECECEC;
       }
     }
-        //发送群聊
-        .messageGroupInvite {
+    //发送群聊
+    .messageGroupInvite {
       background: #fff;
       border-radius: 16px;
       border: 1px solid #E9EDF7;
@@ -5852,9 +5927,6 @@
       }
     }
     .searchFriendBox {
-          
-        
-         
             .searchFriendItem {
               display: flex;
               align-items: center;
@@ -5945,6 +6017,28 @@
             height: 400px;
             line-height: 400px;
           }
-  
 
+</style>
+<style >
+.message-new {
+    min-width: auto !important;
+    padding: 0 !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
+    border-radius:100px !important;
+}
+.message-new .el-message__icon {
+    display: none !important;
+}
+.message-new .my-custom-message {
+    background: #fff !important;
+    color: #000 !important;
+    border-radius: 4px !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
+    border: none !important;
+    padding: 8px 16px !important;
+    display: flex;
+    align-items: center;
+}
 </style>

src/router/index.js

@@ -1207,6 +1207,38 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/businessDistrict',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/chat/businessDistrict.vue'),
+        meta: {
+          title: '商圈',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/businessDistrictDetail',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/chat/businessDistrictDetail.vue'),
+        meta: {
+          title: '商圈详情',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
   // --------------企业管理fr--------------end---------
 ]
 

src/views/chat/businessDistrict.vue

@@ -0,0 +1,907 @@
+<template>
+    <div class="mainBox">
+      <!--搜索功能 start------------------------------------------------------------>
+      <div class="layerBox_search">
+        <div class="layerBoxLine">
+          <el-row>
+            <el-col :span="8">
+              <div class="searchBox">
+                <div class="searchTitle">分类：</div>
+                <el-input placeholder="请输入网站名称" autocomplete="off" v-model="getApiData.keyword" />
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="searchBox">
+                <div class="searchTitle">商圈名称：</div>
+                <el-cascader v-model="getApiData.website_column_id" :props="{ checkStrictly: true }"
+                  :options="website_column_arr" clearable></el-cascader>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="searchBox">
+                <div class="searchTitle">日期：</div>
+                <el-cascader v-model="getApiData.website_column_id" :props="{ checkStrictly: true }"
+                  :options="website_column_arr" clearable></el-cascader>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div class="layerBoxNoBg">
+       <div></div>
+        <div>
+          <el-button type="info" @click="clearSearchList">重置</el-button>
+          <el-button type="primary" @click="getData('search')">搜索</el-button>
+        </div>
+      </div>
+      <!--搜索功能 end------------------------------------------------------------>
+      <!--表格内容 start------------------------------------------------------------>
+      <div class="layerBox">
+        <tableTitle :name="tableDivTitle" />
+        <el-row>
+          <template>
+            <el-table :data="tableData" style="width: 100%">
+              <el-table-column fixed prop="index" label="编号" width="50"></el-table-column>
+              <el-table-column prop="website_name" label="商圈名称"></el-table-column>
+              <el-table-column prop="column_name" label="分类" width="150"></el-table-column>
+              <!-- <el-table-column prop="city_name" label="行政区划"></el-table-column> -->
+              <el-table-column prop="created_at" label="作者"  width="150"></el-table-column>
+              <el-table-column prop="updated_at" label="创建时间"  width="150"></el-table-column>
+              <el-table-column prop="updated_at" label="修改时间"  width="150"></el-table-column>
+              <el-table-column fixed="right" label="操作" width="150" header-align="center">
+                <template slot-scope="scope">
+                  <div class="listBtnBox">
+                
+                    <div class="listMainBtn" @click="manageRow(scope.row.id, tableData)"><i class="el-icon-edit-outline"></i>详情</div>
+                  </div>
+                
+                </template>
+              </el-table-column>
+            </el-table>
+          </template>
+        </el-row>
+      </div>
+      <div class="alignBox">
+        <el-row>
+          <el-col :span="24">
+            <el-pagination :current-page="getApiData.page" @size-change="handleSizeChange"
+              @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper"
+              :total="allCount"></el-pagination>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  //本地编译城市代码
+  //import getLocationNameById from '@/utils/citytocode';
+  //城市级联选择器
+//   import CityCascader from './components/CityCascader';
+  //表格标题
+  import tableTitle from './components/tableTitle';
+  //引入公用样式
+  import '@/styles/global.less';
+  import InputTag from '@/components/InputTag'
+  export default {
+    components: {
+    //   CityCascader, //城市级联选择器
+      tableTitle,//表格标题
+      InputTag
+    },
+    data() {
+      //0.全局操作 start ------------------------------------------------------------>
+      //表单验证
+      const validateEmpty = (rule, value, callback) => {
+        if (value.length == 0) {
+          callback(new Error('该项不能为空！'))
+        } else {
+          callback()
+        }
+      }
+      const validateWebsiteUrl = (rule, value, callback) => {
+        if (!value || value.trim() === "") {
+          callback(new Error('至少要填写一个网站地址！'));
+        } else {
+          callback();
+        }
+      }
+      const validateColumn = (rule, value, callback) => {
+        if (value.length === 0) {
+          callback(new Error('该项不能为空！'))
+        } else {
+          callback()
+        }
+      }
+      let self = this;
+      //0.全局操�� end ------------------------------------------------------------>
+      return {
+        tags: [],
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        tableDivTitle: "网站列表",
+        tableData: [],//内容
+        editId: 0,//要修改的网站id
+        getApiData: {
+          keyword: "",//网站名称查询
+          website_column_id: [],//使用网系id查询
+          city_id: [],//使用城市id查询
+          page: 1,//当前是第几页
+          pageSize: 10,//一共多少条
+        },
+        allCount: 0,//总条数
+        //分页相关 end ------------------------------------------------------------>
+  
+        //2.弹出框设置 start ------------------------------------------------------------>
+        windowStatus: false, //显示第一层弹窗
+        innerVisible: false, //显示第二层弹窗
+        formLabelWidth: '120px',//表单的长度
+        editBtn: false,//当显示编辑按钮的时候，就不显示提交
+        //弹出框设置 start ------------------------------------------------------------>
+  
+        //3.弹出框中的表单设置 start ------------------------------------------------------------>
+        //3.1 表单收集的数据
+        form: {
+          website_name: '',//需要提交的网站名称
+          website_url: [//需要绑定的网站地址
+            { url: "", show: true },
+            { url: "", show: false },
+            { url: "", show: false },
+            { url: "", show: false },
+            { url: "", show: false }
+          ],
+          website_column_arr_id: [],//需要提交的上级网系 数组
+          //city_arr_id:[0],//需要提交的城市id
+          logo: "",//logo地址 提交文件换取地址
+          title: "",//需要提交的网站标题
+          keywords: "",//需要提交的网站标题
+          description: "",//需要提交的网站描述
+          suffix: "",//需要提交的网站后缀
+          //template_id:""//选择的网站皮肤
+        },
+        //3.2 表单验证规则
+        formRules: {
+          //网站名称不能为空
+          website_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+          //网站地址不能为空
+          'website_url[0].url': [
+            { required: true, message: '至少要填写一个网站地址！', trigger: 'blur' },
+            { validator: this.validateWebsiteUrl, trigger: 'blur' }
+          ],
+          //网系不能为空 注意，因为是select框，只有提交的时候才会验证
+          website_column_arr_id: [{ type: 'array', required: true, trigger: 'change', message: '必须选择一个网系！', validator: validateColumn }],
+          //网站标题，关键词，描述不能为空
+          //city_arr_id:[{required:true,trigger:'blur',validator:validateColumn}],
+          title: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+          keywords: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+          description: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+          logo: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+          logoUrl: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+          suffix: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+          //template_id:[{required:true,trigger:'blur',validator:validateEmpty}],
+        },
+        //3.3 通过api获的的数据 弹窗
+        website_column_arr: [],//api获得的网系列表
+        //3.4 上传logo图片
+        logoUrl: '',
+        hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+        //3.5 模板列表
+        TemplateList: [],
+        getTemplateData: {
+          template_class_id: 1,//模板类型，暂时为1
+          page: 1,//当前是第几页
+          pageSize: 9,//请求多少条
+        },
+        TemplateallCount: 0,//总条数
+        TemplateName: "未选择模板..",//选择的模板名称
+        TemplateImg: "",//选择的模板图片
+        //弹出框中的表单设置 end ------------------------------------------------------------>
+      }
+    },
+    methods: {
+      //1.列表和分页相关 start ------------------------------------------------------------>
+      //1.1 开始请求列表信息方法
+      getData(type) {
+        //搜索条件 - 网系和城市id只提交最后一个
+        if (this.getApiData.website_column_id.length > 0) {
+          this.getApiData.website_column_id = this.getApiData.website_column_id[this.getApiData.website_column_id.length - 1];
+        }
+        if (this.getApiData.city_id.length > 0) {
+          this.getApiData.city_id = this.getApiData.city_id[this.getApiData.city_id.length - 1];
+        }
+        //如果是搜索，重新加载第一页
+        if (type == "search") {
+          this.getApiData.page = 1;
+        }
+        //console.log(this.getApiData)
+        this.$store.dispatch('pool/getWebList', this.getApiData).then(res => {
+          let newData = [];
+          //显示原有的id
+          // for(let item of res.data.rows){
+          //   if(item.city_name==null){item.city_name="--"}
+          //   newData.push(item)
+          // }
+          //显示1-10编号
+          for (let i = 0; i < res.data.rows.length; i++) {
+            newData[i] = res.data.rows[i];
+            newData[i].index = i + 1;
+          }
+          console.log(newData)
+          //格式化网站地址
+          // res.data.rows.forEach(item => {
+          //   item.website_url = item.website_url.join(', ');
+          // });
+          this.tableData = newData; //给与内容
+          this.allCount = res.data.count; //给与总条数
+        }).catch(() => {
+          this.$message({
+            type: 'warning',
+            message: '网络错误，请重试！'
+          });
+        })
+      },
+      //1.2 删除内容
+      deleteData(id) {
+        this.$confirm('删除后，该条信息及其绑定关系全部删除，确定吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          console.log("当前删除：" + id)
+          this.$store.dispatch('pool/deleteWebList', { id: id }).then(res => {
+            this.getData();
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+          }).catch(() => {
+            this.$message({
+              type: 'warning',
+              message: '网络错误，请重试！'
+            });
+          })
+        }).catch(() => {
+          this.$message({
+            type: 'warning',
+            message: '已取消删除'
+          });
+        });
+      },
+      //1.3 修改用户状态
+      upRow(id, status) {
+        let data = {
+          id: id,
+          status: status
+        }
+        this.$store.dispatch('pool/updateWebsiteStatus',data).then(res => {        
+          if (res.code == 200) {
+            this.$message({
+              type: 'success',
+              message: '网站状态已修改!'
+            });
+          }
+        }).catch(() => {
+          this.$message({
+            type: 'warning',
+            message: '已取消修改'
+          });
+        });
+      },
+      //1.4 列表内容分页
+      //直接跳转
+      handleSizeChange(val) {
+        this.getApiData.page = val;
+        this.getData();
+      },
+      //1.5 点击分页
+      handleCurrentChange(val) {
+        this.getApiData.page = val;
+        this.getData();
+      },
+      //1.6 重置按钮
+      clearSearchList() {
+        this.tableData = [];
+        this.getApiData.keyword = "";
+        this.getApiData.website_column_id = [];
+        this.getApiData.city_id = [];
+        //this.getApiData.city_arr_id = [];
+        this.getApiData.page = 1;
+        this.getApiData.pageSize = 10;
+        this.getData();
+      },
+      //1.7搜索栏的城市选择器
+      updateCityId(value) {
+        // 这里可以处理选择后的回调逻辑
+        console.log("城市ID已更新:", value);
+        // 可以在此处执行额外逻辑
+        this.getApiData.city_id = value;
+      },
+      //列表和分页相关 end ------------------------------------------------------------>
+  
+      //2.弹出框设置 start ------------------------------------------------------------>
+      //2.1 打开弹出框
+      openWindow() {
+        this.clearToServe();
+        this.windowStatus = true;
+      },
+      //2.2 关闭弹出框
+      closeWindow() {
+        this.windowStatus = false;
+        this.clearToServe();
+      },
+      //2.3 重置窗口内容
+      clearToServe() {
+        //还原表单
+        this.form.website_name = "";
+        this.form.website_column_arr_id = "";
+        this.form.website_url = [
+          { url: "", show: true },
+          { url: "", show: false },
+          { url: "", show: false },
+          { url: "", show: false },
+          { url: "", show: false }
+        ];
+        //this.form.city_arr_id = [0];
+        this.form.logo = "";
+        this.form.title = "";
+        this.form.keywords = "";
+        this.form.description = "";
+        this.form.template_id = "";
+        //还原logo缩略图
+        this.logoUrl = "";
+        //还原模板
+        this.TemplateList = [];
+        this.getTemplateData.page = 1;
+        this.TemplateImg = "";
+        this.TemplateallCount = 0;
+        this.form.suffix = "";
+        this.form.keywords = "";
+        this.tags = [];
+      },
+      //弹出框设置 end ------------------------------------------------------------>
+  
+      //3.添加新网站 start ------------------------------------------------------------>
+      //3.1 获得所有网系
+      getwebsiteColumn() {
+        let that = this;
+        this.$store.dispatch('pool/getwebsiteColumn').then(res => {
+          let arrData = this.transformData(res.data)
+          this.website_column_arr = arrData;
+        })
+      },
+      transformData(arrData) {
+        let that = this;
+        return arrData.map(item => {
+          // 创建一个新的对象，替换键名
+          let newItem = {
+            label: item.column_name,
+            value: item.id,
+            // 保留其他不需要改动的字段
+            pid: item.pid,
+            sort: item.sort,
+            remark: item.remark,
+            column_arr_id: item.column_arr_id,
+            updated_at: item.updated_at,
+            created_at: item.created_at,
+          };
+  
+          // 如果有 children，则递归处理 children 数组
+          if (item.children && item.children.length > 0) {
+            newItem.children = that.transformData(item.children);
+          }
+  
+          return newItem;
+        });
+      },
+      //3.2 开始添加内容
+      addData() {
+        this.$router.push({
+          path: '/addWebsite',
+        });
+        // //先获取所有网系
+        // this.getwebsiteColumn()
+        // //显示网系到弹出窗口
+        // this.openWindow()
+        // //修改添加和编辑窗口的文字提示
+        // this.editId = 0;
+        // //显示提交按钮
+        // this.editBtn = false;
+        //清除错误状态
+        this.$refs.form.clearValidate();
+      },
+      //3.3 添加一条网站地址
+      addUrlInput(key) {
+        this.form.website_url[key].show = true;
+      },
+      //3.4 删除一条网站地址
+      deleteUrlInput(key) {
+        this.form.website_url[key].show = false;
+        this.form.website_url[key].url = "";
+      },
+      //3.5 弹出框的城市选择器
+      updateFormCityId(value) {
+        //console.log("城市ID已更新:", value);
+        //this.form.city_arr_id = value;
+      },
+      //3.6 上传图片操作
+      beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isPNG = file.type === 'image/png';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+  
+        if (!isJPG && !isPNG) {
+          this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
+          return false;
+        }
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!');
+          return false;
+        }
+  
+        const formData = new FormData();
+        formData.append('file', file);
+  
+        this.$store.dispatch('pool/uploadFile', formData).then(res => {
+          this.logoUrl = res.data.imgUrl;//显示缩略图
+          this.form.logo = res.data.imgUrl;//提供表单地址
+          console.log(res.data.imgUrl)
+        }).catch(() => {
+          this.$message({
+            type: 'warning',
+            message: '网络错误，请重试！'
+          });
+        })
+  
+        // 阻止默认的上传行为
+        return false;
+      },
+      handleDelete() {
+        // 删除图片
+        this.logoUrl = ''; // 清空图片 URL
+      },
+      //3.7 提交表单
+      addToServe() {
+        console.log(this.form)
+        //先进行验证
+        this.$refs.form.validate(valid => {
+          if (valid) {
+            //提交之前把域名列表转换成数组
+            let webSiteArray = [];
+            for (let item of this.form.website_url) {
+              if (item.url != "") {
+                webSiteArray.push(item.url)
+              }
+            }
+            //循环完毕 重置提交的url
+            this.form.website_url = webSiteArray;
+            //console.log(webSiteArray)
+            console.log(this.form)
+            //提交表单
+            this.$store.dispatch('pool/addWebsite', this.form).then(res => {
+              if (res.code == 200) {
+                //汇报结果
+                this.$message({
+                  type: 'success',
+                  message: '已成功添加网站！'
+                });
+                //重新获取表单
+                this.getData();
+                //清空并退出
+                this.closeWindow();
+              } else {
+                this.$message({
+                  type: 'error',
+                  message: '添加失败！请检查网络！'
+                });
+                //清空并退出
+                this.closeWindow();
+              }
+  
+            }).catch(() => {
+              this.$message({
+                type: 'warning',
+                message: '网络错误，请重试！'
+              });
+            })
+          }
+        })
+      },
+      //3.8 检测网站名称是否存在
+      checkWebsiteName(name) {
+        let data = {
+          website_name: name
+        }
+        if (this.editId != "") {
+          data.id = this.editId;
+        }
+        this.$store.dispatch('pool/checkWebsiteName', data).then(res => {
+          if (res.code == 200) {
+            this.form.website_name = "";
+            this.$message({
+              type: 'warning',
+              message: '网站名称已存在！请重新输入！'
+            });
+          }
+        })
+      },
+      //3.9 检测网站url是否存在
+      checkWebsiteUrl(url, num) {
+        let data = {
+          website_url: url
+        }
+        if (this.editId != "") {
+          data.id = this.editId;
+        }
+        this.$store.dispatch('pool/checkWebsiteUrl', data).then(res => {
+          if (res.code == 200) {
+            if (num == 0) { this.form.website_url[0].url = "" }
+            if (num == 1) { this.form.website_url[1].url = "" }
+            if (num == 2) { this.form.website_url[2].url = "" }
+            if (num == 3) { this.form.website_url[3].url = "" }
+            if (num == 4) { this.form.website_url[4].url = "" }
+            this.$message({
+              type: 'warning',
+              message: '当前网站已经被占用，请重新输入！'
+            });
+          }
+        })
+      },
+      //添加新网站 end ------------------------------------------------------------>
+  
+      //4.选择模板 start ------------------------------------------------------------>
+      //4.1 获取模板列表
+      getTemplateList() {
+        //先打开弹出框
+        this.innerVisible = true;
+        //获取模板列表
+        this.$store.dispatch('pool/getTemplate', this.getTemplateData).then(res => {
+          //直接给与数据
+          //this.TemplateList = res.data.rows;
+          //格式化 目前缩略图给了两张，我只展示其中一张
+          let data = res.data.rows;
+          for (let item of data) {
+            //item.template_img
+            let imgSrc = item.template_img;
+            item.template_img = imgSrc[0];
+          }
+          this.TemplateList = data;
+          //给与总条数
+          this.TemplateallCount = res.data.count;
+        }).catch(() => {
+          this.$message({
+            type: 'warning',
+            message: '网络错误，请重试！'
+          });
+        })
+      },
+      //4.2 选择一个模板
+      useThatTemplate(id, template_name, template_img) {
+        console.log(template_name);
+        console.log(template_img);
+        // 关闭弹出框
+        this.innerVisible = false;
+        // 显示用户选择的名称
+        this.TemplateName = template_name;
+        // 确保这里设置了 TemplateImg
+        this.TemplateImg = template_img; // 确保 template_img 是有效的路径
+        // 记录选择的模板id
+        this.form.template_id = id;
+      },
+      //4.1 模板列表分页
+      //直接跳转
+      handleTemplateSize(val) {
+        this.getTemplateData.page = val;
+        this.getTemplateList();
+      },
+      //4.2 点击分页
+      handleChangeCurrent(val) {
+        this.getTemplateData.page = val;
+        this.getTemplateList();
+      },
+      //选择模板 end ------------------------------------------------------------>
+  
+      //5.编辑网站 start ------------------------------------------------------------>
+      //5.1获取详情
+      getDataMain(id) {
+        this.$router.push({
+          path: '/addwebsite',
+          query: { id: id }
+        });
+        //先清空窗口
+        this.clearToServe()
+        //打开输入窗口
+        // this.openWindow();
+        //添加修改id
+        // this.editId = id;
+  
+        //获取网站详情
+        // this.$store.dispatch('pool/getWebsiteInfo', { id: id }).then(res => {
+        //   //清除错误状态
+        //   this.$refs.form.clearValidate();
+        //   console.log(res)
+        //   //回显网站名称
+        //   this.form.website_name = res.data.website_name;
+        //   //回显星系
+        //   this.form.website_column_arr_id = res.data.website_column_arr_id;
+        //   //回显logo
+        //   this.form.logo = res.data.logo;
+        //   this.logoUrl = res.data.logo;
+        //   //回显url
+        //   let that = this;
+        //   if (res.data.website_url == null) {
+        //     //为null什么都不执行
+        //   } else {
+        //     for (let index in res.data.website_url) {
+        //       this.form.website_url[index].url = res.data.website_url[index];
+        //       this.form.website_url[index].show = true;
+        //     }
+        //   }
+        //   //回显id
+        //   //存放城市id
+        //   //this.form.city_arr_id = res.data.city_arr_id;
+        //   //当cascaderKey的值改变的时候 级联选择器会重置里面的内容
+        //   //this.cascaderKey += 1;
+        //   //回显网站标题，描述，关键词
+        //   console.log(res.data.title, res.data.keywords, res.data.description)
+        //   this.form.title = res.data.title;
+        //   this.form.keywords = res.data.keywords;
+        //   this.tags = res.data.keywords ? res.data.keywords.split(',') : [];
+        //   this.form.description = res.data.description;
+        //   this.form.suffix = res.data.suffix;
+        //   //回显模板信息
+        //   // this.form.template_id = res.data.template_id;
+        //   // this.TemplateName = res.data.template_name;
+        //   // this.TemplateImg = JSON.parse(res.data.template_img)[0];
+        // })
+  
+        this.editBtn = true;//显示编辑按钮
+      },
+      //5.2修改表单
+      editToServe() {
+        //执行验证
+        this.$refs.form.validate(valid => {
+          if (valid) {
+            //提交之前把域名列表转换成数组
+            let webSiteArray = [];
+            for (let item of this.form.website_url) {
+              if (item.url != "") {
+                webSiteArray.push(item.url)
+              }
+            }
+            //循环完毕 重置提交的url
+            this.form.website_url = webSiteArray;
+            this.form.id = this.editId;
+            //提交表单
+            this.$store.dispatch('pool/updateWebsite', this.form).then(res => {
+              console.log(res.code)
+              if (res.code == 200) {
+                //汇报结果
+                this.$message({
+                  type: 'success',
+                  message: '已成功修改网站信息！'
+                });
+                //清空并退出
+                this.closeWindow();
+                //重新请求列表
+                this.getData();
+              } else {
+                this.$message.error('修改失败！')
+                //清空并退出
+                this.closeWindow();
+              }
+  
+            }).catch(() => {
+              this.$message({
+                type: 'warning',
+                message: '网络错误，请重试！'
+              });
+            })
+          }
+        })
+      },
+      //编辑旧网站 end ------------------------------------------------------------>
+  
+      //6.搭建网站 start ------------------------------------------------------------>
+      creatWebsite(id) {
+        this.$router.push({
+          path: '/templateBase',
+          query: { id: id }
+        });
+      },
+      updateTags(newTags) {
+        // this.foem.seo_keywords = newTags;
+        this.tags = newTags;
+        this.form.keywords = newTags.join(',');
+      },
+      //编辑旧网站 end ------------------------------------------------------------>
+      //克隆网站
+      cloneWebsite(id) {
+        this.$confirm('克隆后，将生成一个一摸一样的网站，确定吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          console.log("当前克隆：" + id)
+          this.$store.dispatch('pool/cloneWebsite', { website_id: id }).then(res => {
+            this.getData();
+            this.$message({
+              type: 'success',
+              message: '克隆成功!'
+            });
+          }).catch(() => {
+            this.$message({
+              type: 'warning',
+              message: '网络错误，请重试！'
+            });
+          })
+        }).catch(() => {
+          this.$message({
+            type: 'warning',
+            message: '已取消克隆'
+          });
+        });
+      },
+    },
+    mounted() {
+      //1.获得初始数据
+      this.getData();
+      //2.获取所有网系
+      this.getwebsiteColumn();
+      //本地转换id为文字
+      //console.log(getLocationNameById("110000"))
+    }
+  }
+  </script>
+  
+  <style scoped lang="less">
+  /*表单特殊样式 start------------------------------------------------------------>*/
+  //1.1 模板表单
+  .webSite {
+    background: #f0f2f5;
+    width: 200px;
+    height: 300px;
+    line-height: 300px;
+    text-align: center;
+    margin: 0 auto;
+  }
+  
+  .webSiteTemplate {
+    display: flex;
+  
+    .webSiteTitle {
+      width: 120px;
+      line-height: 140px;
+      text-align: right;
+      padding-right: 12px;
+      font-weight: bold;
+    }
+  }
+  
+  .webSiteBtn {
+    padding: 50px 0 0 0;
+    text-align: center;
+  }
+  
+  .formLabelFloatBox {
+    position: relative;
+  
+    .formLabeladdIcon {
+      position: absolute;
+      right: 45px;
+      top: 5px;
+      width: 38px;
+      height: 24px;
+    }
+  
+    .formLabelDelIcon {
+      position: absolute;
+      right: 5px;
+      top: 5px;
+      width: 38px;
+      height: 24px;
+    }
+  }
+  
+  .templateBox {
+    display: flex;
+  
+    .templateListClass {
+      margin-right: 20px;
+  
+      .templateListClassItem {
+        width: 120px;
+        height: 38px;
+        text-align: center;
+        line-height: 38px;
+        border: 1px solid #E3E8FA;
+        background: #F5F7FB;
+        margin-bottom: 10px;
+        border-radius: 8px;
+        cursor: pointer;
+      }
+    }
+  
+    .templateListBox {
+      box-sizing: border-box;
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+  
+      .templateList {
+        margin-right: 10px;
+        text-align: center;
+        font-size: 12px;
+        margin-bottom: 10px;
+        border: 1px solid #fff;
+        padding: 5px;
+  
+        .templateImg {
+          width: 129px;
+          height: 157px;
+          border-radius: 8px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  
+  //1.1 模板分页
+  .pageNumBox {
+    text-align: center;
+    padding-top: 20px;
+  }
+  
+  .webSiteTemplateName {
+    margin-left: 10px;
+    line-height: 36px;
+  }
+  
+  //1.2 模板缩略图
+  .webSiteTemplateImg {
+    width: 140px;
+    height: 140px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 12px;
+    border: 1px solid #E1E2E9;
+  
+    .selectWebSiteTemplateImg {
+      width: 140px;
+      height: 140px;
+      border-radius: 12px;
+      display: block;
+      cursor: pointer;
+    }
+  
+    .webSiteTemplateText {
+      color: #5570F1;
+      height: 36px;
+      line-height: 36px;
+      text-align: center;
+    }
+  
+    img {
+      display: block;
+    }
+  }
+  
+  /*表单样式 end------------------------------------------------------------>*/
+  
+  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+  ::v-deep .custom-form-item>.el-form-item__label {
+    line-height: 140px !important;
+  }
+  
+  ::v-deep .custom-textarea .el-textarea__inner {
+    resize: none;
+    /* 禁止用户拖拽调整大小 */
+  }
+  
+  ::v-deep .custom-align-right .el-form-item__label {
+    text-align: right;
+    /* 设置标签文字右对齐 */
+  }
+  
+  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>
+  

src/views/chat/businessDistrictDetail.vue

@@ -0,0 +1,314 @@
+<template>
+    <div class="mainBox">
+ 
+      <!--搜索功能 end------------------------------------------------------------>
+      <!--表格内容 start------------------------------------------------------------>
+      <div class="layerBox">
+        <tableTitle :name="tableDivTitle" />
+        <el-row>
+          <template>
+            <!-- 在此位置下面写 -->
+            <div class="article-detail">
+              <div class="article-card">
+                <div class="article-title">
+                  高都市周山镇开展渔业安全生产应急演练活动
+                  <el-tag type="info" class="article-tag">科普</el-tag>
+                </div>
+                <div class="article-meta">
+                  <span class="article-meta-item1">发布自</span>
+                  <span class="article-meta-item2">发布自发布自发布自发布自发布自发布自发布自发布自发布自发布自发布自</span>
+                  <el-button  class="top-button" type="primary">查看群聊</el-button>
+                </div>
+                <el-divider></el-divider>
+                <div class="background-color">
+                  <div class="article-content">
+                  总有一些小故事被藏在社会安全的背后。会稍随意，这种不牢靠的能被流动，导致被拉打了。<br/>
+                    ...（此处省略正文，按实际内容填充）...
+                  </div>
+                  <div class="article-author">
+                    <span>作者：watzy</span>
+                    <span>链接：<el-link type="primary" :underline="false">https://zhuanlan.zhihu.com/p/189302368685709700</el-link></span>
+                    <span>来源：知乎</span>
+                  </div>
+                </div>
+                
+              </div>
+
+              <div class="comment-section">
+                <div class="box_1 clearfix">
+                <div class="box_in">评论：</div>
+                
+              </div>
+               
+                <div class="comment-list">
+                  <div class="comment-item" v-for="i in 4" :key="i">
+                    <el-avatar
+                      class="comment-avatar"
+                      src="https://img.zcool.cn/community/01b8c95d5b2e5fa801216518a8b7c6.jpg"
+                    />
+                    <div class="comment-content">
+                      <div class="comment-user">辣椒、青菜</div>
+                      <div class="comment-time">2024-09-01 13:21:23</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="comment-actions">
+                  <el-button>返回</el-button>
+                  <el-button type="primary">查看群聊</el-button>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-row>
+      </div>
+      <div class="alignBox">
+        <el-row>
+          <el-col :span="24">
+            <el-pagination :current-page="getApiData.page" @size-change="handleSizeChange"
+              @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper"
+              :total="allCount"></el-pagination>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  //表格标题
+  import tableTitle from './components/tableTitle';
+  //引入公用样式
+  import '@/styles/global.less';
+  import InputTag from '@/components/InputTag'
+  export default {
+    components: {
+      tableTitle,//表格标题
+      InputTag
+    },
+    data() {
+     
+      let self = this;
+      //0.全局操�� end ------------------------------------------------------------>
+      return {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        tableDivTitle: "商圈详情",
+        getApiData: {
+          keyword: "",//网站名称查询
+          website_column_id: [],//使用网系id查询
+          city_id: [],//使用城市id查询
+          page: 1,//当前是第几页
+          pageSize: 10,//一共多少条
+        },
+        allCount: 0,//总条数
+
+        //弹出框设置 start ------------------------------------------------------------>
+  
+        //3.弹出框中的表单设置 start ------------------------------------------------------------>
+        //3.1 表单收集的数据
+        form: {
+         
+        },
+        //3.2 表单验证规则
+        formRules: {
+        
+        },
+      
+      }
+    },
+    methods: {
+     
+    },
+    mounted() {
+     
+    }
+  }
+  </script>
+  
+  <style scoped lang="less">
+   .article-detail {
+    // padding: 24px;
+    // background: #f5f7fa;
+    min-height: 100vh;
+
+  .article-card {
+    margin-bottom: 24px;
+    padding: 24px 0px;
+    background: #fff;
+    // border-radius: 8px;
+    // box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+
+    .article-title {
+      font-family: Microsoft YaHei, Microsoft YaHei;
+      font-weight: bold;
+      font-size: 28px;
+      color: #333333;
+      display: flex;
+      align-items: center;
+      .article-tag {
+        background: rgba(85,112,241,0.16) !important;
+        border-radius: 3px 3px 3px 3px !important;
+        margin-left: 12px;
+        font-size: 14px;
+        height: 22px;
+        line-height: 22px;
+        padding: 0 10px;
+        border-radius: 4px;
+        font-weight: 400;
+        font-size: 14px;
+        color: #5570F1;
+      }
+    }
+    .article-meta {
+      margin-top: 31px;
+      color: #888;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      .article-link {
+        margin-left: 12px;
+      }
+    }
+    .article-content {
+      // margin: 18px 0 12px 0;
+      color: #444;
+      font-size: 15px;
+      line-height: 1.8;
+      word-break: break-all;
+    }
+    .article-author {
+      margin-top: 12px;
+      color: #999;
+      font-size: 13px;
+      span {
+        margin-right: 16px;
+      }
+    }
+  }
+
+  .comment-section {
+    // padding: 24px 32px;
+    background: #fff;
+    border-radius: 8px;
+    .comment-title {
+      font-weight: bold;
+      font-size: 22px;
+      color: #5570F1;
+      // font-size: 16px;
+      // font-weight: bold;
+      // color: #333;
+      margin-bottom: 8px;
+      text-align: left;
+    }
+    // 蓝色短分割线，宽度10%，居中
+    .el-divider {
+      margin: 8px auto 16px auto;
+      border: none;
+      height: 0;
+      width: 10%;
+      min-width: 40px;
+      max-width: 100px;
+      border-top: 2px solid #5570F1;
+      border-radius: 2px;
+      background: transparent;
+    }
+    .comment-list {
+      margin-bottom: 16px;
+      .comment-item {
+        display: flex;
+        align-items: center;
+        padding: 12px 0;
+        border-bottom: 1px solid #f0f0f0;
+        &:last-child {
+          border-bottom: none;
+        }
+        .comment-avatar {
+          width: 36px;
+          height: 36px;
+          margin-right: 12px;
+        }
+        .comment-content {
+          .comment-user {
+            font-size: 15px;
+            color: #555;
+            font-weight: 500;
+          }
+          .comment-time {
+            font-size: 12px;
+            color: #aaa;
+            margin-top: 2px;
+          }
+        }
+      }
+    }
+    .comment-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 16px;
+      margin-top: 12px;
+    }
+  }
+
+  .article-meta-item1 {
+    position: relative;
+    padding-left: 27px;
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      background: url('http://img.bjzxtw.org.cn/master/www/admin/renwu.png') no-repeat center center;
+      background-size: contain;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      margin-right: 4px;
+    }
+  }
+  .article-meta-item2 {
+    position: relative;
+    padding-left: 27px;
+    margin-left:40px;
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      background: url('http://img.bjzxtw.org.cn/master/www/admin/wechat.png') no-repeat center center;
+      background-size: contain;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      margin-right: 4px;
+    }
+  }
+  .top-button{
+    margin-left: 30px;
+  }
+  .background-color{
+    background: #f0f2f5;
+    padding: 30px 20px;
+  }
+  .clearfix::after{
+    content:'';
+    display: block;height: 0;
+    visibility: hidden;
+    clear: both;
+  }
+  .box_1{
+    border-bottom:solid 1px #E9EDF7;
+    box-sizing:border-box;
+  }
+  .box_in{
+    font-weight: bold;
+    float:left;
+    font-size:22px;
+    color:#5570F1;
+    height:33px;
+    line-height:33px;
+    border-bottom:solid 2px #5570F1;
+    margin-bottom:-1px;
+  }
+}
+</style>
+