279 lines
12 KiB
Vue
279 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<view class="logo">
|
||
<view class="img">
|
||
<image mode="widthFix"
|
||
src="data:image/png;base64,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">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<!-- 登录方式 -->
|
||
<view style=" width: 80%; display: flex; justify-content: space-around; padding-bottom: 50upx; margin: auto;color: #b7cbcc;line-height: 70upx;">
|
||
<view v-for="(grid,loginIndex) in orderType" :key="loginIndex" @tap="showType(loginIndex)">
|
||
<view :class="[loginIndex==tabIndex?'on':'']">{{grid}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 账号密码输入框 -->
|
||
<view class="form">
|
||
<!-- 手机登录 -->
|
||
<view v-if="tabIndex===0" class="username">
|
||
<input placeholder="请输入手机号" v-model="username" placeholder-style="color: rgba(255,255,255,0.8);" />
|
||
</view>
|
||
<!-- 账号登录 -->
|
||
<view v-else class="username">
|
||
<input placeholder="请输入账号" v-model="username" placeholder-style="color: rgba(255,255,255,0.8);" />
|
||
</view>
|
||
<view class="password">
|
||
<input placeholder="请输入密码" v-model="password" password=true
|
||
placeholder-style="color: rgba(255,255,255,0.8);" />
|
||
</view>
|
||
<view class="btn" @tap="doLogin">登 录</view>
|
||
|
||
<view class="res">
|
||
<view class="textBtn" @tap="toPage('register')">用户注册</view>
|
||
<view class="textBtn" @tap="toPage('resetpasswd')">找回密码</view>
|
||
</view>
|
||
</view>
|
||
<!-- 第三方登录 -->
|
||
<view class="oauth" v-if="isShowOauth">
|
||
<view class="text">— 快速登录 —</view>
|
||
<view class="list">
|
||
<view @tap="oauthLogin('weixin')" v-if="showProvider.weixin" class="icon weixin"></view>
|
||
<view @tap="oauthLogin('qq')" v-if="showProvider.qq" class="icon qq"></view>
|
||
<view @tap="oauthLogin('sinaweibo')" v-if="showProvider.sinaweibo" class="icon sinaweibo"></view>
|
||
<!-- <view @tap="oauthLogin('xiaomi')" v-if="showProvider.xiaomi" class="icon xiaomi"></view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import md5 from "@/common/SDK/md5.min.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
username: '',
|
||
password: '',
|
||
isShowOauth: false,
|
||
showProvider: {
|
||
weixin: false,
|
||
qq: false,
|
||
sinaweibo: false,
|
||
xiaomi: false
|
||
},
|
||
tabIndex:0,
|
||
orderType: ['手机登录','账号登录'],
|
||
}
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
onLoad() {
|
||
//APP显示第三方登录
|
||
// #ifdef APP-PLUS
|
||
this.isShowOauth = true;
|
||
// #endif
|
||
this.getProvider();
|
||
uni.hideHomeButton();
|
||
|
||
},
|
||
methods: {
|
||
showType(loginIndex){
|
||
this.tabIndex = loginIndex;
|
||
},
|
||
oauthLogin(provider) {
|
||
uni.showLoading();
|
||
//第三方登录
|
||
uni.login({
|
||
provider: provider,
|
||
success: (loginRes) => {
|
||
console.log("success: " + JSON.stringify(loginRes));
|
||
//案例直接获取用户信息，一般不是在APP端直接获取用户信息，比如微信，获取一个code，传递给后端，后端再去请求微信服务器获取用户信息
|
||
uni.getUserInfo({
|
||
provider: provider,
|
||
success: (infoRes) => {
|
||
console.log('用户信息：' + JSON.stringify(infoRes.userInfo));
|
||
uni.setStorage({
|
||
key: 'UserInfo',
|
||
data: {
|
||
username: infoRes.userInfo.nickName,
|
||
face: infoRes.userInfo.avatarUrl,
|
||
signature: '个性签名',
|
||
integral: 0,
|
||
balance: 0,
|
||
envelope: 0
|
||
},
|
||
success: function() {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '登录成功',
|
||
icon: "success"
|
||
});
|
||
setTimeout(function() {
|
||
uni.navigateBack();
|
||
}, 300)
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
fail: (e) => {
|
||
console.log("fail: " + JSON.stringify(e));
|
||
}
|
||
});
|
||
},
|
||
getProvider() {
|
||
//获取第三方登录服务
|
||
uni.getProvider({
|
||
service: 'oauth',
|
||
success: (res) => {
|
||
let len = res.provider.length;
|
||
for (let i = 0; i < len; i++) {
|
||
//有服务才显示按钮图标
|
||
this.showProvider[res.provider[i]] = true;
|
||
}
|
||
if (res.provider.length == 0) {
|
||
this.isShowOauth = false;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
toPage(page) {
|
||
uni.hideKeyboard()
|
||
uni.navigateTo({
|
||
url: page
|
||
});
|
||
},
|
||
doLogin() {
|
||
uni.hideKeyboard();
|
||
//验证手机号码
|
||
// if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.username))){
|
||
// uni.showToast({title: '请填写正确手机号码',icon:"none"});
|
||
// return false;
|
||
// }
|
||
var that = this
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: function (loginRes) {
|
||
//console.log(loginRes)
|
||
uni.showLoading({
|
||
title: '提交中...'
|
||
})
|
||
let data = {};
|
||
if(that.tabIndex===0){
|
||
data={
|
||
code: loginRes.code,
|
||
type:'mobphone',
|
||
username: that.username,
|
||
password: that.password
|
||
}
|
||
}else{
|
||
data={
|
||
code: loginRes.code,
|
||
type:'username',
|
||
username: that.username,
|
||
password: that.password
|
||
}
|
||
}
|
||
that.$u.api.login(data).then(
|
||
res => {
|
||
uni.hideLoading()
|
||
if(res.code==0){
|
||
uni.showToast({
|
||
title: '登录成功',
|
||
icon: "success"
|
||
});
|
||
uni.reLaunch({
|
||
url:'/pages/tabBar/home/home'
|
||
})
|
||
that.$u.vuex('vuex_token', res.data.token)
|
||
that.$u.api.getInfo().then(res => {
|
||
that.$u.vuex('vuex_user', res.data)
|
||
if(res.data.icon===""){
|
||
that.$u.vuex('vuex_user.icon', '/static/img/face.jpg')
|
||
}else{
|
||
that.$u.vuex('vuex_user.icon', that.vuex_host + 'public/' + res.data.icon)
|
||
}
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title: res.data.msg,
|
||
icon:'none'
|
||
});
|
||
}
|
||
// this.$u.vuex('vuex_cookie', res.header['Set-Cookie'])
|
||
|
||
// uni.hideLoading()
|
||
// uni.showToast({
|
||
// title: '登录成功',
|
||
// icon: "success"
|
||
// });
|
||
// uni.navigateBack({})
|
||
|
||
}
|
||
)
|
||
}
|
||
});
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "../../static/css/login.scss";
|
||
|
||
.form {
|
||
.res {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 100upx;
|
||
padding:0 10px;
|
||
color: rgba($color: #ffffff, $alpha: 0.8);
|
||
|
||
.textBtn{
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
.on{
|
||
color: #ffffff;
|
||
line-height: 70rpx;
|
||
border-bottom: solid 4upx #ffffff;
|
||
}
|
||
|
||
.oauth {
|
||
@media all and (max-height:150vw) {
|
||
display: none;
|
||
}
|
||
|
||
position: absolute;
|
||
bottom: 50upx;
|
||
width: 100%;
|
||
|
||
.text {
|
||
width: 100%;
|
||
height: 60upx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: rgba($color: #ffffff, $alpha: 0.8);
|
||
font-size: 28upx;
|
||
}
|
||
|
||
.list {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 20upx 0;
|
||
|
||
.icon {
|
||
font-size: 80upx;
|
||
margin: 0 30upx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|