yc-ui2 0.1.1-beta11 → 0.1.1-beta13
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/yc-ui2.common.js +210 -492
- package/dist/yc-ui2.common.js.map +1 -1
- package/dist/yc-ui2.css +1 -1
- package/dist/yc-ui2.umd.js +210 -492
- package/dist/yc-ui2.umd.js.map +1 -1
- package/dist/yc-ui2.umd.min.js +1 -1
- package/dist/yc-ui2.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/App.vue +6 -3
- package/src/main.js +1 -1
- package/src/router/index.js +5 -0
- package/src/views/question.vue +15 -0
- package/vue.config.js +1 -0
- package/dist/css/25.6e3f4a2f.css +0 -1
- package/dist/css/50.6a139aa9.css +0 -2
- package/dist/css/525.6a139aa9.css +0 -2
- package/dist/yc-ui2.common.525.js +0 -216
- package/dist/yc-ui2.common.525.js.map +0 -1
- package/dist/yc-ui2.umd.50.js +0 -216
- package/dist/yc-ui2.umd.50.js.map +0 -1
- package/dist/yc-ui2.umd.min.25.js +0 -2
- package/dist/yc-ui2.umd.min.25.js.map +0 -1
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"yc-ui2.umd.50.js","mappings":"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","sources":["webpack://yc-ui2/./src/components/YcCustomerService/question.vue","webpack://yc-ui2/./src/components/YcCustomerService/question.vue?c4b4","webpack://yc-ui2/src/components/YcCustomerService/question.vue","webpack://yc-ui2/./src/components/YcCustomerService/question.vue?ae6c","webpack://yc-ui2/./src/components/YcCustomerService/question.vue?9254","webpack://yc-ui2/./src/components/YcCustomerService/question.vue?61e6","webpack://yc-ui2/./src/components/YcCustomerService/question.vue?a2db"],"sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"chatPage\"},[_vm._m(0),_c('div',{staticClass:\"main\"},[_c('div',[_c('main',{ref:\"main\"},[_c('p',[_vm._v(\"今天\"+_vm._s(_vm.currData))]),_vm._l((_vm.messagelist),function(item,index){return _c('div',{key:index,class:['message', item.id]},[_c('img',{staticClass:\"avatar\",attrs:{\"src\":'/cloud-img/customerService/' + item.id + '.jpg'}}),_c('div',{staticClass:\"content\"},[_vm._l((item.msg),function(msg,index){return _c('span',{key:msg + index,class:item.msg.length > 1 ? 'href' : '',domProps:{\"innerHTML\":_vm._s((item.msg.length > 1 ? 1 + index + '. ' : ' ') + msg)},on:{\"click\":function($event){item.msg.length > 1 && _vm.regularClick(msg)}}})}),(item.based)?_c('div',{staticClass:\"based\",on:{\"click\":function($event){$event.preventDefault();return _vm.handExpand(item)}}},[_c('span',[_vm._v(\"依据\")]),_c('span',{class:{ 'is-active': item.isActive }},[_vm._v(_vm._s(item.based)),_c('i',{staticClass:\"el-icon-d-arrow-right\"})])]):_vm._e()],2)])})],2),_c('footer',[_c('el-input',{attrs:{\"type\":\"textarea\",\"maxlength\":\"500\",\"autosize\":{ minRows: 6, maxRows: 6 },\"autofocus\":\"true\",\"resize\":\"none\",\"placeholder\":\"请输入你要咨询的问题\"},nativeOn:{\"keyup\":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,\"enter\",13,$event.key,\"Enter\"))return null;return _vm.carriageReturn.apply(null, arguments)}},model:{value:(_vm.textareaValue),callback:function ($$v) {_vm.textareaValue=$$v},expression:\"textareaValue\"}}),_c('el-button',{style:(!_vm.textareaValue\n ? 'background-color: #F7F7F9;color: #FF575F;border-color: transparent;'\n : ''),attrs:{\"type\":\"primary\",\"disabled\":!_vm.textareaValue},on:{\"click\":_vm.send}},[_vm._v(\"发送\")])],1)]),_c('aside',[_c('el-collapse',{attrs:{\"accordion\":\"\"},model:{value:(_vm.activeNames),callback:function ($$v) {_vm.activeNames=$$v},expression:\"activeNames\"}},_vm._l((_vm.questionsList),function(item,key,index){return _c('el-collapse-item',{key:key,attrs:{\"name\":index}},[_c('template',{slot:\"title\"},[_c('img',{attrs:{\"src\":\"/cloud-img/customerService/ellipticalWenh.png\"}}),_vm._v(_vm._s(key)+\" \")]),_vm._l((item),function(faq){return _c('div',{key:faq,domProps:{\"innerHTML\":_vm._s(faq)},on:{\"click\":function($event){return _vm.regularClick(faq)}}})})],2)}),1)],1)])])\n}\nvar staticRenderFns = [function (){var _vm=this,_c=_vm._self._c;return _c('header',{staticStyle:{\"background\":\"url('/cloud-img/customerService/chatTop.png') center\",\"background-size\":\"cover\"}},[_c('div',[_c('h3',[_vm._v(\"小优客服\")]),_c('span',[_vm._v(\"Problem Help\")])]),_c('p',[_vm._v(\"小优为您提供24小时服务\")])])\n}]\n\nexport { render, staticRenderFns }","export * from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!../../../node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!../../../node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./question.vue?vue&type=template&id=224b0f0a&\"","<template>\r\n <div class=\"chatPage\">\r\n <header\r\n style=\"\r\n background: url('/cloud-img/customerService/chatTop.png') center\r\n no-repeat cover;\r\n background-size: cover;\r\n \"\r\n >\r\n <div>\r\n <h3>小优客服</h3>\r\n <span>Problem Help</span>\r\n </div>\r\n <p>小优为您提供24小时服务</p>\r\n </header>\r\n <div class=\"main\">\r\n <div>\r\n <main ref=\"main\">\r\n <p>今天{{ currData }}</p>\r\n <div\r\n v-for=\"(item, index) in messagelist\"\r\n :key=\"index\"\r\n :class=\"['message', item.id]\"\r\n >\r\n <img\r\n class=\"avatar\"\r\n :src=\"'/cloud-img/customerService/' + item.id + '.jpg'\"\r\n />\r\n <div class=\"content\">\r\n <span\r\n v-for=\"(msg, index) in item.msg\"\r\n :key=\"msg + index\"\r\n v-html=\"(item.msg.length > 1 ? 1 + index + '. ' : ' ') + msg\"\r\n :class=\"item.msg.length > 1 ? 'href' : ''\"\r\n @click=\"item.msg.length > 1 && regularClick(msg)\"\r\n ></span>\r\n <div\r\n class=\"based\"\r\n v-if=\"item.based\"\r\n @click.prevent=\"handExpand(item)\"\r\n >\r\n <span>依据</span\r\n ><span :class=\"{ 'is-active': item.isActive }\"\r\n >{{ item.based }}<i class=\"el-icon-d-arrow-right\"></i\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n </main>\r\n <footer>\r\n <el-input\r\n type=\"textarea\"\r\n maxlength=\"500\"\r\n :autosize=\"{ minRows: 6, maxRows: 6 }\"\r\n autofocus=\"true\"\r\n resize=\"none\"\r\n placeholder=\"请输入你要咨询的问题\"\r\n v-model=\"textareaValue\"\r\n @keyup.enter.native=\"carriageReturn\"\r\n >\r\n </el-input>\r\n <el-button\r\n type=\"primary\"\r\n :disabled=\"!textareaValue\"\r\n :style=\"\r\n !textareaValue\r\n ? 'background-color: #F7F7F9;color: #FF575F;border-color: transparent;'\r\n : ''\r\n \"\r\n @click=\"send\"\r\n >发送</el-button\r\n >\r\n </footer>\r\n </div>\r\n <aside>\r\n <el-collapse v-model=\"activeNames\" accordion>\r\n <el-collapse-item\r\n v-for=\"(item, key, index) in questionsList\"\r\n :key=\"key\"\r\n :name=\"index\"\r\n >\r\n <template slot=\"title\">\r\n <img src=\"/cloud-img/customerService/ellipticalWenh.png\" />{{\r\n key\r\n }}\r\n </template>\r\n <div\r\n v-for=\"faq in item\"\r\n :key=\"faq\"\r\n v-html=\"faq\"\r\n @click=\"regularClick(faq)\"\r\n ></div>\r\n </el-collapse-item>\r\n </el-collapse>\r\n </aside>\r\n </div>\r\n </div>\r\n</template>\r\n<script>\r\nimport chatMixin from \"./chatMixin\"\r\nexport default {\r\n name: \"questionChat\",\r\n mixins: [chatMixin],\r\n data() {\r\n return {\r\n activeNames: [1],\r\n }\r\n },\r\n computed: {\r\n currData() {\r\n const currData = new Date()\r\n return `${currData.getHours()}:${currData.getMinutes()}`\r\n },\r\n questionsList() {\r\n return this.questions.reduce((prev, curr) => {\r\n // eslint-disable-next-line no-prototype-builtins\r\n if (prev.hasOwnProperty(curr.type)) {\r\n prev[curr.type].push(curr.faq)\r\n } else {\r\n prev[curr.type] = [curr.faq]\r\n }\r\n return prev\r\n }, {})\r\n },\r\n },\r\n}\r\n</script>\r\n<style lang=\"scss\">\r\n#app {\r\n min-width: auto;\r\n overflow: hidden;\r\n // height: 100vh;\r\n}\r\n\r\n.chatPage {\r\n background-color: #ffffff;\r\n\r\n > header {\r\n height: 8vw;\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n gap: 5vw;\r\n padding-left: 8vw;\r\n // background: url(\"/cloud-img/customerService/chatTop.png\");\r\n background-position: center center;\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n\r\n > div {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n // flex-direction: row-reverse;\r\n h3 {\r\n height: 1vw;\r\n margin-top: 0px;\r\n font-size: 2.125rem;\r\n font-weight: bold;\r\n color: #191a2c;\r\n font-family: Source Han Sans CN-Bold, Source Han Sans CN;\r\n }\r\n\r\n span {\r\n font-size: 1rem;\r\n font-family: LXGW New Clear Gothic-Regular, LXGW New Clear Gothic;\r\n font-weight: 400;\r\n color: #666;\r\n }\r\n }\r\n\r\n p {\r\n font-size: 1rem;\r\n font-family: Source Han Sans CN-Regular, Source Han Sans CN;\r\n font-weight: 400;\r\n color: #2e2f42;\r\n }\r\n }\r\n\r\n .main {\r\n display: flex;\r\n\r\n > div {\r\n width: 74vw;\r\n position: relative;\r\n\r\n > main {\r\n height: 62vh;\r\n overflow-y: auto;\r\n padding-bottom: 2vw;\r\n background-color: #f7f7f9;\r\n\r\n // 滚动条宽度\r\n &::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n\r\n // 滚动条轨道\r\n &::-webkit-scrollbar-track {\r\n background: rgb(239, 239, 239);\r\n border-radius: 2px;\r\n }\r\n\r\n // 小滑块\r\n &::-webkit-scrollbar-thumb {\r\n background: #ff8879;\r\n border-radius: 10px;\r\n }\r\n\r\n &::-webkit-scrollbar-thumb:hover {\r\n background: #ff755d;\r\n }\r\n\r\n > p {\r\n text-align: center;\r\n font-size: 0.875rem;\r\n font-family: Source Han Sans CN-Regular, Source Han Sans CN;\r\n font-weight: 400;\r\n color: #909399;\r\n }\r\n\r\n .message {\r\n display: flex;\r\n gap: 15px;\r\n margin: 1.5vw 1.5vw 0px 1.5vw;\r\n opacity: 0;\r\n\r\n .avatar {\r\n width: 2.5vw;\r\n height: 2.5vw;\r\n min-width: 35px;\r\n min-height: 35px;\r\n border-radius: 50%;\r\n transition: all 0.3s linear;\r\n &:focus,\r\n &:hover {\r\n transform: scale(1.2, 1.2) rotate(15deg);\r\n }\r\n }\r\n\r\n .content {\r\n width: fit-content;\r\n max-width: 50vw;\r\n font-weight: 400;\r\n font-size: 1rem;\r\n color: #4c4c4d;\r\n padding: 10px;\r\n border-radius: 10px;\r\n position: relative;\r\n background-color: #ffffff;\r\n\r\n .href {\r\n cursor: pointer;\r\n display: block;\r\n color: #ff575f;\r\n margin-bottom: 1.5rem;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n > .based {\r\n cursor: pointer;\r\n font-size: 1rem;\r\n font-weight: 400;\r\n color: #909399;\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n border-top: 1px solid #ebebed;\r\n padding-top: 0.625rem;\r\n margin-top: 0.625rem;\r\n gap: 0.625rem;\r\n\r\n & > span:first-child {\r\n white-space: nowrap;\r\n color: #4c4c4d;\r\n border-radius: 18px;\r\n background-color: #eeeef0;\r\n padding: 0.1875rem 0.625rem;\r\n margin-top: -0.1875rem;\r\n }\r\n\r\n & > span:last-child {\r\n width: 100%;\r\n position: relative;\r\n display: inline-block;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n padding-right: 12px;\r\n\r\n .el-icon-d-arrow-right {\r\n position: absolute;\r\n right: 0px;\r\n bottom: 0px;\r\n transform: rotate(90deg);\r\n transition: all 0.35s linear;\r\n }\r\n &.is-active {\r\n overflow: visible;\r\n white-space: normal;\r\n .el-icon-d-arrow-right {\r\n transform: rotate(270deg);\r\n }\r\n }\r\n\r\n &:hover {\r\n color: #ff575f;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.admin {\r\n animation: animation01 0.3s linear 1.5s forwards;\r\n\r\n .content {\r\n margin-top: 20px;\r\n\r\n &::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 2px;\r\n left: -10px;\r\n transform: rotate(-45deg);\r\n border-width: 10px;\r\n border-style: solid;\r\n border-color: transparent transparent transparent #fff;\r\n }\r\n\r\n &::after {\r\n content: \"小优客服【38号为您服务】\";\r\n width: 200px;\r\n font-size: 0.875rem;\r\n font-family: Source Han Sans CN-Medium, Source Han Sans CN;\r\n font-weight: 500;\r\n color: #8b8c8f;\r\n position: absolute;\r\n left: 0px;\r\n top: -20px;\r\n }\r\n }\r\n }\r\n\r\n &.personal {\r\n animation: animation01 0.3s linear 0.3s forwards;\r\n flex-direction: row-reverse;\r\n\r\n .content::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 2px;\r\n right: -10px;\r\n transform: rotate(-45deg);\r\n border-width: 10px;\r\n border-style: solid;\r\n border-color: transparent transparent #ffffff transparent;\r\n }\r\n }\r\n\r\n @keyframes animation01 {\r\n 0% {\r\n transform: translateY(20px);\r\n opacity: 0;\r\n }\r\n\r\n 100% {\r\n transform: translateY(0px);\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n }\r\n\r\n footer {\r\n height: 30vh;\r\n border: 1px solid #e7e7ea;\r\n\r\n > .el-textarea {\r\n border-color: transparent;\r\n\r\n textarea {\r\n overflow-y: hidden;\r\n // padding-right: 65px;\r\n font-weight: 400;\r\n color: #19191a;\r\n font-size: 1rem;\r\n font-family: Source Han Sans CN-Regular, Source Han Sans CN;\r\n }\r\n\r\n textarea,\r\n textarea:focus {\r\n border-color: transparent;\r\n }\r\n }\r\n\r\n > .el-button {\r\n float: right;\r\n // position: absolute;\r\n // bottom: 40px;\r\n // right: 40px;\r\n z-index: 1;\r\n font-size: 0.875rem;\r\n font-family: Source Han Sans CN-Regular, Source Han Sans CN;\r\n font-weight: 400;\r\n border-radius: 4px;\r\n margin-right: 2vw;\r\n width: 5vw;\r\n min-width: 92px;\r\n }\r\n }\r\n }\r\n\r\n aside {\r\n width: 26vw;\r\n height: 92vh;\r\n padding: 1vw;\r\n overflow-y: auto;\r\n background-color: #ffffff;\r\n\r\n .el-collapse-item__header {\r\n color: #373a3c;\r\n font-size: 1.5rem;\r\n font-weight: 500;\r\n font-family: Source Han Sans CN-Medium, Source Han Sans CN;\r\n padding: 2rem;\r\n background-color: #f00;\r\n background: linear-gradient(#ffdad4, #ffa9a3);\r\n\r\n &.is-active {\r\n color: #ffffff;\r\n background: linear-gradient(#ff897a, #ff645a);\r\n\r\n i {\r\n color: #ffffff;\r\n }\r\n }\r\n\r\n img {\r\n width: 2.25rem;\r\n height: 2.25rem;\r\n float: left;\r\n margin-left: -0.5rem;\r\n margin-right: 0.5rem;\r\n }\r\n\r\n i {\r\n font-size: 2rem;\r\n color: #ff575f;\r\n font-weight: 900;\r\n }\r\n }\r\n\r\n .el-collapse-item__content {\r\n font-size: 1rem;\r\n font-family: Source Han Sans CN-Regular, Source Han Sans CN;\r\n font-weight: 400;\r\n padding: 20px 20px 20px 40px;\r\n color: #000000;\r\n background-color: #f7f7f9;\r\n\r\n > div {\r\n position: relative;\r\n margin-top: 1rem;\r\n cursor: pointer;\r\n transition: all 0.3s linear;\r\n\r\n &:first-child {\r\n margin-top: 0px;\r\n }\r\n\r\n &::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 5px;\r\n left: -15px;\r\n // transform: rotate(-45deg);\r\n // float: left;\r\n border-width: 10px;\r\n border-style: solid;\r\n border-color: transparent transparent transparent #ffa9a3;\r\n }\r\n\r\n &:hover {\r\n color: #ff575f;\r\n transform: translate(0.5rem);\r\n\r\n &::before {\r\n border-color: transparent transparent transparent #ff575f;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n</style>\r\n","import mod from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!../../../node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./question.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!../../../node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./question.vue?vue&type=script&lang=js&\"","// extracted by mini-css-extract-plugin\nexport {};","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-64.use[0]!../../../node_modules/css-loader/dist/cjs.js??clonedRuleSet-64.use[1]!../../../node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[2]!../../../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-64.use[3]!../../../node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./question.vue?vue&type=style&index=0&id=224b0f0a&prod&lang=scss&\"","import { render, staticRenderFns } from \"./question.vue?vue&type=template&id=224b0f0a&\"\nimport script from \"./question.vue?vue&type=script&lang=js&\"\nexport * from \"./question.vue?vue&type=script&lang=js&\"\nimport style0 from \"./question.vue?vue&type=style&index=0&id=224b0f0a&prod&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports"],"names":["render","_vm","_c","_self","staticClass","_m","ref","_v","_s","currData","_l","messagelist","item","index","key","class","id","attrs","msg","length","domProps","on","click","$event","regularClick","based","preventDefault","handExpand","isActive","_e","minRows","maxRows","nativeOn","keyup","type","indexOf","_k","keyCode","carriageReturn","apply","arguments","model","value","textareaValue","callback","$$v","expression","style","send","activeNames","questionsList","slot","faq","staticRenderFns","staticStyle","chatMixin","name","mixins","data","computed","Date","getHours","getMinutes","questions","reduce","prev","curr","hasOwnProperty","push"],"sourceRoot":""}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
"use strict";(("undefined"!==typeof self?self:this)["webpackChunkyc_ui2"]=("undefined"!==typeof self?self:this)["webpackChunkyc_ui2"]||[]).push([[25],{8025:function(e,t,a){a.r(t),a.d(t,{default:function(){return o}});var s=function(){var e=this,t=e._self._c;return t("div",{staticClass:"chatPage"},[e._m(0),t("div",{staticClass:"main"},[t("div",[t("main",{ref:"main"},[t("p",[e._v("今天"+e._s(e.currData))]),e._l(e.messagelist,(function(a,s){return t("div",{key:s,class:["message",a.id]},[t("img",{staticClass:"avatar",attrs:{src:"/cloud-img/customerService/"+a.id+".jpg"}}),t("div",{staticClass:"content"},[e._l(a.msg,(function(s,n){return t("span",{key:s+n,class:a.msg.length>1?"href":"",domProps:{innerHTML:e._s((a.msg.length>1?1+n+". ":" ")+s)},on:{click:function(t){a.msg.length>1&&e.regularClick(s)}}})})),a.based?t("div",{staticClass:"based",on:{click:function(t){return t.preventDefault(),e.handExpand(a)}}},[t("span",[e._v("依据")]),t("span",{class:{"is-active":a.isActive}},[e._v(e._s(a.based)),t("i",{staticClass:"el-icon-d-arrow-right"})])]):e._e()],2)])}))],2),t("footer",[t("el-input",{attrs:{type:"textarea",maxlength:"500",autosize:{minRows:6,maxRows:6},autofocus:"true",resize:"none",placeholder:"请输入你要咨询的问题"},nativeOn:{keyup:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:e.carriageReturn.apply(null,arguments)}},model:{value:e.textareaValue,callback:function(t){e.textareaValue=t},expression:"textareaValue"}}),t("el-button",{style:e.textareaValue?"":"background-color: #F7F7F9;color: #FF575F;border-color: transparent;",attrs:{type:"primary",disabled:!e.textareaValue},on:{click:e.send}},[e._v("发送")])],1)]),t("aside",[t("el-collapse",{attrs:{accordion:""},model:{value:e.activeNames,callback:function(t){e.activeNames=t},expression:"activeNames"}},e._l(e.questionsList,(function(a,s,n){return t("el-collapse-item",{key:s,attrs:{name:n}},[t("template",{slot:"title"},[t("img",{attrs:{src:"/cloud-img/customerService/ellipticalWenh.png"}}),e._v(e._s(s)+" ")]),e._l(a,(function(a){return t("div",{key:a,domProps:{innerHTML:e._s(a)},on:{click:function(t){return e.regularClick(a)}}})}))],2)})),1)],1)])])},n=[function(){var e=this,t=e._self._c;return t("header",{staticStyle:{background:"url('/cloud-img/customerService/chatTop.png') center","background-size":"cover"}},[t("div",[t("h3",[e._v("小优客服")]),t("span",[e._v("Problem Help")])]),t("p",[e._v("小优为您提供24小时服务")])])}],r=(a(7658),a(7167)),i={name:"questionChat",mixins:[r.Z],data(){return{activeNames:[1]}},computed:{currData(){const e=new Date;return`${e.getHours()}:${e.getMinutes()}`},questionsList(){return this.questions.reduce(((e,t)=>(e.hasOwnProperty(t.type)?e[t.type].push(t.faq):e[t.type]=[t.faq],e)),{})}}},c=i,l=a(1001),u=(0,l.Z)(c,s,n,!1,null,null,null),o=u.exports}}]);
|
2
|
-
//# sourceMappingURL=yc-ui2.umd.min.25.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"yc-ui2.umd.min.25.js","mappings":"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","sources":["webpack://yc-ui2/./src/components/YcCustomerService/question.vue","webpack://yc-ui2/src/components/YcCustomerService/question.vue","webpack://yc-ui2/./src/components/YcCustomerService/question.vue?ae21","webpack://yc-ui2/./src/components/YcCustomerService/question.vue?a2db"],"sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"chatPage\"},[_vm._m(0),_c('div',{staticClass:\"main\"},[_c('div',[_c('main',{ref:\"main\"},[_c('p',[_vm._v(\"今天\"+_vm._s(_vm.currData))]),_vm._l((_vm.messagelist),function(item,index){return _c('div',{key:index,class:['message', item.id]},[_c('img',{staticClass:\"avatar\",attrs:{\"src\":'/cloud-img/customerService/' + item.id + '.jpg'}}),_c('div',{staticClass:\"content\"},[_vm._l((item.msg),function(msg,index){return _c('span',{key:msg + index,class:item.msg.length > 1 ? 'href' : '',domProps:{\"innerHTML\":_vm._s((item.msg.length > 1 ? 1 + index + '. ' : ' ') + msg)},on:{\"click\":function($event){item.msg.length > 1 && _vm.regularClick(msg)}}})}),(item.based)?_c('div',{staticClass:\"based\",on:{\"click\":function($event){$event.preventDefault();return _vm.handExpand(item)}}},[_c('span',[_vm._v(\"依据\")]),_c('span',{class:{ 'is-active': item.isActive }},[_vm._v(_vm._s(item.based)),_c('i',{staticClass:\"el-icon-d-arrow-right\"})])]):_vm._e()],2)])})],2),_c('footer',[_c('el-input',{attrs:{\"type\":\"textarea\",\"maxlength\":\"500\",\"autosize\":{ minRows: 6, maxRows: 6 },\"autofocus\":\"true\",\"resize\":\"none\",\"placeholder\":\"请输入你要咨询的问题\"},nativeOn:{\"keyup\":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,\"enter\",13,$event.key,\"Enter\"))return null;return _vm.carriageReturn.apply(null, arguments)}},model:{value:(_vm.textareaValue),callback:function ($$v) {_vm.textareaValue=$$v},expression:\"textareaValue\"}}),_c('el-button',{style:(!_vm.textareaValue\n ? 'background-color: #F7F7F9;color: #FF575F;border-color: transparent;'\n : ''),attrs:{\"type\":\"primary\",\"disabled\":!_vm.textareaValue},on:{\"click\":_vm.send}},[_vm._v(\"发送\")])],1)]),_c('aside',[_c('el-collapse',{attrs:{\"accordion\":\"\"},model:{value:(_vm.activeNames),callback:function ($$v) {_vm.activeNames=$$v},expression:\"activeNames\"}},_vm._l((_vm.questionsList),function(item,key,index){return _c('el-collapse-item',{key:key,attrs:{\"name\":index}},[_c('template',{slot:\"title\"},[_c('img',{attrs:{\"src\":\"/cloud-img/customerService/ellipticalWenh.png\"}}),_vm._v(_vm._s(key)+\" \")]),_vm._l((item),function(faq){return _c('div',{key:faq,domProps:{\"innerHTML\":_vm._s(faq)},on:{\"click\":function($event){return _vm.regularClick(faq)}}})})],2)}),1)],1)])])\n}\nvar staticRenderFns = [function (){var _vm=this,_c=_vm._self._c;return _c('header',{staticStyle:{\"background\":\"url('/cloud-img/customerService/chatTop.png') center\",\"background-size\":\"cover\"}},[_c('div',[_c('h3',[_vm._v(\"小优客服\")]),_c('span',[_vm._v(\"Problem Help\")])]),_c('p',[_vm._v(\"小优为您提供24小时服务\")])])\n}]\n\nexport { render, staticRenderFns }","<template>\r\n <div class=\"chatPage\">\r\n <header\r\n style=\"\r\n background: url('/cloud-img/customerService/chatTop.png') center\r\n no-repeat cover;\r\n background-size: cover;\r\n \"\r\n >\r\n <div>\r\n <h3>小优客服</h3>\r\n <span>Problem Help</span>\r\n </div>\r\n <p>小优为您提供24小时服务</p>\r\n </header>\r\n <div class=\"main\">\r\n <div>\r\n <main ref=\"main\">\r\n <p>今天{{ currData }}</p>\r\n <div\r\n v-for=\"(item, index) in messagelist\"\r\n :key=\"index\"\r\n :class=\"['message', item.id]\"\r\n >\r\n <img\r\n class=\"avatar\"\r\n :src=\"'/cloud-img/customerService/' + item.id + '.jpg'\"\r\n />\r\n <div class=\"content\">\r\n <span\r\n v-for=\"(msg, index) in item.msg\"\r\n :key=\"msg + index\"\r\n v-html=\"(item.msg.length > 1 ? 1 + index + '. ' : ' ') + msg\"\r\n :class=\"item.msg.length > 1 ? 'href' : ''\"\r\n @click=\"item.msg.length > 1 && regularClick(msg)\"\r\n ></span>\r\n <div\r\n class=\"based\"\r\n v-if=\"item.based\"\r\n @click.prevent=\"handExpand(item)\"\r\n >\r\n <span>依据</span\r\n ><span :class=\"{ 'is-active': item.isActive }\"\r\n >{{ item.based }}<i class=\"el-icon-d-arrow-right\"></i\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n </main>\r\n <footer>\r\n <el-input\r\n type=\"textarea\"\r\n maxlength=\"500\"\r\n :autosize=\"{ minRows: 6, maxRows: 6 }\"\r\n autofocus=\"true\"\r\n resize=\"none\"\r\n placeholder=\"请输入你要咨询的问题\"\r\n v-model=\"textareaValue\"\r\n @keyup.enter.native=\"carriageReturn\"\r\n >\r\n </el-input>\r\n <el-button\r\n type=\"primary\"\r\n :disabled=\"!textareaValue\"\r\n :style=\"\r\n !textareaValue\r\n ? 'background-color: #F7F7F9;color: #FF575F;border-color: transparent;'\r\n : ''\r\n \"\r\n @click=\"send\"\r\n >发送</el-button\r\n >\r\n </footer>\r\n </div>\r\n <aside>\r\n <el-collapse v-model=\"activeNames\" accordion>\r\n <el-collapse-item\r\n v-for=\"(item, key, index) in questionsList\"\r\n :key=\"key\"\r\n :name=\"index\"\r\n >\r\n <template slot=\"title\">\r\n <img src=\"/cloud-img/customerService/ellipticalWenh.png\" />{{\r\n key\r\n }}\r\n </template>\r\n <div\r\n v-for=\"faq in item\"\r\n :key=\"faq\"\r\n v-html=\"faq\"\r\n @click=\"regularClick(faq)\"\r\n ></div>\r\n </el-collapse-item>\r\n </el-collapse>\r\n </aside>\r\n </div>\r\n </div>\r\n</template>\r\n<script>\r\nimport chatMixin from \"./chatMixin\"\r\nexport default {\r\n name: \"questionChat\",\r\n mixins: [chatMixin],\r\n data() {\r\n return {\r\n activeNames: [1],\r\n }\r\n },\r\n computed: {\r\n currData() {\r\n const currData = new Date()\r\n return `${currData.getHours()}:${currData.getMinutes()}`\r\n },\r\n questionsList() {\r\n return this.questions.reduce((prev, curr) => {\r\n // eslint-disable-next-line no-prototype-builtins\r\n if (prev.hasOwnProperty(curr.type)) {\r\n prev[curr.type].push(curr.faq)\r\n } else {\r\n prev[curr.type] = [curr.faq]\r\n }\r\n return prev\r\n }, {})\r\n },\r\n },\r\n}\r\n</script>\r\n<style lang=\"scss\">\r\n#app {\r\n min-width: auto;\r\n overflow: hidden;\r\n // height: 100vh;\r\n}\r\n\r\n.chatPage {\r\n background-color: #ffffff;\r\n\r\n > header {\r\n height: 8vw;\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n gap: 5vw;\r\n padding-left: 8vw;\r\n // background: url(\"/cloud-img/customerService/chatTop.png\");\r\n background-position: center center;\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n\r\n > div {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n // flex-direction: row-reverse;\r\n h3 {\r\n height: 1vw;\r\n margin-top: 0px;\r\n font-size: 2.125rem;\r\n font-weight: bold;\r\n color: #191a2c;\r\n font-family: Source Han Sans CN-Bold, Source Han Sans CN;\r\n }\r\n\r\n span {\r\n font-size: 1rem;\r\n font-family: LXGW New Clear Gothic-Regular, LXGW New Clear Gothic;\r\n font-weight: 400;\r\n color: #666;\r\n }\r\n }\r\n\r\n p {\r\n font-size: 1rem;\r\n font-family: Source Han Sans CN-Regular, Source Han Sans CN;\r\n font-weight: 400;\r\n color: #2e2f42;\r\n }\r\n }\r\n\r\n .main {\r\n display: flex;\r\n\r\n > div {\r\n width: 74vw;\r\n position: relative;\r\n\r\n > main {\r\n height: 62vh;\r\n overflow-y: auto;\r\n padding-bottom: 2vw;\r\n background-color: #f7f7f9;\r\n\r\n // 滚动条宽度\r\n &::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n\r\n // 滚动条轨道\r\n &::-webkit-scrollbar-track {\r\n background: rgb(239, 239, 239);\r\n border-radius: 2px;\r\n }\r\n\r\n // 小滑块\r\n &::-webkit-scrollbar-thumb {\r\n background: #ff8879;\r\n border-radius: 10px;\r\n }\r\n\r\n &::-webkit-scrollbar-thumb:hover {\r\n background: #ff755d;\r\n }\r\n\r\n > p {\r\n text-align: center;\r\n font-size: 0.875rem;\r\n font-family: Source Han Sans CN-Regular, Source Han Sans CN;\r\n font-weight: 400;\r\n color: #909399;\r\n }\r\n\r\n .message {\r\n display: flex;\r\n gap: 15px;\r\n margin: 1.5vw 1.5vw 0px 1.5vw;\r\n opacity: 0;\r\n\r\n .avatar {\r\n width: 2.5vw;\r\n height: 2.5vw;\r\n min-width: 35px;\r\n min-height: 35px;\r\n border-radius: 50%;\r\n transition: all 0.3s linear;\r\n &:focus,\r\n &:hover {\r\n transform: scale(1.2, 1.2) rotate(15deg);\r\n }\r\n }\r\n\r\n .content {\r\n width: fit-content;\r\n max-width: 50vw;\r\n font-weight: 400;\r\n font-size: 1rem;\r\n color: #4c4c4d;\r\n padding: 10px;\r\n border-radius: 10px;\r\n position: relative;\r\n background-color: #ffffff;\r\n\r\n .href {\r\n cursor: pointer;\r\n display: block;\r\n color: #ff575f;\r\n margin-bottom: 1.5rem;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n > .based {\r\n cursor: pointer;\r\n font-size: 1rem;\r\n font-weight: 400;\r\n color: #909399;\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n border-top: 1px solid #ebebed;\r\n padding-top: 0.625rem;\r\n margin-top: 0.625rem;\r\n gap: 0.625rem;\r\n\r\n & > span:first-child {\r\n white-space: nowrap;\r\n color: #4c4c4d;\r\n border-radius: 18px;\r\n background-color: #eeeef0;\r\n padding: 0.1875rem 0.625rem;\r\n margin-top: -0.1875rem;\r\n }\r\n\r\n & > span:last-child {\r\n width: 100%;\r\n position: relative;\r\n display: inline-block;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n padding-right: 12px;\r\n\r\n .el-icon-d-arrow-right {\r\n position: absolute;\r\n right: 0px;\r\n bottom: 0px;\r\n transform: rotate(90deg);\r\n transition: all 0.35s linear;\r\n }\r\n &.is-active {\r\n overflow: visible;\r\n white-space: normal;\r\n .el-icon-d-arrow-right {\r\n transform: rotate(270deg);\r\n }\r\n }\r\n\r\n &:hover {\r\n color: #ff575f;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.admin {\r\n animation: animation01 0.3s linear 1.5s forwards;\r\n\r\n .content {\r\n margin-top: 20px;\r\n\r\n &::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 2px;\r\n left: -10px;\r\n transform: rotate(-45deg);\r\n border-width: 10px;\r\n border-style: solid;\r\n border-color: transparent transparent transparent #fff;\r\n }\r\n\r\n &::after {\r\n content: \"小优客服【38号为您服务】\";\r\n width: 200px;\r\n font-size: 0.875rem;\r\n font-family: Source Han Sans CN-Medium, Source Han Sans CN;\r\n font-weight: 500;\r\n color: #8b8c8f;\r\n position: absolute;\r\n left: 0px;\r\n top: -20px;\r\n }\r\n }\r\n }\r\n\r\n &.personal {\r\n animation: animation01 0.3s linear 0.3s forwards;\r\n flex-direction: row-reverse;\r\n\r\n .content::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 2px;\r\n right: -10px;\r\n transform: rotate(-45deg);\r\n border-width: 10px;\r\n border-style: solid;\r\n border-color: transparent transparent #ffffff transparent;\r\n }\r\n }\r\n\r\n @keyframes animation01 {\r\n 0% {\r\n transform: translateY(20px);\r\n opacity: 0;\r\n }\r\n\r\n 100% {\r\n transform: translateY(0px);\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n }\r\n\r\n footer {\r\n height: 30vh;\r\n border: 1px solid #e7e7ea;\r\n\r\n > .el-textarea {\r\n border-color: transparent;\r\n\r\n textarea {\r\n overflow-y: hidden;\r\n // padding-right: 65px;\r\n font-weight: 400;\r\n color: #19191a;\r\n font-size: 1rem;\r\n font-family: Source Han Sans CN-Regular, Source Han Sans CN;\r\n }\r\n\r\n textarea,\r\n textarea:focus {\r\n border-color: transparent;\r\n }\r\n }\r\n\r\n > .el-button {\r\n float: right;\r\n // position: absolute;\r\n // bottom: 40px;\r\n // right: 40px;\r\n z-index: 1;\r\n font-size: 0.875rem;\r\n font-family: Source Han Sans CN-Regular, Source Han Sans CN;\r\n font-weight: 400;\r\n border-radius: 4px;\r\n margin-right: 2vw;\r\n width: 5vw;\r\n min-width: 92px;\r\n }\r\n }\r\n }\r\n\r\n aside {\r\n width: 26vw;\r\n height: 92vh;\r\n padding: 1vw;\r\n overflow-y: auto;\r\n background-color: #ffffff;\r\n\r\n .el-collapse-item__header {\r\n color: #373a3c;\r\n font-size: 1.5rem;\r\n font-weight: 500;\r\n font-family: Source Han Sans CN-Medium, Source Han Sans CN;\r\n padding: 2rem;\r\n background-color: #f00;\r\n background: linear-gradient(#ffdad4, #ffa9a3);\r\n\r\n &.is-active {\r\n color: #ffffff;\r\n background: linear-gradient(#ff897a, #ff645a);\r\n\r\n i {\r\n color: #ffffff;\r\n }\r\n }\r\n\r\n img {\r\n width: 2.25rem;\r\n height: 2.25rem;\r\n float: left;\r\n margin-left: -0.5rem;\r\n margin-right: 0.5rem;\r\n }\r\n\r\n i {\r\n font-size: 2rem;\r\n color: #ff575f;\r\n font-weight: 900;\r\n }\r\n }\r\n\r\n .el-collapse-item__content {\r\n font-size: 1rem;\r\n font-family: Source Han Sans CN-Regular, Source Han Sans CN;\r\n font-weight: 400;\r\n padding: 20px 20px 20px 40px;\r\n color: #000000;\r\n background-color: #f7f7f9;\r\n\r\n > div {\r\n position: relative;\r\n margin-top: 1rem;\r\n cursor: pointer;\r\n transition: all 0.3s linear;\r\n\r\n &:first-child {\r\n margin-top: 0px;\r\n }\r\n\r\n &::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 5px;\r\n left: -15px;\r\n // transform: rotate(-45deg);\r\n // float: left;\r\n border-width: 10px;\r\n border-style: solid;\r\n border-color: transparent transparent transparent #ffa9a3;\r\n }\r\n\r\n &:hover {\r\n color: #ff575f;\r\n transform: translate(0.5rem);\r\n\r\n &::before {\r\n border-color: transparent transparent transparent #ff575f;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n</style>\r\n","import mod from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-124.use[1]!../../../node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./question.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-124.use[1]!../../../node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./question.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./question.vue?vue&type=template&id=224b0f0a&\"\nimport script from \"./question.vue?vue&type=script&lang=js&\"\nexport * from \"./question.vue?vue&type=script&lang=js&\"\nimport style0 from \"./question.vue?vue&type=style&index=0&id=224b0f0a&prod&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports"],"names":["render","_vm","this","_c","_self","staticClass","_m","ref","_v","_s","currData","_l","messagelist","item","index","key","class","id","attrs","msg","length","domProps","on","$event","regularClick","based","preventDefault","handExpand","isActive","_e","minRows","maxRows","nativeOn","type","indexOf","_k","keyCode","carriageReturn","apply","arguments","model","value","textareaValue","callback","$$v","expression","style","send","activeNames","questionsList","slot","faq","staticRenderFns","staticStyle","name","mixins","chatMixin","data","computed","Date","getHours","getMinutes","questions","reduce","prev","curr","hasOwnProperty","push","component"],"sourceRoot":""}
|