Skip to content

H
hls-xcmg-vue-app
Commit 8848772d authored by linxin's avatar linxin
Browse files
Options

升级登录注册

parent 93c344c3
Hide whitespace changes
Inline Side-by-side
Showing with 386 additions and 271 deletions
src/pages/carConfirm/confirm-detail.vue
View file @ 8848772d
......@@ -207,7 +207,7 @@ export default {
let url = process.env.basePath + 'do_car_confirm'
let param = {
master: {
contract_id: '123',
project_id: this.$route.params.project_id,
confirm_status: 'APPROVED',
},
}
......
src/pages/carConfirm/confirm-list.vue
View file @ 8848772d
......@@ -16,7 +16,7 @@
:updateData="[showList]"
:pullUp="true"
>
<div v-for="(item,index) in showList" :key="index" class="item" @click="changePage(item.project_id)">
<div v-for="(item,index) in showList" :key="index" class="item" @click="changePage(item)">
<div class="left">
<span>
<img src="@/assets/contractStart/icon.png" >
......@@ -107,7 +107,7 @@ export default {
this.$router.push({
name: 'ConfirmDetail',
params: {
project_id: e,
project_id: e.project_id,
},
})
},
......
src/pages/login.vue
View file @ 8848772d
<template>
<scroll id="login" ref="scroll" class="content">
<div class="bird-icon"/>
<div class="bird-icon" />
<div class="login-wrap">
<img class="title" src="../assets/login/title.png" >
<div class="pwd">
<div class="pwd-icon"><img src="../assets/login/user.png"></div>
<div class="pwd-input"><input v-model="username" type="text" placeholder="请输入用户名/手机号"></div>
<div v-if="username" class="delete" @click="clearAccount"><img src="../assets/login/delete.png"></div>
<div class="pwd-input">
<input v-model="username" class="user" type="text" placeholder="请输入用户名/手机号" >
</div>
<div v-if="username" class="delete" @click="clearAccount">
<img src="../assets/login/login-delete.png" >
</div>
</div>
<div class="pwd">
<div class="pwd-icon"><img src="../assets/login/password.png"></div>
<div class="pwd-input"><input id="passwordInput" v-model="password" :type="pwdType" placeholder="请输入密码"></div>
<div v-if="password" class="delete" @click="changeType"><img :src="openEye"></div>
<div class="pwd-input">
<input id="passwordInput" v-model="password" :type="pwdType" placeholder="请输入密码" >
</div>
<div v-if="password" class="delete" @click="changeType">
<img :src="openEye" >
</div>
</div>
<div class="button submit" @click="access">登录</div>
<div class="other-function">
<div class="register" @click="registerNew">注册</div>
<div class="pwd-forgotten" @click="pwdForgotten">忘记密码？</div>
</div>
<div class="button submit" @click="access">登录</div>
</div>
</scroll>
</template>
......@@ -28,8 +34,10 @@ export default {
data () {
return {
pwdType: 'password', // 密码类型
openEye: require('@/assets/login/passNoShow.png'), // 图片地址
username: window.localStorage.username ? window.localStorage.username : '',
openEye: require('@/assets/login/pwd.png'), // 图片地址
username: window.localStorage.username
? window.localStorage.username
: '',
password: '',
version: process.env.currentVersion,
routeName: this.$route.params.routeName || '',
......@@ -42,43 +50,47 @@ export default {
},
methods: {
changeType () {
this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
this.openEye = this.pwdType === 'password' ? require('@/assets/login/passNoShow.png') : require('@/assets/login/passShow.png')
this.pwdType = this.pwdType === 'password' ? 'text' : 'password';
this.openEye =
this.pwdType === 'password'
? require('@/assets/login/passNoShow.png')
: require('@/assets/login/passShow.png')
},
login: function () {
let vm = this
// vm.password = CryptoJS.MD5(vm.password).toString().toUpperCase();
let md5passwprd = CryptoJS.MD5(vm.password).toString().toUpperCase()
let md5passwprd = CryptoJS.MD5(vm.password)
.toString()
.toUpperCase()
let param = {
'phone': vm.username,
'password': md5passwprd,
phone: vm.username,
password: md5passwprd,
}
vm.$post(process.env.basePath + 'app_login', param)
.then(function (res) {
if (res.result === 'S' && res.info.login_flag === 'Y') {
vm.hlsPopup.hideLoading()
window.localStorage.setItem('user_phone', vm.username)
window.localStorage.setItem('password', md5passwprd)
/* if (res.bp_id && res.bp_id !== 'undefined') {
vm.$post(process.env.basePath + 'app_login', param).then(function (res) {
if (res.result === 'S' && res.info.login_flag === 'Y') {
vm.hlsPopup.hideLoading()
window.localStorage.setItem('user_phone', vm.username)
window.localStorage.setItem('password', md5passwprd)
/* if (res.bp_id && res.bp_id !== 'undefined') {
window.localStorage.setItem('bp_id', res.bp_id)
} */
// if (vm.routeName) {
// vm.$router.push({name: vm.routeName})
// } else {
vm.$router.push('tab')
// }
/* let tagOption = {
// if (vm.routeName) {
// vm.$router.push({name: vm.routeName})
// } else {
vm.$router.push('tab')
// }
/* let tagOption = {
'username': vm.username.toUpperCase(),
'user_id': res.user_id,
}
vm.Jpush._jpush_config(tagOption) */
} else {
hlsPopup.hideLoading()
hlsPopup.showLongCenter('登录失败')
}
// 极光推送
})
} else {
hlsPopup.hideLoading()
hlsPopup.showLongCenter('登录失败')
}
// 极光推送
})
},
access: function () {
document.getElementById('passwordInput').blur()
......@@ -88,7 +100,7 @@ export default {
} else if (!vm.password || vm.password === undefined) {
vm.hlsPopup.showLongCenter('请输入密码')
} else {
let url = process.env.loginPath + 'admin'
let url = process.env.loginPath + 'admin';
let param = {}
vm.hlsPopup.showLoading('请稍等')
vm.$post(url, param).then(function (res) {
......@@ -105,118 +117,139 @@ export default {
this.$router.push('pwd-forgot')
},
clearAccount: function () {
this.username = ''
this.password = ''
this.username = '';
this.password = '';
},
clearPassword: function () {
this.password = ''
this.password = '';
},
},
}
</script>
<style lang="less" scoped type="text/less">
#login {
background: url("../assets/login/bg@2x.png") no-repeat;
background-size: cover;
background-position-x: 0px;
color: #FFFFFF;
width: 100%;
height: 100%;
#login {
background: url("../assets/login/back.png") no-repeat;
background-size: 100% 100%;
background-position-x: 0px;
color: #ffffff;
width: 100%;
height: 100%;
margin: 0 auto;
.scrollContent {
display: flex;
justify-content: center;
align-items: center;
}
.bird-icon {
padding-top: 30%;
background: url("../assets/login/right.png") 90% no-repeat;
background-size: 51px 25px;
}
.login-wrap {
width: 87%;
height: 355px;
margin: 0 auto;
.scrollContent{
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 8px;
margin-top: 15%;
padding: 32px 24px;
.title {
width: 227px;
height: 71px;
margin-left: -10px;
}
.bird-icon{
padding-top: 20%;
}
.pwd {
position: relative;
width: 279px;
margin: 0 auto;
display: flex;
display: -webkit-flex;
.pwd-icon {
margin-top: 2px;
margin-right: 6px;
margin-left: 4px;
img {
width: 18px;
height: 20px;
}
}
.login-wrap{
.pwd-input {
width: 100%;
margin-top: 60%;
}
.pwd {
border-bottom: 1px solid #5D98F6;
display: flex;
display: -webkit-flex;
margin: 5% 0 5% 14%;
.pwd-icon {
margin-top: 2px;
margin-right: 6px;
margin-left: 4px;
img {
width: 18px;
height: 20px;
}
.user {
background: url("../assets/login/phone.png") 2px 2px no-repeat;
background-size: 25px 25px;
}
.pwd-input {
margin-left: 4%;
#passwordInput {
background: url("../assets/login/passwordConfirm.png") 2px 2px no-repeat;
background-size: 25px 25px;
}
input {
width: 100%;
margin-bottom: 10px;
text-indent: 30px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #2a2a2a;
height: 35px;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
// background-color: #0057C3 !important;
input {
width: 100%;
height: 100%;
font-size: 16px;
color: #fff;
line-height: 22px;
background-color: rgba(0,87,195,0) !important;
}
input::-webkit-input-placeholder {
font-size: 16px;
color: #CDD1D3;
}
border-bottom: 1px solid rgba(42, 42, 42, 0.4);
margin-top: 30px;
}
.delete {
img {
margin-right: 20px;
margin-top: 5px;
width: 14px;
height: 14px;
}
}
}
.other-function {
width: 64%;
display: flex;
display: -webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
margin: 0 0 0 23%;
.register {
color: #FDFDFD;
font-size: 15px;
input:focus {
border-bottom: 1px solid #1d3fff;
}
.pwd-forgotten {
color: #FDFDFD;
font-size: 15px;
input::-webkit-input-placeholder {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(75, 74, 75, 0.4);
}
}
.submit {
opacity: 1;
background: #FDFDFD;
border-radius: 8px 0 0 8px;
height: 50px;
margin: 10% 0 6% 14%;
font-size:16px;
color: #000000;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
&.activated {
opacity: 0.8;
-webkit-transform: scale(1, 1);
transform: scale(1, 1)
.delete {
position: absolute;
right: -15px;
top: 30px;
img {
margin-right: 20px;
margin-top: 5px;
width: 20px;
// height: 14px;
}
}
}
.other-function {
width: 279px;
margin: 0 auto;
display: flex;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #1d3fff;
margin-top: 8px;
font-weight: 500;
display: -webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.submit {
background: #1d3fff;
border-radius: 4px;
width: 279px;
margin-top: 32px;
height: 49px;
font-size: 16px;
color: #fff;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
&.activated {
opacity: 0.8;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
}
</style>
src/pages/regiester.vue
View file @ 8848772d
......@@ -46,7 +46,7 @@
</template>
<script>
var CryptoJS = require('crypto-js')
var CryptoJS = require('crypto-js')
export default {
data () {
return {
......@@ -167,7 +167,7 @@ export default {
let md5passwprd = CryptoJS.MD5(vm.user_password).toString().toUpperCase()
let params = {
phone: vm.phone_number,
password: md5passwprd
password: md5passwprd,
}
hlsHttp.post(url, params).then(function (res) {
if (res.result === 'S') {
......
src/pages/regiester2.vue
View file @ 8848772d
......@@ -2,44 +2,49 @@
<h-view id="register" class="public-style">
<h-content>
<div class="right-logo">
<img src="@/assets/login/registerLogo.png">
<img src="@/assets/login/return.png" @click="returnLogin">
<img src="@/assets/login/right.png" >
</div>
<div class="register-title">
<img src="@/assets/login/registerTitle.png">
</div>
<list-item>
<item :proportion="[0,4]" :item-height="64">
<img slot="left-icon" src="../assets/login/phone.png" class="left-icon">
<input slot="content" v-model="phone_number" placeholder="请输入手机号码">
<img
v-if="phone_number" slot="right-icon" class="right-icon" src="@/assets/login/registerDelete.png"
@click="clearAccount">
</item>
<item :proportion="[0,4]" :item-height="64">
<img slot="left-icon" src="../assets/login/phone_code.png" class="left-icon">
<input slot="content" v-model="verifiedCode" type="text" placeholder="请填写验证码">
<div slot="right-icon" class="verified-code">
<div v-if="!showTimer" class="verified-code-box" @click="getPhoneCode">点击获取</div>
<span v-if="showTimer" class="verified-code-des">{{ timerCount }}{{ text }}</span>
<div class="box">
<div class="box-content">
<img class="register-title" src="../assets/login/reg-logo.png" >
<div class="reg-item">
<img src="../assets/login/reg-user.png" class="left-icon" >
<input v-model="phone_number" placeholder="请输入手机号码" >
<img
v-if="phone_number"
class="right-icon"
src="@/assets/login/reg-de.png"
@click="clearAccount"
>
</div>
<div class="reg-item">
<img src="../assets/login/check.png" class="left-icon" >
<input v-model="verifiedCode" type="text" placeholder="请填写验证码" >
<div class="verified-code">
<div v-if="!showTimer" class="verified-code-box" @click="getPhoneCode">点击获取</div>
<span v-if="showTimer" class="verified-code-des">{{ timerCount }}{{ text }}</span>
</div>
</div>
<div class="reg-item">
<img src="../assets/login/pass.png" class="left-icon" >
<input
v-model="user_password"
:type="pwdType"
placeholder="请输入6~20位密码"
maxlength="20"
@blur="passwordCheck"
>
<img v-if="user_password" :src="openEye" class="right-icon" @click="changeType" >
</div>
</item>
<item :proportion="[0,4]" :item-height="64">
<img slot="left-icon" src="../assets/login/passwordConfirm.png" class="left-icon">
<input
slot="content" v-model="user_password" :type="pwdType" placeholder="请输入6~20位密码"
maxlength="20" @blur="passwordCheck">
<img v-if="user_password" slot="right-icon" :src="openEye" class="right-icon" @click="changeType">
</item>
<item :proportion="[0,4]" :item-height="64">
<img slot="left-icon" src="../assets/login/passwordConfirm.png" class="left-icon">
<input
slot="content" v-model="confirm" :type="pwdType" placeholder="请重新输入密码"
@blur="confirmCheck">
<img v-if="confirm" slot="right-icon" :src="openEye" class="right-icon" @click="changeType">
</item>
</list-item>
<div class="button submit" @click="submit">注册</div>
<div class="button return" @click="returnLogin">返回</div>
<div class="reg-item">
<img src="../assets/login/pass.png" class="left-icon" >
<input v-model="confirm" :type="pwdType" placeholder="请重新输入密码" @blur="confirmCheck" >
<img v-if="confirm" :src="openEye" class="right-icon" @click="changeType" >
</div>
<div class="button submit" @click="submit">注册</div>
</div>
</div>
</h-content>
</h-view>
</template>
......@@ -50,7 +55,7 @@ export default {
data () {
return {
pwdType: 'password', // 密码类型
openEye: require('@/assets/login/registerNoshow.png'), // 图片地址
openEye: require('@/assets/login/passNoShow.png'), // 图片地址
phone_number: '',
verifiedCode: '',
user_password: '',
......@@ -111,19 +116,28 @@ export default {
},
changeType () {
this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
this.openEye = this.pwdType === 'password' ? require('@/assets/login/registerNoshow.png') : require('@/assets/login/registerShow.png')
this.openEye =
this.pwdType === 'password'
? require('@/assets/login/passNoShow.png')
: require('@/assets/login/passShow.png')
},
checkPhone () {
let vm = this
vm.phoneNumberFlag = false
if (hlsUtil.phoneNumber(vm.phone_number) || hlsUtil.phoneNumber86(vm.phone_number)) {
if (
hlsUtil.phoneNumber(vm.phone_number) ||
hlsUtil.phoneNumber86(vm.phone_number)
) {
vm.phoneNumberFlag = true
}
},
getPhoneCode () {
let vm = this
if (!vm.showTimer) {
if (hlsUtil.phoneNumber(vm.phone_number) || hlsUtil.phoneNumber86(vm.phone_number)) {
if (
hlsUtil.phoneNumber(vm.phone_number) ||
hlsUtil.phoneNumber86(vm.phone_number)
) {
vm.phoneNumberFlag = true
vm.getVerifiedCode()
vm.showTimer = true
......@@ -177,7 +191,9 @@ export default {
hlsPopup.showLongCenter('请确认密码!')
} else {
let url = process.env.basePath + 'register'
let md5passwprd = CryptoJS.MD5(vm.user_password).toString().toUpperCase()
let md5passwprd = CryptoJS.MD5(vm.user_password)
.toString()
.toUpperCase()
let params = {
phone: vm.phone_number,
password: md5passwprd,
......@@ -192,7 +208,7 @@ export default {
})
}
},
returnLogin(){
returnLogin () {
this.$router.go(-1)
},
getVerifiedCode () {
......@@ -224,117 +240,183 @@ export default {
</script>
<style lang="less">
@import "../styles/mixin";
@import "../styles/vue-1px";
#register {
@import "../styles/mixin";
@import "../styles/vue-1px";
.content {
background-color: #FFFFFF;
}
.right-logo {
margin-left: 82%;
margin-top: 10%;
img {
width: 50px;
#register {
.content {
background: url("../assets/login/register.png");
background-size: 100% 100%;
}
.box {
width: 327px;
height: 512px;
margin: 0 auto;
margin-top:80px;
background: #1d3fff;
border-radius: 8px;
.box-content {
width: 279px;
margin: 0 auto;
.register-title {
width: 156px;
}
}
.register-title {
margin-top: 16%;
margin-left: 10%;
img {
width: 180px;
.reg-item {
position: relative;
width: 100%;
height: 40px;
margin-top: 30px;
line-height: 30px;
img {
width: 28px;
height: 28px;
}
.left-icon {
position: absolute;
}
.right-icon {
width: 24px;
height: 24px;
position: absolute;
right: 0px;
top: 5px;
}
.verified-code {
position: absolute;
right: 0px;
top: 0px;
.verified-code-box {
padding-left: 12px;
border-left: 1px solid #ffffff;
color: #fff;
font-family: PingFangSC-Regular;
font-size: 14px;
line-height: 30px;
}
.verified-code-des {
font-size: 10px;
color: #fff;
}
}
input {
width: 100%;
text-indent: 30px;
background-color: #1d3fff;
font-family: PingFangSC-Regular;
padding-bottom: 8px;
font-size: 14px;
color: #ffffff;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
input::placeholder {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}
input:focus {
border-bottom: 1px solid #fff;
}
}
}
.hls-list-item {
width: 90%;
margin-left: 8%;
margin-top: 6%;
}
.right-logo {
width: 327px;
margin: 0 auto;
margin-top:10%;
img:last-child{
float: right;
width: 50px;
}
.hls-item .contents {
//.setBottomLine(rgba(29,63,255,0.25))
border-bottom: 1px solid rgba(29, 63, 255, 0.25);
img:first-child{
float:left;
width: 20px;
}
// img {
// width: 50px;
// }
}
.hls-item .contents .add-name .left-icon {
width: 26px;
}
.register-title {
margin-top: 16%;
// margin-left: 10%;
.hls-item .contents .add-content input {
text-align: left;
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #0D0D0D;
}
.add-content{
.right-icon{
width: 14px;
}
img {
width: 180px;
}
}
.verified-code {
.wh(60%, 100%);
text-align: right;
.hls-list-item {
width: 90%;
margin-left: 8%;
margin-top: 6%;
background: #1d3fff;
}
.verified-code-box {
margin-left: 14px;
border-left:1px solid rgba(29, 63, 255, 0.25);
color: @headerColor;
line-height: 30px;
}
.hls-item .contents {
//.setBottomLine(rgba(29,63,255,0.25))
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.verified-code-des {
font-size: 10px;
color: @headerColor;
}
}
.submit {
opacity: 1;
background: @headerColor;
border-radius: 8px 0 0 8px;
height: 50px;
margin: 10% 0 6% 12%;
font-size:16px;
color: #FFFFFF;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
&.activated {
opacity: 0.8;
-webkit-transform: scale(1, 1);
transform: scale(1, 1)
}
}
.return{
.hls-item .contents .add-name .left-icon {
width: 26px;
}
opacity: 1;
background: #FFF;
border-radius: 8px 0 0 8px;
height: 50px;
margin: 0 0 6% 12%;
font-size:16px;
color: #000000;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
&.activated {
opacity: 0.8;
-webkit-transform: scale(1, 1);
transform: scale(1, 1)
}
.hls-item .contents .add-content input {
text-align: left;
background-color: #1d3fff;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #ffffff;
}
.hls-item .contents .add-content input::placeholder {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}
.add-content {
.right-icon {
width: 14px;
}
}
.submit {
background: #ffffff;
border-radius: 4px;
color: @headerColor;
width: 279px;
height: 40px;
margin-top: 50px;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
&.activated {
opacity: 0.8;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
.return {
opacity: 1;
background: #fff;
border-radius: 8px 0 0 8px;
height: 50px;
margin: 0 0 6% 12%;
font-size: 16px;
color: #000000;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
&.activated {
opacity: 0.8;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
}
</style>
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