| 1 |
- {"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\kefu\\index.vue?vue&type=style&index=0&id=6f59cb20&lang=scss&scoped=true","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\kefu\\index.vue","mtime":1761614939021},{"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\\sass-loader\\dist\\cjs.js","mtime":1761614936391},{"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:DQoucGFnZS1hY2NvdW50IHsNCiAgZGlzcGxheTogZmxleDsNCiAgd2lkdGg6IDEwMCU7DQogIGJhY2tncm91bmQtaW1hZ2U6IHVybCgnfkAvYXNzZXRzL2ltYWdlcy9rZmJnXzIuanBnJyk7DQogIGJhY2tncm91bmQtc2l6ZTogY292ZXI7DQogIGJhY2tncm91bmQtcG9zaXRpb246IGNlbnRlcjsNCiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQogIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQogIGhlaWdodDogMTAwdmg7DQogIG92ZXJmbG93OiBhdXRvOw0KICAuY29udGVudCB7DQogICAgaGVpZ2h0OiA0MDBweDsNCiAgICBtYXJnaW4tcmlnaHQ6IDEwMHB4Ow0KICAgIC5kZXNjIHsNCiAgICAgIGNvbG9yOiAjZmZmOw0KICAgICAgLnRpdCB7DQogICAgICAgIGZvbnQtc2l6ZTogNDBweDsNCiAgICAgICAgZm9udC13ZWlnaHQ6IDYwMDsNCiAgICAgIH0NCiAgICAgIC5rZWZ1IHsNCiAgICAgICAgbWFyZ2luLXRvcDogMzBweDsNCiAgICAgICAgZm9udC13ZWlnaHQ6IDUwMDsNCiAgICAgICAgZm9udC1zaXplOiAyMHB4Ow0KICAgICAgfQ0KICAgIH0NCg0KICAgIGltZyB7DQogICAgICB3aWR0aDogMzYwcHg7DQogICAgICBtYXJnaW4tbGVmdDogLTEwMHB4Ow0KICAgIH0NCiAgfQ0KfQ0KLmNvZGUtYm94IHsNCiAgcG9zaXRpb246IHJlbGF0aXZlOw0KICBkaXNwbGF5OiBmbGV4Ow0KICBhbGlnbi1pdGVtczogY2VudGVyOw0KICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsNCiAgLnFyY29kZSB7DQogICAgZGlzcGxheTogZmxleDsNCiAgICBhbGlnbi1pdGVtczogY2VudGVyOw0KICAgIGp1c3RpZnktY29udGVudDogY2VudGVyOw0KICAgIHdpZHRoOiAxODBweDsNCiAgICBoZWlnaHQ6IDE4MHB4Ow0KICAgIGJvcmRlcjogMXB4IHNvbGlkICNlNWU1ZTY7DQogIH0NCiAgLnJ4cGlyZWQtYm94IHsNCiAgICBkaXNwbGF5OiBmbGV4Ow0KICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47DQogICAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsNCiAgICBwb3NpdGlvbjogYWJzb2x1dGU7DQogICAgbGVmdDogNTAlOw0KICAgIHRvcDogNTAlOw0KICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC01MCUpOw0KICAgIHdpZHRoOiAxNjBweDsNCiAgICBoZWlnaHQ6IDE2MHB4Ow0KICAgIGJhY2tncm91bmQ6IHJnYmEoMCwgMCwgMCwgMC42KTsNCg0KICAgIHAgew0KICAgICAgbWFyZ2luLWJvdHRvbTogMTBweDsNCiAgICAgIGZvbnQtc2l6ZTogMTVweDsNCiAgICAgIGNvbG9yOiAjZmZmOw0KICAgIH0NCiAgfQ0KfQ0KLnBhZ2UtYWNjb3VudC10b3AtbG9nbyB7DQogIGNvbG9yOiAjMDAwMDAwOw0KICBmb250LXNpemU6IDIxcHg7DQp9DQoud3JhcHBlci1ib3ggew0KICBkaXNwbGF5OiBmbGV4Ow0KICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOw0KICBoZWlnaHQ6IDEwMHZoOw0KICAuZm9vdC1ib3ggew0KICAgIHBhZGRpbmc6IDIwcHggMjBweDsNCiAgICBmb250LXNpemU6IDE0cHg7DQogICAgY29sb3I6ICM2NjY2NjY7DQogICAgdGV4dC1hbGlnbjogcmlnaHQ7DQogICAgYm94LXNpemluZzogYm9yZGVyLWJveDsNCg0KICAgIGEgew0KICAgICAgbWFyZ2luLWxlZnQ6IDA7DQogICAgICBjb2xvcjogIzY2NjY2NjsNCiAgICB9DQogIH0NCn0NCi5wYWdlLWFjY291bnQgew0KICBkaXNwbGF5OiBmbGV4Ow0KICBmbGV4OiAxOw0KfQ0KLnBhZ2UtYWNjb3VudCAuY29kZSB7DQogIGRpc3BsYXk6IGZsZXg7DQogIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQogIGp1c3RpZnktY29udGVudDogY2VudGVyOw0KfQ0KLnBhZ2UtYWNjb3VudCAuY29kZSAucGljdHJ1ZSB7DQogIGhlaWdodDogNDBweDsNCn0NCi5zd2lwZXJQcm9zcyB7DQogIGJvcmRlci1yYWRpdXM6IDZweCAwcHggMHB4IDZweDsNCn0NCi5zd2lwZXJQcm9zcywNCi5zd2lwZXJQaWMsDQouc3dpcGVyUGljIGltZyB7DQogIHdpZHRoOiA1MTBweDsNCiAgaGVpZ2h0OiAxMDAlOw0KfQ0KLnN3aXBlclBpYyBpbWcgew0KICB3aWR0aDogMTAwJTsNCiAgaGVpZ2h0OiAxMDAlOw0KfQ0KLmNvbnRhaW5lciB7DQogIGhlaWdodDogNDAwcHggIWltcG9ydGFudDsNCiAgcGFkZGluZzogMCAhaW1wb3J0YW50Ow0KICAvKiBvdmVyZmxvdzogaGlkZGVuOyAqLw0KICBib3JkZXItcmFkaXVzOiA2cHg7DQogIHotaW5kZXg6IDE7DQogIGRpc3BsYXk6IGZsZXg7DQp9DQouY29udGFpbmVyU2FtbGwgew0KICB3aWR0aDogMzg0cHggIWltcG9ydGFudDsNCg0KICBiYWNrZ3JvdW5kOiAjZmZmICFpbXBvcnRhbnQ7DQp9DQouY29udGFpbmVyQmlnIHsNCiAgd2lkdGg6IDkwJTsNCiAgcGFkZGluZy1ib3R0b206IDIwcHg7DQogIG1hcmdpbi10b3A6IDg0cHg7DQogIGJhY2tncm91bmQ6ICNmN2Y3ZjcgIWltcG9ydGFudDsNCiAgaGVpZ2h0OiBhdXRvICFpbXBvcnRhbnQ7DQogIGJveC1zaGFkb3c6IDBweCAzcHggMjBweCByZ2JhKDAsIDIwLCA0MSwgMC4wNik7DQp9DQouaW5kZXhfZnJvbSB7DQogIHBvc2l0aW9uOiByZWxhdGl2ZTsNCiAgcGFkZGluZzogNDBweCA0MHB4IDMycHggNDBweDsNCiAgaGVpZ2h0OiA0MDBweDsNCiAgd2lkdGg6IDEwMCU7DQogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7DQp9DQouY29udGFpbmVyQmlnIC5pbmRleF9mcm9tIHsNCiAgcGFkZGluZzogMjBweDsNCiAgaGVpZ2h0OiBhdXRvICFpbXBvcnRhbnQ7DQp9DQouaW5kZXhfZnJvbSAucWhfYm94IHsNCiAgcG9zaXRpb246IGFic29sdXRlOw0KICByaWdodDogMTJweDsNCiAgdG9wOiAwOw0KICBjdXJzb3I6IHBvaW50ZXI7DQogIC5pY29uZm9udCB7DQogICAgY29sb3I6ICMyNjViZWQ7DQogICAgZm9udC1zaXplOiAzNnB4Ow0KICB9DQp9DQoucGFnZS1hY2NvdW50LXRvcCB7DQogIHBhZGRpbmc6IDIwcHggMCA1MHB4ICFpbXBvcnRhbnQ7DQogIGJveC1zaXppbmc6IGJvcmRlci1ib3ggIWltcG9ydGFudDsNCiAgZGlzcGxheTogZmxleDsNCiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQp9DQoucGFnZS1hY2NvdW50LWNvbnRhaW5lciB7DQogIGJvcmRlci1yYWRpdXM6IDBweCA2cHggNnB4IDBweDsNCn0NCi5idG4gew0KICB3aWR0aDogMTAwJTsNCiAgYmFja2dyb3VuZDogIzI2NWJlZDsNCn0NCi5jYXB0Y2hhQm94IHsNCiAgd2lkdGg6IDMxMHB4Ow0KfQ0KDQppbnB1dCB7DQogIGRpc3BsYXk6IGJsb2NrOw0KICB3aWR0aDogMjkwcHg7DQogIGxpbmUtaGVpZ2h0OiA0MHB4Ow0KICBtYXJnaW46IDEwcHggMDsNCiAgcGFkZGluZzogMCAxMHB4Ow0KICBvdXRsaW5lOiBub25lOw0KICBib3JkZXI6IDFweCBzb2xpZCAjYzhjY2NmOw0KICBib3JkZXItcmFkaXVzOiA0cHg7DQogIGNvbG9yOiAjNmE2Zjc3Ow0KfQ0KDQojbXNnIHsNCiAgd2lkdGg6IDEwMCU7DQogIGxpbmUtaGVpZ2h0OiA0MHB4Ow0KICBmb250LXNpemU6IDE0cHg7DQogIHRleHQtYWxpZ246IGNlbnRlcjsNCn0NCg0KYTpsaW5rLA0KYTp2aXNpdGVkLA0KYTpob3ZlciwNCmE6YWN0aXZlIHsNCiAgbWFyZ2luLWxlZnQ6IDEwMHB4Ow0KICBjb2xvcjogIzAzNjZkNjsNCn0NCi5pbmRleF9mcm9tIDo6di1kZWVwIC5pdnUtaW5wdXQtbGFyZ2Ugew0KICBmb250LXNpemU6IDE0cHggIWltcG9ydGFudDsNCn0NCg=="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAmTA;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;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;;AAEA;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;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;;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;;AAEA;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","file":"index.vue","sourceRoot":"src/pages/kefu","sourcesContent":["<template>\r\n <div class=\"wrapper-box\">\r\n <div class=\"page-account kf\">\r\n <div class=\"content\">\r\n <img :src=\"copyrightImg\" alt=\"\" />\r\n <div class=\"desc\">\r\n <p class=\"tit\">让客户服务如此简单</p>\r\n <p class=\"kefu\">专业客服系统<br />助力企业打造一流的服务体验</p>\r\n </div>\r\n </div>\r\n <div class=\"container\" :class=\"[fullWidth > 768 ? 'containerSamll' : 'containerBig']\">\r\n <div class=\"index_from page-account-container\">\r\n <div :style=\"{ display: !loginType ? 'block' : 'none' }\">\r\n <div class=\"page-account-top\">\r\n <div class=\"page-account-top-logo\">客服登录</div>\r\n </div>\r\n <el-form ref=\"formInline\" :model=\"formInline\" :rules=\"ruleInline\" @keyup.enter=\"handleSubmit('formInline')\">\r\n <el-form-item class=\"mb20\" prop=\"username\">\r\n <el-input type=\"text\" v-model=\"formInline.username\" placeholder=\"请输入用户名\" size=\"large\" />\r\n </el-form-item>\r\n <el-form-item class=\"mb20\" prop=\"password\">\r\n <el-input type=\"password\" v-model=\"formInline.password\" placeholder=\"请输入密码\" size=\"large\" />\r\n </el-form-item>\r\n <el-form-item>\r\n <el-button type=\"primary\" size=\"large\" v-db-click @click=\"handleSubmit('formInline')\" class=\"btn\"\r\n >登录\r\n </el-button>\r\n </el-form-item>\r\n </el-form>\r\n <div class=\"qh_box\" v-if=\"!isMobile\" v-db-click @click=\"bindScan\">\r\n <span class=\"iconfont iconerweima2\"></span>\r\n </div>\r\n </div>\r\n <div :style=\"{ display: loginType ? 'block' : 'none' }\">\r\n <div class=\"page-account-top\">\r\n <div class=\"page-account-top-logo\">微信扫码登录</div>\r\n </div>\r\n <div class=\"code-box\">\r\n <div class=\"qrcode\" ref=\"qrCodeUrl\"></div>\r\n <div class=\"rxpired-box\" v-show=\"rxpired\">\r\n <p>已过期</p>\r\n <el-button type=\"primary\" v-db-click @click=\"bindRefresh\">点击刷新</el-button>\r\n </div>\r\n </div>\r\n <div class=\"qh_box\" v-db-click @click=\"loginType = 0\"><span class=\"iconfont iconzhanghaomima\"></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"foot-box\" v-if=\"copyright\">{{ copyright }}</div>\r\n <div class=\"foot-box\" v-else>\r\n Copyright © 2014-2025 <a href=\"https://www.crmeb.com\" target=\"_blank\">{{ version }}</a>\r\n </div>\r\n </div>\r\n</template>\r\n<script>\r\nimport { AccountLogin, loginInfoApi, getSanCodeKey, scanStatus, kefuConfig } from '@/api/kefu';\r\nimport mixins from '../account/mixins';\r\nimport Setting from '@/setting';\r\nimport util from '@/libs/util';\r\nimport QRCode from 'qrcodejs2';\r\nimport { getCookies, removeCookies, setCookies } from '@/libs/util';\r\nexport default {\r\n mixins: [mixins],\r\n data() {\r\n return {\r\n fullWidth: document.documentElement.clientWidth,\r\n swiperOption: {\r\n pagination: '.swiper-pagination',\r\n autoplay: true,\r\n },\r\n modals: false,\r\n autoLogin: true,\r\n imgcode: '',\r\n formInline: {\r\n username: '',\r\n password: '',\r\n code: '',\r\n },\r\n ruleInline: {\r\n username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],\r\n password: [{ required: true, message: '请输入密码', trigger: 'blur' }],\r\n code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],\r\n },\r\n errorNum: 0,\r\n jigsaw: null,\r\n login_logo: '',\r\n swiperList: [],\r\n defaultSwiperList: require('@/assets/images/sw.jpg'),\r\n loginType: 0, // 0 账号 1 扫码\r\n codeKey: '',\r\n scanTime: '',\r\n rxpired: false, // 扫码是否过期\r\n isMobile: false,\r\n version: '', //版本号\r\n isScan: false,\r\n timeNum: 0,\r\n copyright: '',\r\n copyrightImg: require('@/assets/images/logo-dark.png'),\r\n };\r\n },\r\n created() {\r\n kefuConfig().then((res) => {\r\n this.version = res.data.version;\r\n this.copyright = res.data.copyright;\r\n if (res.data.site_name) {\r\n document.title = res.data.site_name;\r\n }\r\n if (res.data.copyrightImg) {\r\n this.copyrightImg = res.data.copyrightImg;\r\n }\r\n });\r\n this.isMobile = this.$store.state.media.isMobile;\r\n var _this = this;\r\n top != window && (top.location.href = location.href);\r\n document.onkeydown = function (e) {\r\n if (_this.$route.name === 'login') {\r\n let key = window.event.keyCode;\r\n if (key === 13) {\r\n _this.handleSubmit('formInline');\r\n }\r\n }\r\n };\r\n window.addEventListener('resize', this.handleResize);\r\n },\r\n watch: {\r\n fullWidth(val) {\r\n // 为了避免频繁触发resize函数导致页面卡顿，使用定时器\r\n if (!this.timer) {\r\n // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth\r\n this.screenWidth = val;\r\n this.timer = true;\r\n let that = this;\r\n setTimeout(function () {\r\n // 打印screenWidth变化的值\r\n that.timer = false;\r\n }, 400);\r\n }\r\n },\r\n $route(n) {\r\n this.captchas();\r\n },\r\n },\r\n mounted: function () {\r\n this.$nextTick(() => {});\r\n\r\n this.captchas();\r\n },\r\n methods: {\r\n // 切换扫码\r\n bindScan() {\r\n if (!this.isScan) {\r\n this.isScan = true;\r\n this.getSanCodeKey();\r\n }\r\n this.loginType = 1;\r\n },\r\n // 生成二维码\r\n creatQrCode() {\r\n let url = `${window.location.protocol}//${window.location.host}/pages/users/scan_login/index?key=${this.codeKey}`;\r\n var qrcode = new QRCode(this.$refs.qrCodeUrl, {\r\n text: url, // 需要转换为二维码的内容\r\n width: 160,\r\n height: 160,\r\n colorDark: '#000000',\r\n colorLight: '#ffffff',\r\n correctLevel: QRCode.CorrectLevel.H,\r\n });\r\n },\r\n // 关闭模态框\r\n closeModel() {\r\n AccountLogin({\r\n account: this.formInline.username,\r\n password: this.formInline.password,\r\n imgcode: this.formInline.code,\r\n })\r\n .then(async (res) => {\r\n let expires = this.getExpiresTime(res.data.exp_time);\r\n // 记录用户登录信息\r\n setCookies('kefu_uuid', res.data.kefuInfo.uid, expires);\r\n setCookies('kefu_token', res.data.token, expires);\r\n setCookies('kefu_expires_time', res.data.exp_time, expires);\r\n setCookies('kefuInfo', res.data.kefuInfo, expires);\r\n\r\n // 记录用户信息\r\n this.$store.commit('kefu/setInfo', res.data.kefuInfo);\r\n\r\n if (this.$store.state.media.isMobile) {\r\n //手机页面\r\n return this.$router.replace({ path: this.$route.query.redirect || '/kefu/mobile_list' });\r\n } else {\r\n // pc页面\r\n return this.$router.replace({ path: this.$route.query.redirect || '/kefu/pc_list' });\r\n }\r\n })\r\n .catch((res) => {\r\n let data = res === undefined ? {} : res;\r\n this.errorNum++;\r\n this.captchas();\r\n this.$message.error(data.msg || '登录失败');\r\n if (this.jigsaw) this.jigsaw.reset();\r\n });\r\n },\r\n getExpiresTime(expiresTime) {\r\n let nowTimeNum = Math.round(new Date() / 1000);\r\n let expiresTimeNum = expiresTime - nowTimeNum;\r\n return parseFloat(parseFloat(parseFloat(expiresTimeNum / 60) / 60) / 24);\r\n },\r\n closefail() {\r\n if (this.jigsaw) this.jigsaw.reset();\r\n this.$message.error('校验错误');\r\n },\r\n handleResize(event) {\r\n this.fullWidth = document.documentElement.clientWidth;\r\n },\r\n captchas: function () {\r\n this.imgcode = Setting.apiBaseURL + '/captcha_pro?' + Date.parse(new Date());\r\n },\r\n handleSubmit(name) {\r\n this.$refs[name].validate((valid) => {\r\n if (valid) {\r\n this.closeModel();\r\n }\r\n });\r\n },\r\n // 获取客服扫码key\r\n getSanCodeKey() {\r\n getSanCodeKey()\r\n .then((res) => {\r\n this.codeKey = res.data.key;\r\n this.creatQrCode();\r\n this.scanTime = setInterval(() => {\r\n this.timeNum++;\r\n if (this.timeNum >= 60) {\r\n this.timeNum = 0;\r\n window.clearInterval(this.scanTime);\r\n this.rxpired = true;\r\n } else {\r\n this.getScanStatus();\r\n }\r\n }, 1000);\r\n })\r\n .catch((error) => {\r\n this.timeNum = 0;\r\n window.clearInterval(this.scanTime);\r\n this.rxpired = true;\r\n this.$message.error(error.msg);\r\n });\r\n },\r\n // 扫码登录情况\r\n getScanStatus() {\r\n scanStatus(this.codeKey)\r\n .then(async (res) => {\r\n // 0 = 二维码过期需要重新获取授权凭证\r\n if (res.data.status == 0) {\r\n this.timeNum = 0;\r\n window.clearInterval(this.scanTime);\r\n this.rxpired = true;\r\n }\r\n // 1=正在扫描\r\n if (res.data.status == 1) {\r\n }\r\n // 3 扫描成功正在登录\r\n if (res.data.status == 3) {\r\n window.clearInterval(this.scanTime);\r\n let expires = this.getExpiresTime(res.data.exp_time);\r\n // 记录用户登录信息\r\n setCookies('kefu_uuid', res.data.kefuInfo.uid, expires);\r\n setCookies('kefu_token', res.data.token, expires);\r\n setCookies('kefu_expires_time', res.data.exp_time, expires);\r\n setCookies('kefuInfo', res.data.kefuInfo, expires);\r\n // 记录用户信息\r\n this.$store.commit('kefu/setInfo', res.data.kefuInfo);\r\n if (this.$store.state.media.isMobile) {\r\n //手机页面\r\n return this.$router.replace({ path: this.$route.query.redirect || '/kefu/mobile_list' });\r\n } else {\r\n // pc页面\r\n return this.$router.replace({ path: this.$route.query.redirect || '/kefu/pc_list' });\r\n }\r\n }\r\n })\r\n .catch((error) => {\r\n this.$message.error(error.msg);\r\n this.timeNum = 0;\r\n window.clearInterval(this.scanTime);\r\n this.rxpired = true;\r\n });\r\n },\r\n // 刷新二维码\r\n bindRefresh() {\r\n this.$refs.qrCodeUrl.innerHTML = '';\r\n this.rxpired = false;\r\n this.getSanCodeKey();\r\n },\r\n },\r\n beforeCreate() {},\r\n beforeDestroy: function () {\r\n this.timeNum = 0;\r\n this.$refs.qrCodeUrl.innerHTML = '';\r\n window.clearInterval(this.scanTime);\r\n window.removeEventListener('resize', this.handleResize);\r\n // document.getElementsByTagName('canvas')[0].removeAttribute('class', 'index_bg');\r\n },\r\n};\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.page-account {\r\n display: flex;\r\n width: 100%;\r\n background-image: url('~@/assets/images/kfbg_2.jpg');\r\n background-size: cover;\r\n background-position: center;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n overflow: auto;\r\n .content {\r\n height: 400px;\r\n margin-right: 100px;\r\n .desc {\r\n color: #fff;\r\n .tit {\r\n font-size: 40px;\r\n font-weight: 600;\r\n }\r\n .kefu {\r\n margin-top: 30px;\r\n font-weight: 500;\r\n font-size: 20px;\r\n }\r\n }\r\n\r\n img {\r\n width: 360px;\r\n margin-left: -100px;\r\n }\r\n }\r\n}\r\n.code-box {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n .qrcode {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 180px;\r\n height: 180px;\r\n border: 1px solid #e5e5e6;\r\n }\r\n .rxpired-box {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 160px;\r\n height: 160px;\r\n background: rgba(0, 0, 0, 0.6);\r\n\r\n p {\r\n margin-bottom: 10px;\r\n font-size: 15px;\r\n color: #fff;\r\n }\r\n }\r\n}\r\n.page-account-top-logo {\r\n color: #000000;\r\n font-size: 21px;\r\n}\r\n.wrapper-box {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100vh;\r\n .foot-box {\r\n padding: 20px 20px;\r\n font-size: 14px;\r\n color: #666666;\r\n text-align: right;\r\n box-sizing: border-box;\r\n\r\n a {\r\n margin-left: 0;\r\n color: #666666;\r\n }\r\n }\r\n}\r\n.page-account {\r\n display: flex;\r\n flex: 1;\r\n}\r\n.page-account .code {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.page-account .code .pictrue {\r\n height: 40px;\r\n}\r\n.swiperPross {\r\n border-radius: 6px 0px 0px 6px;\r\n}\r\n.swiperPross,\r\n.swiperPic,\r\n.swiperPic img {\r\n width: 510px;\r\n height: 100%;\r\n}\r\n.swiperPic img {\r\n width: 100%;\r\n height: 100%;\r\n}\r\n.container {\r\n height: 400px !important;\r\n padding: 0 !important;\r\n /* overflow: hidden; */\r\n border-radius: 6px;\r\n z-index: 1;\r\n display: flex;\r\n}\r\n.containerSamll {\r\n width: 384px !important;\r\n\r\n background: #fff !important;\r\n}\r\n.containerBig {\r\n width: 90%;\r\n padding-bottom: 20px;\r\n margin-top: 84px;\r\n background: #f7f7f7 !important;\r\n height: auto !important;\r\n box-shadow: 0px 3px 20px rgba(0, 20, 41, 0.06);\r\n}\r\n.index_from {\r\n position: relative;\r\n padding: 40px 40px 32px 40px;\r\n height: 400px;\r\n width: 100%;\r\n box-sizing: border-box;\r\n}\r\n.containerBig .index_from {\r\n padding: 20px;\r\n height: auto !important;\r\n}\r\n.index_from .qh_box {\r\n position: absolute;\r\n right: 12px;\r\n top: 0;\r\n cursor: pointer;\r\n .iconfont {\r\n color: #265bed;\r\n font-size: 36px;\r\n }\r\n}\r\n.page-account-top {\r\n padding: 20px 0 50px !important;\r\n box-sizing: border-box !important;\r\n display: flex;\r\n justify-content: center;\r\n}\r\n.page-account-container {\r\n border-radius: 0px 6px 6px 0px;\r\n}\r\n.btn {\r\n width: 100%;\r\n background: #265bed;\r\n}\r\n.captchaBox {\r\n width: 310px;\r\n}\r\n\r\ninput {\r\n display: block;\r\n width: 290px;\r\n line-height: 40px;\r\n margin: 10px 0;\r\n padding: 0 10px;\r\n outline: none;\r\n border: 1px solid #c8cccf;\r\n border-radius: 4px;\r\n color: #6a6f77;\r\n}\r\n\r\n#msg {\r\n width: 100%;\r\n line-height: 40px;\r\n font-size: 14px;\r\n text-align: center;\r\n}\r\n\r\na:link,\r\na:visited,\r\na:hover,\r\na:active {\r\n margin-left: 100px;\r\n color: #0366d6;\r\n}\r\n.index_from ::v-deep .ivu-input-large {\r\n font-size: 14px !important;\r\n}\r\n</style>\r\n<style>\r\n@media screen and (min-width: 320px) and (max-width: 960px) {\r\n .page-account {\r\n background-image: url('~@/assets/images/m_bg.png') !important;\r\n background-size: 100% auto !important;\r\n background-repeat: no-repeat;\r\n background-position: left top !important;\r\n display: flex;\r\n }\r\n .wrapper-box .foot-box {\r\n text-align: center !important;\r\n }\r\n .content {\r\n display: none;\r\n }\r\n .index_from {\r\n box-shadow: 0px 3px 20px rgba(0, 20, 41, 0.06);\r\n background: #fff;\r\n }\r\n .wrapper-box .foot-box {\r\n padding: 20px 66px !important;\r\n color: #adadad !important;\r\n font-size: 0.22rem !important;\r\n }\r\n .containerBig {\r\n width: 86% !important;\r\n border-radius: 0.2rem !important;\r\n overflow: hidden;\r\n }\r\n .btn {\r\n background: linear-gradient(90deg, #3875ea 0%, #1890fc 100%) !important;\r\n\r\n border-radius: 0.41rem;\r\n }\r\n .ivu-input {\r\n border: 1px solid #dcdee2;\r\n -webkit-appearance: none; /*去除阴影边框*/\r\n outline: none;\r\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*点击高亮的颜色*/\r\n }\r\n}\r\n</style>\r\n"]}]}
|
