299 lines
7.5 KiB
Vue
299 lines
7.5 KiB
Vue
<template>
|
||
<view class="container">
|
||
<image src="/static/banner.jpg" mode="widthFix" style="width:100%"></image>
|
||
<uni-segmented-control :current="current" :values="items" styleType="button" @clickItem="onClickItem">
|
||
</uni-segmented-control>
|
||
<view style="height: 8rpx;"></view>
|
||
<uni-section>
|
||
<view v-if="current==0" style="background-color;:white">
|
||
<uni-forms ref="form1" :modelValue="formData" label-position="left" border :rules="rules1">
|
||
<uni-forms-item required label="用户名" name="username">
|
||
<uni-easyinput type="text" v-model="formData.username" placeholder="请输入用户名" />
|
||
</uni-forms-item>
|
||
<uni-forms-item required label="密码" name="password">
|
||
<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</view>
|
||
<view v-if="current==1" style="background-color;:white">
|
||
<uni-forms ref="form2" :modelValue="formData2" label-position="left" border :rules="rules2">
|
||
<uni-forms-item label="手机号" name="phone" required>
|
||
<uni-easyinput type="number" v-model="formData2.phone" placeholder="请输入手机号" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="验证码" name="code" required>
|
||
<view style="display: flex;">
|
||
<view style="width: 60%;">
|
||
<uni-easyinput type="number" v-model="formData2.code" placeholder="请输入验证码" />
|
||
</view>
|
||
<view style="width: 40%;display: flex;justify-content: center;align-items: center;">
|
||
<span @click="getCode">{{content}}</span>
|
||
</view>
|
||
</view>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</view>
|
||
</uni-section>
|
||
<button style="background-color:#2979ff;color:white" @click="login(current)">登录</button>
|
||
<!-- <view style="text-align: center;margin-top: 20rpx;">
|
||
<uni-icons type="weixin" size="36" color="green" @click="wxmpLogin"></uni-icons>
|
||
<view style="text-align: center;font-size: 32rpx;">微信登陆</view>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
current: 0,
|
||
items: ['密码登录', '验证码登录'],
|
||
content: '获取验证码',
|
||
formData: {},
|
||
formData2: {},
|
||
timer: null,
|
||
time: 30,
|
||
rules1:{
|
||
username: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '请填写',
|
||
}]
|
||
},
|
||
password: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '请填写',
|
||
}]
|
||
}
|
||
},
|
||
rules2:{
|
||
phone: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '请填写',
|
||
}]
|
||
},
|
||
code: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '请填写',
|
||
}]
|
||
}
|
||
},
|
||
wxmp_openid: null
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
var that = this
|
||
var autoLoading = options.autoLoading;
|
||
if(autoLoading != 'no'){
|
||
// #ifdef APP-PLUS
|
||
that.appLogin()
|
||
// #endif
|
||
// #ifdef H5
|
||
that.appLogin()
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
that.wxmpLogin()
|
||
// #endif
|
||
}
|
||
},
|
||
onUnload() {
|
||
if (this.timer) {
|
||
clearInterval(this.timer);
|
||
this.timer = null;
|
||
}
|
||
},
|
||
onShow() {
|
||
// #ifdef MP-WEIXIN
|
||
uni.hideHomeButton()
|
||
// #endif
|
||
},
|
||
methods: {
|
||
wxmpLogin() {
|
||
var that = this;
|
||
uni.showLoading({
|
||
title: '自动登录中...',
|
||
mask: true
|
||
})
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: (loginRes) => {
|
||
that.$api.wxmpLogin({code: loginRes.code}).then(res=>{
|
||
uni.setStorageSync('access', res.access)
|
||
that.$api.getUserInfo().then(res=>{
|
||
uni.setStorageSync('userInfo', res)
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
|
||
})
|
||
}).catch(e=>{
|
||
this.wxmp_openid = e.data.wxmp_openid
|
||
})
|
||
},
|
||
complete:function(){
|
||
uni.hideLoading();
|
||
},
|
||
})
|
||
},
|
||
appLogin() {
|
||
var that = this;
|
||
// App自动登录
|
||
uni.showLoading({
|
||
title: '自动登录中...',
|
||
mask: true
|
||
})
|
||
uni.getStorage({
|
||
key: 'mySecret',
|
||
success: function(res) {
|
||
let secret = res.data
|
||
if (secret) {
|
||
that.$api.loginSecret(JSON.parse(secret)).then(res => {
|
||
uni.setStorageSync('access', res.access)
|
||
that.$api.getUserInfo().then(res=>{
|
||
uni.setStorageSync('userInfo', res)
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
})
|
||
})
|
||
}
|
||
},
|
||
complete:function(){
|
||
uni.hideLoading();
|
||
},
|
||
|
||
});
|
||
},
|
||
onClickItem(e) {
|
||
if (this.current !== e.currentIndex) {
|
||
this.current = e.currentIndex
|
||
}
|
||
},
|
||
countDown() {
|
||
var that = this;
|
||
if (that.time >= 0) {
|
||
that.content = that.time.toString() + '秒';
|
||
--that.time
|
||
} else {
|
||
clearInterval(that.timer)
|
||
that.timer = null
|
||
that.content = '获取验证码'
|
||
}
|
||
},
|
||
getCode() {
|
||
var that = this
|
||
if (that.content == '获取验证码') {
|
||
if (that.$check.mobile(that.formData2.phone)) {
|
||
that.$api.getCode({
|
||
phone: that.formData2.phone
|
||
}).then(res => {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: '验证码已发送'
|
||
})
|
||
setInterval(that.countDown, 1000)
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: '手机号格式有误'
|
||
})
|
||
}
|
||
}
|
||
},
|
||
login() {
|
||
var that = this;
|
||
if(that.current == 1){
|
||
that.$refs.form2.validate().then(res0=>{
|
||
that.$api.codeLogin(res0).then(res=>{
|
||
uni.setStorageSync('access', res.access)
|
||
that.$api.getUserInfo().then(res=>{
|
||
uni.setStorageSync('userInfo', res)
|
||
that.bindXX()
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
})
|
||
})
|
||
}).catch(err =>{
|
||
console.log('表单错误信息：', err);
|
||
})
|
||
}
|
||
else if(that.current == 0){
|
||
that.$refs.form1.validate().then(res0=>{
|
||
that.$api.login(res0).then(res=>{
|
||
uni.setStorageSync('access', res.access)
|
||
that.bindXX()
|
||
that.$api.getUserInfo().then(res=>{
|
||
uni.setStorageSync('userInfo', res)
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
})
|
||
})
|
||
}).catch(err =>{
|
||
console.log('表单错误信息：', err);
|
||
})
|
||
}
|
||
},
|
||
ranStr(e) {
|
||
//形参e,需要产生随机字符串的长度
|
||
//如果没有传参，默认生成32位长度随机字符串
|
||
e = e || 32;
|
||
//模拟随机字符串库
|
||
var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789",
|
||
a = t.length,//字符串t的长度，随机数生成最大值
|
||
n = "";
|
||
for (let i = 0; i < e; i++) {
|
||
//随机生成长度为e的随机字符串拼接
|
||
n += t.charAt(Math.floor(Math.random() * a));
|
||
}
|
||
//返回随机组合字符串
|
||
return n
|
||
},
|
||
bindXX() {
|
||
let that = this;
|
||
// #ifdef APP-PLUS
|
||
let userInfo = uni.getStorageSync("userInfo")
|
||
let secret = that.ranStr(12)
|
||
let mySecret = {
|
||
'username': userInfo.username,
|
||
'secret': secret
|
||
}
|
||
this.$api.bindSecret({
|
||
secret: secret
|
||
}).then(res => {
|
||
uni.setStorageSync('mySecret', JSON.stringify(mySecret))
|
||
}).catch(e => {})
|
||
// #endif
|
||
// #ifdef H5
|
||
let userInfo = uni.getStorageSync("userInfo")
|
||
let secret = that.ranStr(12)
|
||
let mySecret = {
|
||
'username': userInfo.username,
|
||
'secret': secret
|
||
}
|
||
this.$api.bindSecret({
|
||
secret: secret
|
||
}).then(res => {
|
||
uni.setStorageSync('mySecret', JSON.stringify(mySecret))
|
||
}).catch(e => {})
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
if(this.wxmp_openid != null) {
|
||
this.$api.bindWxmp({"openid": this.wxmp_openid}).then(res=>{
|
||
|
||
})
|
||
}
|
||
// #endif
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style>
|