Skip to content

T
tokcos-socket-web-ts
提交 f2f9a1e6 作者: Hao
操作

add

父级 1710f157
正在显示 包含 763 行增加 和 103 行删除
components.d.ts
......@@ -9,7 +9,6 @@ declare module 'vue' {
export interface GlobalComponents {
AutomaticPrompt: typeof import('./src/components/AutomaticPrompt.vue')['default']
ElAside: typeof import('element-plus/es')['ElAside']
ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
ElButton: typeof import('element-plus/es')['ElButton']
ElContainer: typeof import('element-plus/es')['ElContainer']
ElFooter: typeof import('element-plus/es')['ElFooter']
......@@ -20,8 +19,6 @@ declare module 'vue' {
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElMain: typeof import('element-plus/es')['ElMain']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
EmotionComponent: typeof import('./src/components/EmotionComponent.vue')['default']
IndexComponent: typeof import('./src/components/IndexComponent.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
......
package.json
......@@ -12,6 +12,7 @@
"@luohc92/vue3-image-viewer": "^1.0.0",
"axios": "^1.6.7",
"core-js": "^3.8.3",
"cos-js-sdk-v5": "^1.7.0",
"cos-wx-sdk-v5": "^1.6.0",
"element-plus": "^2.6.1",
"emoji.json": "^15.1.0",
......
src/axios/index.ts
// axios.js
import axios from 'axios';
import axios from "axios";
const instance = axios.create({
baseURL: '/api', // 设置基础 URL
timeout: 1000, // 设置请求超时时间
baseURL: "/api", // 设置基础 URL
timeout: 1000, // 设置请求超时时间
});
instance.interceptors.request.use(
(config:any) => {
// 在发送请求之前做些什么，例如添加 token
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error:any) => {
return Promise.reject(error);
(config: any) => {
// 在发送请求之前做些什么，例如添加 token
const token = localStorage.getItem("token");
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error: any) => {
return Promise.reject(error);
}
);
instance.interceptors.response.use(
(response:any) => {
// 对响应数据做点什么
return response.data;
},
(error:any) => {
// 对响应错误做点什么
return Promise.reject(error);
}
(response: any) => {
// 对响应数据做点什么
return response.data;
},
(error: any) => {
// 对响应错误做点什么
return Promise.reject(error);
}
);
export default instance;
src/axios/model/user.ts
import http from "../index";
//登录
const Login = (query: any) => {
return http({
url: `/login`,
......@@ -6,4 +7,61 @@ const Login = (query: any) => {
data: query,
});
};
export { Login };
//新增询价单
const InquiryAdd = (query: any) => {
return http({
url: `/inquiryAdd`,
method: "get",
data: query,
});
};
//快捷回复
const Kjiehuifu = (query: any) => {
return http({
url: "/Kjiehuifu",
method: "get",
data: query,
});
};
//获取用户列表
const getUserList = (query: any) => {
return http({
url: "/getUserList",
method: "get",
data: query,
});
};
//查看未读消息
const checkMesssages = (query: any) => {
return http({
url: "/checkMesssages",
method: "get",
data: query,
});
};
//上传接口
const getUploadConfigInfo = (query: any) => {
return http({
url: "/getUploadConfigInfo",
method: "get",
data: query,
});
};
//系统上传
const upload = (query: any) => {
return http({
url: "/sys/common/upload",
method: "get",
data: query,
});
};
export {
Login,
InquiryAdd,
Kjiehuifu,
getUserList,
checkMesssages,
upload,
getUploadConfigInfo,
};
src/components/AutomaticPrompt.vue
......@@ -44,7 +44,7 @@
v-model="state"
ref="automaticPromptRef"
class="el-autocomplete"
placeholder="请输入问题"
placeholder="输入信息"
type="textarea"
resize="none"
@change="handleSelect"
......@@ -71,6 +71,7 @@
import Emotion from './IndexComponent.vue'
import { ElLoading } from 'element-plus'
import { ref, watch, defineEmits, defineExpose } from 'vue'
import { upLoadFilesHander } from '../minxins/UploadMixin'
import axios from 'axios'
const state = ref('')
const file = ref(null)
......@@ -78,6 +79,7 @@ interface LinkItem {
value: string
link: string
}
// uploadMixin()
const showEmotion = ref<boolean>(false)
const automaticPromptRef = ref(null)
const links = ref<LinkItem[]>([])
......@@ -92,7 +94,10 @@ const upfile = () => {
const fileChange = () => {
var e = window.event || event
var oFile = e.target.files[0]
console.log(oFile)
upLoadFilesHander(oFile).then((ress) => {
const { success, result } = ress
console.log(result)
})
const loading = ElLoading.service({
lock: true,
text: '上传中...',
......@@ -164,7 +169,7 @@ defineExpose({
.el-input {
width: 100%;
}
:deep(.el-textarea__inner ){
:deep(.el-textarea__inner) {
width: 100%;
align-items: start;
box-shadow: none;
......
src/minxins/UploadMixin.ts 0 → 100644
// const COS = require("cos-wx-sdk-v5");
// import { ElMessage } from "element-plus";
// import { upload, getUploadConfigInfo } from "../axios/model/user";
// export default function () {
// interface UploadMixin {
// uploadMixinPath: string;
// uploadMixinType: string;
// uploadMixinCredentials: any;
// uploadMixinTimeStamp: number;
// }
// const uploadMixin: UploadMixin = {
// uploadMixinPath: "",
// uploadMixinType: "",
// uploadMixinCredentials: {},
// uploadMixinTimeStamp: 0,
// };
// const upLoadFilesHander = (tempFilePaths:any, tempFiles:any, zip:any) => {
// return new Promise((resolve) => {
// if (tempFiles.length != 0) {
// if (typeof upLoadHander !== "function") return;
// let uploadObj = {};
// let uploadNum = tempFiles.length;
// uploadObj.length = tempFiles.length;
// //处理上传结果函数
// function loadHandler({ success, message }:any, i) {
// uploadNum = uploadNum - 1;
// uploadObj[i] = message;
// if (!success) {
// uploadObj[i] = "";
// ElMessage({
// message: `[${i + 1}]上传失败，请重新上传！`,
// type: "none",
// });
// }
// if (uploadNum == 0) {
// const arr = Array.from(uploadObj);
// // ;
// resolve({ success: true, result: arr });
// }
// }
// //进行上传
// tempFiles.forEach((file:any, i:any) => {
// upLoadHander({
// path: tempFilePaths[i],
// file: file.path,
// zip: zip || "",
// onSuccess: ({ success, message }:any) => {
// loadHandler({ success, message }, i);
// },
// onError: (res:any) => {
// loadHandler({ success: false, message: "" }, i);
// },
// });
// });
// } else {
// resolve({ success: true, result: [] });
// }
// });
// };
// const upLoadHander = (obj:any) => {
// const { path, file, biz } = obj;
// const pathArr = (path || "").split("/");
// const pathStr = pathArr[pathArr.length - 1];
// const fileName = (pathStr || "").split(".");
// let fileInfo = {
// fileTyle: fileName.length > 1 ? fileName[fileName.length - 1] : "",
// fileName: fileName[0],
// biz: biz || "temp",
// file: file,
// };
// const none = (async function hander(noCredentials) {
// let res = {
// result:{}
// },
// staticDomain = "",
// resResult = true;
// //noCredentials变量控制是否走对象存储
// if (noCredentials) {
// let query = {}
// res = await getUploadConfigInfo(query);
// console.log(res)
// if (res.code === 200 && res.result) {
// let result = res.result
// uploadMixin.uploadMixinPath = result.upLoadPath;
// uploadMixin.uploadMixinType = result.uploadType;
// staticDomain = result.staticDomain || "https://cdn.tikcos.cn";
// if (uploadMixin.uploadMixinType === "txcos") {
// const credentials = result.credentials;
// uploadMixin.uploadMixinCredentials = {
// TmpSecretId: credentials.tmpSecretId,
// TmpSecretKey: credentials.tmpSecretKey,
// SecurityToken: credentials.sessionToken,
// StartTime: result.startTime,
// ExpiredTime: result.expiredTime,
// };
// }
// } else {
// resResult = false;
// }
// }
// //resResult判断接口是否正常
// if (resResult) {
// if (uploadMixin.uploadMixinType == "txcos") {
// //走对象存储
// const cos = new COS({
// getAuthorization: (options:any, callback:any) => {
// callback(uploadMixin.uploadMixinCredentials);
// },
// });
// const tempFolder = fileInfo.biz === "temp" ? "" : `${fileInfo.biz}/`;
// const folder = `${fileInfo.fileName}_${new Date().getTime()}.${
// fileInfo.fileTyle
// }`;
// let result = res.result || {}
// cos.postObject(
// {
// FilePath: fileInfo.file,
// Bucket: result.bucketName || "tikcos-1257774783",
// Region: result.regionid || "ap-guangzhou",
// Key: uploadMixin.uploadMixinPath + tempFolder + folder,
// Body: fileInfo.file,
// onProgress: function (progressData:any) {
// obj.onProgress && obj.onProgress(progressData);
// },
// },
// (err:any, data:any) => {
// if (!err && data.statusCode === 200) {
// const imgurl = `${staticDomain}/${uploadMixin.uploadMixinPath}${tempFolder}${folder}`;
// obj.onSuccess({
// success: true,
// message: imgurl,
// });
// } else {
// obj.onError({
// success: false,
// message: err || "图片上传失败",
// });
// }
// }
// );
// } else {
// //走系统上传
// upload({
// biz: fileInfo.biz,
// file: fileInfo.file,
// }).then((uploadRes:any) => {
// if (uploadRes.success && uploadRes.message) {
// //保存绝对路径，不然小程序会有问题
// let url = uploadRes.message;
// obj.onSuccess({ success: true, message: url });
// } else {
// obj.onError({
// success: false,
// message: uploadRes.message || "图片上传失败",
// });
// }
// })
// } else {
// obj.onError({
// success: false,
// message: "服务接口报错",
// });
// }}
// })(true);
// };
// }
import { reactive, watch, ref, defineEmits, defineExpose } from "vue";
import { ElMessage } from "element-plus";
import { upload, getUploadConfigInfo } from "../axios/model/user";
// const COS = require("cos-wx-sdk-v5");
import COS from "cos-js-sdk-v5";
interface UploadMixin {
uploadMixinPath: string;
uploadMixinType: string;
uploadMixinCredentials: any;
uploadMixinTimeStamp: number;
}
const uploadMixin: UploadMixin = {
uploadMixinPath: "",
uploadMixinType: "",
uploadMixinCredentials: {},
uploadMixinTimeStamp: 0,
};
interface CustomAxiosResponse {
code: number;
result: {
bucketName: string;
regionid: string;
upLoadPath: string;
uploadType: string;
staticDomain: string;
startTime: string;
expiredTime: string;
credentials: {
tmpSecretId: string;
tmpSecretKey: string;
sessionToken: string;
};
};
}
export const upLoadFilesHander = (file: any) => {
return new Promise((resolve) => {
const loadHandler = ({ success, message }: any) => {
if (!success) {
ElMessage({
message: `上传失败，请重新上传！`,
type: "warning",
});
} else {
resolve({ success: true, result: message });
}
};
const obj = {
file: file,
onSuccess: ({ success, message }: any) => {
loadHandler({ success, message });
},
onError: ({ success, message }: any) => {
loadHandler({ success: false, message: "" });
},
};
//进行上传
upLoadHander(obj);
});
};
export const upLoadHander = async (obj: any) => {
const { file } = obj;
const fileName = file.name.split(".");
const fileInfo = {
fileTyle: fileName.length > 1 ? fileName[fileName.length - 1] : "",
fileName: fileName[0],
biz: obj?.data?.biz || "temp",
file: file,
};
const none = async function hander(noCredentials: boolean) {
// const res:CustomAxiosResponse = reactive({
// code: 0,
// result: {
// bucketName: "",
// regionid: "",
// upLoadPath: "",
// uploadType: "",
// staticDomain: "",
// startTime: "",
// expiredTime: "",
// credentials: {
// tmpSecretId: "",
// tmpSecretKey: "",
// sessionToken: "",
// },
// },
// });
let staticDomain = "";
let resResult = true;
//noCredentials变量控制是否走对象存储
if (noCredentials) {
const query = {};
const res:any = await getUploadConfigInfo(query);
// console.log(res1,'res')
// console.log(res);
if (res.code === 200 && res.result) {
const result = res.result;
uploadMixin.uploadMixinPath = result.upLoadPath;
uploadMixin.uploadMixinType = result.uploadType;
staticDomain = result.staticDomain || "https://cdn.tikcos.cn";
if (uploadMixin.uploadMixinType === "txcos") {
const credentials = result.credentials;
uploadMixin.uploadMixinCredentials = {
TmpSecretId: credentials?.tmpSecretId,
TmpSecretKey: credentials?.tmpSecretKey,
SecurityToken: credentials?.sessionToken,
StartTime: result.startTime,
ExpiredTime: result.expiredTime,
};
}
} else {
resResult = false;
}
}
//resResult判断接口是否正常
if (resResult) {
const query = {};
const res:any = await getUploadConfigInfo(query);
if (uploadMixin.uploadMixinType == "txcos") {
//走对象存储
const cos = new COS({
getAuthorization: (options: any, callback: any) => {
callback(uploadMixin.uploadMixinCredentials);
},
});
const tempFolder = fileInfo.biz === "temp" ? "" : `${fileInfo.biz}/`;
const folder = `${fileInfo.fileName}_${new Date().getTime()}.${
fileInfo.fileTyle
}`;
const result = res.result || {};
cos.putObject(
{
// FilePath: fileInfo.file,
Bucket: result.bucketName || "tikcos-1257774783",
Region: result.regionid || "ap-guangzhou",
Key: uploadMixin.uploadMixinPath + tempFolder + folder,
Body: fileInfo.file,
onProgress: function (progressData: any) {
obj.onProgress && obj.onProgress(progressData);
},
},
async (err: any, data: any) => {
if (!err && data.statusCode === 200) {
const imgurl = `${staticDomain}/${uploadMixin.uploadMixinPath}${tempFolder}${folder}`;
obj.onSuccess({
success: true,
message: imgurl,
});
} else {
obj.onError({
success: false,
message: data.message || "图片上传失败",
});
}
}
);
} else {
// 其他存储类型暂不支持
obj.onError({
success: false,
message: "服务接口报错",
});
}
} else {
obj.onError({
success: false,
message: "服务接口报错",
});
}
};
none(true);
};
src/minxins/UploadMixin.js → src/minxins/UploadMixin1.js
const COS = require('cos-wx-sdk-v5');
import { ElMessage } from 'element-plus'
const uploadMixin = {
data() {
return {
......@@ -22,11 +23,11 @@ const uploadMixin = {
uploadObj[i] = message;
if (!success) {
uploadObj[i] = '';
wx.showToast({
title: `[${i+1}]上传失败，请重新上传！`,
icon: 'none',
duration: 2000
});
ElMessage({
message: `[${i+1}]上传失败，请重新上传！`,
type: 'none',
})
}
if (uploadNum == 0) {
const arr = Array.from(uploadObj);
......
src/mocks/mock.js
......@@ -6,7 +6,7 @@ Mock.mock("/api/login", "get", () => {
message: '',
result: {
userName: "admin",
token:'admin'
token: 'admin'
},
};
});
......@@ -15,10 +15,99 @@ Mock.mock("/api/inquiryAdd", "get", () => {
return {
code: "200",
success: true,
message: '',
message: '操作成功!',
result: {
userName: "admin",
token:'admin'
token: 'admin'
},
};
});
//快捷回复
Mock.mock("/api/kjiehuifu", 'get', () => {
return {
code: '200',
success: true,
message: '',
result: [
{
message: '感谢您的咨询，我们会尽快回复您',
}, {
message: '感谢您的耐心等待，您的问题已经收到，将尽快给您答复。'
}, {
messag: '谢谢你的来信，我会尽快回复。'
}, {
messag: '谢谢你的信息，我会尽快做出回复。'
}
]
}
})
//列表
Mock.mock("/api/getUserList", 'get', () => {
return {
code: '200',
success: true,
message: '',
result: [{
userId: '11fb824c0deb4e8b947275e1e7c4f7a2',
userName: '1710323861524',
userImg: 'https://cdn.lirimall.com//lirigo/filetempImage/新鲜水果_1661668973048.png',
messages: []
}, {
userId: '4f99b6dc32d84a288d88e7d9635521a3',
userName: '1710317951930',
userImg: 'https://cdn.lirimall.com//lirigo/filetempImage/新鲜水果_1661668973048.png',
messages: []
}]
}
})
//查看未读消息
Mock.mock("/api/checkMesssages", 'get', () => {
return {
code: '200',
success: true,
message: '',
result: []
}
})
Mock.mock("/api/getUploadConfigInfo", 'get', () => {
return {
code: '200',
success: true,
message: '',
result: {
bucketName: "",
regionid: "",
upLoadPath: "",
uploadType: "",
staticDomain: "",
startTime: "",
expiredTime: "",
credentials: {
tmpSecretId: "",
tmpSecretKey: "",
sessionToken: "",
},
}
}
})
Mock.mock("/api/upload", 'get', () => {
return {
code: '200',
success: true,
message: '',
result: {
bucketName: "",
regionid: "",
upLoadPath: "",
uploadType: "",
staticDomain: "",
startTime: "",
expiredTime: "",
credentials: {
tmpSecretId: "",
tmpSecretKey: "",
sessionToken: "",
},
},
}
})
\ No newline at end of file
src/shims-vue.d.ts
......@@ -4,3 +4,4 @@ declare module '*.vue' {
const component: DefineComponent<{}, {}, any>
export default component
}
declare module 'cos-wx-sdk-v5';
\ No newline at end of file
src/store/modules/user.ts
......@@ -23,6 +23,10 @@ export const useUserStore = defineStore("user", {
setUserInfo(res: any) {
this.userInfo = res;
},
setUserList(res: any) {
console.log(res,'数据呢')
this.userList = res;
},
setUserListMessages(res: any) {
const userList: any = this.userList || [];
const obj = {
......
src/views/HomeView.vue
......@@ -30,7 +30,7 @@
05-19 16:38
</div>
</div>
<div>
<div class="user-reply-box">
<span class="user-reply">
{{
item?.messages[
......@@ -40,6 +40,7 @@
: item.messages[item.messages.length - 1]?.content
}}
</span>
<div class="count">1</div>
</div>
</div>
</div>
......@@ -93,10 +94,7 @@
</div>
<div v-if="!message.isSent" class="message-container">
<div class="avatar">
<img
:src="message?.userImg"
class="avatar-image"
/>
<img :src="message?.userImg" class="avatar-image" />
</div>
<div class="bubble">
<div
......@@ -147,11 +145,11 @@
</div>
<div class="avatar-right">
<div class="avatar-right-name">
Industrial 5V 12V RS232 RS-232 Parallel PCI PC
{{ inquiryInfo.name }}
</div>
<div class="avatar-right-price">
<div>20.00</div>
<div>USD</div>
<div>{{ inquiryInfo.price }}</div>
<div>{{ inquiryInfo.unit }}</div>
</div>
<div class="avatar-input-box">
<div>
......@@ -159,7 +157,7 @@
class="avatar-number-input"
:min="1"
@change="handleChange"
v-model="count"
v-model="ruleForm.count"
:max="10"
/>
</div>
......@@ -180,53 +178,64 @@
ref="ruleFormRef"
style="max-width: 600px;"
:model="ruleForm"
:rules="rules"
label-position="top"
status-icon
label-width="auto"
:inline="false"
>
<el-form-item label="客户名称" prop="pass">
<el-form-item label="客户名称" prop="customerName">
<el-input
v-model="ruleForm.pass"
v-model="ruleForm.customerName"
type="password"
placeholder="默认展示"
autocomplete="off"
/>
</el-form-item>
<el-form-item label="国家/地区" prop="checkPass">
<el-form-item label="国家/地区" prop="countriesRegions">
<el-input
v-model="ruleForm.checkPass"
v-model="ruleForm.countriesRegions"
type="password"
placeholder="默认展示"
autocomplete="off"
/>
</el-form-item>
<el-form-item label="Email" prop="age">
<el-form-item label="Email" prop="Email">
<el-input
placeholder="默认展示"
v-model.number="ruleForm.age"
v-model.number="ruleForm.Email"
/>
</el-form-item>
<el-form-item label="WatchApp" prop="age">
<el-form-item label="WatchApp" prop="WatchApp">
<el-input
placeholder="默认展示"
v-model.number="ruleForm.age"
v-model.number="ruleForm.WatchApp"
/>
</el-form-item>
<el-form-item label="备注" prop="age">
<el-form-item label="备注" prop="remark">
<el-input
placeholder="默认展示"
v-model.number="ruleForm.age"
v-model.number="ruleForm.remark"
/>
</el-form-item>
<el-form-item label="备注" prop="age">
<el-form-item
label="备注"
prop="content"
style="margin-bottom: 3px;"
>
<el-input
placeholder="默认展示"
v-model.number="ruleForm.age"
placeholder="文本内容"
v-model="ruleForm.content"
type="textarea"
:rows="8"
/>
</el-form-item>
<el-button
type="primary"
plain
style="width: 50px;"
@click.stop="sumbitFuleForm(ruleFormRef)"
>
发送
</el-button>
</el-form>
</div>
</div>
......@@ -237,48 +246,114 @@
</template>
<script lang="ts" setup>
import '../assets/font/iconfont.css'
import {
ref,
onMounted,
reactive,
watch,
nextTick,
getCurrentInstance,
toRaw,
} from 'vue'
import { ElMessage } from 'element-plus'
import { ref, onMounted, watch, nextTick, reactive } from 'vue'
import { getShortDate } from '../utils/index'
import { useUserStore } from '../store/modules/user'
import AutomaticPrompt from '../components/AutomaticPrompt.vue'
import axios from 'axios'
import ImageViewer from '@luohc92/vue3-image-viewer'
import {
closeWebSocket,
initWebSocket,
sendWebSocket,
} from '../utils/websocket'
import { sendWebSocket } from '../utils/websocket'
import type { FormInstance } from 'element-plus'
import '@luohc92/vue3-image-viewer/dist/style.css'
const ruleForm = ref({})
import { getUserList, InquiryAdd, checkMesssages } from '../axios/model/user'
const ruleForm = ref({
count: 1,
})
const ruleFormRef = ref<FormInstance>()
const customerInfo = ref({})
const messages = ref([])
const count = ref(0)
const store = useUserStore()
const userList = store.userList
const userList = ref([])
const automaticPromptRef = ref('')
const inquiryInfo = ref({
price: '20.00',
unit: 'USD',
name: 'Industrial 5V 12V RS232 RS-232 Parallel PCI PC',
})
const rules = reactive({
customerName: [
{
required: true,
message: '请输入客户名称',
trigger: 'blur',
},
],
countriesRegions: [
{
required: true,
message: '请输入国家/地区',
trigger: 'blur',
},
],
Email: [
{
required: true,
message: '请输入Email',
trigger: 'blur',
},
],
WatchApp: [
{
required: true,
message: '请输入WatchApp',
trigger: 'blur',
},
],
remark: [
{
required: true,
message: '请输入描述',
trigger: 'blur',
},
],
content: [
{
required: true,
message: '请输入描述',
trigger: 'blur',
},
],
})
let msg = ''
//进入页面直接发送请求从后端获取热点数据
onMounted(async () => {
count.value = store.count
if (store.userList.length > 0) {
userList.value = store.userList
} else {
getList()
}
setMessage()
})
//设置message
const setMessage = () => {
customerInfo.value = store.customerInfo
messages.value = customerInfo.value.messages
if (store.customerInfo.userName) {
customerInfo.value = store.customerInfo
messages.value = customerInfo.value.messages || []
}
setSrollHeight()
}
//获取列表的数据
const getList = async () => {
let query = {}
try {
const { success, result, message }: any = await getUserList(query)
if (success) {
let list = result.map((item: any) => {
item.messages = []
return item
})
userList.value = list
store.setUserList(list)
if (customerInfo.value.userName) handleMenuClick(customerInfo.value)
}
} catch (error) {
console.log(error)
}
}
//获取子组件中state的值，这个好像是写多余了，可以直接使用automaticPromptRef.value.setState('');获取state值
const getState = (v: string) => {
......@@ -287,33 +362,33 @@ const getState = (v: string) => {
const handleChange = (val: any) => {
store.setCount(val)
}
//监听聊天数据的改变
watch(
userList,
(newVal, oldVal) => {
if (newVal && newVal.length > 0) {
if (customerInfo.value.userName) {
messages.value =
newVal.find((item: any) => {
return item.userName == customerInfo.value.userName
}).messages || {}
}
if (newVal && newVal.length > 0 && customerInfo.value.userName) {
const obj =
newVal.find((item: any) => {
return item.userName == customerInfo.value.userName
}) || {}
messages.value = obj.messages || []
}
},
{ deep: true },
)
//监听聊天框数据的改变
watch(
messages,
(newVal, oldVal) => {
if (newVal?.length > 0) {
setSrollHeight()
}
if (newVal?.length > 0) setSrollHeight()
},
{ deep: true },
)
//让聊天滑动窗口滑到底部
const setSrollHeight = () => {
nextTick(() => {
const div = document.getElementById('srollId')
if(div) div.scrollTop = div?.scrollHeight
if (div) div.scrollTop = div?.scrollHeight
})
}
......@@ -329,8 +404,9 @@ const handleMenuClick = (item: object) => {
group_id: '',
userId: store.userInfo.userName,
}
sendWebSocket(data)
setSrollHeight()
getCheckMesssages(data)
}
//发送按钮
const handleButtonClick = () => {
......@@ -380,17 +456,49 @@ const handleMessageClick = (event: any) => {
}
}
//查看消息将其改为已读
const getCheckMesssages = async (res: any) => {
try {
const { success, result, message }: any = await checkMesssages({
userName: res.userName,
})
} catch (error) {
console.log(error)
}
}
//提交询价单
const sumbitFuleForm = (formEl: FormInstance | undefined) => {
let query = {}
if (!formEl) return
formEl.validate(async (valid: boolean) => {
if (valid) {
try {
const { success, result, message }: any = await InquiryAdd(
ruleForm.value,
)
if (success) {
ElMessage({
message,
type: 'success',
})
}
} catch (error) {
console.log(error)
}
}
})
}
const handleLinkClick = (msg: string) => {
messages.value.push({ content: msg, isSent: true })
// sendMsg(msg)
}
//消息框样式动态选择
const getMessageClass = (isSent) => {
const getMessageClass = (isSent: boolean) => {
return isSent ? 'message-container-right' : 'message-container-left'
}
//左边按钮操作
const getMenuItem = (item) => {
return item.userName == customerInfo.value.userName ? 'is-active' : ''
const getMenuItem = (item: any) => {
return item.userName == customerInfo.value?.userName ? 'is-active' : ''
}
</script>
<style lang="scss" scoped>
......@@ -401,8 +509,17 @@ const getMenuItem = (item) => {
text-align: center;
padding: 16px;
.el-input {
:deep(.el-input__wrapper) {
background: var(--Fill-Grey-Fill-1, #f8f8fa);
}
height: 44px;
font-family: 'PingFang SC';
font-style: normal;
font-weight: 400;
width: 100%;
.el-input__inner {
font-size: 14px;
}
}
}
.el-container-center {
......@@ -474,7 +591,7 @@ const getMenuItem = (item) => {
display: flex;
width: 100%;
height: 100%;
padding:0px 10px;
padding: 0px 10px;
box-sizing: border-box;
justify-content: space-between;
.user-img-box {
......@@ -495,6 +612,26 @@ const getMenuItem = (item) => {
.user-box-right-nbs {
width: 100%;
}
.user-reply-box {
position: relative;
display: flex;
}
.count {
right: 16px;
top: 4px;
position: absolute;
display: flex;
width: var(--Edges-xl, 16px);
height: var(--Edges-xl, 16px);
min-width: var(--Edges-xl, 16px);
padding: var(--Spacing-none, 0);
flex-direction: column;
justify-content: center;
color: #fff;
align-items: center;
border-radius: var(--Radius-full, 1000px);
background: red;
}
.label {
margin-left: 5px;
color: #3875ea;
......@@ -513,24 +650,41 @@ const getMenuItem = (item) => {
align-items: center;
justify-content: space-between;
.user-name {
word-break:break-all;
text-overflow:ellipsis;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
max-width: 120px;
font-size: 16px;
color: rgba(0, 0, 0, 0.65);
margin-right: 10px;
font-family: 'Inter';
font-style: normal;
font-weight: 600;
}
}
.user-reply {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
color: #798494;
font-feature-settings: 'clig' off, 'liga' off;
text-overflow: ellipsis;
font-family: 'Inter';
margin-top: 3px;
font-size: 12px;
color: #8e959e;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
.user-time {
color: #999;
font-size: 14px;
font-size: 12px;
font-style: normal;
font-family: 'Inter';
font-weight: 400;
}
}
......
tsconfig.json
......@@ -33,7 +33,7 @@
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
, "src/minxins/minxin.js" ],
],
"exclude": [
"node_modules"
]
......
yarn.lock
......@@ -2795,6 +2795,13 @@ core-util-is@~1.0.0:
resolved "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz"
integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
cos-js-sdk-v5@^1.7.0:
version "1.7.0"
resolved "https://registry.npmmirror.com/cos-js-sdk-v5/-/cos-js-sdk-v5-1.7.0.tgz#88166b2bfb8c01120011f25f5ee7d5c196941671"
integrity sha512-/xiR86tOcJ448nXPkJq0lhsP/Kg4LmvcRO+C5LwrAvmTMTZE75ESjMHi7qbQVAxNPBroOvVyYR0YOin9UN8yHQ==
dependencies:
"@xmldom/xmldom" "^0.8.6"
cos-wx-sdk-v5@^1.6.0:
version "1.6.0"
resolved "https://registry.npmmirror.com/cos-wx-sdk-v5/-/cos-wx-sdk-v5-1.6.0.tgz#dfdf1724863177e39c2ca9e20ae5507a71570bb3"
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论