From 372ca89f079d3080ef06a6e66acfc80d0eb0271f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BE=99=E8=BF=90=E6=A8=A1?= <1724894114@qq.com> Date: Sat, 9 Nov 2024 17:04:46 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=AE=A2=E6=9C=8D=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/model/customer.js | 54 +++++ src/components/scCustomer/index.vue | 228 ++++++++++++++++++ src/scui.js | 2 + src/style/app.scss | 1 + src/views/maintenance/index.vue | 187 ++++++++++---- src/views/serveView/components/commonPage.vue | 18 +- 6 files changed, 436 insertions(+), 54 deletions(-) create mode 100644 src/api/model/customer.js create mode 100644 src/components/scCustomer/index.vue diff --git a/src/api/model/customer.js b/src/api/model/customer.js new file mode 100644 index 0000000..a0cee05 --- /dev/null +++ b/src/api/model/customer.js @@ -0,0 +1,54 @@ +import config from "@/config" +import http from "@/utils/request" + +export default { + send: { + url: `${config.API_URL}/customer.service.send.message`, + name: "发送消息到用户", + post: async function(data){ + return await http.post(this.url, data); + } + }, + list: { + url: `${config.API_URL}/customer.service.message.list`, + name: "获取消息列表", + post: async function(data){ + return await http.post(this.url, data); + } + }, + typeList: { + url: `${config.API_URL}/customer.service.type.list`, + name: "问题工单常量", + post: async function(data){ + return await http.post(this.url, data); + } + }, + delete: { + url: `${config.API_URL}/customer.service.message.delete`, + name: "删除消息记录", + post: async function(data){ + return await http.post(this.url, data); + } + }, + recordList: { + url: `${config.API_URL}/customer.service.message.record.list`, + name: "消息记录列表", + post: async function(data){ + return await http.post(this.url, data); + } + }, + customer: { + url: `${config.API_URL}/customer.service.random.assign`, + name: "随机客服", + post: async function(data){ + return await http.post(this.url, data); + } + }, + read: { + url: `${config.API_URL}/customer.service.message.read`, + name: "标记已读", + post: async function(data){ + return await http.post(this.url, data); + } + }, +} diff --git a/src/components/scCustomer/index.vue b/src/components/scCustomer/index.vue new file mode 100644 index 0000000..7d02dd1 --- /dev/null +++ b/src/components/scCustomer/index.vue @@ -0,0 +1,228 @@ + + + + + diff --git a/src/scui.js b/src/scui.js index 0a43a97..9adce0c 100644 --- a/src/scui.js +++ b/src/scui.js @@ -29,6 +29,7 @@ import scSearch from "./components/scSearch"; import scExport from "./components/scExport"; import scExportList from "./components/scExport/exportList"; import scImport from "./components/scImport"; +import scCustomer from "./components/scCustomer" import scStatusIndicator from './components/scMini/scStatusIndicator' import scTrend from './components/scMini/scTrend' @@ -87,6 +88,7 @@ export default { app.component('scExport', scExport); app.component('scExportList', scExportList); app.component('scImport', scImport); + app.component('scCustomer', scCustomer); //注册全局指令 app.directive('authSetup', authSetup) diff --git a/src/style/app.scss b/src/style/app.scss index 641fc26..c0e4668 100644 --- a/src/style/app.scss +++ b/src/style/app.scss @@ -1,4 +1,5 @@ /* 全局 */ +html{font-size: 62.5%} #app, body, html {width: 100%;height: 100%;background-color: #f6f8f9;font-size: 12px;} a {color: #333;text-decoration: none;} a:hover, a:focus {color: #000;text-decoration: none;} diff --git a/src/views/maintenance/index.vue b/src/views/maintenance/index.vue index 7c0237c..217da06 100644 --- a/src/views/maintenance/index.vue +++ b/src/views/maintenance/index.vue @@ -7,19 +7,26 @@
- -
- {{item.name}} - +
+ +
+ {{item.name}} + +
+
+
+ +
+ 占位占位占位占位占位占位占位占位占位占位占位占位占位占位 + +
智能推荐
-
-
{{item.name}}
-
+
搜索历史
@@ -32,9 +39,7 @@ -
- -
+
@@ -57,20 +62,27 @@ export default { {name:"其他",icon:"sc-icon-OtherServe",url:''}, ], recommendList:[ - {name:'维保期限查询',color:'#436FFF',left:'2%',top:'2%'}, - {name:'主控部件查询',color:'#FF8543',left:'15%',top:'10%'}, - {name:'智能客服',color:'#22D3F6',left:'28%',top:'5%'}, - {name:'我的产品',color:'#0FCA44',left:'40%',top:'8%'}, - {name:'订单号查询',color:'#FBCA0A',left:'70%',top:'2%'}, - {name:'主控部件查询',color:'#FF8543',left:'57%',top:'12%'}, - {name:'我的产品',color:'#FF8543',left:'77%',top:'62%'}, - {name:'主控部件查询',color:'#FF8543',left:'57%',top:'12%'}, - {name:'问题单',color:'#FF4B51',left:'6%',top:'32%'}, - {name:'主控部件查询',color:'#FF8543',left:'17%',top:'47%'}, - {name:'我的产品',color:'#0FCA44',left:'32%',top:'42%'}, - {name:'问题单',color:'#FF4B51',left:'46%',top:'32%'}, - {name:'维保期限查询',color:'#436FFF',left:'72%',top:'32%'}, - {name:'订单号查询',color:'#FBCA0A',left:'52%',top:'58%'}, + {name:'维保期限查询',color:'#436FFF'}, + {name:'主控部件查询',color:'#FF8543'}, + {name:'智能客服',color:'#22D3F6'}, + {name:'我的产品',color:'#0FCA44'}, + {name:'订单号查询',color:'#FBCA0A'}, + {name:'主控部件查询',color:'#FF8543'}, + {name:'我的产品',color:'#32af40'}, + {name:'主控部件查询',color:'#FF8543'}, + {name:'问题单',color:'#FF4B51'}, + {name:'主控部件查询',color:'#FF8543'}, + {name:'我的产品',color:'#0FCA44'}, + {name:'问题单',color:'#FF4B51'}, + {name:'维保期限查询',color:'#436FFF'}, + {name:'订单号查询',color:'#FBCA0A'}, + {name:'我的产品',color:'#0FCA44'}, + {name:'订单号查询',color:'#FBCA0A'}, + {name:'主控部件查询',color:'#94471d'}, + {name:'我的产品',color:'#FF8543'}, + {name:'主控部件查询',color:'#3d7a80'}, + {name:'问题单',color:'#FF4B51'}, + {name:'主控部件查询',color:'#FF8543'}, ], historyList:[ {name:'搜索历史文案占位……'}, @@ -85,6 +97,33 @@ export default { {name:'维保工单'}, ] } + }, + mounted() { + for (let i = 0; i < this.recommendList.length; i++) { + const bubble = this.getCreateBubble(this.recommendList[i]); + this.$refs.bubble.appendChild(bubble); + } + }, + methods:{ + getCreateBubble(item){ + const containerWidth = this.$refs.bubble.offsetWidth; + const containerHeight = this.$refs.bubble.offsetHeight; + const bubble = document.createElement('div'); + bubble.className = 'bubble'; + + const maxX = containerWidth - 160; + const maxY = containerHeight - 38; + const x = Math.floor(Math.random() * maxX); + const y = Math.floor(Math.random() * maxY); + + bubble.style.left = `${x}px`; + bubble.style.top = `${y}px`; + bubble.style.maxWidth = '160px'; + bubble.style.maxHeight = '38px'; + bubble.style.background = `${item.color}`; + bubble.innerText =`${item.name}`; + return bubble + } } } @@ -105,61 +144,111 @@ export default { display: flex; flex-direction: column; .rowView{ - width: 100%; - height: 320px; - padding: 2%; + height: 220px; + padding: 20px 0; } .rowList{ + max-width: 1200px; + margin: 0 auto; height: 100%; display: flex; - border: 1px solid #aaa; .colItem{ flex: 1; - border-right: 1px solid #aaa; + border: 1px solid #aaa; + padding: 20px; + display: flex; + position: relative; + margin-left: -1px; + .cardView{ + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + .name{ + display: flex; + align-items: center; + justify-content: space-between; + font-size: 18px; + .icon{ + margin-left: 10px; + } + } + } + + .describe{ + display: none; + } + } + .colItem:hover{ + border-top-color: var(--el-color-primary); + border-bottom-color: var(--el-color-primary); + } + .colItem:hover .describe{ + height: 100%; + width: 100%; + background: rgba(255,255,255,1); + color: var(--el-color-primary); + position: absolute; + left: 0; + top: 0; + z-index: 10; + cursor: pointer; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; .name{ display: flex; - align-items: center; + align-items: flex-end; justify-content: space-between; - font-size: 18px; + font-size: 16px; + .icon{ + margin-left: 10px; + } } } - .colItem:last-child{ - border-right: 0; - } } .recommend{ .title{ - padding:0 2%; + max-width: 1200px; + margin: 0 auto; height: 80px; display: flex; align-items: center; font-size: 22px; } .mainView{ - padding: 20px 2%; + padding: 20px 0; + max-width: 1200px; + margin: 0 auto; background: #F8F8F8; display: flex; justify-content: flex-start; flex-wrap: wrap; position: relative; height: 300px; - .viewItem{ - padding: 20px 60px; + ::v-deep .bubble{ + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #F8F8F8; + position: absolute; border-radius: 50px; color: #fff; - margin: 20px; - font-size: 16px; - position: absolute; + padding:6px 20px; + box-shadow: 0 2px 4px rgba(0,0,0,0.2); + } + ::v-deep .bubble:hover{ + transform: scale(1.1); + cursor: pointer; } } } .history{ .title{ - padding:0 2%; + max-width: 1200px; + margin: 0 auto; height: 80px; display: flex; align-items: center; @@ -167,7 +256,9 @@ export default { font-size: 22px; } .mainView{ - padding: 20px 2% 80px 2%; + padding: 20px 0 80px 0; + max-width: 1200px; + margin: 0 auto; display: flex; flex-wrap: wrap; .viewItem{ @@ -181,14 +272,4 @@ export default { } } -.customerBox{ - position: fixed; - right: 40px; - bottom: 80px; - z-index: 10; - .img{ - width: 80px; - height: 80px; - } -} diff --git a/src/views/serveView/components/commonPage.vue b/src/views/serveView/components/commonPage.vue index 749a78e..a7e1a0b 100644 --- a/src/views/serveView/components/commonPage.vue +++ b/src/views/serveView/components/commonPage.vue @@ -2,7 +2,7 @@
@@ -78,6 +78,21 @@ export default { props: { title: { type: String, default: "" } + }, + data(){ + return{ + + } + }, + mounted() { + + }, + methods:{ + getBack(){ + this.$router.push({ + path:'/login' + }) + } } } @@ -88,6 +103,7 @@ export default { display: flex; .common-header-title{ flex: 1; + border-left: 0; } } .headerView{