Commit 30948504 authored by chenwei's avatar chenwei

Merge branch 'feature' into 'release'

注册跳转

See merge request !20
parents c8e5d5f8 65127951
<template>
<div style="width: 100%; height: 100%; position: relative">
<div style="height: 100%; width: 55%; position: relative">
<img src="@/assets/login/login.png" style="width: 100%; height: 100%" />
5
<div style="position: absolute; left: 56px; top: 56px; display: flex">
<img src="@/assets/login/logo.png" style="width: 84px; height: 84px" />
<img src="@/assets/login/logo.png" style="width: 84px; height: 84px">
<span
style="
font-size: 48px;
......@@ -12,11 +12,10 @@
line-height: 84px;
margin-left: 20px;
"
>{{ $t("login.bgTitle1") }}{{ env }}</span
>
>{{ $t("login.bgTitle1") }}{{ env }}</span>
</div>
<div style="position: absolute; left: 160px; top: 170px; display: flex">
<img src="@/assets/login/1.png" style="width: 36px; height: 36px" />
<img src="@/assets/login/1.png" style="width: 36px; height: 36px">
<span
style="
font-size: 32px;
......@@ -25,14 +24,13 @@
line-height: 36px;
margin-left: 8px;
"
>{{ $t("login.bgTitle2") }}</span
>
>{{ $t("login.bgTitle2") }}</span>
</div>
<div style="position: absolute; left: 130px; top: 250px; display: flex">
<img src="@/assets/login/8.png" style="width: 320px; height: 322px" />
<img src="@/assets/login/8.png" style="width: 320px; height: 322px">
<div style="position: absolute; top: 20px; left: 30px; width: 500px">
<div style="display: flex; margin-top: 20px">
<img src="@/assets/login/2.png" style="width: 24px; height: 24px" />
<img src="@/assets/login/2.png" style="width: 24px; height: 24px">
<span
style="
font-size: 14px;
......@@ -41,11 +39,10 @@
line-height: 24px;
margin-left: 5px;
"
>{{ $t("login.bgTitle3") }}</span
>
>{{ $t("login.bgTitle3") }}</span>
</div>
<div style="display: flex; margin-top: 20px">
<img src="@/assets/login/3.png" style="width: 24px; height: 24px" />
<img src="@/assets/login/3.png" style="width: 24px; height: 24px">
<span
style="
font-size: 14px;
......@@ -54,11 +51,10 @@
line-height: 24px;
margin-left: 5px;
"
>{{ $t("login.bgTitle4") }}</span
>
>{{ $t("login.bgTitle4") }}</span>
</div>
<div style="display: flex; margin-top: 20px">
<img src="@/assets/login/4.png" style="width: 24px; height: 24px" />
<img src="@/assets/login/4.png" style="width: 24px; height: 24px">
<span
style="
font-size: 14px;
......@@ -67,11 +63,10 @@
line-height: 24px;
margin-left: 5px;
"
>{{ $t("login.bgTitle5") }}</span
>
>{{ $t("login.bgTitle5") }}</span>
</div>
<div style="display: flex; margin-top: 20px">
<img src="@/assets/login/5.png" style="width: 24px; height: 24px" />
<img src="@/assets/login/5.png" style="width: 24px; height: 24px">
<span
style="
font-size: 14px;
......@@ -80,11 +75,10 @@
line-height: 24px;
margin-left: 5px;
"
>{{ $t("login.bgTitle6") }}</span
>
>{{ $t("login.bgTitle6") }}</span>
</div>
<div style="display: flex; margin-top: 20px">
<img src="@/assets/login/6.png" style="width: 24px; height: 24px" />
<img src="@/assets/login/6.png" style="width: 24px; height: 24px">
<span
style="
font-size: 14px;
......@@ -93,11 +87,10 @@
line-height: 24px;
margin-left: 5px;
"
>{{ $t("login.bgTitle7") }}</span
>
>{{ $t("login.bgTitle7") }}</span>
</div>
<div style="display: flex; margin-top: 20px">
<img src="@/assets/login/7.png" style="width: 24px; height: 24px" />
<img src="@/assets/login/7.png" style="width: 24px; height: 24px">
<span
style="
font-size: 14px;
......@@ -106,8 +99,7 @@
line-height: 24px;
margin-left: 5px;
"
>{{ $t("login.bgTitle8") }}</span
>
>{{ $t("login.bgTitle8") }}</span>
</div>
</div>
</div>
......@@ -118,7 +110,7 @@
<img
src="@/assets/setting/user.png"
style="width: 30px; height: 30px"
/>
>
<span
style="
font-size: 24px;
......@@ -127,8 +119,7 @@
line-height: 34px;
margin-left: 10px;
"
>{{ $t("login.title") }}</span
>
>{{ $t("login.title") }}</span>
</div>
<div>
<el-select
......@@ -139,7 +130,7 @@
@change="handleSetLanguage"
>
<div slot="prefix" style="padding: 4px">
<img src="@/assets/lang.png" style="width: 20px; height: 20px" />
<img src="@/assets/lang.png" style="width: 20px; height: 20px">
</div>
<el-option
v-for="item in locale"
......@@ -176,8 +167,7 @@
round
style="width: 70%"
@click="toHome"
>{{ $t("common.returnIndex") }}</el-button
>
>{{ $t("common.returnIndex") }}</el-button>
</div>
<div style="width: 100%; text-align: center; margin-top: 20px">
<el-link href="/ucenter/#/registered" style="color: #5ba8dc">{{
......@@ -190,49 +180,49 @@
</template>
<script>
import UserLogin from "./components/userLogin";
import MobileLogin from "./components/mobileLogin";
import { locale } from "@/api/country";
import UserLogin from './components/userLogin'
import MobileLogin from './components/mobileLogin'
import { locale } from '@/api/country'
export default {
name: "Login",
name: 'Login',
components: { UserLogin, MobileLogin },
data() {
return {
showDialog: false,
loading: false,
loginType: "1",
loginType: '1',
locale: [],
env: "",
};
env: ''
}
},
computed: {
homeUrl() {
return process.env.VUE_APP_HOME_API;
return process.env.VUE_APP_HOME_API
},
language: {
get() {
return this.$store.getters.language;
return this.$store.getters.language
},
set(val) {
this.handleSetLanguage(val);
},
},
this.handleSetLanguage(val)
}
}
},
watch: {
loginType: {
handler: function () {},
deep: true,
},
handler: function() {},
deep: true
}
},
created() {
if (process.env.NODE_ENV === "development") {
this.env = "-测试版";
if (process.env.NODE_ENV === 'development') {
this.env = '-测试版'
}
// window.addEventListener('storage', this.afterQRScan)
locale().then((r) => {
this.locale = r.data;
});
this.locale = r.data
})
},
mounted() {},
destroyed() {
......@@ -240,14 +230,14 @@ export default {
},
methods: {
handleSetLanguage(lang) {
this.$i18n.locale = lang;
this.$store.dispatch("app/setLanguage", lang);
this.$i18n.locale = lang
this.$store.dispatch('app/setLanguage', lang)
},
toHome() {
window.location.href = this.homeUrl;
},
},
};
window.location.href = this.homeUrl
}
}
}
</script>
<style lang="scss" scoped>
......
<template>
<div style="width: 100%; height: 100%; position: relative">
<div class="registered-container">
<img src="@/assets/login/login.png" style="width: 100%; height: 100%" />
<img src="@/assets/login/login.png" style="width: 100%; height: 100%">
<div style="position: absolute; left: 56px; top: 56px; display: flex">
<img src="@/assets/login/logo.png" style="width: 84px; height: 84px" />
<img src="@/assets/login/logo.png" style="width: 84px; height: 84px">
<span
style="
font-size: 48px;
......@@ -12,11 +12,10 @@
line-height: 84px;
margin-left: 20px;
"
>{{ $t("login.bgTitle1") }}</span
>
>{{ $t("login.bgTitle1") }}</span>
</div>
<div style="position: absolute; left: 160px; top: 170px; display: flex">
<img src="@/assets/login/1.png" style="width: 36px; height: 36px" />
<img src="@/assets/login/1.png" style="width: 36px; height: 36px">
<span
style="
font-size: 32px;
......@@ -25,14 +24,13 @@
line-height: 36px;
margin-left: 8px;
"
>{{ $t("login.bgTitle2") }}</span
>
>{{ $t("login.bgTitle2") }}</span>
</div>
<div style="position: absolute; left: 130px; top: 250px; display: flex">
<img src="@/assets/login/8.png" style="width: 320px; height: 322px" />
<img src="@/assets/login/8.png" style="width: 320px; height: 322px">
<div style="position: absolute; top: 20px; left: 30px; width: 500px">
<div style="display: flex; margin-top: 20px">
<img src="@/assets/login/2.png" style="width: 24px; height: 24px" />
<img src="@/assets/login/2.png" style="width: 24px; height: 24px">
<span
style="
font-size: 14px;
......@@ -41,11 +39,10 @@
line-height: 24px;
margin-left: 5px;
"
>{{ $t("login.bgTitle3") }}</span
>
>{{ $t("login.bgTitle3") }}</span>
</div>
<div style="display: flex; margin-top: 20px">
<img src="@/assets/login/3.png" style="width: 24px; height: 24px" />
<img src="@/assets/login/3.png" style="width: 24px; height: 24px">
<span
style="
font-size: 14px;
......@@ -54,11 +51,10 @@
line-height: 24px;
margin-left: 5px;
"
>{{ $t("login.bgTitle4") }}</span
>
>{{ $t("login.bgTitle4") }}</span>
</div>
<div style="display: flex; margin-top: 20px">
<img src="@/assets/login/4.png" style="width: 24px; height: 24px" />
<img src="@/assets/login/4.png" style="width: 24px; height: 24px">
<span
style="
font-size: 14px;
......@@ -67,11 +63,10 @@
line-height: 24px;
margin-left: 5px;
"
>{{ $t("login.bgTitle5") }}</span
>
>{{ $t("login.bgTitle5") }}</span>
</div>
<div style="display: flex; margin-top: 20px">
<img src="@/assets/login/5.png" style="width: 24px; height: 24px" />
<img src="@/assets/login/5.png" style="width: 24px; height: 24px">
<span
style="
font-size: 14px;
......@@ -80,11 +75,10 @@
line-height: 24px;
margin-left: 5px;
"
>{{ $t("login.bgTitle6") }}</span
>
>{{ $t("login.bgTitle6") }}</span>
</div>
<div style="display: flex; margin-top: 20px">
<img src="@/assets/login/6.png" style="width: 24px; height: 24px" />
<img src="@/assets/login/6.png" style="width: 24px; height: 24px">
<span
style="
font-size: 14px;
......@@ -93,11 +87,10 @@
line-height: 24px;
margin-left: 5px;
"
>{{ $t("login.bgTitle7") }}</span
>
>{{ $t("login.bgTitle7") }}</span>
</div>
<div style="display: flex; margin-top: 20px">
<img src="@/assets/login/7.png" style="width: 24px; height: 24px" />
<img src="@/assets/login/7.png" style="width: 24px; height: 24px">
<span
style="
font-size: 14px;
......@@ -106,8 +99,7 @@
line-height: 24px;
margin-left: 5px;
"
>{{ $t("login.bgTitle8") }}</span
>
>{{ $t("login.bgTitle8") }}</span>
</div>
</div>
</div>
......@@ -118,7 +110,7 @@
<img
src="@/assets/login/register.png"
style="width: 30px; height: 30px"
/>
>
<span
style="
font-size: 24px;
......@@ -127,8 +119,7 @@
line-height: 34px;
margin-left: 10px;
"
>{{ $t("registered.title") }}</span
>
>{{ $t("registered.title") }}</span>
</div>
<div>
<el-select
......@@ -139,7 +130,7 @@
@change="handleSetLanguage"
>
<div slot="prefix" style="padding: 4px">
<img src="@/assets/lang.png" style="width: 20px; height: 20px" />
<img src="@/assets/lang.png" style="width: 20px; height: 20px">
</div>
<el-option
v-for="item in locale"
......@@ -217,8 +208,7 @@
style="width: 100%; margin-bottom: 30px"
:disabled="disabled"
@click.native.prevent="getValidaCode"
>{{ getCode }}</el-button
>
>{{ getCode }}</el-button>
</el-col>
</el-row>
<el-form-item prop="password" :label="$t('registered.password')">
......@@ -248,7 +238,7 @@
</div>
</el-col>
</el-row>
<br />
<br>
<el-form-item prop="confirmPwd" :label="$t('registered.confirmPwd')">
<el-input
ref="confirmPwd"
......@@ -276,15 +266,13 @@
style="width: 70%"
round
@click.native.prevent="handleregistered"
>{{ $t("registered.registered") }}</el-button
>
>{{ $t("registered.registered") }}</el-button>
</div>
<div style="width: 100%; text-align: center">
<el-link
href="/ucenter/#/login"
style="color: #27417c; margin-top: 20px"
>{{ $t("registered.login") }}</el-link
>
>{{ $t("registered.login") }}</el-link>
</div>
</el-form>
</div>
......@@ -292,174 +280,212 @@
</template>
<script>
import { getCode, reg, getCountryList } from "@/api/user";
import { locale } from "@/api/country";
import { langData } from "@/data/lang";
import { getCode, reg, getCountryList, getInfo } from '@/api/user'
import { setToken } from '@/utils/auth'
import { locale } from '@/api/country'
import { langData } from '@/data/lang'
export default {
name: "Registered",
name: 'Registered',
components: {},
data() {
return {
countryList: [],
registeredForm: {
registerPlatform: 3,
areaCode: "86"
areaCode: '86'
},
registeredRules: {
mobile: [
{
required: true,
message: this.$t("login.mobileRules"),
trigger: "blur",
message: this.$t('login.mobileRules'),
trigger: 'blur'
},
{ max: 11, message: "电话长度在11个数字以内", trigger: "blur" },
{ max: 11, message: '电话长度在11个数字以内', trigger: 'blur' }
],
englishName: [
{
required: true,
message: this.$t("login.nameEnRules"),
trigger: "blur",
},
message: this.$t('login.nameEnRules'),
trigger: 'blur'
}
],
code: [
{
required: true,
message: this.$t("login.codeRules"),
trigger: "blur",
},
message: this.$t('login.codeRules'),
trigger: 'blur'
}
],
password: [
{
required: true,
message: this.$t("login.passwordRules"),
trigger: "blur",
},
message: this.$t('login.passwordRules'),
trigger: 'blur'
}
],
confirmPwd: [
{
required: true,
message: this.$t("login.confirmPwdRules"),
trigger: "blur",
},
],
message: this.$t('login.confirmPwdRules'),
trigger: 'blur'
}
]
},
loading: false,
disabled: false,
count: 60,
getCode: "",
getCode: '',
level: 0,
locale: [],
apiLang: "",
langData: langData,
};
apiLang: '',
langData: langData
}
},
computed: {
language: {
get() {
return this.$store.getters.language;
return this.$store.getters.language
},
set(val) {
this.handleSetLanguage(val);
},
},
this.handleSetLanguage(val)
}
}
},
watch: {
language() {
this.getCode = this.$t("login.getCode");
this.apiLang = this.langData[this.language];
this.getCode = this.$t('login.getCode')
this.apiLang = this.langData[this.language]
},
$route: {
handler: function(route) {
const query = route.query
if (query) {
this.redirect = query.redirect
this.otherQuery = this.getOtherQuery(query)
}
},
immediate: true
}
},
created() {
this.apiLang = this.langData[this.language];
this.getCode = this.$t("registered.getCode");
this.apiLang = this.langData[this.language]
this.getCode = this.$t('registered.getCode')
getCountryList().then((r) => {
this.countryList = r.data;
});
this.countryList = r.data
})
locale().then((r) => {
this.locale = r.data;
});
this.locale = r.data
})
},
methods: {
handleSetLanguage(lang) {
this.$i18n.locale = lang;
this.$store.dispatch("app/setLanguage", lang);
this.$i18n.locale = lang
this.$store.dispatch('app/setLanguage', lang)
},
getValidaCode() {
var data = {
mobile: this.registeredForm.mobile,
scene: 0,
areaCode: this.registeredForm.areaCode,
};
areaCode: this.registeredForm.areaCode
}
getCode(data).then(() => {
var countDown = window.setInterval(() => {
if (this.count < 1) {
this.disabled = false;
this.count = 60;
this.getCode = this.$t("registered.getCode");
window.clearInterval(countDown);
this.disabled = false
this.count = 60
this.getCode = this.$t('registered.getCode')
window.clearInterval(countDown)
} else {
this.count--;
this.disabled = true;
this.getCode = this.count + "s";
this.count--
this.disabled = true
this.getCode = this.count + 's'
}
}, 1000);
});
}, 1000)
})
},
pwdChange(val) {
// 弱密码:全是数字或全是字母,6-16个字符
const weakReg = /^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/;
const weakReg = /^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/
// 中密码:数字和26个英文字母,6-16个字符
const mediumReg = /^[A-Za-z0-9]{6,16}$/;
const mediumReg = /^[A-Za-z0-9]{6,16}$/
// 强密码:由数字、26个英文字母或者下划线组成的字符串,6-16个字符
const strongReg = /^\w{6,16}$/;
var password = this.registeredForm.password;
const strongReg = /^\w{6,16}$/
var password = this.registeredForm.password
if (password !== null) {
if (password.length >= 6 && password.length <= 16) {
if (password.match(weakReg)) {
this.level = 1;
this.level = 1
} else if (password.match(mediumReg)) {
this.level = 2;
this.level = 2
} else if (password.match(strongReg)) {
this.level = 3;
this.level = 3
}
}
if (password.length > 16) {
this.level = 3;
this.level = 3
}
}
},
getInfos() {
getInfo().then((r) => {
this.loading = false
if (r.data.city) {
this.$router.push({
path: this.redirect || '/jiedao/jd-profile',
query: this.otherQuery
})
} else {
this.$router.push({
path: '/myInfo',
query: this.otherQuery
})
}
})
},
getOtherQuery(query) {
return Object.keys(query).reduce((acc, cur) => {
if (cur !== 'redirect') {
acc[cur] = query[cur]
}
return acc
}, {})
},
handleregistered() {
this.$refs.registeredForm.validate((valid) => {
if (valid) {
if (this.registeredForm.password !== this.registeredForm.confirmPwd) {
this.$message.error("两次密码输入不一致");
return;
this.$message.error('两次密码输入不一致')
return
}
this.loading = true;
this.loading = true
reg(this.registeredForm)
.then(() => {
.then((res) => {
this.$message({
message:
this.$t("registered.title") + this.$t("common.success"),
type: "success",
});
this.$router.push({
path: "/login",
});
this.loading = false;
this.$t('registered.title') + this.$t('common.success'),
type: 'success'
})
// this.$router.push({
// path: '/login'
// })
this.$store.commit('user/SET_TOKEN', res.data.token)
setToken(res.data.token)
this.getInfos()
this.loading = false
})
.catch(() => {
this.loading = false;
});
this.loading = false
})
} else {
console.log("error submit!!");
return false;
console.log('error submit!!')
return false
}
});
},
},
};
})
}
}
}
</script>
<style lang="scss" scoped>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment