298 lines
7.4 KiB
Vue
298 lines
7.4 KiB
Vue
<template>
|
||
<view class="wx-login">
|
||
<watermark></watermark>
|
||
<view class="wx-login-title">手机号登录</view>
|
||
<view class="xw-login-form">
|
||
<form @submit="sublogin">
|
||
<view class="xw-login-form-item">
|
||
<view class="xw-login-form-label">手机号</view>
|
||
<input class="xw-login-form-input" maxlength="11" placeholder="请填写手机号" type="text" name="userName"
|
||
v-model="form.userName" />
|
||
<view class="login-form-icon login-form-seepass" @click="form.userName=''" v-if="form.userName">
|
||
<uni-icons type="clear" size="26" color="#B9CCE0"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="xw-login-form-item" v-if="!logintype">
|
||
<view class="xw-login-form-label">密码</view>
|
||
<input class="xw-login-form-input" placeholder="请输入密码" name="password" v-model="form.password"
|
||
:password="showPassword" type="text" />
|
||
<view class="login-form-icon login-form-seepass" @click="changePassword">
|
||
<image src="../../static/img/l03.png" mode="aspectFill" v-if="showPassword"></image>
|
||
<image src="../../static/img/l04.png" mode="aspectFill" v-else></image>
|
||
</view>
|
||
</view>
|
||
<view class="xw-login-form-item" v-if="logintype">
|
||
<view class="xw-login-form-label">验证码</view>
|
||
<input class="xw-login-form-input" placeholder="请填写验证码" name="code" v-model="form.code"
|
||
type="text" />
|
||
<view class="wx-btn wx-btn-info" @click="getMsgCode()" v-if="!loading">获取验证码</view>
|
||
<view class="wx-btn wx-btn-info" v-else>{{time}}秒后重试</view>
|
||
</view>
|
||
<text class="xw-login-form-code" v-if="logintype" @click="changeLogintype">使用密码登录</text>
|
||
<text class="xw-login-form-code" v-if="!logintype" @click="changeLogintype">使用短信验证码登录</text>
|
||
<view class="xw-login-form-code" @click="goForgetPass">忘记密码</view>
|
||
<button class="wx-btn wx-btn-info xw-login-form-btn" form-type="submit">登录</button>
|
||
<view class="login-agree">
|
||
<view class="login-agree-checkd">
|
||
<checkbox @click="agree = !agree" style="transform:scale(0.7)" :checked="agree" />
|
||
<text class="login-agree-btn" @click="agree = !agree">已阅读并同意</text>
|
||
</view>
|
||
<view class="login-agree-text" @click="goagreement()">《隐私及服务协议》</view>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import customHttp from "@/common/customHttp.js"
|
||
import { Base64 } from 'js-base64';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {
|
||
userName: "",
|
||
password: ""
|
||
},
|
||
loading: false,
|
||
timer: null,
|
||
time: 60,
|
||
logintype: false,
|
||
showPassword: true,
|
||
agree: false,
|
||
}
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
goForgetPass() {
|
||
uni.navigateTo({
|
||
url: '../forgetPass/index'
|
||
})
|
||
},
|
||
changeLogintype() {
|
||
this.logintype = !this.logintype
|
||
if (this.logintype) {
|
||
this.form = {
|
||
userName: this.form.phone,
|
||
code: ""
|
||
}
|
||
}
|
||
if (!this.logintype) {
|
||
this.form = {
|
||
userName: this.form.phone,
|
||
password: ""
|
||
}
|
||
}
|
||
},
|
||
changePassword() {
|
||
this.showPassword = !this.showPassword;
|
||
},
|
||
goagreement() {
|
||
// uni.navigateTo({//本地协议
|
||
// url: '../../pages/agreement/index?name=微聊'
|
||
// })
|
||
this.$http.request({ //在线协议
|
||
url: '/common/getAgreement',
|
||
success: (res) => {
|
||
if (res.data.code == 200) {
|
||
// #ifdef H5
|
||
window.open(res.data.data)
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
this.$fc.openWebView(res.data.data)
|
||
// #endif
|
||
}
|
||
}
|
||
});
|
||
},
|
||
getMsgCode() {
|
||
var reg = /^1[0-9]{10,10}$/;
|
||
if (!this.form.phone || !reg.test(this.form.phone)) {
|
||
uni.showToast({
|
||
title: '请输入正确的手机号',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
this.loading = true
|
||
this.timer = setInterval(() => {
|
||
this.time--
|
||
if (this.time <= 0) {
|
||
clearInterval(this.timer)
|
||
this.loading = false
|
||
this.time = 60
|
||
}
|
||
}, 1000)
|
||
var formData = {
|
||
phone: this.form.phone,
|
||
type: '2' //登录
|
||
}
|
||
this.$http.request({
|
||
url: '/auth/sendCode',
|
||
method: 'POST',
|
||
data: JSON.stringify(formData),
|
||
success: (res) => {
|
||
if (res.data.code == 200) {
|
||
// todo验证码
|
||
this.form.code = res.data.data.code
|
||
uni.showToast({
|
||
title: '验证码已发送至你的手机',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
});
|
||
},
|
||
rMathfloor(min, max) { //返回包括最大/小值
|
||
return Math.floor(Math.random() * (max - min + 1)) + min
|
||
},
|
||
sublogin(e) {
|
||
|
||
|
||
customHttp.customHttp.post('/api/im/app/login', {
|
||
"username": this.form.userName,
|
||
"password":Base64.encode(this.form.password)
|
||
}, {
|
||
params: {},
|
||
/* 会加在url上 */
|
||
header: {},
|
||
/* 会与全局header合并，如有同名属性，局WW部覆盖全局 */
|
||
dataType: 'json',
|
||
// 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
|
||
custom: {
|
||
target: "znzq"
|
||
}, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token
|
||
}).then(res => {
|
||
console.log("=========获取到数据")
|
||
console.log(res)
|
||
if (res.statusCode == 200) {
|
||
if (res.data.code == 200) {
|
||
this.loginDone(res.data.result)
|
||
}
|
||
}
|
||
}).catch(err => {
|
||
|
||
})
|
||
|
||
|
||
},
|
||
loginDone(data) {
|
||
uni.setStorageSync('appId', data.appId);
|
||
uni.setStorageSync('im_userId', data.id);
|
||
uni.setStorageSync('userId', data.id);
|
||
uni.setStorageSync('im_userCSign', data.userSign);
|
||
uni.setStorageSync('im_imUserSign', data.imUserSign);
|
||
uni.setStorageSync('imUserSign', data.imUserSign);
|
||
uni.setStorageSync('token', data.token);
|
||
uni.setStorageSync('hd_token', data.token);
|
||
|
||
uni.reLaunch({
|
||
url: '../tabbar1/index'
|
||
})
|
||
|
||
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.wx-login-title {
|
||
text-align: center;
|
||
padding-top: 120rpx;
|
||
font-size: 42rpx;
|
||
padding-bottom: 24rpx;
|
||
}
|
||
|
||
.xw-login-form {
|
||
padding: 34rpx;
|
||
}
|
||
|
||
.xw-login-form-item {
|
||
position: relative;
|
||
padding: 0 12rpx;
|
||
border-bottom: 1px #eee solid;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
line-height: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.xw-login-form-label {
|
||
width: 160rpx;
|
||
min-width: 160rpx;
|
||
}
|
||
|
||
.xw-login-form-input {}
|
||
|
||
.login-agree {
|
||
margin-top: 34rpx;
|
||
justify-content: center;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.login-agree-text,
|
||
.login-agree-btn {
|
||
font-size: 24rpx;
|
||
color: #222;
|
||
}
|
||
|
||
.login-agree-text {
|
||
color: #8295a5;
|
||
}
|
||
|
||
.login-form-icon {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
.login-form-seepass {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.login-form-icon image {
|
||
float: left;
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
.xw-login-form-code {
|
||
font-size: 28rpx;
|
||
padding: 0 12rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
color: #8295a5;
|
||
}
|
||
|
||
.wx-btn {
|
||
min-width: 200rpx;
|
||
height: 75rpx;
|
||
line-height: 75rpx;
|
||
text-align: center;
|
||
border-radius: 12rpx;
|
||
background-color: #007AFF;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.wx-btn-info {
|
||
background-color: #05C160;
|
||
}
|
||
|
||
.xw-login-form-btn {
|
||
width: 300rpx;
|
||
margin-top: 120rpx;
|
||
}
|
||
</style> |