529 lines
12 KiB
Vue
529 lines
12 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="login-area" v-if="isPassword">
|
||
<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="loginItemInput"
|
||
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="loginItemInput"
|
||
type="text" name="password" placeholder="请输入您的姓名" />
|
||
</view>
|
||
<view class="login-item">
|
||
<image class="login-icon" src="../../static/login/avatar.png" mode=""></image>
|
||
<input placeholder-style="color: #2c6fd9;" style="color: #2c6fd9;" class="loginItemInput"
|
||
type="number" name="username" placeholder="请输入您的手机号" />
|
||
</view>
|
||
|
||
<view class="">
|
||
<button type="default" form-type="submit" class="login-btn">注册</button>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</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>
|
||
<u-popup v-model="agreement" mode='center' :mask='true' border-radius='20' width='85%' height='75%'
|
||
:closeable='true'>
|
||
<view style="padding: 30upx;" v-html="content">{{content}}</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
var that;
|
||
export default {
|
||
data() {
|
||
return {
|
||
wxcode: null,
|
||
agreement: false,
|
||
checkedShow: true,
|
||
key: "",
|
||
img: "",
|
||
username: '',
|
||
password: '',
|
||
phoneNumber: '',
|
||
message: '',
|
||
code: "",
|
||
isShow: true,
|
||
myTopBgSrc: require("../../static/login/my-bg.jpg"),
|
||
content: '',
|
||
userContent: '',
|
||
privacyContent: '',
|
||
wxShow: false,
|
||
isPassword: true,
|
||
isMessage: false,
|
||
codeTips: "获取验证码",
|
||
testUrl: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf7d6140f507466be&redirect_uri=http%3A%2F%2Fqyjy.ctc-zc.com&response_type=code&scope=snsapi_base#wechat_redirect',
|
||
|
||
}
|
||
},
|
||
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',
|
||
})
|
||
}
|
||
}
|
||
})
|
||
|
||
},
|
||
mpLogin() {
|
||
// #ifdef H5
|
||
this.getWxCode()
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
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.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)
|
||
// 修改资源请求地址
|
||
// this.$u.vuex('vuex_user.avatar', this.vuex_user.avatar +
|
||
// '?token=' + this.vuex_token)
|
||
})
|
||
}).catch(e => {
|
||
uni.setStorageSync('wxmp_openid', e.data.wxmp_openid)
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: "暂未绑定微信!",
|
||
icon: "none"
|
||
})
|
||
})
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
// 获取code
|
||
// 先判断url中有没有code，如果有code，表明已经授权，如果没有code，跳转微信授权链接
|
||
getWxCode() {
|
||
// 截取地址中的code，如果没有code就去微信授权，如果已经获取到code了就直接把code传给后台获取openId
|
||
let code = this.getUrlCode('code')
|
||
if (code === null || code === '') {
|
||
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.vuex_appid +
|
||
'&redirect_uri=' + encodeURIComponent(this.vuex_login) +
|
||
'&response_type=code&scope=snsapi_base&state=1#wechat_redirect'
|
||
// redirect_uri是授权成功后，跳转的url地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code，这里需要用encodeURIComponent对链接进行处理。
|
||
// 如果配置参数一一对应，那么此时已经通过回调地址刷新页面后，你就会再地址栏中看到code了。
|
||
// http://127.0.0.1/pages/views/profile/login/login?code=001BWV4J1lRzz00H4J1J1vRE4J1BWV4q&state=1
|
||
} else {
|
||
this.wxcode = code
|
||
this.wxcodeLogin()
|
||
}
|
||
// }
|
||
},
|
||
|
||
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;
|
||
},
|
||
changeLogType(index) {
|
||
if (index === 'password') {
|
||
this.isPassword = true;
|
||
this.isMessage = false;
|
||
} else {
|
||
this.isPassword = false;
|
||
this.isMessage = 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'
|
||
})
|
||
})
|
||
},
|
||
|
||
codeChange(text) {
|
||
this.codeTips = text;
|
||
},
|
||
// 获取验证码
|
||
getCode() {
|
||
debugger;
|
||
if (this.phoneNumber !== '') {
|
||
uni.showLoading({
|
||
title: '正在获取验证码',
|
||
mask: true
|
||
})
|
||
this.$u.api.getCode({
|
||
phone: 16619852123
|
||
}).then(res => {
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
// 这里此提示会被this.start()方法中的提示覆盖
|
||
this.$u.toast('验证码已发送');
|
||
// 通知验证码组件内部开始倒计时
|
||
this.$refs.uCode.start();
|
||
}, 2000);
|
||
})
|
||
} else {
|
||
// this.$u.toast('倒计时结束后再发送');
|
||
this.$u.toast('请输入手机号');
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.privacy {
|
||
width: 100%;
|
||
height: 40upx;
|
||
padding: 0 40upx;
|
||
margin-bottom: 25upx;
|
||
position: fixed;
|
||
bottom: 20upx;
|
||
.privacyIn {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.privacyCon {
|
||
font-size: 26upx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.wxBig {
|
||
width: 100%;
|
||
height: auto;
|
||
margin-top: 100upx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
|
||
.Wxtitle {
|
||
text-align: center;
|
||
width: 100%;
|
||
padding: 0 50upx;
|
||
|
||
.WxtitleIn {
|
||
width: 100%;
|
||
font-size: 26upx;
|
||
color: #808080;
|
||
position: relative;
|
||
}
|
||
|
||
.WxtitleIn::after {
|
||
content: '';
|
||
width: 217upx;
|
||
height: 2upx;
|
||
background-color: #f6f6f6;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 18upx;
|
||
}
|
||
|
||
.WxtitleIn::before {
|
||
content: '';
|
||
width: 217upx;
|
||
height: 2upx;
|
||
background-color: #f6f6f6;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 18upx;
|
||
}
|
||
}
|
||
|
||
.wx {
|
||
width: 70upx;
|
||
height: 70upx;
|
||
margin-top: 50upx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.login_register {
|
||
position: relative;
|
||
background-color: #f3fbff;
|
||
min-height: 100%;
|
||
}
|
||
|
||
.nav-bar {
|
||
height: 494upx;
|
||
background-color: #2cade8;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.handle-area {
|
||
width: 705upx;
|
||
height: auto;
|
||
background-color: #FFFFFF;
|
||
border-radius: 10upx;
|
||
position: absolute;
|
||
top: 360upx;
|
||
left: 50%;
|
||
padding-bottom: 80upx;
|
||
transform: translateX(-50%);
|
||
box-shadow: 0px 5px 9px 5px rgba(141, 169, 185, 0.3);
|
||
}
|
||
.login-area{
|
||
padding-top: 80upx;
|
||
}
|
||
.login-item {
|
||
width: 635upx;
|
||
height: 88upx;
|
||
border-radius: 88upx;
|
||
margin: 0 auto;
|
||
background-color: #ebf6ff;
|
||
padding-left: 72upx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
margin-bottom: 56upx;
|
||
}
|
||
|
||
.loginItemInput {
|
||
border-radius: 0 88upx 88upx 0;
|
||
}
|
||
|
||
.code-img-item {
|
||
padding-left: 72upx;
|
||
}
|
||
|
||
.login-item .login-icon {
|
||
width: 22upx;
|
||
height: 28upx;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 35upx;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.login-item input {
|
||
height: 100%;
|
||
line-height: 88upx;
|
||
font-family: PingFang-SC-Medium;
|
||
font-size: 26upx;
|
||
}
|
||
|
||
.my-code-input {
|
||
width: 300upx;
|
||
}
|
||
|
||
.code-img {
|
||
width: 155upx;
|
||
height: 53upx;
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 20upx;
|
||
transform: translateY(-50%);
|
||
background-color: #EEEEEE;
|
||
}
|
||
|
||
.getMessageCode {
|
||
width: fit-content;
|
||
position: absolute;
|
||
top: 10%;
|
||
right: 20upx;
|
||
height: 80%;
|
||
color: #ffffff;
|
||
font-size: 26upx;
|
||
border-color: #19be6b;
|
||
background-color: #19be6b;
|
||
z-index: 100;
|
||
border-radius: 36upx !important;
|
||
}
|
||
|
||
.login-btn,
|
||
.register-btn {
|
||
width: 635upx;
|
||
height: 88upx;
|
||
border-radius: 88upx;
|
||
margin: 0 auto;
|
||
background-color: #1d7ef3;
|
||
font-family: AdobeHeitiStd-Regular;
|
||
font-size: 30upx;
|
||
line-height: 88upx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.to-login {
|
||
font-family: AdobeHeitiStd-Regular;
|
||
font-size: 24upx;
|
||
line-height: 72upx;
|
||
color: #2c6fd9 !important;
|
||
border: none !important;
|
||
margin-top: 20upx;
|
||
}
|
||
|
||
.code-item {
|
||
position: relative;
|
||
}
|
||
|
||
.my-code {
|
||
width: 376upx;
|
||
}
|
||
|
||
.code {
|
||
width: 155upx;
|
||
height: 53upx;
|
||
background-color: #0075ff;
|
||
border-radius: 27upx;
|
||
font-family: PingFang-SC-Medium;
|
||
font-size: 20upx !important;
|
||
line-height: 53upx;
|
||
color: #fefeff;
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 20upx;
|
||
transform: translateY(-50%);
|
||
padding-left: 12upx;
|
||
padding-right: 12upx;
|
||
}
|
||
</style>
|