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://iot-xcwl.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>
|