1 line
4.8 KiB
Plaintext
1 line
4.8 KiB
Plaintext
{"version":3,"file":"chat.js","sources":["../../../../../src/pages/message/chat.vue","../../../../../uniPage:/cGFnZXMvbWVzc2FnZS9jaGF0LnZ1ZQ"],"sourcesContent":["<route lang=\"json5\">\r\n{\r\n style: {\r\n navigationBarTitleText: '客服',\r\n },\r\n}\r\n</route>\r\n<template>\r\n <view class=\"chat-container\">\r\n <view\r\n v-for=\"message in messages\"\r\n :key=\"message.id\"\r\n class=\"message\"\r\n :class=\"{\r\n mine: message.isMine,\r\n customer: message.type === 'customer',\r\n support: message.type === 'support',\r\n }\"\r\n >\r\n <view class=\"message-avatar\">\r\n <image class=\"avatar\" :src=\"message.avatar\" />\r\n </view>\r\n <view class=\"message-body\">\r\n <view class=\"message-content\">\r\n {{ message.text }}\r\n </view>\r\n <view class=\"message-time\">\r\n {{ message.time }}\r\n </view>\r\n </view>\r\n </view>\r\n <view class=\"input-area\">\r\n <input class=\"input-text\" v-model=\"newMessage\" type=\"text\" placeholder=\"输入消息...\" />\r\n <button @click=\"sendMessage\">发送</button>\r\n </view>\r\n </view>\r\n</template>\r\n<script setup>\r\nimport { ref } from 'vue'\r\n\r\nconst messages = ref([\r\n {\r\n id: 1,\r\n text: '今天天气不错',\r\n time: '15:24',\r\n isMine: false,\r\n type: 'support',\r\n avatar: '/acdr/src/static/my/avatar.jpg',\r\n },\r\n {\r\n id: 2,\r\n text: '是啊，阳光明媚',\r\n time: '15:25',\r\n isMine: true,\r\n type: 'customer',\r\n avatar: '/acdr/src/static/my/avatar.jpg',\r\n },\r\n])\r\n\r\nconst newMessage = ref('')\r\n\r\nconst sendMessage = () => {\r\n if (newMessage.value.trim() !== '') {\r\n messages.value.push({\r\n id: messages.value.length + 1,\r\n text: newMessage.value,\r\n time: new Date().toLocaleTimeString().slice(0, 5),\r\n isMine: true, // Assume the new message is always from the customer\r\n type: 'customer',\r\n avatar: '/acdr/static/customer/avatar.png',\r\n })\r\n newMessage.value = '' // Clear input after sending\r\n }\r\n}\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.chat-container {\r\n position: relative;\r\n width: 100vw;\r\n height: 100vh;\r\n padding-top: 10px;\r\n\r\n .message {\r\n display: flex;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .message.support {\r\n flex-direction: row;\r\n }\r\n\r\n .message.customer {\r\n flex-direction: row-reverse;\r\n }\r\n\r\n .message-avatar {\r\n margin: 0 10px;\r\n border-radius: 50%;\r\n\r\n .avatar {\r\n width: 40px;\r\n height: 40px;\r\n }\r\n }\r\n\r\n .message-body {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n align-items: flex-end; /* 使所有子元素在容器的右侧对齐 */\r\n width: 50%;\r\n }\r\n\r\n .mine .message-content {\r\n background-color: #fcd038;\r\n }\r\n\r\n .support .message-content {\r\n align-self: flex-start;\r\n background-color: #f1f0f0;\r\n }\r\n\r\n .customer .message-content {\r\n align-self: flex-end;\r\n background-color: #fcd038;\r\n }\r\n\r\n .message-content {\r\n max-width: 70%;\r\n padding: 8px 10px;\r\n border-radius: 10px;\r\n box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .message-time {\r\n align-self: flex-end;\r\n font-size: 0.75rem;\r\n color: #666;\r\n }\r\n\r\n .input-area {\r\n position: absolute;\r\n bottom: 300rpx;\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n padding: 10px;\r\n border-top: 1px solid #ccc;\r\n\r\n .input-text {\r\n flex-grow: 1;\r\n padding: 10px;\r\n border: none;\r\n border-radius: 20px;\r\n }\r\n }\r\n\r\n .input-area button {\r\n position: absolute;\r\n right: 20rpx;\r\n bottom: -200rpx;\r\n width: 240rpx;\r\n height: 80rpx;\r\n color: white;\r\n cursor: pointer;\r\n background-color: #fcd038;\r\n border: none;\r\n border-radius: 40rpx;\r\n }\r\n}\r\n</style>\r\n","import MiniProgramPage from 'D:/App/Work/addr/acdr-ui/src/pages/message/chat.vue'\nwx.createPage(MiniProgramPage)"],"names":["ref"],"mappings":";;;;;;;;;AAwCA,UAAA,WAAAA,cAAAA,IAAA;AAAA,MACA;AAAA,QACA,IAAA;AAAA,QACA,MAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,MACA;AAAA,MACA;AAAA,QACA,IAAA;AAAA,QACA,MAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,MACA;AAAA,IACA,CAAA;AAEA,UAAA,aAAAA,cAAA,IAAA,EAAA;AAEA,UAAA,cAAA,MAAA;AACA,UAAA,WAAA,MAAA,KAAA,MAAA,IAAA;AACA,iBAAA,MAAA,KAAA;AAAA,UACA,IAAA,SAAA,MAAA,SAAA;AAAA,UACA,MAAA,WAAA;AAAA,UACA,OAAA,oBAAA,QAAA,mBAAA,EAAA,MAAA,GAAA,CAAA;AAAA,UACA,QAAA;AAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,QACA,CAAA;AACA,mBAAA,QAAA;AAAA,MACA;AAAA,IACA;;;;;;;;;;;;;;;;;;;;;;ACxEA,GAAG,WAAW,eAAe;"} |