281 lines
7.0 KiB
Python
281 lines
7.0 KiB
Python
<template>
|
||
<view class="wrap">
|
||
<view class="top"></view>
|
||
<u-image :src="imageURL" mode="widthFix"></u-image>
|
||
<view class="content">
|
||
<u-form :model="loginForm" :rules="rules" ref="uForm" :errorType="errorType">
|
||
<u-form-item label="邮箱号" prop="mail" label-width="150">
|
||
<u-input placeholder="请输入邮箱号" v-model="loginForm.mail" type="text">
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item label="验证码" prop="msg" label-width="150">
|
||
<u-input placeholder="请输入验证码" v-model="loginForm.msg" type="number"></u-input>
|
||
<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
|
||
</u-form-item>
|
||
</u-form>
|
||
<!-- <button :style="[inputStyle]" class="getCaptcha">登录</button> -->
|
||
<!-- <u-gap height="0.5" bg-color="#bbb"></u-gap> -->
|
||
<view style="margin-top: 16rpx;">
|
||
<u-button @click="submit" type="primary" style="background-color: #2581e4!important;">登录</u-button>
|
||
</view>
|
||
<view class="alternative">
|
||
<navigator url="login_password" class="password" open-type="navigate">密码登录</navigator>
|
||
</view>
|
||
</view>
|
||
<u-verification-code seconds="30" ref="uCode" @change="codeChange"></u-verification-code>
|
||
<view style="text-align: center;">
|
||
<view class="icon">
|
||
<u-icon size="70" name="weixin-fill" color="rgb(83,194,64)" @click="mpLogin"></u-icon>
|
||
</view>
|
||
微信登录
|
||
</view>
|
||
<!-- <view class="buttom">
|
||
<view class="loginType">
|
||
<view class="wechat item">
|
||
<view class="icon"><u-icon size="70" name="weixin-fill" color="rgb(83,194,64)"></u-icon></view>
|
||
微信登录
|
||
</view>
|
||
<view class="QQ item">
|
||
<view class="icon"><u-icon size="70" name="qq-fill" color="rgb(17,183,233)"></u-icon></view>
|
||
QQ
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
imageURL: '/static/banner3.jpg',
|
||
loginForm: {
|
||
mail: "",
|
||
msg: ""
|
||
},
|
||
codeTips: "获取验证码",
|
||
rules: {
|
||
mail: [{
|
||
required: true,
|
||
message: '请输入邮箱号',
|
||
trigger: ['change', 'blur'],
|
||
},
|
||
{
|
||
// 正则不能含有两边的引号
|
||
pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
|
||
message: '格式有误',
|
||
trigger: ['change', 'blur'],
|
||
}
|
||
// {
|
||
// // 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
|
||
// validator: (rule, value, callback) => {
|
||
// // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
|
||
// return this.$u.test.idCard(value);
|
||
// },
|
||
// message: '格式有误',
|
||
// // 触发器可以同时用blur和change，二者之间用英文逗号隔开
|
||
// trigger: ['change','blur'],
|
||
// }
|
||
],
|
||
msg: [{
|
||
required: true,
|
||
message: '请输入验证码',
|
||
trigger: ['change', 'blur'],
|
||
}, ]
|
||
},
|
||
errorType: ['message'],
|
||
}
|
||
},
|
||
onReady() {
|
||
this.$refs.uForm.setRules(this.rules);
|
||
uni.hideHomeButton()
|
||
},
|
||
computed: {
|
||
inputStyle() {
|
||
let style = {};
|
||
if (this.loginForm.mail && this.loginForm.msg) {
|
||
style.color = "#fff";
|
||
style.backgroundColor = this.$u.color['warning'];
|
||
}
|
||
return style;
|
||
},
|
||
submitEnable() {
|
||
if (this.loginForm.mail && this.loginForm.msg) {
|
||
return false;
|
||
}
|
||
return true;
|
||
}
|
||
},
|
||
methods: {
|
||
submit() {
|
||
this.$refs.uForm.validate(valid => {
|
||
if (valid) {
|
||
uni.showLoading({})
|
||
this.$u.api.codeLogin(this.loginForm).then(res => {
|
||
this.$u.vuex('vuex_token', res.data.access)
|
||
this.$u.api.getUserInfo().then(res => {
|
||
this.$u.vuex('vuex_user', res.data)
|
||
if(res.data.wxmp_openid){}else{
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: (loginRes)=>{
|
||
this.$u.api.bindmp({code:loginRes.code}).then(res=>{
|
||
// this.$u.toast('绑定成功');
|
||
this.$u.vuex('vuex_user.wxmp_openid', res.data.wxmp_openid)
|
||
}).catch(e=>{})
|
||
}
|
||
});
|
||
}
|
||
// 修改资源请求地址
|
||
this.$u.vuex('vuex_user.avatar', this.vuex_user.avatar +
|
||
'?token=' + this.vuex_token)
|
||
uni.hideLoading()
|
||
})
|
||
uni.reLaunch({
|
||
url: '/pages/home/home'
|
||
})
|
||
}).catch(e => {
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
});
|
||
},
|
||
codeChange(text) {
|
||
this.codeTips = text;
|
||
},
|
||
// 获取验证码
|
||
getCode() {
|
||
if (this.$refs.uCode.canGetCode && this.loginForm.mail) {
|
||
uni.showLoading({
|
||
title: '正在获取验证码',
|
||
mask: true
|
||
})
|
||
this.$u.api.getCode(this.loginForm).then(res => {
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
// 这里此提示会被this.start()方法中的提示覆盖
|
||
this.$u.toast('验证码已发送');
|
||
// 通知验证码组件内部开始倒计时
|
||
this.$refs.uCode.start();
|
||
}, 2000);
|
||
})
|
||
} else {
|
||
this.$u.toast('倒计时结束后再发送');
|
||
}
|
||
},
|
||
mpLogin() {
|
||
uni.showLoading({
|
||
title: '微信登录中...',
|
||
mask: true
|
||
})
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: (loginRes) => {
|
||
this.$u.api.wxmplogin({
|
||
code: loginRes.code
|
||
}).then(res => {
|
||
this.$u.vuex('vuex_token', res.data.access)
|
||
this.$u.api.getUserInfo().then(res => {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: "登录成功",
|
||
icon: "none"
|
||
})
|
||
uni.reLaunch({
|
||
url: "/pages/home/home"
|
||
})
|
||
this.$u.vuex('vuex_user', res.data)
|
||
// 修改资源请求地址
|
||
this.$u.vuex('vuex_user.avatar', this.vuex_user.avatar +
|
||
'?token=' + this.vuex_token)
|
||
})
|
||
}).catch(e => {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: "暂未绑定微信!",
|
||
icon: "none"
|
||
})
|
||
})
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.wrap {
|
||
font-size: 28rpx;
|
||
|
||
.content {
|
||
width: 90%;
|
||
margin: 40rpx auto 0;
|
||
|
||
.title {
|
||
text-align: center;
|
||
font-size: 40rpx;
|
||
font-weight: 500;
|
||
margin-bottom: 100rpx;
|
||
}
|
||
|
||
input {
|
||
text-align: left;
|
||
margin-bottom: 10rpx;
|
||
padding-bottom: 6rpx;
|
||
}
|
||
|
||
.tips {
|
||
color: $u-type-info;
|
||
margin-bottom: 60rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.getCaptcha {
|
||
background-color: rgb(253, 243, 208);
|
||
color: $u-tips-color;
|
||
border: none;
|
||
font-size: 30rpx;
|
||
padding: 12rpx 0;
|
||
margin-top: 6rpx;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.alternative {
|
||
color: $u-tips-color;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
|
||
.buttom {
|
||
.loginType {
|
||
display: flex;
|
||
padding: 350rpx 150rpx 150rpx 150rpx;
|
||
justify-content: space-between;
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: $u-content-color;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.hint {
|
||
padding: 20rpx 40rpx;
|
||
font-size: 20rpx;
|
||
color: $u-tips-color;
|
||
|
||
.link {
|
||
color: $u-type-warning;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|