345 lines
8.2 KiB
Vue
345 lines
8.2 KiB
Vue
<template>
|
||
<view class="zai-box" v-show="login == true">
|
||
<view class="header_banner">
|
||
<view class="backs" :style="{top:CustomTop+'px'}" @click="backs">
|
||
<uni-icons type="home" color="#999" size="22"></uni-icons>
|
||
</view>
|
||
<image class="bigimg" src="../../static/dls.jpg" mode=""></image>
|
||
</view>
|
||
<view class="loginpage">
|
||
<view class="hydl">
|
||
欢迎登录
|
||
</view>
|
||
<view class="wel">
|
||
Welcome to login
|
||
</view>
|
||
<view class="pages">
|
||
<view class="cu-form-group margin-top" :class="[shape=='round'?'round':'']">
|
||
<text class="cuIcon-people margin-right-xs" style="color: #3e8eff;"></text>
|
||
<input @input="TypeInput($event)" placeholder="请输入账号名称" name="input"
|
||
v-model="userInfoLoginDTO.userName"></input>
|
||
</view>
|
||
<view class="cu-form-group margin-top" :class="[shape=='round'?'round':'']">
|
||
<text class="cuIcon-lock margin-right-xs" style="color: #3e8eff;"></text>
|
||
<input class="uni-input" placeholder="请输入登陆密码" :password="!showPassword"
|
||
v-model="userInfoLoginDTO.password"/>
|
||
</view>
|
||
<view class="padding text-center margin-top">
|
||
<button class="cu-btn bg-blue" :loading="loading" :class="[shape=='round'?'round':'']"
|
||
@click="tologins()">
|
||
<text space="emsp">{{ loading ? "登录中..." : " 登录 " }}</text>
|
||
</button>
|
||
<view class="botbq">
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="loginpage">
|
||
<image class="bigimg" src="../../static/dls.jpg" mode=""></image>
|
||
<view class="padding text-center margin-top">
|
||
<button class="login-btn block bg-blue lg round" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号登录</button>
|
||
<view class="botbq">
|
||
版权所有@
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- 登录加载弹窗 -->
|
||
<view class="cu-load load-modal" v-if="loading">
|
||
<!-- <view class="cuIcon-emojifill text-orange"></view> -->
|
||
<image src="https://static.jeecg.com/upload/test/login4_1595818039175.png" mode="aspectFit" class="round"></image>
|
||
<view class="gray-text">登录中...</view>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import {ACCESS_TOKEN, USER_NAME, USER_INFO} from "@/common/util/constants"
|
||
import {mapActions} from "vuex"
|
||
import configService from '@/common/service/config.service.js';
|
||
import api from "@/api/api"
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
shape: '',//round 圆形
|
||
loading: false,
|
||
phoneNo: '',
|
||
smsCode: '',
|
||
showPassword: false, //是否显示明文
|
||
loginWay: 3, //1: 账密，2：验证码
|
||
pages: 2,
|
||
smsCountDown: 0,
|
||
smsCountInterval: null,
|
||
toggleDelay: false,
|
||
version: '',
|
||
//第三方登录相关信息
|
||
thirdType: "",
|
||
thirdLoginInfo: "",
|
||
thirdLoginState: false,
|
||
bindingPhoneModal: false,
|
||
login: false,
|
||
thirdUserUuid: '',
|
||
url: {
|
||
bindingThirdPhone: '/sys/thirdLogin/bindingThirdPhone'
|
||
},
|
||
code: '',
|
||
userInfoLoginDTO: {
|
||
userName: '',
|
||
password: '',
|
||
},
|
||
CustomTop: 0,
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.CustomTop = this.Custom.top
|
||
},
|
||
onShow() {
|
||
var that = this
|
||
uni.login({
|
||
success: function (res) {
|
||
console.log(res.code)
|
||
that.code = res.code
|
||
let params = {}
|
||
params.jsCode = that.code
|
||
console.log(params, 152)
|
||
api.wxlogin(params).then(res => {
|
||
console.log(res, 165)
|
||
if (res.data.code == 0) {
|
||
let userInfo = res.data.data;
|
||
uni.setStorageSync('third_session', userInfo.thirdSession);
|
||
console.log(that.login, '状态')
|
||
if (userInfo.id) {
|
||
that.login = false
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
} else if (!userInfo.id) {
|
||
that.login = true
|
||
}
|
||
}
|
||
})
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
backs() {
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
},
|
||
getPhoneNumber(e) {
|
||
this.code = e.detail.code
|
||
var json = {
|
||
"code": this.code
|
||
}
|
||
this.$http.post('/applet/userInfo/ma/phone/login', json).then(res => {
|
||
// 打印调用成功回调
|
||
if (res.data.code == 0) {
|
||
// uni.setStorageSync('App-Token',res.token)
|
||
uni.setStorageSync('constant', res.data.data)
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
} else {
|
||
uni.removeStorageSync('third_session')
|
||
uni.removeStorageSync('constant')
|
||
}
|
||
})
|
||
},
|
||
TypeInput(e) {
|
||
console.log(e, 415)
|
||
// 只能输入数字的验证;
|
||
const inputType = /[\W]/g //想限制什么类型在这里换换正则就可以了
|
||
this.$nextTick(function () {
|
||
this.userInfoLoginDTO.userName = e.detail.value.replace(inputType, '');
|
||
})
|
||
},
|
||
tologins() {
|
||
console.log(this.userInfoLoginDTO.password, this.userInfoLoginDTO.userName, '密码用户')
|
||
if (!this.userInfoLoginDTO.userName) {
|
||
uni.showToast({
|
||
title: '请输入账号',
|
||
icon: 'error',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
if (!this.userInfoLoginDTO.password) {
|
||
uni.showToast({
|
||
title: '请输入密码',
|
||
icon: 'error',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
this.$http.post('/applet/userInfo/logins', this.userInfoLoginDTO).then(res => {
|
||
if (res.data.code == 0) {
|
||
uni.setStorageSync('constant', res.data.data)
|
||
uni.setStorageSync('password', this.userInfoLoginDTO.password)
|
||
uni.setStorageSync('userName', this.userInfoLoginDTO.userName)
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
} else {
|
||
uni.removeStorageSync('constant')
|
||
uni.showToast({
|
||
title: res.data.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
// this.userInfoLoginDTO.password = ''
|
||
// this.userInfoLoginDTO.userName = ''
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.login-paddingtop {
|
||
padding-top: 100upx;
|
||
}
|
||
|
||
.zai-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.backs {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
position: absolute;
|
||
background: rgba(255, 255, 255, 0.6);
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
border-radius: 50%;
|
||
left: 30rpx;
|
||
}
|
||
.header_banner {
|
||
width: 100%;
|
||
height: 800rpx;
|
||
position: absolute;
|
||
}
|
||
.bigimg {
|
||
z-index: -99;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 800rpx;
|
||
}
|
||
/* .zai-box {
|
||
padding: 0 20upx;
|
||
padding-top: 100upx;
|
||
position: relative;
|
||
} */
|
||
|
||
.zai-logo {
|
||
width: 200upx;
|
||
height: 150px;
|
||
}
|
||
|
||
.zai-title {
|
||
font-size: 58upx;
|
||
color: #000000;
|
||
text-align: center;
|
||
}
|
||
|
||
.input-placeholder, .zai-input {
|
||
color: #94afce;
|
||
}
|
||
|
||
.zai-label {
|
||
padding: 60upx 0;
|
||
text-align: center;
|
||
font-size: 30upx;
|
||
color: #a7b6d0;
|
||
}
|
||
|
||
.zai-btn {
|
||
background: #ff65a3;
|
||
color: #fff;
|
||
border: 0;
|
||
border-radius: 100upx;
|
||
font-size: 36upx;
|
||
}
|
||
|
||
.zai-btn:after {
|
||
border: 0;
|
||
}
|
||
|
||
/*按钮点击效果*/
|
||
.zai-btn.button-hover {
|
||
transform: translate(1upx, 1upx);
|
||
}
|
||
|
||
.login-btn {
|
||
width: 90%;
|
||
line-height: 98rpx;
|
||
height: 98rpx;
|
||
border-radius: 49rpx;
|
||
}
|
||
|
||
page {
|
||
background-color: white;
|
||
height: 100%;
|
||
}
|
||
|
||
.loginpage {
|
||
border-top-left-radius: 64rpx;
|
||
border-top-right-radius: 64rpx;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
position: relative;
|
||
top: 500rpx;
|
||
padding: 63rpx 56rpx 0;
|
||
}
|
||
|
||
.hydl {
|
||
font-size: 40rpx;
|
||
margin-bottom: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.wel {
|
||
color: #7e7e80;
|
||
margin-bottom: 50rpx;
|
||
}
|
||
|
||
input {
|
||
width: 100%;
|
||
height: 110rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.cu-form-group {
|
||
background-color: #f6f7fb;
|
||
height: 110rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.cu-btn {
|
||
width: 100%;
|
||
height: 107rpx;
|
||
font-size: 36rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.botbq {
|
||
font-size: 28rpx;
|
||
position: fixed;
|
||
bottom: 48rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
color: #2a2a2a;
|
||
}
|
||
|
||
.pages {
|
||
/* border-top-left-radius: 64rpx;
|
||
border-top-right-radius: 64rpx; */
|
||
width: 100%;
|
||
}
|
||
</style>
|