300 lines
8.4 KiB
Vue
300 lines
8.4 KiB
Vue
<template>
|
||
<view class="bind-login-wrap">
|
||
<view class="top-wrap">
|
||
<image src="https://xaznkj.cn/app/fastbee1_blue.png" mode="widthFix" style="width: 500rpx;"></image>
|
||
</view>
|
||
<view class="main-wrap">
|
||
<u--text size="18" type="info" bold margin="20rpx 0" :text="$tt('bindLogin.bindLogin')"></u--text>
|
||
<u--form :model="loginForm" :rules="rules" ref="form">
|
||
<u-form-item prop="username" borderBottom>
|
||
<u--input v-model="loginForm.username" clearable border="none"
|
||
:placeholder="$tt('login.inputUserName')" prefixIcon="account-fill"
|
||
prefixIconStyle="font-size: 44rpx; color: rgb(192, 196, 204); margin-right: 10rpx"
|
||
placeholderStyle="font-size: 24rpx;"></u--input>
|
||
</u-form-item>
|
||
<u-form-item prop="password" borderBottom>
|
||
<u--input v-model="loginForm.password" type="password" clearable border="none"
|
||
:placeholder="$tt('login.inputPassword')" prefixIcon="lock-fill"
|
||
prefixIconStyle="font-size: 44rpx; color: rgb(192, 196, 204); margin-right: 10rpx"
|
||
placeholderStyle="font-size: 24rpx;"></u--input>
|
||
</u-form-item>
|
||
<u-form-item prop="code" borderBottom>
|
||
<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
|
||
<u-input :placeholder="$tt('login.inputCode')" v-model="loginForm.code" border="none"
|
||
prefixIcon="integral-fill"
|
||
prefixIconStyle="font-size: 44rpx; color: rgb(192, 196, 204); margin-right: 10rpx"
|
||
placeholderStyle="font-size: 24rpx;">
|
||
<template slot="suffix">
|
||
<u--image :src="codeUrl" width="120px" height="30px" @click="getCode"></u--image>
|
||
</template>
|
||
</u-input>
|
||
</u-form-item>
|
||
<view class="clause">
|
||
<u-checkbox-group @change="handleClauseCheckbox">
|
||
<label>
|
||
<u-checkbox :checked="isClause" style="transform:scale(0.8)" />
|
||
</label>
|
||
<text class="check_text">
|
||
<text>{{$tt('waitLogin.agree')}}</text>
|
||
<text class="link" @click="handleGoToPrivacy">《{{$tt('waitLogin.privacy')}}》</text>
|
||
<text class="link" @click="handleGoToService">《{{$tt('waitLogin.agreement')}}》</text>
|
||
<text class="link" @click="handleGoToStatement">《{{$tt('waitLogin.children')}}》</text>
|
||
<text class="link" @click="handleGoToCommonBill">《{{$tt('waitLogin.third')}}》</text>
|
||
|
||
</text>
|
||
</u-checkbox-group>
|
||
</view>
|
||
<view style="margin-top:50rpx;">
|
||
<u-button style="height: 90rpx; width: 650rpx;" shape="circle" type="primary"
|
||
:text="$tt('bindLogin.bind')" @click="handleBindlogin"></u-button>
|
||
</view>
|
||
</u--form>
|
||
<view class="register-wrap">
|
||
<view class="now-btn">
|
||
<u--text :text="$tt('bindLogin.bindRegister')" size="13px" @click="bindRegister"></u--text>
|
||
</view>
|
||
<view class="now-btn">
|
||
<u--text text="|" size="13px"></u--text>
|
||
</view>
|
||
<view style="margin:0 0 0 20rpx;">
|
||
<u--text :text="$tt('login.HuapuIoT')" size="13px" color="#000" @click="openhpLink"></u--text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="other-wrap">
|
||
<u-modal :show="isRegister" :title="$tt('bindLogin.alert')" :content="$tt('bindLogin.alertTitle')"
|
||
:cancelText="$tt('bindLogin.notRegister')" :confirmText="$tt('bindLogin.confirmRegister')"
|
||
:showCancelButton="true" @cancel="isRegister = false" @confirm="confirmRegister"></u-modal>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import projectConfig from '@/env.config.js';
|
||
import {
|
||
getProfile,
|
||
bindLogin
|
||
} from '@/apis/modules/common.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
token: '',
|
||
codeUrl: '',
|
||
isClause: false,
|
||
loginForm: {
|
||
username: '',
|
||
password: '',
|
||
rememberMe: false,
|
||
code: '',
|
||
uuid: '',
|
||
bindId: ''
|
||
},
|
||
rules: {
|
||
username: {
|
||
type: 'string',
|
||
min: 2,
|
||
max: 20,
|
||
required: true,
|
||
message: this.$tt('login.inputUserName'),
|
||
trigger: ['blur', 'change']
|
||
},
|
||
password: {
|
||
type: 'string',
|
||
required: true,
|
||
min: 5,
|
||
max: 20,
|
||
message: this.$tt('login.inputPassword'),
|
||
trigger: ['blur', 'change']
|
||
},
|
||
code: {
|
||
type: 'integer',
|
||
required: true,
|
||
message: this.$tt('login.inputCode'),
|
||
trigger: ['blur', 'change']
|
||
},
|
||
},
|
||
isRegister: false,
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
this.loginForm.bindId = option.bindId;
|
||
this.getCode();
|
||
},
|
||
methods: {
|
||
//微信登录
|
||
handleBindlogin() {
|
||
this.$refs.form.validate().then(res => {
|
||
if (!this.isClause) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: this.$tt('login.readAndCheckTheAgreement'),
|
||
});
|
||
return;
|
||
}
|
||
// 调用绑定登录
|
||
bindLogin(this.loginForm).then(async res => {
|
||
if (res.code === 200) {
|
||
// 存储token和账号
|
||
this.saveToken(res.token);
|
||
this.saveAccount();
|
||
// 获取用户信息
|
||
let profile = await this.getProfile();
|
||
uni.$u.vuex('profile', profile);
|
||
// 跳转主页
|
||
uni.switchTab({
|
||
url: '/pages/tabBar/home/index'
|
||
});
|
||
} else if (res.code === 450) {
|
||
this.isRegister = true;
|
||
} else {
|
||
if (res.msg) {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: res.msg,
|
||
complete: (res) => {
|
||
setTimeout(() => {
|
||
this.getCode();
|
||
}, 1500);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}).catch(errors => {
|
||
uni.$u.toast(this.$tt('bindLogin.accountNotNull'));
|
||
});
|
||
},
|
||
// 获取验证码
|
||
getCode() {
|
||
this.$api.common.captchaImage(true).then(res => {
|
||
this.codeUrl = 'data:image/gif;base64,' + res.img;
|
||
this.loginForm.uuid = res.uuid;
|
||
this.loginForm.code = "";
|
||
})
|
||
.catch(err => {
|
||
this.$u.toast(err.msg);
|
||
});
|
||
},
|
||
// 用户绑定注册
|
||
bindRegister() {
|
||
uni.$u.route('/pagesB/login/bindRegister', {
|
||
bindId: this.loginForm.bindId
|
||
});
|
||
},
|
||
// 获取用户信息
|
||
getProfile() {
|
||
return new Promise((resolve, reject) => {
|
||
getProfile().then(res => {
|
||
resolve(res.data);
|
||
}).catch(err => {
|
||
this.$u.toast(err.msg);
|
||
})
|
||
});
|
||
},
|
||
saveToken(token) {
|
||
// 本地缓存存储token
|
||
uni.setStorageSync('token', token);
|
||
// vuex存储token
|
||
uni.$u.vuex('vuex_token', token);
|
||
},
|
||
saveAccount() {
|
||
// 本地缓存存储
|
||
uni.setStorageSync('username', this.loginForm.username);
|
||
uni.setStorageSync('password', this.loginForm.password);
|
||
},
|
||
handleClauseCheckbox(e) {
|
||
this.isClause = !this.isClause;
|
||
},
|
||
// 隐私政策
|
||
handleGoToPrivacy() {
|
||
let title = this.$tt('login.privacyPolicy');
|
||
let url = projectConfig.officialWebUrl + 'privacy-policy.html';
|
||
uni.navigateTo({
|
||
url: `/pages/common/webview/index?title=${title}&url=${url}`
|
||
});
|
||
},
|
||
// 服务协议
|
||
handleGoToService() {
|
||
let title = this.$tt('login.serviceAgreement');
|
||
let url = projectConfig.officialWebUrl + 'service-agreement.html';
|
||
uni.navigateTo({
|
||
url: `/pages/common/webview/index?title=${title}&url=${url}`
|
||
});
|
||
},
|
||
// 儿童隐私保护声明
|
||
handleGoToStatement() {
|
||
let title = this.$tt('login.childProtectionStatement');
|
||
let url = projectConfig.officialWebUrl + 'child-protection-statement.html';
|
||
uni.navigateTo({
|
||
url: `/pages/common/webview/index?title=${title}&url=${url}`
|
||
});
|
||
},
|
||
// 第三方信息共享清单
|
||
handleGoToCommonBill() {
|
||
let title = this.$tt('login.commonBill');
|
||
let url = projectConfig.officialWebUrl + 'common-bill.html';
|
||
uni.navigateTo({
|
||
url: `/pages/common/webview/index?title=${title}&url=${url}`
|
||
});
|
||
},
|
||
// 勾选协议
|
||
handleClauseCheckbox(e) {
|
||
this.isClause = !this.isClause;
|
||
},
|
||
// 注册确认
|
||
confirmRegister() {
|
||
this.isRegister = false;
|
||
uni.$u.route('/pagesB/login/bindRegister', {
|
||
bindId: this.loginForm.bindId
|
||
});
|
||
},
|
||
openhpLink() {
|
||
uni.navigateTo({
|
||
url: '/pages/common/webview/index?url=http://www.hpiot.cn/'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
height: 100%;
|
||
}
|
||
|
||
.bind-login-wrap {
|
||
height: 100%;
|
||
|
||
.top-wrap {
|
||
height: 510rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.main-wrap {
|
||
padding: 0 40rpx;
|
||
|
||
.register-wrap {
|
||
margin-top: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
text-align: center;
|
||
|
||
.now-btn {
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.clause {
|
||
margin: 40rpx 10rpx;
|
||
font-size: 28rpx;
|
||
|
||
.link {
|
||
color: #00aaff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |