|
|
<template>
|
|
|
<view class="login">
|
|
|
<view class="avatorWrapper">
|
|
|
<view class="avator">
|
|
|
<image class="img" src="../../static/image/header-icon.png" mode="widthFix"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="form">
|
|
|
<view class="" v-show="!loginShow">
|
|
|
<view class=" inputWrapper">
|
|
|
<input maxlength="11" class="input" @blur="memberOne" v-model="form.mobilePhone" type="text"
|
|
|
value="" placeholder="请输入手机号" />
|
|
|
</view>
|
|
|
<view class=" inputWrapper">
|
|
|
<input placeholder="请输入验证码" v-model="form.passCode" class="inputCode" name="input"></input>
|
|
|
<button class='cu-btn round bg-red' @click="getCode()" style="width: 160px ;" v-show="!getCodeShow"
|
|
|
:disabled="getCodeShow">获取验证码</button>
|
|
|
<button class='cu-btn round bg-red' @click="getCode()" style="width: 230px ;" v-show="getCodeShow"
|
|
|
:disabled="getCodeShow">{{getCodeText}}</button>
|
|
|
</view>
|
|
|
<view class=" inputWrapper" style="padding: 0;">
|
|
|
<move-verify class="move-verify" @result='verifyResult' ref="verifyElement1"></move-verify>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="" v-show="loginShow">
|
|
|
<view class=" inputWrapper">
|
|
|
<input maxlength="11" class="input" v-model="form.mobilePhone" type="text" value=""
|
|
|
placeholder="请输入手机号" />
|
|
|
</view>
|
|
|
<view class=" inputWrapper">
|
|
|
<input class="input" placeholder="请输入密码" type="password" v-model="form.password"
|
|
|
name="input"></input>
|
|
|
</view>
|
|
|
<view class=" inputWrapper" style="padding: 0;">
|
|
|
<move-verify class="move-verify" @result='verifyResult' ref="verifyElement2"></move-verify>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="margin-top margin-left">
|
|
|
<checkbox-group class="block flex align-center " @change="changeBox">
|
|
|
<checkbox style="transform:scale(0.8);margin-right: 5upx;" :class="checkbox.checked?'checked':''"
|
|
|
:checked="checkbox.checked?true:false" value="A"></checkbox><text class="">记住密码</text>
|
|
|
</checkbox-group>
|
|
|
</view>
|
|
|
<view class="flex justify-center margin-top">
|
|
|
<view v-show="!loginShow" @click="(loginShow=true)">
|
|
|
<text class="text-red">使用账号密码登录</text>
|
|
|
</view>
|
|
|
<view class="text-red" v-show='loginShow' @click="(loginShow=false)">
|
|
|
<text>使用手机验证码登录</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<button size="default" @click="logIn" :loading="loadingShow"
|
|
|
class=" loginBtn cu-btn bg-red margin-tb-sm lg">登录</button>
|
|
|
</view>
|
|
|
<view class=" forgotBtn cu-bar ">
|
|
|
<text class="forgotBtn_hr"></text>
|
|
|
<text>DCMY</text>
|
|
|
<text class="forgotBtn_hr"></text>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import moveVerify from "@/components/helang-moveVerify/helang-moveVerify.vue"
|
|
|
import host from '../../utils/host.js'
|
|
|
export default {
|
|
|
components: {
|
|
|
"move-verify": moveVerify
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
userInfo: null,
|
|
|
loadingShow: false,
|
|
|
resultData: {
|
|
|
flag: false
|
|
|
},
|
|
|
checkbox: {
|
|
|
value: 'A',
|
|
|
checked: false,
|
|
|
},
|
|
|
loginShow: true,
|
|
|
getCodeText: null,
|
|
|
memberShow: false,
|
|
|
getCodeShow: false,
|
|
|
memberStoreList: [{
|
|
|
storeName: "天河北路店"
|
|
|
}, {
|
|
|
storeName: "林和西店"
|
|
|
}],
|
|
|
form: {
|
|
|
mobilePhone: null,
|
|
|
password: null,
|
|
|
state: 1,
|
|
|
passCode: null
|
|
|
},
|
|
|
time: 0,
|
|
|
storeId: null,
|
|
|
key: 0,
|
|
|
}
|
|
|
},
|
|
|
onLoad() {},
|
|
|
methods: {
|
|
|
changeBox(e) {
|
|
|
//console.log(e);
|
|
|
this.checkbox.checked = !this.checkbox.checked
|
|
|
|
|
|
if (this.checkbox.checked == false) {
|
|
|
uni.removeStorageSync('userPassword')
|
|
|
} else {}
|
|
|
},
|
|
|
memberOne(e) {
|
|
|
var that = this
|
|
|
if (that.loginShow == false) {
|
|
|
that.$api.staffLoginList({
|
|
|
mobilePhone: e.target.value,
|
|
|
state: 1
|
|
|
}).then(res => {
|
|
|
if (res.code == '000000') {
|
|
|
if (res.rows.length == 0) {
|
|
|
uni.showModal({
|
|
|
title: '登录提示',
|
|
|
content: "没有查到相关员工信息 , 请确认员工手机是否正确",
|
|
|
showCancel: false,
|
|
|
})
|
|
|
} else {
|
|
|
that.storeId = res.rows[0].storeId
|
|
|
}
|
|
|
} else {
|
|
|
uni.showModal({
|
|
|
title: '登录提示',
|
|
|
content: "手机号查询员工列表 , " + res.message,
|
|
|
showCancel: false,
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
/* 校验结果回调函数 */
|
|
|
verifyResult(res) {
|
|
|
//console.log(res.flag);
|
|
|
this.resultData = res;
|
|
|
if (this.resultData.flag == false) {
|
|
|
uni.showModal({
|
|
|
title: '登录提示',
|
|
|
content: "验证失败 ! 请下拉刷新页面重试 ",
|
|
|
showCancel: false,
|
|
|
})
|
|
|
}
|
|
|
//console.log(this.resultData);
|
|
|
},
|
|
|
/* 校验插件重置 */
|
|
|
verifyReset() {
|
|
|
if (this.$refs.verifyElement1) {
|
|
|
this.$refs.verifyElement1.reset();
|
|
|
this.$refs.verifyElement2.reset();
|
|
|
}
|
|
|
/* 删除当前页面的数据 */
|
|
|
this.resultData = {};
|
|
|
},
|
|
|
logIn() {
|
|
|
var that = this
|
|
|
if(this.form.show!=undefined&&this.form.show==true){
|
|
|
this.resultData.flag = true
|
|
|
}
|
|
|
that.loadingShow = true
|
|
|
//console.log(this.checkbox.checked);
|
|
|
if (that.checkbox.checked == true) {
|
|
|
uni.setStorageSync('userPassword', that.form)
|
|
|
}
|
|
|
if (this.resultData.flag == true) {
|
|
|
if (that.form.passCode == null) {
|
|
|
that.$api.phonePassLogin(that.form).then(res => {
|
|
|
that.loadingShow = false
|
|
|
if (res.code == '000000') {
|
|
|
var user = res.data
|
|
|
user.mobilePhone = that.form.mobilePhone
|
|
|
uni.setStorageSync('userInfo', user)
|
|
|
setTimeout(function() {
|
|
|
uni.switchTab({
|
|
|
url: '../tabBar/mySet/mySet'
|
|
|
});
|
|
|
uni.showToast({
|
|
|
title: '登录成功',
|
|
|
icon: "success",
|
|
|
duration: 2000
|
|
|
});
|
|
|
}, 500)
|
|
|
} else {
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: res.message,
|
|
|
showCancel: false,
|
|
|
success: function(res) {
|
|
|
that.loadingShow = false
|
|
|
that.getCodeShow = false
|
|
|
that.time = 0;
|
|
|
}
|
|
|
})
|
|
|
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
that.$api.phoneLogin(that.form).then(res => {
|
|
|
that.loadingShow = false
|
|
|
if (res.code == '000000') {
|
|
|
var user = res.data
|
|
|
user.mobilePhone = that.form.mobilePhone
|
|
|
setTimeout(function() {
|
|
|
uni.switchTab({
|
|
|
url: '../tabBar/mySet/mySet'
|
|
|
});
|
|
|
uni.showToast({
|
|
|
title: '登录成功',
|
|
|
icon: "success",
|
|
|
duration: 2000
|
|
|
});
|
|
|
if (that.checkbox.checked == true) {
|
|
|
uni.setStorageSync('userPassword', that.form)
|
|
|
}
|
|
|
uni.setStorageSync('userInfo', user)
|
|
|
}, 500)
|
|
|
} else {
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: res.message,
|
|
|
showCancel: false,
|
|
|
success: function(res) {
|
|
|
that.loadingShow = false
|
|
|
that.getCodeShow = false
|
|
|
that.time = 0;
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
if (this.resultData.flag != undefined) {
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: "请拖动滑块验证信息",
|
|
|
showCancel: false,
|
|
|
success: function(res) {
|
|
|
that.loadingShow = false
|
|
|
that.getCodeShow = false
|
|
|
that.time = 0;
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
},
|
|
|
getCode() {
|
|
|
let reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
|
|
|
if (reg.test(this.form.mobilePhone)) {
|
|
|
this.$api.getSmsCode({
|
|
|
mobilePhone: this.form.mobilePhone,
|
|
|
storeId: this.storeId
|
|
|
}).then(res => {
|
|
|
if (res.code == '000000') {
|
|
|
uni.showToast({
|
|
|
title: '已发送验证码',
|
|
|
icon: "success",
|
|
|
duration: 3000
|
|
|
});
|
|
|
this.getCodeShow = true
|
|
|
this.time = 60;
|
|
|
this.timer();
|
|
|
} else {
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: res.message,
|
|
|
showCancel: false,
|
|
|
success: function(res) {
|
|
|
this.getCodeShow = false
|
|
|
this.time = 0;
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
this.getCodeShow = false
|
|
|
this.time = 0;
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: '请输入正确的手机号',
|
|
|
showCancel: false,
|
|
|
success: function(res) {
|
|
|
this.getCodeShow = false
|
|
|
this.time = 0;
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
},
|
|
|
timer() {
|
|
|
if (this.time > 0) {
|
|
|
this.time--;
|
|
|
this.getCodeText = (this.time < 10 ? '0' + this.time : this.time) + "s后重新获取";
|
|
|
setTimeout(this.timer, 1000);
|
|
|
} else {
|
|
|
this.time = 0;
|
|
|
this.getCodeText = "获取验证码";
|
|
|
this.getCodeShow = false;
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
onShow: function() {
|
|
|
let form = uni.getStorageSync('userPassword')
|
|
|
//console.log(this.key);
|
|
|
if (this.form.password != undefined) {
|
|
|
this.form = form
|
|
|
this.checkbox.checked = true
|
|
|
} else {
|
|
|
this.verifyReset()
|
|
|
//console.log(123);
|
|
|
}
|
|
|
if (this.key == 1) {
|
|
|
this.verifyReset()
|
|
|
//console.log(123);
|
|
|
}
|
|
|
},
|
|
|
onPullDownRefresh: function() {
|
|
|
setTimeout(function() {
|
|
|
uni.reLaunch({
|
|
|
url: './login',
|
|
|
});
|
|
|
uni.showToast({
|
|
|
title: '刷新成功',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
uni.stopPullDownRefresh();
|
|
|
}, 500);
|
|
|
},
|
|
|
onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
|
|
|
//console.log(option);
|
|
|
var form = uni.getStorageSync('userPassword')
|
|
|
|
|
|
if (form.password != undefined) {
|
|
|
this.form = form
|
|
|
if (option.key != undefined && option.key * 1 == 1) {
|
|
|
this.key = option.key
|
|
|
} else {
|
|
|
this.checkbox.checked == true
|
|
|
|
|
|
this.form.show=true
|
|
|
this.logIn()
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
<style>
|
|
|
.login {
|
|
|
background: #dadada;
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
}
|
|
|
|
|
|
.switch_login {
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.switch_login text {
|
|
|
display: inline-block;
|
|
|
cursor: pointer;
|
|
|
padding: 20upx 0;
|
|
|
font-size: 32upx;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.avatorWrapper {
|
|
|
height: 20vh;
|
|
|
width: 100vw;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: flex-end;
|
|
|
}
|
|
|
|
|
|
.avator {
|
|
|
width: 200upx;
|
|
|
height: 200upx;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.avator .img {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.form {
|
|
|
padding: 0 100upx;
|
|
|
}
|
|
|
|
|
|
.inputWrapper {
|
|
|
width: 100%;
|
|
|
height: 80upx !important;
|
|
|
background: white;
|
|
|
border-radius: 30px;
|
|
|
box-sizing: border-box;
|
|
|
padding: 0 20px;
|
|
|
margin-top: 25px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
.inputWrapper .input {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.inputWrapper .inputCode {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.loginBtn {
|
|
|
width: 100%;
|
|
|
height: 80upx;
|
|
|
background: #77B307;
|
|
|
border-radius: 50upx;
|
|
|
margin-top: 50px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.forgotBtn {
|
|
|
color: #383838;
|
|
|
font-size: 20upx;
|
|
|
margin-top: 20px;
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
width: 100%;
|
|
|
padding: 0 10%;
|
|
|
}
|
|
|
|
|
|
.forgotBtn_hr {
|
|
|
margin-top: 20upx;
|
|
|
height: 1upx;
|
|
|
width: 35%;
|
|
|
border-top: #000000 1upx solid;
|
|
|
}
|
|
|
|
|
|
.login uni-button[disabled]:not([type]),
|
|
|
uni-button[disabled][type=default] {
|
|
|
color: #FFFFFF;
|
|
|
background-color: red;
|
|
|
}
|
|
|
|
|
|
.login .uni-movable-view {
|
|
|
border: none !important;
|
|
|
}
|
|
|
|
|
|
.login .cu-btn[disabled] {
|
|
|
opacity: .3;
|
|
|
}
|
|
|
|
|
|
.login uni-button[disabled] {
|
|
|
color: #FFFFFF;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
|
|
|
.move-verify {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
border-radius: 50upx;
|
|
|
line-height: 45px;
|
|
|
}
|
|
|
|
|
|
.pathway uni-movable-view.active[data-v-f9d47844] {
|
|
|
border: #FFFFFF 1px solid;
|
|
|
}
|
|
|
</style>
|