diff --git a/src/api/account.js b/src/api/account.js index d8a8415..773a63d 100644 --- a/src/api/account.js +++ b/src/api/account.js @@ -118,3 +118,7 @@ export function signIn(data) { export function editEmail(data) { return postAxios({ url: 'user/updateUserMail', data }) } +//获取OTP +export function getOtp() { + return getAxios({ url: 'otp/getotp' }) +} \ No newline at end of file diff --git a/src/components/chatMessage/PictureMessage.vue b/src/components/chatMessage/PictureMessage.vue new file mode 100644 index 0000000..7f01525 --- /dev/null +++ b/src/components/chatMessage/PictureMessage.vue @@ -0,0 +1,88 @@ + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 26b2604..81608a0 100644 --- a/src/main.js +++ b/src/main.js @@ -11,8 +11,8 @@ import GoEasy from 'goeasy' const goeasy = GoEasy.getInstance({ host:"hangzhou.goeasy.io", //若是新加坡区域:singapore.goeasy.io - appkey:"您的common key", - modules:['pubsub']//根据需要,传入‘pubsub’或'im’,或数组方式同时传入 + appkey:"PC-a88037e060ed4753bb316ac7239e62d9", + modules:['im']//根据需要,传入‘pubsub’或'im’,或数组方式同时传入 }); const app = createApp(App); diff --git a/src/stores/notice.js b/src/stores/notice.js index 57b6911..7ecf321 100644 --- a/src/stores/notice.js +++ b/src/stores/notice.js @@ -32,4 +32,18 @@ export const tokenStore = defineStore('token', { this.user = user } }, + }) + + + export const IMloginStore = defineStore('IMlogin', { + state: () => { + return { IMstate: false } + }, + // 也可以这样定义 + // state: () => ({ count: 0 }) + actions: { + setIMstate(state){ + this.IMstate = state + } + }, }) \ No newline at end of file diff --git a/src/utils/goeasy.js b/src/utils/goeasy.js index c471909..a550389 100644 --- a/src/utils/goeasy.js +++ b/src/utils/goeasy.js @@ -1,6 +1,10 @@ import { goeasy } from '../main' +import { IMloginStore } from '@/stores/notice.js'; +import GoEasy from 'goeasy' +//链接IM(登录IM) export function goEasyLink(data) { + const counter = IMloginStore() return new Promise((resolve, reject) => { goeasy.connect({ id:data.id, //im必填,最大长度60字符 @@ -8,14 +12,49 @@ export function goEasyLink(data) { otp:data.key, onSuccess: function () { //连接成功 console.log("连接成功"); + counter.setIMstate(true); //登录IM成功 resolve(true); }, onFailed: function (error) { //连接失败 console.log("连接失败,错误码:" + error.code + ",错误信息:" + error.content); }, onProgress:function(attempts) { //连接或自动重连中 - console.log("正在重连中..." + attempts); + console.log("正在重连中..."); } }); }) +} + +//获取会话列表 +export function goEasyGetConversations() { + var im = goeasy.im; + return new Promise((resolve, reject) => { + im.latestConversations({ + onSuccess: function (result) { + resolve(result); + }, + onFailed: function (error) { + console.log("获取会话列表失败,错误码:" + error.code + " content:" + error.content); + }, + }); + }) +} + +//获取指定会话的消息列表 +export function goEasyGetMessages(data) { + var im = goeasy.im; + return new Promise((resolve, reject) => { + im.history({ + id: data.id,//用户id或者群id + type: GoEasy.IM_SCENE.PRIVATE, //群聊:GoEasy.IM_SCENE.GROUP, 客服:GoEasy.IM_SCENE.CS, + lastTimestamp: data.timestamp, //上次查询结果里最后一条消息的时间戳,首次查询传入null即可 + limit: 30, //可选项,返回的消息条数,默认为10条,最多30条 + onSuccess: function (result) { + resolve(result.content); + }, + onFailed: function (error) { + console.log("获取消息列表失败,错误码:" + error.code + " content:" + error.content); + } + }); + }) } \ No newline at end of file diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 84eb5a3..58cce23 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -59,12 +59,13 @@ @@ -151,13 +295,18 @@ onUnmounted(() => { .Avatar { width: 50px; height: 50px; - border-radius: 50%; + border-radius: 10px; margin-left: 10px; background-color: #f5f5f5; } +.Avatar-img { + width: 100%; + height: 100%; + border-radius: 10px; +} .chatContent { - margin-left: 10px; - width: calc(100% - 80px); + margin-left: 30px; + width: calc(100% - 100px); height: 60%; display: flex; flex-direction: column; @@ -189,6 +338,76 @@ onUnmounted(() => { overflow: hidden; text-overflow: ellipsis; /* 显示省略号 */ } +.chatlist { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} +.chatmessages { + width: 100%; + height: auto; + margin-top: 20px; +} +.messageOtherSide { + width: 100%; + height: auto; + display: flex; + align-items: self-start; +} +.messageMySide { + width: 100%; + height: auto; + display: flex; + justify-content: end; + align-items: self-start; +} +.messageAvatar { + width: 50px; + height: 50px; + border-radius: 10px; + margin-right: 20px; + margin-left: 20px; + background-color: #f5f5f5; +} +.OtherTriangle { + width: 0; + height: 0; + border-top: 10px solid transparent; + border-right: 10px solid #f5f5f5; + border-bottom: 10px solid transparent; + margin-top: 12px; +} +.MyTriangle { + width: 0; + height: 0; + border-top: 10px solid transparent; + border-left: 10px solid #7bbd0093; + border-bottom: 10px solid transparent; + margin-top: 12px; +} +.messageContent { + max-width: 30%; + height: auto; + min-height: 20px; + background-color: #f5f5f5; + border-radius: 10px; + font-size: 20px; + word-break: break-all; /* 强制换行(适合中文) */ + overflow-wrap: break-word; /* 长单词换行(适合英文) */ + white-space: normal; /* 允许自动换行 */ +} +.messageMyContent { + max-width: 30%; + height: auto; + min-height: 20px; + background-color: #7bbd0093; + border-radius: 10px; + font-size: 20px; + word-break: break-all; /* 强制换行(适合中文) */ + overflow-wrap: break-word; /* 长单词换行(适合英文) */ + white-space: normal; /* 允许自动换行 */ +} .inputBox { width: 100%; height: 100%; @@ -203,21 +422,66 @@ onUnmounted(() => { align-items: center; justify-content: center; } -.Console-content{ +.Console-content { width: 98%; height: 100%; + display: flex; + align-items: center; + justify-content: space-between; +} +.chat-input-other{ + display: flex; + align-items: center; +} +.chat-input-img{ + width: 40px; + height: 40px; + border-radius: 10px; + display: flex; + margin-left: 10px; + justify-content: center; + align-items: center; + transition: all 0.4s ease; +} +.chat-input-img:hover{ + background-color: #d4d4d4; +} + +.chat-input-img-img{ + width: 30px; + height: 30px; +} +.chat-input-Send { + width: 10%; + height: 80%; + text-align: center; + line-height: 40px; + font-size: 16px; + color: #03aba8; + border-radius: 10px; + margin-right: 6px; + transition: all 0.4s ease; +} +.chat-input-Send:hover { + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); + background-color: #03aba82d; + // color: #ffffff; +} +.chat-input-Send:active{ + transition: all 0.1s ease; + transform: scale(0.95) !important; } .input { width: 98%; height: calc(100% - 70px); } -.textarea{ +.textarea { width: 100%; height: 100%; border: none; outline: none; overflow: hidden; - background-color:#ffffff00; - resize:none; + background-color: #ffffff00; + resize: none; } diff --git a/src/views/hosts/pk.vue b/src/views/hosts/pk.vue index 1a0bb87..c0eb9cc 100644 --- a/src/views/hosts/pk.vue +++ b/src/views/hosts/pk.vue @@ -843,6 +843,10 @@ onUnmounted(() => { background-color: #03aba82d; // color: #ffffff; } +.chat-input-Send:active{ + transition: all 0.1s ease; + transform: scale(0.95) !important; +} .chat-input-Textarea { width: 100%; height: 60px; diff --git a/src/views/nav.vue b/src/views/nav.vue index 050c3ae..689e553 100644 --- a/src/views/nav.vue +++ b/src/views/nav.vue @@ -1,7 +1,7 @@