| 1 |
- {"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\kefu\\mobile\\index.vue?vue&type=style&index=2&id=461aab12&lang=css","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\kefu\\mobile\\index.vue","mtime":1761614939022},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQpAa2V5ZnJhbWVzIHVwIHsNCiAgMCUgew0KICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDAlKTsNCiAgfQ0KICAxMDAlIHsNCiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCk7DQogIH0NCn0NCi5lbW9qaS1vdXRlciB7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgcmlnaHQ6IDAuNXJlbTsNCiAgYm90dG9tOiAwLjNyZW07DQogIHdpZHRoOiAwLjVyZW07DQogIGhlaWdodDogMC41cmVtOw0KfQ0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAiiCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/pages/kefu/mobile","sourcesContent":["<template>\r\n <div class=\"chat-box\">\r\n <div class=\"head-box\">\r\n <div class=\"back\" v-db-click @click=\"goBack\"><span class=\"iconfont iconfanhui\"></span></div>\r\n <div class=\"title\">{{ nickname }} - 对话详情</div>\r\n </div>\r\n <div class=\"chat-scroll-box\">\r\n <vue-scroll\r\n :ops=\"ops\"\r\n ref=\"scrollBox\"\r\n @refresh-activate=\"handleActivate\"\r\n @refresh-start=\"handleStart\"\r\n @refresh-before-deactivate=\"handleBeforeDeactivate\"\r\n @refresh-deactivate=\"handleDeactivate\"\r\n >\r\n <div class=\"slot-refresh\" slot=\"refresh-deactive\"></div>\r\n <div class=\"slot-refresh\" slot=\"refresh-beforeDeactive\"></div>\r\n <div id=\"chatBox\" class=\"chat\" ref=\"chat\" style=\"padding: 0.3rem 0.3rem 0\">\r\n <div v-for=\"(item, index) in records\" :key=\"index\" :id=\"`chat_${item.id}`\">\r\n <div class=\"day-box\" v-if=\"item.show\">{{ item.time }}</div>\r\n <div class=\"chat-item\" :class=\"{ 'right-box': item.uid == kefuInfo.uid }\">\r\n <img\r\n class=\"avatar\"\r\n v-lazy=\"item.avatar\"\r\n mode=\"\"\r\n v-db-click\r\n @click=\"goUserInfo(item, item.uid == kefuInfo.uid)\"\r\n />\r\n <!-- 消息 -->\r\n <div class=\"msg-box\" v-if=\"item.msn_type == 1\" v-html=\"item.msn\"></div>\r\n <!-- 图片 -->\r\n <div class=\"img-box\" v-if=\"item.msn_type == 3\" v-viewer><img v-lazy=\"item.msn\" mode=\"widthFix\" /></div>\r\n <!-- 商品 -->\r\n <div class=\"product-box\" v-if=\"item.msn_type == 5\" v-db-click @click=\"goProduct(item)\">\r\n <img v-lazy=\"item.productInfo.image\" mode=\"widthFix\" />\r\n <div class=\"info\">\r\n <div class=\"price\"><span>￥</span>{{ item.productInfo.price }}</div>\r\n <div class=\"name line2\">{{ item.productInfo.store_name }}</div>\r\n </div>\r\n </div>\r\n <!-- 订单 -->\r\n <div class=\"order-box\" v-if=\"item.msn_type == 6\" v-db-click @click=\"goOrderDetail(item)\">\r\n <div class=\"title\">订单ID: {{ item.orderInfo.order_id }}</div>\r\n <div class=\"info\">\r\n <img v-lazy=\"item.orderInfo.cartInfo[0].productInfo.image\" />\r\n <div class=\"product-info\">\r\n <div class=\"name line2\">{{ item.orderInfo.cartInfo[0].productInfo.store_name }}</div>\r\n <div class=\"price\">¥{{ item.orderInfo.cartInfo[0].productInfo.price }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </vue-scroll>\r\n </div>\r\n <div class=\"footer-box\">\r\n <div class=\"words\" v-db-click @click=\"showWords\"><span class=\"iconfont iconhuashu1\"></span></div>\r\n <div class=\"input-box\">\r\n <el-input v-model=\"con\" placeholder=\"请输入内容\" style=\"font-size: 0.28rem\" />\r\n <span class=\"iconfont iconfasong\" v-db-click @click=\"sendText\" :class=\"{ isSend: isSend }\"></span>\r\n </div>\r\n <div class=\"emoji\" v-db-click @click=\"openBox(1)\"><span class=\"iconfont iconbiaoqing2\"></span></div>\r\n <div class=\"more\" v-db-click @click=\"openBox(2)\"><span class=\"iconfont icongengduozhankai1\"></span></div>\r\n </div>\r\n <!-- 工具 -->\r\n <div class=\"tool-wrapper\" v-if=\"isTool\">\r\n <div class=\"tool-item\">\r\n <el-upload\r\n :show-file-list=\"false\"\r\n :action=\"fileUrl\"\r\n class=\"mr10 mb10\"\r\n :before-upload=\"beforeUpload\"\r\n :data=\"uploadData\"\r\n :headers=\"header\"\r\n :multiple=\"true\"\r\n :on-success=\"handleSuccess\"\r\n accept=\"image/*\"\r\n :on-format-error=\"handleFormatError\"\r\n style=\"margin-top: 1px; display: inline-block\"\r\n >\r\n <img src=\"../static/tool-01.png\" mode=\"\" />\r\n <div>图片</div>\r\n </el-upload>\r\n </div>\r\n <div class=\"tool-item\" v-db-click @click=\"goTransfer\">\r\n <img src=\"../static/tool-02.png\" mode=\"\" />\r\n <div>转接</div>\r\n </div>\r\n <div class=\"tool-item\" v-db-click @click=\"goAdminOrder\">\r\n <img src=\"../static/tool-03.png\" mode=\"\" />\r\n <div>交易订单</div>\r\n </div>\r\n <div class=\"tool-item\" v-db-click @click=\"goodsInfo\">\r\n <img src=\"../static/tool-04.png\" mode=\"\" />\r\n <div>商品信息</div>\r\n </div>\r\n </div>\r\n <!-- 表情 -->\r\n <div class=\"banner slider-banner\" v-show=\"isSwiper\">\r\n <swiper class=\"swiper-wrapper\" ref=\"mySwiper\" :options=\"swiperOptions\">\r\n <swiper-slide v-for=\"(emojiList, index) in emojiGroup\" :key=\"index\">\r\n <i class=\"em\" :class=\"emoji\" v-for=\"emoji in emojiList\" :key=\"emoji\" v-db-click @click=\"addEmoji(emoji)\"></i>\r\n </swiper-slide>\r\n </swiper>\r\n </div>\r\n <!-- 常用语 -->\r\n <words :isWords=\"isWords\" @closeBox=\"closeBox\" @selectMsg=\"selectMsg\"></words>\r\n <!-- 转接 -->\r\n <div class=\"transfer-mask\" v-if=\"isTransfer\">\r\n <div class=\"content\" :class=\"{ on: isTransfer }\">\r\n <div class=\"title\">转接客服<span class=\"iconfont iconcha\" v-db-click @click=\"closeTransfer\"></span></div>\r\n <div class=\"list-wrapper\">\r\n <el-radio-group v-model=\"activeKF\">\r\n <el-radio class=\"list-item\" v-for=\"(item, index) in transferList\" :label=\"item.uid\" :key=\"index\">\r\n <div class=\"avatar-box\">\r\n <img v-lazy=\"item.avatar\" alt=\"\" />\r\n </div>\r\n <p class=\"nickName\">{{ item.wx_name }}</p>\r\n </el-radio>\r\n </el-radio-group>\r\n </div>\r\n <el-button class=\"btn\" v-db-click @click=\"confirm\">确定</el-button>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nvar mp3 = require('@/assets/video/notice.mp3');\r\nvar mp3 = new Audio(mp3);\r\nimport Setting from '@/setting';\r\nimport words from '../components/words';\r\nimport { Socket } from '@/libs/socket';\r\nimport util from '@/libs/util';\r\nimport emojiList from '@/utils/emoji';\r\nimport { serviceList, speeChcraft, transferList, serviceCate, serviceTransfer } from '@/api/kefu';\r\nimport { getCookies, removeCookies, setCookies } from '@/libs/util';\r\nimport { isPicUpload } from '@/utils';\r\n\r\nconst chunk = function (arr, num) {\r\n num = num * 1 || 1;\r\n var ret = [];\r\n arr.forEach(function (item, i) {\r\n if (i % num === 0) {\r\n ret.push([]);\r\n }\r\n ret[ret.length - 1].push(item);\r\n });\r\n return ret;\r\n};\r\n\r\nexport default {\r\n name: 'adminChat_index',\r\n data() {\r\n return {\r\n ops: {\r\n vuescroll: {\r\n mode: 'slide',\r\n enable: false,\r\n auto: false,\r\n autoLoadDistance: 0,\r\n pullRefresh: {\r\n enable: true,\r\n auto: false,\r\n autoLoadDistance: 0,\r\n tips: {\r\n deactive: '',\r\n active: '上拉加载更多',\r\n start: 'Loading...',\r\n beforeDeactive: ' ',\r\n },\r\n },\r\n pushLoad: {\r\n enable: false,\r\n },\r\n },\r\n bar: {\r\n background: '#393232',\r\n opacity: '.5',\r\n size: '2px',\r\n },\r\n },\r\n swiperOptions: {},\r\n status: false,\r\n loading: false,\r\n isTool: false,\r\n isSwiper: false,\r\n isWords: false,\r\n autoplay: false,\r\n circular: true,\r\n interval: 3000,\r\n duration: 500,\r\n emojiGroup: chunk(emojiList, 21),\r\n\r\n con: '',\r\n toUid: '',\r\n limit: 15,\r\n upperId: 0,\r\n chatList: [],\r\n kefuInfo: {},\r\n scrollTop: 0,\r\n active: true,\r\n isScroll: true,\r\n oldHeight: 0,\r\n selector: '',\r\n transferList: [], //转接列表\r\n isTransfer: false,\r\n uploadData: {}, // 上传参数\r\n header: {},\r\n fileUrl: '',\r\n tourist: 0,\r\n activeKF: '',\r\n };\r\n },\r\n components: {\r\n words,\r\n },\r\n computed: {\r\n isSend() {\r\n if (this.con.length == 0) {\r\n return false;\r\n } else {\r\n return true;\r\n }\r\n },\r\n records() {\r\n if (!this.chatList.length) return;\r\n return this.chatList.map((item, index) => {\r\n item.time = this.$moment(item.add_time * 1000).format('MMMDo h:mm');\r\n if (index) {\r\n if (item.add_time - this.chatList[index - 1].add_time >= 300) {\r\n item.show = true;\r\n } else {\r\n item.show = false;\r\n }\r\n } else {\r\n item.show = true;\r\n }\r\n return item;\r\n });\r\n },\r\n },\r\n created() {\r\n this.fileUrl = Setting.apiBaseURL.replace('adminapi', 'kefuapi') + '/upload';\r\n this.toUid = this.$route.query.toUid || '';\r\n this.nickname = this.$route.query.nickname || '';\r\n this.kefuInfo = JSON.parse(getCookies('kefuInfo'));\r\n Promise.all([this.getChatList(), this.getTransferList()]);\r\n },\r\n mounted() {\r\n window.document.title = `${this.$route.query.nickname || ''} - 对话详情`;\r\n // 上传头部token\r\n this.header['Authori-zation'] = 'Bearer ' + getCookies('kefu_token');\r\n let isLogin = JSON.parse(sessionStorage.getItem('wsLogin'));\r\n Socket.then((ws) => {\r\n let that = this;\r\n if (isLogin) {\r\n ws.send({\r\n data: {\r\n id: this.toUid,\r\n },\r\n type: 'to_chat',\r\n });\r\n } else {\r\n ws.send({\r\n type: 'kefu_login',\r\n data: getCookies('kefu_token'),\r\n });\r\n }\r\n // 消息接收\r\n ws.$on(['reply', 'chat'], (data) => {\r\n if (data.msn_type == 1 || data.msn_type == 2) {\r\n data.msn = this.replace_em(data.msn);\r\n }\r\n // if (data.msn_type == 5)\r\n this.chatList.push(data);\r\n\r\n this.$refs['scrollBox'].refresh();\r\n this.$nextTick(() => {\r\n this.scrollBom();\r\n });\r\n });\r\n ws.$on('reply', (data) => {\r\n // mp3.play();\r\n });\r\n ws.$on('socket_error', () => {\r\n this.$util.Tips({\r\n title: '连接失败',\r\n });\r\n });\r\n });\r\n this.$nextTick(() => {});\r\n },\r\n beforeDestroy() {\r\n Socket.then((ws) => {\r\n ws.send({\r\n data: {\r\n id: 0,\r\n },\r\n type: 'to_chat',\r\n });\r\n });\r\n },\r\n methods: {\r\n goBack() {\r\n this.$router.go(-1);\r\n },\r\n handleFormatError(file) {\r\n this.$message.error('上传图片只能是 jpg、jpg、jpeg、gif 格式!');\r\n },\r\n // 用户详情\r\n goUserInfo(item, status) {\r\n if (!status) {\r\n this.$router.push({\r\n path: `/kefu/user/index/${item.uid}/${item.type}`,\r\n });\r\n }\r\n },\r\n // 上传之前\r\n beforeUpload(file) {\r\n return isPicUpload(file);\r\n },\r\n // 上传成功\r\n handleSuccess(res, file, fileList) {\r\n if (res.status === 200) {\r\n this.$message.success(res.msg);\r\n this.sendMsg(res.data.url, 3);\r\n } else {\r\n this.$message.error(res.msg);\r\n }\r\n },\r\n // 滚动到底部\r\n scrollBom() {\r\n setTimeout((res) => {\r\n let num = parseFloat(document.getElementById('chatBox').offsetHeight);\r\n if (this.$refs['scrollBox']) {\r\n this.$refs['scrollBox'].scrollTo(\r\n {\r\n y: num,\r\n },\r\n 300,\r\n );\r\n }\r\n }, 300);\r\n },\r\n // 订单详情\r\n goOrderDetail(item) {\r\n this.$router.push({\r\n path: `/kefu/orderDetail/${item.orderInfo.id}`,\r\n });\r\n // uni.navigateTo({\r\n // url: `/pages/admin/orderDetail/index?id=${item.msn}`\r\n // })\r\n },\r\n // 底部功能区打开\r\n openBox(key) {\r\n if (key == 1) {\r\n this.isTool = false;\r\n this.isSwiper = !this.isSwiper;\r\n } else {\r\n this.isSwiper = false;\r\n this.isTool = !this.isTool;\r\n }\r\n this.$refs['scrollBox'].refresh();\r\n this.$nextTick(() => {\r\n this.scrollBom();\r\n });\r\n },\r\n showWords() {\r\n this.isWords = true;\r\n },\r\n\r\n // 转接\r\n goTransfer() {\r\n this.isTransfer = true;\r\n },\r\n // 转接关闭\r\n closeTransfer() {\r\n this.transferList.forEach((el, index) => {\r\n el.isCheck = false;\r\n });\r\n this.isTransfer = false;\r\n },\r\n // 转接确认\r\n confirm() {\r\n if (this.activeKF) {\r\n serviceTransfer({\r\n uid: this.toUid,\r\n kefuToUid: this.activeKF,\r\n })\r\n .then((res) => {\r\n this.transferList.forEach((el, index) => {\r\n el.isCheck = false;\r\n });\r\n this.$message.success(res.msg);\r\n this.isTransfer = false;\r\n })\r\n .catch((error) => {\r\n this.$message.error(error.msg);\r\n });\r\n } else {\r\n this.$message.error('请选择转接客服');\r\n }\r\n },\r\n // 商品信息\r\n goodsInfo() {\r\n this.$router.push({\r\n path: '/kefu/goods/list?toUid=' + this.toUid,\r\n });\r\n },\r\n // 表情点击\r\n addEmoji(item) {\r\n let val = `[${item}]`;\r\n this.con += val;\r\n },\r\n // 聊天表情转换\r\n replace_em(str) {\r\n str = str.replace(/\\[em-([\\s\\S]*)\\]/g, \"<span class='em em-$1'/></span>\");\r\n return str;\r\n },\r\n // 获取聊天列表\r\n getChatList() {\r\n let self = this;\r\n serviceList({\r\n limit: this.limit,\r\n uid: this.toUid,\r\n upperId: this.upperId,\r\n is_tourist: this.$route.query.is_tourist,\r\n }).then((res) => {\r\n res.data.forEach((el) => {\r\n if (el.msn_type == 1 || el.msn_type == 2) {\r\n el.msn = this.replace_em(el.msn);\r\n }\r\n });\r\n let selector = '';\r\n if (this.upperId == 0) {\r\n selector = `chat_${res.data[res.data.length - 1].id}`;\r\n } else {\r\n selector = `chat_${this.chatList[0].id}`;\r\n }\r\n this.selector = selector;\r\n this.chatList = [...res.data, ...this.chatList];\r\n this.loading = false;\r\n this.isScroll = res.data.length >= this.limit;\r\n this.$nextTick(() => {\r\n this.$emit('change', true);\r\n this.$refs['scrollBox'].refresh();\r\n if (this.upperId == 0) {\r\n setTimeout((res) => {\r\n let num = parseFloat(document.getElementById(selector).offsetTop) - 60;\r\n this.$refs['scrollBox'].scrollTo(\r\n {\r\n y: num,\r\n },\r\n 0,\r\n );\r\n }, 300);\r\n }\r\n });\r\n });\r\n },\r\n // 发送消息\r\n sendText() {\r\n if (!this.isSend) {\r\n return this.$message.error('请输入内容');\r\n }\r\n this.sendMsg(this.con, 1);\r\n this.con = '';\r\n },\r\n // ws发送\r\n sendMsg(msn, type) {\r\n let obj = {\r\n type: 'chat',\r\n data: {\r\n msn,\r\n type,\r\n to_uid: this.toUid,\r\n },\r\n };\r\n Socket.then((ws) => {\r\n ws.send(obj);\r\n });\r\n },\r\n // 图片上传\r\n uploadImg() {\r\n let self = this;\r\n self.$util.uploadImageOne('upload/image', function (res) {\r\n if (res.status == 200) {\r\n self.sendMsg(res.data.url, 3);\r\n }\r\n });\r\n },\r\n // 常用于选择\r\n selectWords(item) {\r\n this.isWords = false;\r\n this.sendMsg(item.message, 1);\r\n },\r\n // 商品详情页\r\n goProduct(item) {\r\n this.$router.push({\r\n path: '/kefu/goods/detail?goodsId=' + item.msn,\r\n });\r\n },\r\n // 管理员订单\r\n goAdminOrder() {\r\n this.$router.push({\r\n path: '/kefu/orderList/0/' + this.toUid,\r\n });\r\n },\r\n // 滚动到底部\r\n height() {\r\n let self = this;\r\n var scrollTop = 0;\r\n let info = uni.createSelectorQuery().select('.chat');\r\n setTimeout((res) => {\r\n info\r\n .boundingClientRect(function (data) {\r\n //data - 各种参数\r\n scrollTop = data.height;\r\n if (self.active) {\r\n self.scrollTop = parseInt(scrollTop) + 500;\r\n } else {\r\n self.scrollTop = parseInt(scrollTop) + 100;\r\n }\r\n })\r\n .exec();\r\n }, 1000);\r\n },\r\n // 转接列表\r\n getTransferList() {\r\n transferList({\r\n uid: this.toUid,\r\n }).then((res) => {\r\n res.data.list.forEach((item, index) => {\r\n item.isCheck = false;\r\n });\r\n this.transferList = res.data.list;\r\n });\r\n },\r\n // 关闭常用语\r\n closeBox() {\r\n this.isWords = false;\r\n },\r\n // 选择话术\r\n selectMsg(data) {\r\n this.con += data;\r\n this.isWords = false;\r\n },\r\n handleActivate(vm, refreshDom) {\r\n this.upperId = this.chatList[0].id;\r\n },\r\n handleStart(vm, refreshDom, done) {\r\n setTimeout(() => {\r\n // load finished\r\n done();\r\n }, 2000);\r\n },\r\n handleBeforeDeactivate(vm, refreshDom, done) {\r\n this.getChatList();\r\n\r\n this.$on('change', (data) => {\r\n if (data) done();\r\n });\r\n },\r\n handleDeactivate(vm, refreshDom) {\r\n let num = parseFloat(document.getElementById(this.selector).offsetTop) - 60;\r\n this.$refs['scrollBox'].scrollTo(\r\n {\r\n y: num,\r\n },\r\n 0,\r\n );\r\n },\r\n },\r\n};\r\n</script>\r\n<style>\r\nhtml,\r\nbody {\r\n font-size: 50px;\r\n}\r\n</style>\r\n<style lang=\"scss\" scoped>\r\n.head-box {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #fff;\r\n height: 45px;\r\n background: linear-gradient(85deg, #3875ea 0%, #1890fc 100%);\r\n span {\r\n position: absolute;\r\n width: 45px;\r\n height: 100%;\r\n left: 0;\r\n top: 0;\r\n text-align: center;\r\n line-height: 45px;\r\n }\r\n}\r\n.chat-box {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n // height: 100vh;\r\n background: #f0f1f2;\r\n .head-box {\r\n background: linear-gradient(85deg, #3875ea 0%, #1890fc 100%);\r\n .title-hd {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n height: 43px;\r\n padding: 0 0.3rem;\r\n color: #fff;\r\n .icon-fanhui {\r\n position: absolute;\r\n left: 0.3rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n }\r\n .icon-gengduo2 {\r\n /* #ifdef MP */\r\n position: absolute;\r\n right: 2.1rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n /* #endif */\r\n }\r\n }\r\n }\r\n .scroll-box {\r\n flex: 1;\r\n }\r\n .footer-box {\r\n display: flex;\r\n align-items: center;\r\n height: 1rem;\r\n padding: 0 0.3rem;\r\n color: rgba(0, 0, 0, 0.8);\r\n background: #f7f7f7;\r\n .words .iconfont {\r\n font-size: 0.5rem;\r\n }\r\n .input-box {\r\n display: flex;\r\n align-items: center;\r\n width: 4.92rem;\r\n height: 0.64rem;\r\n padding-right: 0.05rem;\r\n margin-left: 0.18rem;\r\n background-color: #fff;\r\n border-radius: 0.32rem;\r\n overflow: hidden;\r\n\r\n input {\r\n flex: 1;\r\n padding-left: 0.2rem;\r\n height: 100%;\r\n border: transparent !important;\r\n }\r\n ::v-deep .el-input__inner,\r\n .el-input__inner:hover,\r\n .el-input__inner:focus {\r\n border: transparent;\r\n box-shadow: none;\r\n }\r\n .iconfont {\r\n font-size: 0.5rem;\r\n color: #ccc;\r\n font-weight: normal;\r\n }\r\n .isSend {\r\n color: #3875ea;\r\n }\r\n }\r\n .emoji .iconfont {\r\n margin-left: 0.18rem;\r\n font-size: 0.5rem;\r\n }\r\n .more .iconfont {\r\n margin-left: 0.18rem;\r\n font-size: 0.5rem;\r\n }\r\n }\r\n}\r\n.tool-wrapper {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 0.45rem 0.6rem;\r\n background: #fff;\r\n font-size: 0.24rem;\r\n .tool-item {\r\n text-align: center;\r\n\r\n img {\r\n width: 1.04rem;\r\n height: 1.04rem;\r\n }\r\n }\r\n}\r\n.slider-banner {\r\n padding-bottom: 0.25rem;\r\n background: #fff;\r\n .em {\r\n display: inline-block;\r\n width: 0.5rem;\r\n height: 0.5rem;\r\n margin: 0.4rem 0 0 0.5rem;\r\n }\r\n}\r\n.words-mask {\r\n z-index: 50;\r\n position: fixed;\r\n left: 0;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.5);\r\n .content {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n top: 1.14rem;\r\n bottom: 0;\r\n display: flex;\r\n flex-direction: column;\r\n background: #fff;\r\n border-radius: 0.06rem 0.06rem 0px 0px;\r\n .title-box {\r\n padding: 0 0.3rem 0.3rem;\r\n position: relative;\r\n border-bottom: 1px solid #f5f6f9;\r\n .tab-box {\r\n position: relative;\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 0.4rem 2.2rem 0.3rem;\r\n font-size: 0.32rem;\r\n color: #9f9f9f;\r\n .on {\r\n color: #3875ea;\r\n font-weight: bold;\r\n }\r\n .right-icon {\r\n position: absolute;\r\n right: 0;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n .iconfont {\r\n margin-left: 0.2rem;\r\n font-size: 0.48rem;\r\n color: #c8cad0;\r\n }\r\n }\r\n }\r\n .input-box {\r\n display: flex;\r\n align-items: center;\r\n width: 6.9rem;\r\n height: 0.64rem;\r\n padding-right: 0.05rem;\r\n margin-left: 0.18rem;\r\n border-radius: 0.32rem;\r\n overflow: hidden;\r\n ::v-deep .el-input__inner {\r\n background: #f5f6f9;\r\n }\r\n ::v-deep .el-input__inner,\r\n .el-input__inner:hover,\r\n .el-input__inner:focus {\r\n border: transparent;\r\n box-shadow: none;\r\n }\r\n }\r\n .icon-cha1 {\r\n position: absolute;\r\n right: 0;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n }\r\n }\r\n .scroll-box {\r\n flex: 1;\r\n display: flex;\r\n overflow: hidden;\r\n .scroll-left {\r\n width: 1.76rem;\r\n height: 100%;\r\n overflow-y: scroll;\r\n -webkit-overflow-scrolling: touch;\r\n background: #f5f6f9;\r\n .left-item {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 1.09rem;\r\n color: #282828;\r\n font-size: 0.26rem;\r\n &.active {\r\n color: #3875ea;\r\n background: #fff;\r\n &:after {\r\n content: ' ';\r\n position: absolute;\r\n left: 0;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 0.06rem;\r\n height: 0.46rem;\r\n background: #3875ea;\r\n }\r\n }\r\n &.add_cate {\r\n color: #9f9f9f;\r\n font-size: 0.26rem;\r\n .iconfont {\r\n margin-right: 0.1rem;\r\n font-size: 0.24rem;\r\n }\r\n }\r\n }\r\n }\r\n .right-box {\r\n flex: 1;\r\n overflow: scroll;\r\n -webkit-overflow-scrolling: touch;\r\n }\r\n .msg-item {\r\n padding: 0.25rem 0.3rem;\r\n color: #888888;\r\n font-size: 0.28rem;\r\n .title {\r\n margin-right: 0.2rem;\r\n color: #282828;\r\n }\r\n &.add-mg {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n font-size: 0.28rem;\r\n padding: 0.15rem 0.3rem;\r\n .iconfont {\r\n font-size: 0.36rem;\r\n margin-right: 0.1rem;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n.chat-scroll-box {\r\n flex: 1;\r\n overflow: hidden;\r\n .day-box {\r\n margin-bottom: 0.2rem;\r\n font-size: 0.24rem;\r\n color: #999;\r\n text-align: center;\r\n }\r\n .chat-item {\r\n display: flex;\r\n margin-bottom: 0.36rem;\r\n font-size: 0.28rem;\r\n .avatar {\r\n width: 0.8rem;\r\n height: 0.8rem;\r\n border-radius: 50%;\r\n }\r\n .msg-box {\r\n display: flex;\r\n align-items: center;\r\n max-width: 4.52rem;\r\n margin-left: 0.22rem;\r\n padding: 0.1rem 0.24rem;\r\n background: #fff;\r\n border-radius: 0.14rem;\r\n word-break: break-all;\r\n color: #333;\r\n }\r\n .img-box {\r\n width: 2.7rem;\r\n margin-left: 0.22rem;\r\n\r\n img {\r\n width: 2.7rem;\r\n border-radius: 6px;\r\n }\r\n }\r\n .product-box {\r\n width: 4.52rem;\r\n background-color: #fff;\r\n border-radius: 0.14rem;\r\n overflow: hidden;\r\n margin-left: 0.22rem;\r\n\r\n img {\r\n width: 4.52rem;\r\n }\r\n .info {\r\n padding: 0.16rem 0.26rem;\r\n .price {\r\n font-size: 0.36rem;\r\n color: #f74c31;\r\n\r\n text {\r\n font-size: 0.28rem;\r\n }\r\n }\r\n }\r\n }\r\n .order-box {\r\n width: 4.52rem;\r\n margin-left: 0.22rem;\r\n background-color: #fff;\r\n border-radius: 0.14rem;\r\n .title {\r\n padding: 0.15rem 0.2rem;\r\n font-size: 0.26rem;\r\n color: #282828;\r\n border-bottom: 1px solid #eceff8;\r\n }\r\n .info {\r\n display: flex;\r\n padding: 0.2rem;\r\n\r\n img {\r\n width: 1.24rem;\r\n height: 1.24rem;\r\n border-radius: 0.06rem;\r\n }\r\n .product-info {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n margin-left: 0.16rem;\r\n .name {\r\n font-size: 0.26rem;\r\n }\r\n .price {\r\n font-size: 0.3rem;\r\n color: #f74c31;\r\n }\r\n }\r\n }\r\n }\r\n &.right-box {\r\n flex-direction: row-reverse;\r\n .msg-box {\r\n margin-left: 0;\r\n margin-right: 0.22rem;\r\n background-color: #9cec60;\r\n }\r\n .img-box {\r\n margin-left: 0;\r\n margin-right: 0.22rem;\r\n }\r\n .product-box {\r\n margin-left: 0;\r\n margin-right: 0.22rem;\r\n }\r\n .order-box {\r\n margin-left: 0;\r\n margin-right: 0.22rem;\r\n }\r\n }\r\n .em {\r\n margin: 0;\r\n }\r\n }\r\n}\r\n.transfer-mask {\r\n z-index: 30;\r\n position: fixed;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.5);\r\n .content {\r\n position: absolute;\r\n left: 0;\r\n bottom: 0;\r\n transform: translateY(100%);\r\n top: 2.5rem;\r\n right: 0;\r\n display: flex;\r\n flex-direction: column;\r\n background: #fff;\r\n border-radius: 0.16rem 0.16rem 0px 0px;\r\n &.on {\r\n animation: up 0.2s linear;\r\n animation-fill-mode: forwards;\r\n }\r\n .title {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 1.1rem;\r\n font-size: 0.32rem;\r\n font-weight: bold;\r\n color: #282828;\r\n .iconfont {\r\n position: absolute;\r\n right: 0.3rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #c8cad0;\r\n font-size: 0.44rem;\r\n }\r\n }\r\n .list-wrapper {\r\n flex: 1;\r\n padding-left: 0.3rem;\r\n overflow-y: scroll;\r\n -webkit-overflow-scrolling: touch;\r\n .list-item {\r\n display: flex;\r\n align-items: center;\r\n padding: 0.16rem 0;\r\n border-bottom: 1px solid #f0f2f7;\r\n .check-box {\r\n width: 0.72rem;\r\n }\r\n .avatar-box img {\r\n width: 0.9rem;\r\n height: 0.9rem;\r\n border-radius: 0.06rem;\r\n }\r\n .nickName {\r\n margin-left: 0.28rem;\r\n color: #282828;\r\n font-size: 0.3rem;\r\n font-weight: bold;\r\n }\r\n }\r\n }\r\n .btn {\r\n width: 6.9rem;\r\n height: 0.86rem;\r\n margin: 0.5rem auto;\r\n color: #fff;\r\n background: #3875ea;\r\n font-size: 0.3rem;\r\n border-radius: 0.43rem !important;\r\n }\r\n }\r\n}\r\n</style>\r\n<style>\r\n@keyframes up {\r\n 0% {\r\n transform: translateY(100%);\r\n }\r\n 100% {\r\n transform: translateY(0);\r\n }\r\n}\r\n.emoji-outer {\r\n position: absolute;\r\n right: 0.5rem;\r\n bottom: 0.3rem;\r\n width: 0.5rem;\r\n height: 0.5rem;\r\n}\r\n</style>\r\n"]}]}
|
