404 lines
11 KiB
Vue
404 lines
11 KiB
Vue
<template>
|
||
<view>
|
||
<view class="logo">
|
||
<view class="img">
|
||
<image mode="widthFix" src="../../static/img/cycLogoImg.jpg"></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="wechartRegister">
|
||
<image src="../../static/img/share/wechart.png" class="wechartRegisterImg" @click="wxLogin"></image>
|
||
<view class="wechartRegisterText">微信登录</view>
|
||
</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;
|
||
},
|
||
wxLogin(){
|
||
var that = this
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: function (loginRes) {
|
||
console.log(loginRes)
|
||
uni.showLoading({
|
||
title: '微信登录中...',
|
||
mask: true
|
||
})
|
||
that.$u.api.login({
|
||
code: loginRes.code
|
||
}).then(
|
||
res => {
|
||
if(res.data.token!==''&&res.data.token!==undefined&&res.data.token!==null){
|
||
console.log(res)
|
||
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)
|
||
}
|
||
debugger;
|
||
uni.switchTab({
|
||
url:'/pages/tabBar/home/home'
|
||
})
|
||
})
|
||
that.$u.api.getAddress({prePage:50}).then(res=>{
|
||
for(var i=0;i<res.data.length;i++){
|
||
if(res.data[i].often==1){
|
||
uni.setStorageSync('selectAddress', res.data[i])
|
||
}
|
||
}
|
||
})
|
||
that.$u.api.getInvoice({prePage:50}).then(res=>{
|
||
for(let key in res.data){
|
||
if(res.data[key].often==1){
|
||
uni.setStorageSync('selectInvoice', res.data[key])
|
||
}
|
||
}
|
||
|
||
})
|
||
}else{
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '亲，您还没有微信注册哟，是否前往注册',
|
||
success(modelRes) {
|
||
//如果用户点击了确定按钮
|
||
if (modelRes.confirm) {
|
||
uni.navigateTo({
|
||
url: 'register'
|
||
});
|
||
} else if (res.cancel) {
|
||
//如果用户点击了取消按钮
|
||
console.log(3);
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '您拒绝了请求,不能正常使用小程序',
|
||
icon: 'error',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
debugger;
|
||
uni.hideLoading()
|
||
}
|
||
).catch(res=>{
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '亲，您还没有微信注册哟，是否前往注册',
|
||
success(modelRes) {
|
||
//如果用户点击了确定按钮
|
||
if (modelRes.confirm) {
|
||
uni.navigateTo({
|
||
url: 'register'
|
||
});
|
||
} else if (res.cancel) {
|
||
//如果用户点击了取消按钮
|
||
console.log(3);
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '您拒绝了请求,不能正常使用小程序',
|
||
icon: 'error',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
});
|
||
|
||
})
|
||
}
|
||
});
|
||
|
||
},
|
||
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)
|
||
}
|
||
})
|
||
that.$u.api.getAddress({prePage:50}).then(res=>{
|
||
for(var i=0;i<res.data.length;i++){
|
||
if(res.data[i].often==1){
|
||
uni.setStorageSync('selectAddress', res.data[i])
|
||
}
|
||
}
|
||
})
|
||
that.$u.api.getInvoice({prePage:50}).then(res=>{
|
||
for(let key in res.data){
|
||
if(res.data[key].often==1){
|
||
uni.setStorageSync('selectInvoice', res.data[key])
|
||
}
|
||
}
|
||
|
||
})
|
||
}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;
|
||
}
|
||
}
|
||
}
|
||
.wechartRegister{
|
||
text-align: center;
|
||
color: #ffffff;
|
||
}
|
||
.wechartRegisterImg {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
</style>
|