| 1 |
- {"remainingRequest":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\pages\\kefu\\pc\\components\\baseHeader.vue?vue&type=style&index=0&id=3e3f8d8d&lang=scss&scoped=true","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\pages\\kefu\\pc\\components\\baseHeader.vue","mtime":1761185180102},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQouYmFzZS1oZWFkZXIgew0KICB6LWluZGV4OiA5OTsNCiAgcG9zaXRpb246IHJlbGF0aXZlOw0KICBkaXNwbGF5OiBmbGV4Ow0KICBhbGlnbi1pdGVtczogY2VudGVyOw0KICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47DQogIGhlaWdodDogNjZweDsNCiAgcGFkZGluZzogMCAwIDAgMTVweDsNCiAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KDI3MGRlZywgIzE4OTBmZiAwJSwgIzM4NzVlYSAxMDAlKTsNCiAgY29sb3I6ICNmZmY7DQogIGZsZXgtc2hyaW5rOiAwOw0KICAubGVmdC1oZWFkZXItd3JhcHBlciB7DQogICAgcG9zaXRpb246IHJlbGF0aXZlOw0KICAgIGRpc3BsYXk6IGZsZXg7DQogICAgZmxleDogMTsNCiAgICBhbGlnbi1pdGVtczogY2VudGVyOw0KICAgIC5zZWFyY2hfYm94IHsNCiAgICAgIHdpZHRoOiAyOTVweDsNCiAgICAgIGJvcmRlci1yYWRpdXM6IDE3cHg7DQogICAgICBvdmVyZmxvdzogaGlkZGVuOw0KICAgIH0NCiAgICAudXNlcl9pbmZvIHsNCiAgICAgIGRpc3BsYXk6IGZsZXg7DQogICAgICBhbGlnbi1pdGVtczogY2VudGVyOw0KICAgICAgbWFyZ2luLWxlZnQ6IDMwcHg7DQoNCiAgICAgIGltZyB7DQogICAgICAgIHdpZHRoOiA0MHB4Ow0KICAgICAgICBoZWlnaHQ6IDQwcHg7DQogICAgICAgIG1hcmdpbi1yaWdodDogMTBweDsNCiAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlOw0KICAgICAgfQ0KDQogICAgICBzcGFuIHsNCiAgICAgICAgZm9udC1zaXplOiAxNnB4Ow0KICAgICAgfQ0KICAgICAgLnN0YXR1cy1ib3ggew0KICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7DQogICAgICAgIGN1cnNvcjogcG9pbnRlcjsNCiAgICAgIH0NCiAgICAgIC5zdGF0dXMgew0KICAgICAgICBkaXNwbGF5OiBmbGV4Ow0KICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyOw0KICAgICAgICBwYWRkaW5nOiAwIDEwcHg7DQogICAgICAgIG1hcmdpbi1sZWZ0OiA1cHg7DQogICAgICAgIGJhY2tncm91bmQ6ICNlYWZmZWI7DQogICAgICAgIGNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuNjUpOw0KICAgICAgICBib3JkZXItcmFkaXVzOiA5cHg7DQogICAgICAgIC5kb3Qgew0KICAgICAgICAgIHdpZHRoOiA2cHg7DQogICAgICAgICAgaGVpZ2h0OiA2cHg7DQogICAgICAgICAgbWFyZ2luLXJpZ2h0OiAzcHg7DQogICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlOw0KICAgICAgICAgIGJhY2tncm91bmQ6ICM0OGQ0NTI7DQogICAgICAgIH0NCiAgICAgICAgJi5vZmYgew0KICAgICAgICAgIGJhY2tncm91bmQ6ICNmM2YzZjM7DQogICAgICAgICAgLmRvdCB7DQogICAgICAgICAgICBiYWNrZ3JvdW5kOiAjOTk5OTk5Ow0KICAgICAgICAgIH0NCiAgICAgICAgfQ0KICAgICAgfQ0KICAgICAgLm9ubGluZS1kb3duIHsNCiAgICAgICAgei1pbmRleDogNTA7DQogICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgICAgICAgbGVmdDogMDsNCiAgICAgICAgYm90dG9tOiAtNzBweDsNCiAgICAgICAgd2lkdGg6IDg2cHg7DQogICAgICAgIGJhY2tncm91bmQ6ICNmZmY7DQogICAgICAgIGNvbG9yOiAjMzMzOw0KICAgICAgICBib3gtc2hhZG93OiAwcHggMnB4IDRweCAwcHggcmdiYSgwLCAwLCAwLCAwLjA4KTsNCiAgICAgICAgYm9yZGVyLXJhZGl1czogNXB4Ow0KICAgICAgICAuaXRlbSB7DQogICAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlOw0KICAgICAgICAgIGRpc3BsYXk6IGZsZXg7DQogICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAgICAgICAgICBwYWRkaW5nOiA3cHggMTBweCA3cHggMzBweDsNCiAgICAgICAgICBjdXJzb3I6IHBvaW50ZXI7DQogICAgICAgICAgaSB7DQogICAgICAgICAgICB3aWR0aDogMTBweDsNCiAgICAgICAgICAgIGhlaWdodDogMTBweDsNCiAgICAgICAgICAgIG1hcmdpbi1yaWdodDogOHB4Ow0KICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlOw0KICAgICAgICAgICAgYmFja2dyb3VuZDogIzk5OTk5OTsNCiAgICAgICAgICAgICYuZ3JlZW4gew0KICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiAjNDhkNDUyOw0KICAgICAgICAgICAgfQ0KICAgICAgICAgIH0NCiAgICAgICAgICAuaWNvbmZvbnQgew0KICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlOw0KICAgICAgICAgICAgbGVmdDogMTBweDsNCiAgICAgICAgICAgIHRvcDogNTAlOw0KICAgICAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC01MCUpOw0KICAgICAgICAgICAgZm9udC1zaXplOiAxMnB4Ow0KICAgICAgICAgIH0NCiAgICAgICAgfQ0KICAgICAgfQ0KICAgIH0NCiAgICAub3V0LWJ0biB7DQogICAgICBwb3NpdGlvbjogYWJzb2x1dGU7DQogICAgICByaWdodDogMzBweDsNCiAgICAgIHRvcDogNTAlOw0KICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC01MCUpOw0KICAgICAgd2lkdGg6IDg2cHg7DQogICAgICBoZWlnaHQ6IDI2cHg7DQogICAgICBsaW5lLWhlaWdodDogMjhweDsNCiAgICAgIHRleHQtYWxpZ246IGNlbnRlcjsNCiAgICAgIGJhY2tncm91bmQ6ICNmZmZmZmY7DQogICAgICBib3JkZXItcmFkaXVzOiAxNnB4Ow0KICAgICAgY29sb3I6ICMzODc1ZWE7DQogICAgICBmb250LXNpemU6IDEzcHg7DQogICAgICBjdXJzb3I6IHBvaW50ZXI7DQogICAgfQ0KICB9DQogIC5yaWdodC1tZW51IHsNCiAgICBkaXNwbGF5OiBmbGV4Ow0KICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQogICAgLm1lbnUtaXRlbSB7DQogICAgICBwb3NpdGlvbjogcmVsYXRpdmU7DQogICAgICBtYXJnaW4tcmlnaHQ6IDMwcHg7DQogICAgICBmb250LXNpemU6IDE0cHg7DQogICAgICBmb250LXdlaWdodDogNDAwOw0KICAgICAgY3Vyc29yOiBwb2ludGVyOw0KICAgICAgJi5vbiB7DQogICAgICAgIGZvbnQtd2VpZ2h0OiA2MDA7DQogICAgICAgICY6OmFmdGVyIHsNCiAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7DQogICAgICAgICAgbGVmdDogMDsNCiAgICAgICAgICBib3R0b206IC0yMnB4Ow0KICAgICAgICAgIGNvbnRlbnQ6ICcnOw0KICAgICAgICAgIHdpZHRoOiAxMDAlOw0KICAgICAgICAgIGhlaWdodDogMnB4Ow0KICAgICAgICAgIGJhY2tncm91bmQ6ICNmZmY7DQogICAgICAgIH0NCiAgICAgIH0NCiAgICB9DQogIH0NCn0NCg=="},{"version":3,"sources":["baseHeader.vue"],"names":[],"mappings":";AAwIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"baseHeader.vue","sourceRoot":"src/pages/kefu/pc/components","sourcesContent":["<template>\r\n <div class=\"base-header\">\r\n <div class=\"left-header-wrapper\">\r\n <el-input\r\n v-model=\"value\"\r\n class=\"search_box\"\r\n prefix=\"ios-search\"\r\n placeholder=\"搜索用户名称\"\r\n @change=\"bindSearch\"\r\n />\r\n <div class=\"user_info\">\r\n <img v-lazy=\"kefuInfo.avatar\" alt=\"\" />\r\n <span>{{ kefuInfo.nickname }}</span>\r\n <div class=\"status-box\">\r\n <div class=\"status\" :class=\"online ? 'on' : 'off'\" v-db-click @click.stop=\"setOnline\">\r\n <span class=\"dot\"></span>\r\n {{ online ? '在线' : '下线' }}\r\n </div>\r\n\r\n <div class=\"online-down\" v-show=\"isOnline\">\r\n <div class=\"item\" v-db-click @click.stop=\"changeOnline(1)\">\r\n <span class=\"iconfont iconduihao\" v-if=\"online\"></span><i class=\"green\"></i>在线\r\n </div>\r\n <div class=\"item\" v-db-click @click.stop=\"changeOnline(0)\">\r\n <span class=\"iconfont iconduihao\" v-if=\"!online\"></span><i></i>下线\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"out-btn\" v-db-click @click.stop=\"outLogin\">退出登录</div>\r\n </div>\r\n <div class=\"right-menu\">\r\n <div\r\n class=\"menu-item\"\r\n :class=\"{ on: index == curIndex }\"\r\n v-for=\"(item, index) in menuList\"\r\n :key=\"index\"\r\n v-db-click\r\n @click.stop=\"selectTab(item)\"\r\n >\r\n {{ item.title }}\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { mapState, mapActions } from 'vuex';\r\nimport bus from '@/utils/bus';\r\nexport default {\r\n name: 'baseHeader',\r\n props: {\r\n kefuInfo: {\r\n type: Object,\r\n default: function () {\r\n return {};\r\n },\r\n },\r\n online: {\r\n type: Boolean | Number,\r\n default: true,\r\n },\r\n },\r\n computed: {},\r\n data() {\r\n return {\r\n menuList: [\r\n {\r\n key: 0,\r\n title: '客户信息',\r\n },\r\n {\r\n key: 1,\r\n title: '交易订单',\r\n },\r\n {\r\n key: 2,\r\n title: '商品信息',\r\n },\r\n ],\r\n curIndex: 0,\r\n isOnline: false,\r\n value: '',\r\n };\r\n },\r\n mounted() {\r\n document.addEventListener('click', () => {\r\n this.isOnline = false;\r\n });\r\n },\r\n methods: {\r\n ...mapActions('kefu/', ['logout', 'logoutKefu']),\r\n selectTab(item) {\r\n this.curIndex = item.key;\r\n this.bus.$emit('selectRightMenu', this.curIndex);\r\n },\r\n setOnline() {\r\n this.isOnline = !this.isOnline;\r\n },\r\n changeOnline(type) {\r\n this.$emit('setOnline', type);\r\n this.isOnline = false;\r\n },\r\n // 退出登录\r\n outLogin() {\r\n let self = this;\r\n this.$msgbox({\r\n title: '退出登录确认',\r\n message: '您确定退出登录当前账户吗？打开的标签页和个人设置将会保存。',\r\n showCancelButton: true,\r\n cancelButtonText: '取消',\r\n confirmButtonText: '确认',\r\n iconClass: 'el-icon-warning',\r\n confirmButtonClass: 'btn-custom-cancel',\r\n })\r\n .then(() => {\r\n self.logoutKefu({\r\n confirm: false,\r\n vm: self,\r\n });\r\n })\r\n .catch(() => {});\r\n },\r\n // 搜索\r\n bindSearch(e) {\r\n this.$emit('search', e);\r\n },\r\n // inputChange\r\n inputChange(e) {\r\n this.bus.$emit('change', e);\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.base-header {\r\n z-index: 99;\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n height: 66px;\r\n padding: 0 0 0 15px;\r\n background: linear-gradient(270deg, #1890ff 0%, #3875ea 100%);\r\n color: #fff;\r\n flex-shrink: 0;\r\n .left-header-wrapper {\r\n position: relative;\r\n display: flex;\r\n flex: 1;\r\n align-items: center;\r\n .search_box {\r\n width: 295px;\r\n border-radius: 17px;\r\n overflow: hidden;\r\n }\r\n .user_info {\r\n display: flex;\r\n align-items: center;\r\n margin-left: 30px;\r\n\r\n img {\r\n width: 40px;\r\n height: 40px;\r\n margin-right: 10px;\r\n border-radius: 50%;\r\n }\r\n\r\n span {\r\n font-size: 16px;\r\n }\r\n .status-box {\r\n position: relative;\r\n cursor: pointer;\r\n }\r\n .status {\r\n display: flex;\r\n align-items: center;\r\n padding: 0 10px;\r\n margin-left: 5px;\r\n background: #eaffeb;\r\n color: rgba(0, 0, 0, 0.65);\r\n border-radius: 9px;\r\n .dot {\r\n width: 6px;\r\n height: 6px;\r\n margin-right: 3px;\r\n border-radius: 50%;\r\n background: #48d452;\r\n }\r\n &.off {\r\n background: #f3f3f3;\r\n .dot {\r\n background: #999999;\r\n }\r\n }\r\n }\r\n .online-down {\r\n z-index: 50;\r\n position: absolute;\r\n left: 0;\r\n bottom: -70px;\r\n width: 86px;\r\n background: #fff;\r\n color: #333;\r\n box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);\r\n border-radius: 5px;\r\n .item {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n padding: 7px 10px 7px 30px;\r\n cursor: pointer;\r\n i {\r\n width: 10px;\r\n height: 10px;\r\n margin-right: 8px;\r\n border-radius: 50%;\r\n background: #999999;\r\n &.green {\r\n background: #48d452;\r\n }\r\n }\r\n .iconfont {\r\n position: absolute;\r\n left: 10px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n font-size: 12px;\r\n }\r\n }\r\n }\r\n }\r\n .out-btn {\r\n position: absolute;\r\n right: 30px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 86px;\r\n height: 26px;\r\n line-height: 28px;\r\n text-align: center;\r\n background: #ffffff;\r\n border-radius: 16px;\r\n color: #3875ea;\r\n font-size: 13px;\r\n cursor: pointer;\r\n }\r\n }\r\n .right-menu {\r\n display: flex;\r\n align-items: center;\r\n .menu-item {\r\n position: relative;\r\n margin-right: 30px;\r\n font-size: 14px;\r\n font-weight: 400;\r\n cursor: pointer;\r\n &.on {\r\n font-weight: 600;\r\n &::after {\r\n position: absolute;\r\n left: 0;\r\n bottom: -22px;\r\n content: '';\r\n width: 100%;\r\n height: 2px;\r\n background: #fff;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n</style>\r\n"]}]}
|
