439 lines
9.0 KiB
Vue
439 lines
9.0 KiB
Vue
<template>
|
|
<view class="login_register">
|
|
<view class="nav-bar" style="position: relative;">
|
|
<image style="display: block;width: 100%;height: 100%;" :src="myTopBgSrc"></image>
|
|
</view>
|
|
<view class="handle-area">
|
|
<view class="handle-type">
|
|
<text class="text" :class="{active: isShow}">登录</text>
|
|
</view>
|
|
<view class="login-area">
|
|
<form style="display: block;" @submit="formSubmit">
|
|
<view class="login-item">
|
|
<image class="login-icon" src="../../static/login/avatar.png" mode=""></image>
|
|
<input placeholder-style="color: #2c6fd9;" style="color: #2c6fd9;" class="my-phone" type="text"
|
|
name="username" placeholder="请输入您的账号" />
|
|
</view>
|
|
<view class="login-item">
|
|
<image class="login-icon" src="../../static/login/password.png" mode=""></image>
|
|
<input placeholder-style="color: #2c6fd9;" style="color: #2c6fd9;" class="my-psd" type="text"
|
|
name="password" password placeholder="请输入您的密码" />
|
|
</view>
|
|
<view class="privacy">
|
|
<view class="privacyIn">
|
|
<u-checkbox-group>
|
|
<u-checkbox @change="checkboxChange" v-model="checkedShow"></u-checkbox>
|
|
</u-checkbox-group>
|
|
<view class="privacyCon">
|
|
我已阅读并同意《<text style="color: #2d8cff;" @click="agreementFn(1)">用户协议</text>》和《<text
|
|
style="color: #2d8cff;" @click="agreementFn(2)">隐私政策</text>》
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<button type="default" form-type="submit" class="login-btn">立即登录</button>
|
|
</view>
|
|
</form>
|
|
</view>
|
|
<view class="wxBig" v-if="wxShow == true">
|
|
<view class="Wxtitle">
|
|
<view class="WxtitleIn">
|
|
第三方登录
|
|
</view>
|
|
</view>
|
|
<view class="wx" @click="loginFn">
|
|
<image src="/static/login/weixin.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-popup v-model="agreement" mode='center' :mask='true' border-radius='20' width='85%' height='75%'
|
|
:closeable='true'>
|
|
<view style="padding: 30rpx;" v-html="content">{{content}}</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
var that;
|
|
export default {
|
|
data() {
|
|
return {
|
|
agreement: false,
|
|
checkedShow: false,
|
|
key: "",
|
|
img: "",
|
|
username: '',
|
|
password: '',
|
|
code: "",
|
|
isShow: true,
|
|
myTopBgSrc: require("../../static/login/my-bg.jpg"),
|
|
content: '',
|
|
userContent: '',
|
|
privacyContent: '',
|
|
wxShow: false,
|
|
}
|
|
},
|
|
onLoad() {
|
|
that = this;
|
|
},
|
|
methods: {
|
|
checkboxChange(e) {
|
|
uni.setStorageSync('privacyShow', e.value)
|
|
},
|
|
//第三方登录
|
|
loginFn() {
|
|
if (that.checkedShow == false) {
|
|
uni.showToast({
|
|
title: '请勾选用户协议和隐私政策',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
return false;
|
|
}
|
|
uni.login({
|
|
provider: 'weixin',
|
|
success(res) {
|
|
if (res.authResult.unionid) {
|
|
appLogin(res.authResult.unionid).then(res1 => {
|
|
console.log(res1)
|
|
if (res1.statusCode == 200) {
|
|
if (res1.data.massage == 1) {
|
|
uni.navigateTo({
|
|
url: 'BangWx?unionid=' + res.authResult.unionid
|
|
})
|
|
} else {
|
|
uni.setStorageSync('my_token', res1.data.oAuth2AccessToken
|
|
.access_token);
|
|
that.updateCidFn(res1.data.userName);
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '登录失败',
|
|
duration: 2000,
|
|
icon: 'none',
|
|
})
|
|
}
|
|
|
|
}).catch(err => {
|
|
console.log(err)
|
|
uni.showToast({
|
|
title: "请求失败",
|
|
icon: 'none'
|
|
})
|
|
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: '登录失败请重新登录',
|
|
duration: 2000,
|
|
icon: 'none',
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
},
|
|
//
|
|
updateCidFn(username) {
|
|
var data = {
|
|
userCid: uni.getStorageSync('setcid'),
|
|
username: username
|
|
}
|
|
updateCid(data).then(res => {
|
|
console.log(res, 'zhiixngle ')
|
|
if (res.statusCode == 200) {
|
|
uni.showToast({
|
|
title: '登录成功',
|
|
duration: 2000,
|
|
icon: 'none',
|
|
})
|
|
setTimeout(() => {
|
|
uni.reLaunch({
|
|
url: '../../index/index'
|
|
})
|
|
}, 2000)
|
|
}
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: '请求失败',
|
|
icon: 'none'
|
|
})
|
|
})
|
|
},
|
|
//检查form表单是否填写完整
|
|
checkedParams(obj) {
|
|
/*
|
|
Azuma
|
|
1234qwer
|
|
*/
|
|
if (obj.username == "" || obj.username == undefined || obj.username == null) {
|
|
myShowToast('用户名不能为空');
|
|
return false;
|
|
};
|
|
if (obj.password == "" || obj.password == undefined || obj.password == null) {
|
|
myShowToast('密码不能为空');
|
|
return false;
|
|
};
|
|
if (that.checkedShow == false) {
|
|
myShowToast('请勾选用户协议和隐私政策');
|
|
return false;
|
|
}
|
|
|
|
function myShowToast(text) {
|
|
uni.showToast({
|
|
title: text,
|
|
icon: 'none'
|
|
})
|
|
};
|
|
return true;
|
|
},
|
|
formSubmit(e) {
|
|
var that = this;
|
|
const obj = e.target.value;
|
|
if (!that.checkedParams(obj)) return;
|
|
debugger;
|
|
console.log(obj)
|
|
that.$u.api.login(obj).then(res=>{
|
|
that.$u.vuex('vuex_token', res.access)
|
|
that.$u.vuex('vuex_refresh', res.refresh)
|
|
// let data = {openid: uni.getStorageSync('wxmp_openid')}
|
|
// that.$u.api.bindmp(data).then(res=>{})
|
|
that.$u.api.getUserInfo().then(res=>{
|
|
that.$u.vuex('vuex_user', res)
|
|
// 修改资源请求地址
|
|
})
|
|
uni.reLaunch({
|
|
url:'/pages/home/home_'
|
|
})
|
|
}
|
|
).catch(e=>{
|
|
console.log(e)
|
|
uni.showToast({
|
|
title:'账户密码错误',
|
|
icon:'none'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.privacy {
|
|
width: 100%;
|
|
height: 40rpx;
|
|
padding: 0 40rpx;
|
|
margin-bottom: 25rpx;
|
|
|
|
.privacyIn {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.privacyCon {
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wxBig {
|
|
width: 100%;
|
|
height: auto;
|
|
margin-top: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
|
|
.Wxtitle {
|
|
text-align: center;
|
|
width: 100%;
|
|
padding: 0 50rpx;
|
|
|
|
.WxtitleIn {
|
|
width: 100%;
|
|
font-size: 26rpx;
|
|
color: #808080;
|
|
position: relative;
|
|
}
|
|
|
|
.WxtitleIn::after {
|
|
content: '';
|
|
width: 217rpx;
|
|
height: 2rpx;
|
|
background-color: #f6f6f6;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 18rpx;
|
|
}
|
|
|
|
.WxtitleIn::before {
|
|
content: '';
|
|
width: 217rpx;
|
|
height: 2rpx;
|
|
background-color: #f6f6f6;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 18rpx;
|
|
}
|
|
}
|
|
|
|
.wx {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
margin-top: 50rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.login_register {
|
|
position: relative;
|
|
background-color: #f3fbff;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.nav-bar {
|
|
height: 494rpx;
|
|
background-color: #2cade8;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.handle-area {
|
|
width: 705rpx;
|
|
height: auto;
|
|
background-color: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
position: absolute;
|
|
top: 340rpx;
|
|
left: 50%;
|
|
padding-bottom: 30rpx;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.handle-type {
|
|
font-family: PingFang-SC-Medium;
|
|
font-size: 30rpx;
|
|
line-height: 72rpx;
|
|
color: #1e1e1e;
|
|
padding: 62rpx;
|
|
}
|
|
|
|
.active {
|
|
font-size: 38rpx;
|
|
line-height: 72rpx;
|
|
color: #2c6fd9;
|
|
font-weight: bold;
|
|
position: relative;
|
|
}
|
|
|
|
.active::after {
|
|
display: block;
|
|
content: "";
|
|
width: 42rpx;
|
|
height: 6rpx;
|
|
background-color: #2c6fd9;
|
|
border-radius: 3rpx;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -8rpx;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.login-item {
|
|
width: 635rpx;
|
|
height: 88rpx;
|
|
border-radius: 88rpx;
|
|
margin: 0 auto;
|
|
background-color: #ebf6ff;
|
|
padding-left: 72rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
margin-bottom: 56rpx;
|
|
}
|
|
|
|
.code-img-item {
|
|
padding-left: 72rpx;
|
|
}
|
|
|
|
.login-item .login-icon {
|
|
width: 22rpx;
|
|
height: 28rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 35rpx;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.login-item input {
|
|
height: 100%;
|
|
line-height: 88rpx;
|
|
font-family: PingFang-SC-Medium;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.my-code-input {
|
|
width: 300rpx;
|
|
}
|
|
|
|
.code-img {
|
|
width: 155rpx;
|
|
height: 53rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 20rpx;
|
|
transform: translateY(-50%);
|
|
background-color: #EEEEEE;
|
|
}
|
|
|
|
.login-btn,
|
|
.register-btn {
|
|
width: 635rpx;
|
|
height: 88rpx;
|
|
border-radius: 88rpx;
|
|
margin: 0 auto;
|
|
background-color: #1d7ef3;
|
|
font-family: AdobeHeitiStd-Regular;
|
|
font-size: 30rpx;
|
|
line-height: 88rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.to-login {
|
|
font-family: AdobeHeitiStd-Regular;
|
|
font-size: 24rpx;
|
|
line-height: 72rpx;
|
|
color: #2c6fd9 !important;
|
|
border: none !important;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.code-item {
|
|
position: relative;
|
|
}
|
|
|
|
.my-code {
|
|
width: 376rpx;
|
|
}
|
|
|
|
.code {
|
|
width: 155rpx;
|
|
height: 53rpx;
|
|
background-color: #0075ff;
|
|
border-radius: 27rpx;
|
|
font-family: PingFang-SC-Medium;
|
|
font-size: 20rpx !important;
|
|
line-height: 53rpx;
|
|
color: #fefeff;
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 20rpx;
|
|
transform: translateY(-50%);
|
|
padding-left: 12rpx;
|
|
padding-right: 12rpx;
|
|
}
|
|
</style>
|