修改消息

src/layout/index.vue

@@ -9,7 +9,7 @@
             <!-- <text class="english">{{ siteInfo.zhBrief }}</text> -->
           </div>
         </el-col>
-        <el-col :span="14">
+        <el-col :span="13">
           <el-menu :default-active="current" mode="horizontal" @select="selectMenu">
             <template v-for="item in data" :key="item._id">
               <template v-if="item.type === '0'">
@@ -28,7 +28,7 @@
             </template>
           </el-menu>
         </el-col>
-        <el-col :span="4">
+        <el-col :span="5">
           <el-row :gutter="20">
             <el-col :span="6" class="top_2">
               <el-button :icon="Search" size="small" @click="toCommon(0)">搜索</el-button>

src/views/achievement/detail.vue

@@ -103,6 +103,7 @@ const userStore = UserStore()
 const user = computed(() => userStore.user)
 // 路由
 const route = useRoute()
+const router = useRouter()
 // 加载中
 const loading = ref(false)
 const info = ref({})
@@ -169,7 +170,7 @@ const toBuy = () => {
 }
 // 在线洽谈
 const toChat = () => {
-  console.log('在线洽谈')
+  router.push({ path: '/chat', query: { id: info.value.id || info.value._id } })
 }
 // 进入单位
 const toUnit = () => {

src/views/chat/index.vue

@@ -42,7 +42,7 @@
                 </el-col>
               </el-col>
             </el-aside>
-            <el-main style="background: #eee">
+            <el-main style="background: #eee; padding: 0">
               <Chat></Chat>
             </el-main>
           </el-container>
@@ -105,9 +105,19 @@ const chatList = ref([
   { _id: '10', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' }
 ])
 const list = ref([
+  { _id: '1', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
+  { _id: '2', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
   { _id: '1', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
   { _id: '2', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' }
 ])
+const info = ref({
+  _id: '1',
+  url: kf,
+  name: '新浪微博',
+  content: '内容',
+  type: '0',
+  time: '2024-03-30'
+})
 // 请求
 onMounted(async () => {
   loading.value = true
@@ -129,6 +139,7 @@ const toView = async (item) => {
 // provide
 provide('_id', _id)
 provide('list', list)
+provide('info', info)
 </script>
 <style scoped lang="scss">
 .main {

src/views/chat/parts/chat.vue

@@ -2,7 +2,46 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main">
-        <el-col :span="24" class="one" v-if="_id"> 聊天记录</el-col>
+        <el-col :span="24" class="one" v-if="_id">
+          <el-container>
+            <el-header class="Header">{{ info.name || '平台用户' }}</el-header>
+            <el-main class="Main">
+              <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+                <el-col :span="24" class="time">{{ item.time }}</el-col>
+                <el-col :span="24" class="message">
+                  <el-col :span="1" class="left">
+                    <el-image class="image" :src="item.url" fit="fill" />
+                  </el-col>
+                  <el-col :span="23" class="right">
+                    <el-col :span="24" class="name"> {{ item.name }}</el-col>
+                    <el-col :span="24" class="content">
+                      <text class="text">{{ item.content }}</text>
+                    </el-col>
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="message flexOne">
+                  <el-col :span="23" class="right">
+                    <el-col :span="24" class="name"> {{ item.name }}</el-col>
+                    <el-col :span="24" class="content">
+                      <text class="text">{{ item.content }}</text>
+                    </el-col>
+                  </el-col>
+                  <el-col :span="1" class="left">
+                    <el-image class="image" :src="item.url" fit="fill" />
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-main>
+            <el-footer class="Footer">
+              <el-col :span="24" class="Footer1">
+                <textarea class="input" v-model="textarea" placeholder="请输入您想输入的内容" />
+              </el-col>
+              <el-col :span="24" class="Footer2">
+                <el-button type="primary" size="small">发送</el-button>
+              </el-col>
+            </el-footer>
+          </el-container>
+        </el-col>
         <el-col :span="24" class="two" v-else>
           <p>您还未选中或发起聊天，快去跟好友聊一聊吧</p>
         </el-col>
@@ -14,6 +53,7 @@
 <script setup>
 const _id = inject('_id')
 const list = inject('list')
+const info = inject('info')
 </script>
 <style scoped lang="scss">
 .main {
@@ -22,6 +62,106 @@ const list = inject('list')
     width: 100%;
     border-radius: 0 5px 5px 0;
     color: #a3a7ae;
+    .Header {
+      position: sticky;
+      top: 0;
+      background: #eee;
+      z-index: 9999;
+      height: 50px;
+      box-sizing: border-box;
+      line-height: 50px;
+      margin-left: 18px;
+      margin-right: 20px;
+      border-bottom: 1px solid #d9d9d9;
+      white-space: nowrap;
+      word-break: break-all;
+      display: inline-block;
+      font-size: 16px;
+      color: grey;
+    }
+    .Main {
+      height: 53vh;
+      .list {
+        .time {
+          width: 100%;
+          font-size: 12px;
+          margin: 7px auto;
+          text-align: center;
+          color: #a3a7ae;
+        }
+        .flexOne {
+          .right {
+            text-align: right !important;
+            padding-right: 15px !important;
+          }
+          .content {
+            color: #fff !important;
+            text {
+              background: #409eff !important;
+              padding: 12px !important;
+              border-radius: 10px 0 10px 10px !important;
+            }
+          }
+        }
+        .message {
+          display: flex;
+          .left {
+            .image {
+              width: 40px;
+              height: 40px;
+              border-radius: 50%;
+            }
+          }
+          .right {
+            padding-left: 15px;
+            .name {
+              padding-bottom: 5px;
+              color: #a3a7ae;
+              display: inline-block;
+              font-size: 12px;
+            }
+            .content {
+              padding: 20px 0;
+              word-break: break-word;
+              font-size: 14px;
+              color: #333;
+              text {
+                background: rgb(255, 255, 255);
+                padding: 12px;
+                border-radius: 0 10px 10px 10px;
+              }
+            }
+          }
+        }
+      }
+    }
+    .Main::-webkit-scrollbar {
+      display: none;
+    }
+    .Footer {
+      border-top: 1px solid #ddd;
+      background: #eee;
+      padding: 10px;
+      .Footer1 {
+        .input {
+          color: #333;
+          width: 100%;
+          height: 85px;
+          display: block;
+          box-sizing: border-box;
+          padding: 0 8px 0 17px;
+          font-size: 14px;
+          line-height: 22px;
+          background: #eee;
+          overflow: auto;
+          border: none;
+        }
+      }
+      .Footer2 {
+        margin: 10px 0 0 0;
+        text-align: right;
+      }
+    }
   }
   .two {
     display: flex;

src/views/company/detail.vue

@@ -134,6 +134,7 @@ const user = computed(() => userStore.user)
 import science from '@/assets/bg.png'
 // 路由
 const route = useRoute()
+const router = useRouter()
 // 加载中
 const loading = ref(false)
 const info = ref({
@@ -218,7 +219,7 @@ const getArea = (data) => {
 }
 // 在线洽谈
 const toChat = () => {
-  console.log('在线洽谈')
+  router.push({ path: '/chat', query: { id: info.value.id || info.value._id } })
 }
 // 收藏
 const toCollection = () => {

src/views/demand/detail.vue

@@ -92,6 +92,7 @@ const userStore = UserStore()
 const user = computed(() => userStore.user)
 // 路由
 const route = useRoute()
+const router = useRouter()
 // 加载中
 const loading = ref(false)
 const info = ref({})
@@ -146,7 +147,7 @@ const getArea = (data) => {
 }
 // 在线洽谈
 const toChat = () => {
-  console.log('在线洽谈')
+  router.push({ path: '/chat', query: { id: info.value.id || info.value._id } })
 }
 // 我要对接
 const toDocking = () => {

src/views/expert/detail.vue

@@ -110,6 +110,7 @@ const user = computed(() => userStore.user)
 import kf from '@/assets/kf.png'
 // 路由
 const route = useRoute()
+const router = useRouter()
 // 加载中
 const loading = ref(false)
 const info = ref({
@@ -186,7 +187,7 @@ const getArea = (data) => {
 }
 // 在线洽谈
 const toChat = () => {
-  console.log('在线洽谈')
+  router.push({ path: '/chat', query: { id: info.value.id || info.value._id } })
 }
 // 收藏
 const toCollection = () => {

src/views/expert/index.vue

@@ -241,7 +241,7 @@ const getArea = (data) => {
 }
 // 联络专家
 const toChat = (item) => {
-  console.log(item)
+  router.push({ path: '/chat', query: { id: item.id || item._id } })
 }
 const currentPage = ref(1)
 // 分页

src/views/home/index.vue

@@ -547,7 +547,7 @@ const mouseOver = async (item) => {
 }
 // 联络专家
 const toChat = (item) => {
-  console.log(item)
+  router.push({ path: '/chat', query: { id: item.id || item._id } })
 }
 </script>
 <style scoped lang="scss">

src/views/project/detail.vue

@@ -95,6 +95,7 @@ const userStore = UserStore()
 const user = computed(() => userStore.user)
 // 路由
 const route = useRoute()
+const router = useRouter()
 // 加载中
 const loading = ref(false)
 const info = ref({})
@@ -149,7 +150,7 @@ const getDict = (data, model) => {
 }
 // 在线洽谈
 const toChat = () => {
-  console.log('在线洽谈')
+  router.push({ path: '/chat', query: { id: info.value.id || info.value._id } })
 }
 // 我要对接
 const toDocking = () => {