333 lines
9.3 KiB
Vue
333 lines
9.3 KiB
Vue
<template>
|
||
<view>
|
||
<image class="bg-img-container" src="http://gqz.opsoul.com/sys/login-bg-business.jpg" mode="aspectFill"></image>
|
||
<view class="bg-white login-container padding-lr-lg padding-tb-xl">
|
||
<view v-if="operType === 0">
|
||
<!-- 登录内容 -->
|
||
<view class="margin-tb-xl">
|
||
<view class="cu-form-group">
|
||
<view class="text-xxl margin-right"><text class="cuIcon-people"></text></view>
|
||
<input class="radius-input" type="number" name="phone" v-model="formData.phone"
|
||
placeholder="请输入帐号(手机号)"></input>
|
||
</view>
|
||
<view class="cu-form-group margin-top-lg">
|
||
<view class="text-xxl margin-right"><text class="cuIcon-unlock"></text></view>
|
||
<input class="radius-input" password name="password" v-model="formData.password"
|
||
placeholder="请输入密码"></input>
|
||
</view>
|
||
</view>
|
||
<view class="margin-bottom-xl">
|
||
<view class="cu-btn bg-blue radius long-btn shadow-blur main-btn text-lg" @click="loginByPwd">登录
|
||
</view>
|
||
<view class="cu-btn bg-blue light radius long-btn shadow-blur main-btn margin-top text-lg"
|
||
@click="changeOperType">前往注册</view>
|
||
</view>
|
||
<!-- <view class="margin-top-xl text-center text-lg">
|
||
<text class="text-grey">手机验证码登录</text>
|
||
<text class="text-grey margin-lr-sm">|</text>
|
||
<text class="text-grey">忘记密码？</text>
|
||
</view> -->
|
||
</view>
|
||
<view v-else-if="operType === 1">
|
||
<!-- 注册内容 -->
|
||
<view class="margin-tb-xl">
|
||
<view class="cu-form-group">
|
||
<view class="title">商家昵称</view>
|
||
<input class="radius-input" name="name" v-model="formData.name" placeholder="请输入用户昵称"></input>
|
||
</view>
|
||
<view class="cu-form-group margin-top">
|
||
<view class="title">手机号码</view>
|
||
<input class="radius-input" type="number" name="phone" v-model="formData.phone"
|
||
placeholder="请输入号码(作为登录帐号)"></input>
|
||
</view>
|
||
<view class="cu-form-group margin-top">
|
||
<view class="title">设置密码</view>
|
||
<input class="radius-input" password name="password" v-model="formData.password"
|
||
placeholder="请设置至少6位数的登录密码"></input>
|
||
</view>
|
||
<view class="cu-form-group margin-top">
|
||
<view class="title">确认密码</view>
|
||
<input class="radius-input" password name="passwordAgain" v-model="formData.passwordAgain"
|
||
placeholder="请再次输入密码"></input>
|
||
</view>
|
||
<view class="cu-form-group margin-top">
|
||
<view class="title">验证码</view>
|
||
<input class="radius-input" type="number" name="registerCode" v-model="formData.registerCode"
|
||
placeholder="请输入验证码"></input>
|
||
<view v-if="countDownNum === 0" class="cu-btn bg-blue round-btn margin-left-xs shadow-blur" @click="sendVertifyCode">发送验证码
|
||
</view>
|
||
<view v-else class="cu-btn bg-gray round-btn margin-left-sm shadow-blur">已发送({{countDownNum}})
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="margin-bottom-sm text-lg flex justify-center align-center">
|
||
<checkbox style="transform:scale(0.8)" class="main-color" :checked="agreeContract"
|
||
@click="changeAgreeContract">
|
||
</checkbox>
|
||
<text class="margin-left-xs">
|
||
我同意
|
||
<text class="text-main-color underline-text">用户注册协议</text>
|
||
</text>
|
||
</view>
|
||
<view class="margin-bottom-xl">
|
||
<view class="cu-btn bg-blue radius long-btn shadow-blur main-btn text-lg" @click="registerByPhone">
|
||
立即注册</view>
|
||
<view class="cu-btn bg-blue light radius long-btn shadow-blur main-btn margin-top text-lg"
|
||
@click="changeOperType">已有账户，前往登录</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 登录校验弹窗 -->
|
||
<vertify-login ref="vertifyLogin" @reload="authLogin"></vertify-login>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
pageContentTop: this.CustomBar,
|
||
operType: 0, // 0为登录，1为注册
|
||
countDownNum: 0,
|
||
agreeContract: false,
|
||
formData: {}
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options && options.operType) {
|
||
this.operType = Number(options.operType)
|
||
}
|
||
},
|
||
methods: {
|
||
changeAgreeContract() {
|
||
this.agreeContract = !this.agreeContract;
|
||
},
|
||
changeOperType() {
|
||
this.reset();
|
||
this.operType = this.operType === 0 ? 1 : 0;
|
||
if (this.operType === 1) {
|
||
this.authLogin();
|
||
}
|
||
},
|
||
reset() {
|
||
this.formData = {};
|
||
this.agreeContract = false;
|
||
},
|
||
async authLogin() {
|
||
// 获取微信用户信息
|
||
let curUserInfo = await this.$request.getWxUserInfo();
|
||
// 校验提示登录
|
||
if (!curUserInfo || !curUserInfo.openId) {
|
||
this.$refs.vertifyLogin.showModal();
|
||
return false;
|
||
} else {
|
||
this.$refs.vertifyLogin.hideModal();
|
||
}
|
||
return true;
|
||
},
|
||
validLoginData(type) {
|
||
let errMsg = null;
|
||
if (type === 'pwd') {
|
||
if (!this.formData.phone) {
|
||
errMsg = '请输入帐号';
|
||
} else if (!this.formData.password) {
|
||
errMsg = '请输入密码';
|
||
}
|
||
}
|
||
if (errMsg) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: errMsg
|
||
})
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
async loginByPwd() {
|
||
if (!this.validLoginData('pwd')) {
|
||
return;
|
||
}
|
||
|
||
let res = await this.$request.appLogin(this.formData);
|
||
if (res && res.code === 0) {
|
||
let cacheRes = await this.$request.qryUserInfo(null, this.formData.phone);
|
||
uni.setStorageSync('userProfile', cacheRes.data);
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '登录成功'
|
||
})
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
} else if (res && res.msg) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: res.msg
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '登录失败'
|
||
})
|
||
}
|
||
},
|
||
startCountDownNum() {
|
||
this.countDownNum = 180;
|
||
let t = setInterval(() => {
|
||
this.countDownNum -= 1;
|
||
if (this.countDownNum === 0) {
|
||
clearInterval(t);
|
||
}
|
||
}, 1000);
|
||
},
|
||
async sendVertifyCode() {
|
||
if (this.$validate.validContactNum(this.formData.phone)) {
|
||
let res = await this.$request.sendVertifyCode({
|
||
to: this.formData.phone
|
||
});
|
||
if (res && res.code === 0) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '验证码已发送'
|
||
})
|
||
this.startCountDownNum();
|
||
} else if (res && res.msg) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: res.msg
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '验证码发送失败'
|
||
})
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '请正确输入手机号码'
|
||
})
|
||
}
|
||
},
|
||
validRegisterData() {
|
||
let errMsg = null;
|
||
if (!this.formData.name) {
|
||
errMsg = '请输入用户昵称';
|
||
} else if (!this.$validate.validContactNum(this.formData.phone)) {
|
||
errMsg = '请正确输入手机号码';
|
||
} else if (!this.formData.password || this.formData.password.length < 6) {
|
||
errMsg = '密码至少为6位数';
|
||
} else if (!this.formData.passwordAgain || this.formData.password !== this.formData.passwordAgain) {
|
||
errMsg = '两次输入密码不一致';
|
||
} else if (!this.formData.registerCode) {
|
||
errMsg = '请输入验证码'
|
||
} else if (!this.agreeContract) {
|
||
errMsg = '请先阅读并同意用户注册协议'
|
||
}
|
||
if (errMsg) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: errMsg
|
||
})
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
async registerByPhone() {
|
||
let curUserInfo = this.$request.getCurUserInfo();
|
||
if (!curUserInfo || !curUserInfo.workerId) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '注册失败'
|
||
})
|
||
return;
|
||
}
|
||
|
||
if (!this.validRegisterData()) {
|
||
return;
|
||
}
|
||
|
||
let res = await this.$request.realRegisterUser({
|
||
...this.formData,
|
||
workerId: curUserInfo.workerId
|
||
});
|
||
if (res && res.code === 0) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '注册成功'
|
||
})
|
||
this.changeOperType();
|
||
} else if (res && res.msg) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: res.msg
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '注册失败'
|
||
})
|
||
}
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.login-container {
|
||
border-radius: 80rpx;
|
||
/* min-height: 44vh; */
|
||
width: 92vw;
|
||
margin: 0 auto;
|
||
filter: drop-shadow(1px 2px 8px hsl(220deg 38% 50%));
|
||
margin-top: 20vh;
|
||
}
|
||
|
||
.login-avatar {
|
||
width: 18vh;
|
||
height: 18vh;
|
||
top: 6vh;
|
||
}
|
||
|
||
.radius-input {
|
||
border: 1rpx solid rgba(0, 0, 0, 0.1);
|
||
border-radius: 40rpx;
|
||
padding: 20rpx;
|
||
box-sizing: content-box;
|
||
}
|
||
|
||
.cu-form-group+.cu-form-group {
|
||
border-top: unset;
|
||
}
|
||
|
||
.main-btn {
|
||
padding: 40rpx;
|
||
border-radius: 40rpx;
|
||
}
|
||
|
||
.round-btn {
|
||
border-radius: 40rpx;
|
||
}
|
||
|
||
.underline-text {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.bg-img-container {
|
||
position: absolute;
|
||
top: 0;
|
||
width: 100vw;
|
||
height: 100%;
|
||
}
|
||
|
||
.cu-form-group .title {
|
||
text-align: justify;
|
||
padding-right: 15rpx;
|
||
font-size: 30rpx;
|
||
position: relative;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
</style>
|