修改聊天

src/store/api/platform/chat.js

@@ -0,0 +1,54 @@
+import { defineStore } from 'pinia'
+import { AxiosWrapper } from '@/utils/axios-wrapper'
+import { get } from 'lodash-es'
+const url = '/chat'
+const axios = new AxiosWrapper()
+
+export const ChatStore = defineStore('chat', () => {
+  const query = async ({ skip = 0, limit = undefined, ...info } = {}) => {
+    let cond = {}
+    if (skip) cond.skip = skip
+    if (limit) cond.limit = limit
+    cond = { ...cond, ...info }
+    const res = await axios.$get(`${url}`, cond)
+    return res
+  }
+  const chat = async ({ skip = 0, limit = undefined, ...info } = {}) => {
+    let cond = {}
+    if (skip) cond.skip = skip
+    if (limit) cond.limit = limit
+    cond = { ...cond, ...info }
+    const res = await axios.$get(`${url}/chat`, cond)
+    return res
+  }
+  const fetch = async (payload) => {
+    const res = await axios.$get(`${url}/${payload}`)
+    return res
+  }
+  const create = async (payload) => {
+    const res = await axios.$post(`${url}`, payload)
+    return res
+  }
+  const cancel = async (payload) => {
+    const res = await axios.$post(`${url}/cancel`, payload)
+    return res
+  }
+  const update = async (payload) => {
+    const id = get(payload, 'id', get(payload, '_id'))
+    const res = await axios.$post(`${url}/${id}`, payload)
+    return res
+  }
+  const del = async (payload) => {
+    const res = await axios.$delete(`${url}/${payload}`)
+    return res
+  }
+  return {
+    query,
+    chat,
+    fetch,
+    create,
+    update,
+    cancel,
+    del
+  }
+})

src/views/achievement/detail.vue

@@ -52,7 +52,6 @@
             <div class="money">
               参考价格：<span> {{ info.money || '面议' }} </span>
             </div>
-            <a-button v-if="info.status == '1'" type="primary" @click="toBuy"> 我要买 </a-button>
           </el-col>
           <el-col :span="24" class="pointer" v-if="!user && !user._id">
             提醒：您还没有登录，登录成功后再对接
@@ -62,7 +61,7 @@
               <p>单位信息</p>
             </el-col>
             <el-row :span="24" class="thr_2">
-              <el-col :span="16" class="left">
+              <el-col :span="18" class="left">
                 <el-col :span="24" class="name">
                   {{ userInfo.name || '暂无单位' }}
                 </el-col>
@@ -71,15 +70,13 @@
                   {{ userInfo.name || '暂无联系人' }}
                 </el-col>
               </el-col>
-              <el-col :span="8" class="right" v-if="info.status == '1'">
+              <el-col :span="6" class="right" v-if="info.status == '1'">
                 <a-button type="primary" @click="toChat">
                   <template #icon>
                     <MessageOutlined />
                   </template>
                   点击在线洽谈
                 </a-button>
-                <a-button class="button" @click="toUnit"> 进入单位 </a-button>
-                <a-button class="button" @click="toCollection"> 收藏单位 </a-button>
               </el-col>
             </el-row>
           </el-col>
@@ -248,17 +245,9 @@ const toFile = () => {
     ElMessage({ type: `warning`, message: `暂无文件下载！` })
   }
 }
-// 购买
-const toBuy = () => {
-  console.log('购买')
-}
 // 在线洽谈
 const toChat = () => {
-  router.push({ path: '/chat', query: { id: info.value.id || info.value._id } })
-}
-// 进入单位
-const toUnit = () => {
-  router.push({ path: '/company/detail', query: { id: info.value.id || info.value._id } })
+  router.push({ path: '/chat', query: { id: info.value.user } })
 }
 // 收藏
 const toCollection = async (status) => {
@@ -430,7 +419,7 @@ const sizeChange = (limits) => {
 
       .right {
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-end;
         .button {
           border-color: #2374ff;
           color: #2374ff;

src/views/chat/index.vue

@@ -28,14 +28,15 @@
                   :key="index"
                   @click="toView(item)"
                 >
-                  <div class="line" v-if="item._id == _id"></div>
+                  <div class="line" v-if="item.user == id"></div>
                   <el-col :span="4" class="left">
-                    <el-image class="image" :src="item.url" fit="fill" />
+                    <el-image class="image" v-if="item.url" :src="item.url" fit="fill" />
+                    <el-image class="image" v-else :src="kf" fit="fill" />
                   </el-col>
                   <el-col :span="20" class="right">
                     <el-col :span="24" class="right_1">
                       <div class="name">{{ item.name }}</div>
-                      <div class="time">{{ item.time }}</div>
+                      <div class="time">{{ item.send_time }}</div>
                     </el-col>
                     <el-col :span="24" class="right_2">{{ item.content }}</el-col>
                   </el-col>
@@ -71,17 +72,17 @@
 
 <script setup>
 // 基础
-import { get } from 'lodash-es'
-const $checkRes = inject('$checkRes')
+import moment from 'moment'
 import Chat from './parts/chat.vue'
 import { SearchOutlined } from '@ant-design/icons-vue'
 // 接口
-import { DemandStore } from '@/store/api/platform/demand'
-import { DictDataStore } from '@/store/api/system/dictData'
-const store = DemandStore()
-const dictDataStore = DictDataStore()
+import { ChatStore } from '@/store/api/platform/chat'
+import { UsersStore } from '@/store/api/user/user'
+const store = UsersStore()
+const chatstore = ChatStore()
 import { UserStore } from '@/store/user'
 const userStore = UserStore()
+
 const user = computed(() => userStore.user)
 // 图片引入
 import kf from '@/assets/kf.png'
@@ -91,63 +92,80 @@ const route = useRoute()
 const loading = ref(false)
 // 是否弹框客服
 const dialog = ref(false)
-const _id = ref(route.query.id || '')
-const chatList = 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: '3', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
-  { _id: '4', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
-  { _id: '5', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
-  { _id: '6', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
-  { _id: '7', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
-  { _id: '8', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
-  { _id: '9', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
-  { _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:
-      '研究防颠簸及坡地机身平衡的机械结构和控制方法，能有效克服履带式行走机构在起伏地形下难以实现机身有效平衡的缺点，以确保采摘装备在采摘过程中的行走的稳定。行走速度：0-5m/s；在坡度小于25度的环境下能平稳行走',
-    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'
-})
+// 聊天者id
+const id = ref(route.query.id || '')
+// 聊天室
+const chatList = ref([])
+// 列表
+const list = ref([])
+let skip = 0
+let limit = inject('limit')
+// 搜索
+const searchForm = ref({})
+// 个人信息
+const info = ref({})
+// 消息
+const textarea = ref('')
+
 // 请求
 onMounted(async () => {
   loading.value = true
-  await searchOther()
   await search()
   loading.value = false
 })
 const search = async () => {
-  let id = route.query.id
-  if (id) {
-    // let res = await store.fetch(id)
-    // if (res.errcode == '0') info.value = res.data
+  searchList({ skip, limit })
+  if (id.value) {
+    let res = await store.fetch(id.value)
+    if (res.errcode == '0') info.value = res.data
+    searchChat({ skip, limit })
+  }
+}
+const searchList = async (query = { skip: 0, limit }) => {
+  const info = {
+    skip: query.skip,
+    limit: query.limit,
+    ...searchForm.value
   }
+  const res = await chatstore.chat(info)
+  if (res.errcode == '0') chatList.value = res.data
 }
-const searchOther = async () => {}
 const toView = async (item) => {
-  _id.value = item._id
+  id.value = item.user
+  let res = await store.fetch(item.user)
+  if (res.errcode == '0') info.value = res.data
+  await searchChat({ skip, limit })
+}
+const searchChat = async (query = { skip: 0, limit }) => {
+  const data = {
+    skip: query.skip,
+    limit: query.limit,
+    user: info.value._id,
+    ...searchForm.value
+  }
+  const res = await chatstore.query(data)
+  if (res.errcode == '0') list.value = res.data
+}
+const toSend = async () => {
+  const data = {
+    sender_id: user.value._id,
+    receiver_id: id.value,
+    type: '0',
+    content: textarea.value,
+    send_time: moment().format('YYYY-MM-DD HH:mm:ss')
+  }
+  const res = await chatstore.create(data)
+  if (res.errcode === 0) {
+    textarea.value = ''
+    searchChat()
+  }
 }
 // provide
-provide('_id', _id)
+provide('id', id)
 provide('list', list)
 provide('info', info)
+provide('textarea', textarea)
+provide('toSend', toSend)
 </script>
 <style scoped lang="scss">
 .main {

src/views/chat/parts/chat.vue

@@ -2,29 +2,31 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main">
-        <el-col :span="24" class="one" v-if="_id">
+        <el-col :span="24" class="one" v-if="id">
           <el-container>
-            <el-header class="Header">{{ info.name || '平台用户' }}</el-header>
+            <el-header class="Header">{{ info.nick_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="24" class="time">{{ item.send_time }}</el-col>
+                <el-col :span="24" class="message" v-if="item.receiver_id != info._id">
                   <el-col :span="2" class="left">
-                    <el-image class="image" :src="item.url" fit="fill" />
+                    <el-image class="image" v-if="item.url" :src="item.url" fit="fill" />
+                    <el-image class="image" v-else :src="kf" fit="fill" />
                   </el-col>
                   <el-col :span="20" class="right">
-                    <div class="name">{{ item.name }}</div>
+                    <div class="name">{{ item.sender_name }}</div>
                     <div class="content">
                       <text>{{ item.content }}</text>
                     </div>
                   </el-col>
                 </el-col>
-                <el-col :span="24" class="message flexOne">
+                <el-col :span="24" class="message flexOne" v-else>
                   <el-col :span="2" class="left">
-                    <el-image class="image" :src="item.url" fit="fill" />
+                    <el-image class="image" v-if="item.url" :src="item.url" fit="fill" />
+                    <el-image class="image" v-else :src="kf" fit="fill" />
                   </el-col>
                   <el-col :span="20" class="right">
-                    <div class="name">{{ item.name }}</div>
+                    <div class="name">{{ item.sender_name }}</div>
                     <div class="content">
                       <text>{{ item.content }}</text>
                     </div>
@@ -37,7 +39,7 @@
                 <textarea class="input" v-model="textarea" placeholder="请输入您想输入的内容" />
               </el-col>
               <el-col :span="24" class="Footer2">
-                <el-button type="primary" size="small">发送</el-button>
+                <el-button type="primary" size="small" @click="toSend">发送</el-button>
               </el-col>
             </el-footer>
           </el-container>
@@ -51,9 +53,13 @@
 </template>
 
 <script setup>
-const _id = inject('_id')
+// 图片引入
+import kf from '@/assets/kf.png'
+const id = inject('id')
 const list = inject('list')
 const info = inject('info')
+const textarea = inject('textarea')
+const toSend = inject('toSend')
 </script>
 <style scoped lang="scss">
 .main {

src/views/company/detail.vue

@@ -41,7 +41,12 @@
                         <span>收藏</span>
                       </el-col>
                       <el-col :span="8" class="file">
-                        <a-button type="primary" @click="toChat"> 在线洽谈 </a-button>
+                        <a-button type="primary" @click="toChat">
+                          <template #icon>
+                            <MessageOutlined />
+                          </template>
+                          在线洽谈
+                        </a-button>
                       </el-col>
                     </el-col>
                   </el-col>
@@ -134,6 +139,7 @@
 import moment from 'moment'
 import { get } from 'lodash-es'
 const $checkRes = inject('$checkRes')
+import { MessageOutlined } from '@ant-design/icons-vue'
 // 接口
 import { CompanyStore } from '@/store/api/user/company'
 import { AchievementStore } from '@/store/api/platform/achievement'
@@ -226,7 +232,7 @@ const getArea = (data) => {
 }
 // 在线洽谈
 const toChat = () => {
-  router.push({ path: '/chat', query: { id: info.value.id || info.value._id } })
+  router.push({ path: '/chat', query: { id: info.value.user } })
 }
 // 收藏
 const toCollection = async (status) => {

src/views/demand/detail.vue

@@ -225,7 +225,7 @@ const getArea = (data) => {
 }
 // 在线洽谈
 const toChat = () => {
-  router.push({ path: '/chat', query: { id: info.value.id || info.value._id } })
+  router.push({ path: '/chat', query: { id: info.value.user } })
 }
 // 我要对接
 const toDocking = () => {

src/views/expert/detail.vue

@@ -38,7 +38,12 @@
                   <span>收藏</span>
                 </el-col>
                 <el-col :span="14">
-                  <a-button type="primary" @click="toChat"> 在线洽谈 </a-button>
+                  <a-button type="primary" @click="toChat">
+                    <template #icon>
+                      <MessageOutlined />
+                    </template>
+                    在线洽谈
+                  </a-button>
                 </el-col>
               </el-col>
             </el-col>
@@ -101,6 +106,7 @@ import moment from 'moment'
 // 基础
 import { get } from 'lodash-es'
 const $checkRes = inject('$checkRes')
+import { MessageOutlined } from '@ant-design/icons-vue'
 // 接口
 import { ExpertStore } from '@/store/api/user/expert'
 import { AchievementStore } from '@/store/api/platform/achievement'
@@ -185,7 +191,7 @@ const getArea = (data) => {
 }
 // 在线洽谈
 const toChat = () => {
-  router.push({ path: '/chat', query: { id: info.value.id || info.value._id } })
+  router.push({ path: '/chat', query: { id: info.value.user } })
 }
 // 收藏
 const toCollection = async (status) => {

src/views/expert/index.vue

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

src/views/home/index.vue

@@ -475,7 +475,7 @@ const mouseOver = async (item) => {
 }
 // 联络专家
 const toChat = (item) => {
-  router.push({ path: '/chat', query: { id: item.id || item._id } })
+  router.push({ path: '/chat', query: { id: item.user } })
 }
 const removeHtmlStyle = (html) => {
   let relStyle = /style\s*?=\s*?([‘"])[\s\S]*?\1/g //去除样式

src/views/project/detail.vue

@@ -234,7 +234,7 @@ const getArea = (data) => {
 }
 // 在线洽谈
 const toChat = () => {
-  router.push({ path: '/chat', query: { id: info.value.id || info.value._id } })
+  router.push({ path: '/chat', query: { id: info.value.user } })
 }
 // 我要对接
 const toDocking = () => {