|
|
@@ -1,278 +1,292 @@
|
|
|
<template>
|
|
|
- <div >
|
|
|
- <form action="">
|
|
|
- <div class="login">
|
|
|
- <div class="loginBg">
|
|
|
- <img src="@/assets/img/loginBg.png" />
|
|
|
- </div>
|
|
|
- <div class="loginBox">
|
|
|
- <div class="row center" style="height:48px;">
|
|
|
- <img :src="img_http + logo" alt="" style="width: 30px; height: 30px;">
|
|
|
- </div>
|
|
|
- <div class="row center"><span style="font-size:16px;color:#666;">客服系统客服登录</span></div>
|
|
|
- <div class="box row center">
|
|
|
- <div class="boxData" :class="0?'errBd':''">
|
|
|
- <input type="text" v-model="account" placeholder="账号">
|
|
|
- <img src="@/assets/img/account.png">
|
|
|
- <p v-if="0" style="color:#f60;font-size:14px;margin-top:5px;margin-left:3px;">账号不存在</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box row center">
|
|
|
- <div class="boxData" :class="0?'errBd':''">
|
|
|
- <input type="password" v-model="password" placeholder="密码">
|
|
|
- <img src="@/assets/img/password.png">
|
|
|
- <p v-if="0" style="color:#f60;font-size:14px;margin-top:5px;margin-left:3px;">密码错误，请重新输入</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box row center" v-if="showSecurityCode">
|
|
|
- <div class="boxData" :class="0?'errBd':''">
|
|
|
- <input maxlength="6" @keyup.enter="loginBtn()" @blur="testCode()" type="text" v-model="securityCode" placeholder="验证码">
|
|
|
- <img src="@/assets/img/password.png">
|
|
|
- <p v-if="0" style="color:#f60;font-size:14px;margin-top:5px;margin-left:3px;">验证码错误，请重新输入</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box row center">
|
|
|
- <div class="btn row center" @click="loginBtn()">登录</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
-
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <form action>
|
|
|
+ <div class="login">
|
|
|
+ <div class="loginBg">
|
|
|
+ <img src="@/assets/img/loginBg.png" />
|
|
|
+ </div>
|
|
|
+ <div class="loginBox">
|
|
|
+ <div class="row center" style="height:48px;">
|
|
|
+ <img :src="img_http + logo" alt style="width: 30px; height: 30px;" />
|
|
|
+ </div>
|
|
|
+ <div class="row center">
|
|
|
+ <span style="font-size:16px;color:#666;">客服系统客服登录</span>
|
|
|
+ </div>
|
|
|
+ <div class="box row center">
|
|
|
+ <div class="boxData" :class="0?'errBd':''">
|
|
|
+ <input type="text" v-model="account" placeholder="账号" />
|
|
|
+ <img src="@/assets/img/account.png" />
|
|
|
+ <p v-if="0" style="color:#f60;font-size:14px;margin-top:5px;margin-left:3px;">账号不存在</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box row center">
|
|
|
+ <div class="boxData" :class="0?'errBd':''">
|
|
|
+ <input type="password" v-model="password" placeholder="密码" />
|
|
|
+ <img src="@/assets/img/password.png" />
|
|
|
+ <p
|
|
|
+ v-if="0"
|
|
|
+ style="color:#f60;font-size:14px;margin-top:5px;margin-left:3px;"
|
|
|
+ >密码错误，请重新输入</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box row center" v-if="showSecurityCode">
|
|
|
+ <div class="boxData" :class="0?'errBd':''">
|
|
|
+ <input
|
|
|
+ maxlength="6"
|
|
|
+ @keyup.enter="loginBtn()"
|
|
|
+ @blur="testCode()"
|
|
|
+ type="text"
|
|
|
+ v-model="securityCode"
|
|
|
+ placeholder="验证码"
|
|
|
+ />
|
|
|
+ <img src="@/assets/img/password.png" />
|
|
|
+ <p
|
|
|
+ v-if="0"
|
|
|
+ style="color:#f60;font-size:14px;margin-top:5px;margin-left:3px;"
|
|
|
+ >验证码错误，请重新输入</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box row center">
|
|
|
+ <div class="btn row center" @click="loginBtn()">登录</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import "@/css/index.css";
|
|
|
- import Vue from 'vue';
|
|
|
- export default {
|
|
|
- name: "login",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- account:'',//账号
|
|
|
- password:'',//密码
|
|
|
- securityCode: '', // 验证码
|
|
|
- time:'',
|
|
|
- loading:false,
|
|
|
- showSecurityCode:false,
|
|
|
- logo: '',
|
|
|
- verifySystem:"",
|
|
|
- verifySystemId:"",
|
|
|
- img_http:'http://manage.281570.com',//图片路径域
|
|
|
- // img_http: 'http://192.168.2.187:8090',//图片路径域
|
|
|
- }
|
|
|
- },
|
|
|
- methods:{
|
|
|
- testCode(){
|
|
|
- if(this.showSecurityCode){
|
|
|
- if (!(/^[0-9]+$/.test(this.securityCode))) {
|
|
|
- this.$message.error('验证码错误！')
|
|
|
- this.securityCode = '';
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- loginBtn(){
|
|
|
- this.time = sessionStorage.getItem('time');
|
|
|
- if(this.$store.getters.get_socket_open){
|
|
|
- let apiToken = this.$md5('customer-service' + window.location.origin)
|
|
|
- if(this.account && this.password){
|
|
|
- //进程加载条
|
|
|
- const loading = this.$loading({
|
|
|
- lock: true,
|
|
|
- text: 'Loading',
|
|
|
- spinner: 'el-icon-loading',
|
|
|
- background: 'rgba(0, 0, 0, 0.7)'
|
|
|
- });
|
|
|
+import "@/css/index.css";
|
|
|
+import Vue from "vue";
|
|
|
+export default {
|
|
|
+ name: "login",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ account: "", //账号
|
|
|
+ password: "", //密码
|
|
|
+ securityCode: "", // 验证码
|
|
|
+ time: "",
|
|
|
+ loading: false,
|
|
|
+ showSecurityCode: false,
|
|
|
+ logo: "",
|
|
|
+ verifySystem: "",
|
|
|
+ verifySystemId: "",
|
|
|
+ img_http: "http://manage.281570.com" //图片路径域
|
|
|
+ // img_http: 'http://192.168.2.187:8090',//图片路径域
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ testCode() {
|
|
|
+ if (this.showSecurityCode) {
|
|
|
+ if (!/^[0-9]+$/.test(this.securityCode)) {
|
|
|
+ this.$message.error("验证码错误！");
|
|
|
+ this.securityCode = "";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ loginBtn() {
|
|
|
+ this.time = sessionStorage.getItem("time");
|
|
|
+ if (this.$store.getters.get_socket_open) {
|
|
|
+ let apiToken = this.$md5("customer-service" + window.location.origin);
|
|
|
+ if (this.account && this.password) {
|
|
|
+ //进程加载条
|
|
|
+ const loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: "Loading",
|
|
|
+ spinner: "el-icon-loading",
|
|
|
+ background: "rgba(0, 0, 0, 0.7)"
|
|
|
+ });
|
|
|
|
|
|
- // console.log(this.verifySystemId)
|
|
|
- // console.log(this.verifySystem)
|
|
|
- // console.log(this.securityCode)
|
|
|
- let parmas;
|
|
|
- if(this.showSecurityCode){
|
|
|
- parmas = {
|
|
|
- username:this.account,
|
|
|
- password:this.password,
|
|
|
- securityCode:this.securityCode,
|
|
|
- }
|
|
|
- }else {
|
|
|
- parmas = {
|
|
|
- username:this.account,
|
|
|
- password:this.password,
|
|
|
- verifySystemId:this.verifySystemId,
|
|
|
- verifySystem:this.verifySystem,
|
|
|
- }
|
|
|
- }
|
|
|
- this.$http.post(this.$ports.login, parmas).then((res)=>{
|
|
|
+ // console.log(this.verifySystemId)
|
|
|
+ // console.log(this.verifySystem)
|
|
|
+ // console.log(this.securityCode)
|
|
|
+ let parmas;
|
|
|
+ if (this.showSecurityCode) {
|
|
|
+ parmas = {
|
|
|
+ username: this.account,
|
|
|
+ password: this.password,
|
|
|
+ securityCode: this.securityCode
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ parmas = {
|
|
|
+ username: this.account,
|
|
|
+ password: this.password,
|
|
|
+ verifySystemId: this.verifySystemId,
|
|
|
+ verifySystem: this.verifySystem
|
|
|
+ };
|
|
|
+ }
|
|
|
+ this.$http.post(this.$ports.login, parmas).then(res => {
|
|
|
+ if (res.data.code == 1) {
|
|
|
+ this.$store.dispatch("SET_USER", res.data.data.user);
|
|
|
+ this.$store.dispatch("SET_IS_INIT", true);
|
|
|
+ this.$websocket.send(
|
|
|
+ JSON.stringify({
|
|
|
+ type: "init",
|
|
|
+ data: {
|
|
|
+ uid: "KF" + res.data.data.user.id,
|
|
|
+ group: res.data.data.user.group_id,
|
|
|
+ token: res.data.data.user.token,
|
|
|
+ name: res.data.data.user.user_name,
|
|
|
+ avatar: res.data.data.user.user_avatar
|
|
|
+ }
|
|
|
+ })
|
|
|
+ );
|
|
|
+ this.$router.push({
|
|
|
+ path: "/",
|
|
|
+ query: { pid: escape("这就是一个编码没有什么用啊") }
|
|
|
+ });
|
|
|
+ } else if (res.data.code == 100) {
|
|
|
+ this.$message.success(res.data.msg);
|
|
|
+ loading.close();
|
|
|
+ } else {
|
|
|
+ this.$notify({
|
|
|
+ title: "错误",
|
|
|
+ message: res.data.msg,
|
|
|
+ type: "error",
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- if(res.data.code == 1){
|
|
|
- this.$store.dispatch("SET_USER",res.data.data.user);
|
|
|
- this.$store.dispatch("SET_IS_INIT",true);
|
|
|
- this.$websocket.send( JSON.stringify({
|
|
|
- type: 'init',
|
|
|
- data: {
|
|
|
- uid: 'KF' + res.data.data.user.id,
|
|
|
- group: res.data.data.user.group_id,
|
|
|
- token:res.data.data.user.token,
|
|
|
- name: res.data.data.user.user_name,
|
|
|
- avatar:res.data.data.user.user_avatar,
|
|
|
- }
|
|
|
- }))
|
|
|
- this.$router.push({
|
|
|
- path:'/',
|
|
|
- query: { pid:escape("这就是一个编码没有什么用啊") }
|
|
|
- })
|
|
|
- }else if(res.data.code == 100){
|
|
|
- this.$message.success(res.data.msg);
|
|
|
- loading.close();
|
|
|
- }else{
|
|
|
- this.$notify({
|
|
|
- title: "错误",
|
|
|
- message: res.data.msg,
|
|
|
- type: "error",
|
|
|
- duration: 2000
|
|
|
- });
|
|
|
- }
|
|
|
+ loading.close();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$notify({
|
|
|
+ title: "错误提示!",
|
|
|
+ message: "请输入您的账号和密码",
|
|
|
+ type: "error",
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$notify({
|
|
|
+ title: "错误提示!",
|
|
|
+ message: "网路链接错误",
|
|
|
+ type: "error",
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**************************************/
|
|
|
+ //连接建立
|
|
|
+ websocketonopen() {
|
|
|
+ this.$websocket.onopen();
|
|
|
+ //console.log('已经链接')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 判断验证码参数
|
|
|
+ let SystemId = this.$public.getQueryString("id");
|
|
|
+ let System = this.$public.getQueryString("code");
|
|
|
|
|
|
- loading.close();
|
|
|
- })
|
|
|
- }else{
|
|
|
- this.$notify({
|
|
|
- title: "错误提示!",
|
|
|
- message: '请输入您的账号和密码',
|
|
|
- type: "error",
|
|
|
- duration: 2000
|
|
|
- });
|
|
|
- }
|
|
|
- }else{
|
|
|
- this.$notify({
|
|
|
- title: "错误提示!",
|
|
|
- message: '网路链接错误',
|
|
|
- type: "error",
|
|
|
- duration: 2000
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- /**************************************/
|
|
|
- //连接建立
|
|
|
- websocketonopen() {
|
|
|
- this.$websocket.onopen();
|
|
|
- //console.log('已经链接')
|
|
|
- },
|
|
|
- },
|
|
|
- mounted(){
|
|
|
- // 判断验证码参数
|
|
|
- let SystemId = this.$public.getQueryString("id");
|
|
|
- let System = this.$public.getQueryString("code");
|
|
|
-
|
|
|
- if( !SystemId && !System ){
|
|
|
- this.showSecurityCode = true;
|
|
|
- }else {
|
|
|
- this.showSecurityCode = false;
|
|
|
- this.verifySystemId = SystemId;
|
|
|
- this.verifySystem = System;
|
|
|
- localStorage.clear();
|
|
|
- sessionStorage.clear();
|
|
|
- }
|
|
|
- this.checkEnabled=this.$comm.checkValidCodeEnabled();
|
|
|
- if(this.checkEnabled==0){
|
|
|
- this.showSecurityCode = false;
|
|
|
-
|
|
|
- }
|
|
|
+ if (!SystemId && !System) {
|
|
|
+ this.showSecurityCode = true;
|
|
|
+ } else {
|
|
|
+ this.showSecurityCode = false;
|
|
|
+ this.verifySystemId = SystemId;
|
|
|
+ this.verifySystem = System;
|
|
|
+ localStorage.clear();
|
|
|
+ sessionStorage.clear();
|
|
|
+ }
|
|
|
+ this.$comm.checkValidCodeEnabled((data)=> {
|
|
|
+ if (data == 0) {
|
|
|
+ this.showSecurityCode = false;
|
|
|
+ } else {
|
|
|
+ this.showSecurityCode = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- this.$http.get(this.$ports.TIME).then(res => {
|
|
|
- if (res.data.code == 1) {
|
|
|
- let time = res.data.data.time.split(' ');
|
|
|
- time[0] =(new Date( time[0].replace(/-/g,'/')).getTime()) /1000;
|
|
|
- sessionStorage.setItem("time",JSON.stringify(time));
|
|
|
- this.logo = res.data.data.logo;
|
|
|
- sessionStorage.setItem("logo",res.data.data.logo);
|
|
|
-
|
|
|
- }
|
|
|
- });
|
|
|
- // this.logo = sessionStorage.getItem('logo');
|
|
|
- //console.log(this.logo, '========logo')
|
|
|
- }
|
|
|
- };
|
|
|
+ this.$http.get(this.$ports.TIME).then(res => {
|
|
|
+ if (res.data.code == 1) {
|
|
|
+ let time = res.data.data.time.split(" ");
|
|
|
+ time[0] = new Date(time[0].replace(/-/g, "/")).getTime() / 1000;
|
|
|
+ sessionStorage.setItem("time", JSON.stringify(time));
|
|
|
+ this.logo = res.data.data.logo;
|
|
|
+ sessionStorage.setItem("logo", res.data.data.logo);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // this.logo = sessionStorage.getItem('logo');
|
|
|
+ //console.log(this.logo, '========logo')
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- p {
|
|
|
- display: inline;
|
|
|
- margin-block-start: 0;
|
|
|
- margin-block-end:0;
|
|
|
- margin-inline-start: 0;
|
|
|
- margin-inline-end:0;
|
|
|
- }
|
|
|
+p {
|
|
|
+ display: inline;
|
|
|
+ margin-block-start: 0;
|
|
|
+ margin-block-end: 0;
|
|
|
+ margin-inline-start: 0;
|
|
|
+ margin-inline-end: 0;
|
|
|
+}
|
|
|
|
|
|
- .login {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .loginBg {
|
|
|
- height: 50%;
|
|
|
- }
|
|
|
- .loginBg img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .loginBox {
|
|
|
- position: fixed;
|
|
|
- top: 27%;
|
|
|
- left: 0px;
|
|
|
- right: 0px;
|
|
|
- margin: auto;
|
|
|
- width:300px;
|
|
|
- height: 280px;
|
|
|
- background: #fff;
|
|
|
- border-radius: 2%;
|
|
|
- box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
|
|
|
- }
|
|
|
- .box{
|
|
|
- /* margin-top: 40px; */
|
|
|
- height: 50px;
|
|
|
- }
|
|
|
- .boxData{
|
|
|
- width: 200px;
|
|
|
- /* height: 70px; */
|
|
|
- /*border: 1px solid #C6DCFF;*/
|
|
|
- background: #F6F8FF;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .boxData img{
|
|
|
- position: absolute;
|
|
|
- left: 6px;
|
|
|
- top:0;
|
|
|
- bottom: 0;
|
|
|
- margin:auto 0;
|
|
|
- height: 55%;
|
|
|
- }
|
|
|
- .boxData input{
|
|
|
- width: 100%;
|
|
|
- height: 30px;
|
|
|
- outline: none;
|
|
|
- padding-left: 30px;
|
|
|
- font-size: 14px;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
- .boxData input:focus{
|
|
|
- color: #666;
|
|
|
- }
|
|
|
- .errBd{
|
|
|
- border: 1px solid #F60
|
|
|
- }
|
|
|
- .btn{
|
|
|
- width: 240px;
|
|
|
- height: 40px;
|
|
|
- background:#5399F5;
|
|
|
- font-size: 18px;
|
|
|
- color: #fff;
|
|
|
- border: none;
|
|
|
- }
|
|
|
- .btn:hover{
|
|
|
+.login {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.loginBg {
|
|
|
+ height: 50%;
|
|
|
+}
|
|
|
+.loginBg img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.loginBox {
|
|
|
+ position: fixed;
|
|
|
+ top: 27%;
|
|
|
+ left: 0px;
|
|
|
+ right: 0px;
|
|
|
+ margin: auto;
|
|
|
+ width: 300px;
|
|
|
+ height: 280px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 2%;
|
|
|
+ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+.box {
|
|
|
+ /* margin-top: 40px; */
|
|
|
+ height: 50px;
|
|
|
+}
|
|
|
+.boxData {
|
|
|
+ width: 200px;
|
|
|
+ /* height: 70px; */
|
|
|
+ /*border: 1px solid #C6DCFF;*/
|
|
|
+ background: #f6f8ff;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.boxData img {
|
|
|
+ position: absolute;
|
|
|
+ left: 6px;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto 0;
|
|
|
+ height: 55%;
|
|
|
+}
|
|
|
+.boxData input {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ outline: none;
|
|
|
+ padding-left: 30px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+.boxData input:focus {
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+.errBd {
|
|
|
+ border: 1px solid #f60;
|
|
|
+}
|
|
|
+.btn {
|
|
|
+ width: 240px;
|
|
|
+ height: 40px;
|
|
|
+ background: #5399f5;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+.btn:hover {
|
|
|
+}
|
|
|
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .btn:active{
|
|
|
- background: #1d57dd;
|
|
|
- }
|
|
|
+.btn:active {
|
|
|
+ background: #1d57dd;
|
|
|
+}
|
|
|
</style>
|
xiang