|
|
@@ -1,28 +1,40 @@
|
|
|
<template>
|
|
|
<div class="binding-container">
|
|
|
- <div class="login-container">
|
|
|
- <h3>请登录采销365账号 与当前微信绑定</h3>
|
|
|
- <el-form label-width="0px" style="margin-top:10px" ref="formRef" :model="formData" :rules="rules">
|
|
|
- <el-form-item label="" prop="username">
|
|
|
- <el-input v-model="formData.username" placeholder="账号">
|
|
|
- <template slot="prefix">
|
|
|
- <i class="el-icon-user" style="padding-left:5px;color:#087af5"></i>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item prop="password">
|
|
|
- <el-input type="password" v-model="formData.password" placeholder="密码">
|
|
|
- <template slot="prefix">
|
|
|
- <i class="el-icon-key" style="padding-left:5px;color:#087af5"></i>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="submit" style="width:100%;border-radius:15px;background-color:#087af5"">登 录</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <div class="login-container" v-loading="loading_login">
|
|
|
+ <div class="inner-login-container">
|
|
|
+ <h3 style="margin-bottom: 30px;">采销365</h3>
|
|
|
+ <el-form label-width="0px" style="margin-top:10px" ref="formRef" :model="formData" :rules="rules">
|
|
|
+ <el-form-item label="" prop="username">
|
|
|
+ <el-input size="medium" v-model="formData.username" placeholder="账号" maxlength="11">
|
|
|
+ <template slot="prefix">
|
|
|
+ <i class="el-icon-user" style="padding-left:5px;color:#087af5"></i>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <el-input size="medium" type="password" v-model="formData.password" placeholder="密码">
|
|
|
+ <template slot="prefix">
|
|
|
+ <i class="el-icon-key" style="padding-left:5px;color:#087af5"></i>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <div style="display: flex;gap:10px">
|
|
|
+ <div class="button" style="background-color: #087af5;border-color:#087af5;width: 100%;" @click="submit(false)">
|
|
|
+ <img style="height:20px;width:20px;margin:0 2px 0 5px;" src="~@/assets/phone.png" />
|
|
|
+ <span style="font-weight: 600;">登录</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="button" style="background-color: #07c160;width:100%" v-if="isWx" @click="submit(true)">
|
|
|
+ <img style="height:20px;width:20px" src="~@/assets/wechat.png" />
|
|
|
+ <span style="font-weight: 600;">授权登录</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -30,8 +42,9 @@
|
|
|
<script>
|
|
|
import asyncRequest from "@/api"
|
|
|
import { isnumber, isAlphanumeric, validAlphabets, isMobile } from '@/utils/validate'
|
|
|
+import { getParameterByName } from "@/utils/auth"
|
|
|
export default {
|
|
|
- props: ["openid", "template"],
|
|
|
+ props: ["openid", "template", "isWx"],
|
|
|
data() {
|
|
|
|
|
|
const validateUsername = (rule, value, callback) => {
|
|
|
@@ -69,10 +82,10 @@ export default {
|
|
|
isMobile: true,
|
|
|
ol: false,
|
|
|
maxHeight: null,
|
|
|
- loading_wx: true,
|
|
|
loading: false,
|
|
|
+ loading_login:false,
|
|
|
currentAccount: {},
|
|
|
- isMobile:false,
|
|
|
+ isMobile: false,
|
|
|
formData: {
|
|
|
username: "",
|
|
|
password: ""
|
|
|
@@ -84,32 +97,30 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- document.title = "绑定采销账号"
|
|
|
+ document.title = "采销365"
|
|
|
},
|
|
|
beforeDestory() {
|
|
|
document.title = ""
|
|
|
},
|
|
|
methods: {
|
|
|
- handleSuccess(res) {
|
|
|
- console.log('success:',res)
|
|
|
- this.submit();
|
|
|
- },
|
|
|
- handleError(err) {
|
|
|
- console.log('error:',err)
|
|
|
- this.submit();
|
|
|
- // this.$message.warning("订阅失败，请重试!")
|
|
|
+ toLogin() {
|
|
|
+ const back = getParameterByName("back")
|
|
|
+ window.location.href = back + "/?from=authorization";
|
|
|
},
|
|
|
handleChange(value) {
|
|
|
const item = this.accounts.find(({ value: oV }) => oV === value)
|
|
|
- this.formData = { id: item.value, phone: item.mobile, lastCode: "" }
|
|
|
+ this.formData = { id: item.value, phone: item.mobile, lastCode: "" }
|
|
|
},
|
|
|
- async submit() {
|
|
|
+ async submit(hasOpenId) {
|
|
|
try {
|
|
|
await this.$refs.formRef.validate();
|
|
|
const { username, password } = this.formData;
|
|
|
- this.loading = true
|
|
|
- const result = await asyncRequest.login({ password, username, openId: this.openid })
|
|
|
- this.loading = false;
|
|
|
+ this.loading_login = true
|
|
|
+ const result = await asyncRequest.login({
|
|
|
+ ...({ password, username, }),
|
|
|
+ ...(hasOpenId ? { openId: this.openid} : {})
|
|
|
+ })
|
|
|
+ this.loading_login = false;
|
|
|
if (result.code === 0) {
|
|
|
this.$emit("bind", result.data.token);
|
|
|
} else {
|
|
|
@@ -150,28 +161,54 @@ export default {
|
|
|
align-items: center;
|
|
|
position: fixed;
|
|
|
top: 0%;
|
|
|
- width:100vw;
|
|
|
+ width: 100vw;
|
|
|
height: 100vh;
|
|
|
background: url("~@/assets/bg-phone.jpg") no-repeat;
|
|
|
- background-size:cover;
|
|
|
+ background-size: cover;
|
|
|
|
|
|
- .login-container{
|
|
|
+ .login-container {
|
|
|
|
|
|
- h3{
|
|
|
+ h3 {
|
|
|
text-align: center;
|
|
|
- color:#087af5;
|
|
|
+ color: #087af5;
|
|
|
+ line-height: 20px;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- width:90%;
|
|
|
- max-width: 428px;
|
|
|
+ width: 320px;
|
|
|
background:#fff;
|
|
|
box-sizing: border-box;
|
|
|
- padding: 10px 40px;
|
|
|
+ padding: 10px 35px;
|
|
|
position: absolute;
|
|
|
|
|
|
+ .button {
|
|
|
+ height: 40px;
|
|
|
+ width: 80%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 80px;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin: 0 5px 0 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-form-item {
|
|
|
+ width: 250px;
|
|
|
+ }
|
|
|
+
|
|
|
top:50%;
|
|
|
left:50%;
|
|
|
- transform:translate(-50%,-50%);
|
|
|
+ transform:translate(-50%, -50%);
|
|
|
border-radius:10px;
|
|
|
}
|
|
|
}
|
snow
