123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454 |
- <template>
- <view class="content">
- <view class="info_bg">
- <image src="../../static/management/login-bg.png" class="bgImg"></image>
- <div class="title">
- <image src="../../static/management/logo.svg"></image>
- <!-- <text>双碳感知资产运营管理平台</text> -->
- <text>传能</text>
- </div>
- </view>
- <view class="form-box">
- <view class="loginTxt">登录</view>
- <view class="row-input">
- <u-icon
- name="account"
- color="#2979ff"
- size="50"
- style="padding: 0 20rpx"
- ></u-icon>
- <input
- v-model="account"
- placeholder="请输入用户账号"
- maxlength="18"
- clearable
- />
- </view>
- <view class="row-input">
- <u-icon
- name="lock"
- color="#2979ff"
- size="50"
- style="padding: 0 20rpx"
- ></u-icon>
- <input
- v-model="password"
- placeholder="登陆密码"
- clearable
- :password="!isShowPassword"
- />
- <u-icon
- name="eye-fill"
- color="#2979ff"
- size="50"
- style="padding-right: 20rpx"
- v-if="isShowPassword"
- @click="showOrHide"
- ></u-icon>
- <u-icon
- name="eye-off"
- color="#2979ff"
- size="50"
- style="padding-right: 0rpx"
- v-else
- @click="showOrHide"
- >
- </u-icon>
- </view>
- <view class="Userprotocols">
- <view class="Userprotocolchecked">
- <checkbox :checked="rememberPsw" @click="checkboxChange" />
- </view>
- <view class="Userprotocoltext">记住账号密码</view>
- </view>
- <view class="Userprotocol">
- <view class="Userprotocolchecked">
- <checkbox
- :checked="isChecked"
- @click="isChecked = !isChecked"
- style="transform: scale(0.7)"
- ></checkbox>
- </view>
- <view class="Userprotocoltext">我已阅读并同意 <span @click="useragement">用户协议</span> 和 <span @click="Userprotocol">隐私政策</span> </view
- >
- </view>
- <view class="login-btn" @click="loginbtn">登录</view>
- </view>
- <u-toast ref="uToast" />
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- isChecked: true,
- rememberPsw:true,
- isShowPassword: false,
- account: "",
- password: "",
- captcha: "",
- uuid: "",
- captchaPath: "",
- };
- },
- onLoad() {
- // this.getCaptcha();
- //this.getDeviceInfo();
- //this.getOAID();
-
- },
- onUnload() {
- //触发水印显示
- uni.$emit("ly-show-watermark");
- },
- mounted() {//记住密码
- //缓存的账号
- const HBusername = uni.getStorageSync('HBusername');
- //缓存的密码
- const HBpassword = uni.getStorageSync('HBpassword');
- //console.log("缓存的账号:"+HBusername)
- //console.log("缓存的密码:"+HBpassword)
- //有缓存就赋值给文本没有就清空
- if (HBusername && HBpassword) {
- this.account = HBusername;
- this.password = HBpassword;
- } else {
- this.account = '';
- this.password = '';
- }
- //自动登录
- },
-
- methods: {
- getDeviceInfo(){
- plus.device.getInfo({
- success:function(e){
- console.log('getDeviceInfo success: '+JSON.stringify(e));
-
- },
- fail:function(e){
- console.log('getDeviceInfo failed: '+JSON.stringify(e));
- }
- });
- },
- getOAID(){
- plus.device.getOAID({
- success:function(e){
- console.log('getOAID success: '+JSON.stringify(e));
- },
- fail:function(e){
- console.log('getOAID failed: '+JSON.stringify(e));
- }
- });
- },
-
-
-
- //复选框
- checkboxChange: function(e) {
- this.rememberPsw=!this.rememberPsw;
- console.log('111111111111111111',this.rememberPsw)
- if (this.rememberPsw == true) {
- //获取缓存的账号 赋值
- uni.getStorageSync('HBusername',this.account);
- uni.getStorageSync('HBpassword',this.password);
- } else {//销毁
- uni.removeStorageSync('HBusername');
- uni.removeStorageSync('HBpassword');
- }
- },
-
-
-
- loginbtn() {
- if (this.account == "") {
- this.$refs.uToast.show({
- type: "error",
- message: "请输入账号",
- });
- return false
- } else if (this.password == "") {
- this.$refs.uToast.show({
- type: "error",
- message: "请同意用户协议和隐私政策",
- });
- return false
- }
- let formData = {
- username: this.account,
- password: this.password,
- };
- //登录功能
- this.$api.post("/login", formData).then((res) => {
- if (res.data.code == 0) {
- uni.setStorageSync("tokendata", res.data.data.token); //token
- uni.setStorageSync("Userinformation", formData); //用户信息
- //获取用户的信息,如组织架构,个人信息,权限等
- Promise.all([
- this.getpermissions(),
- this.getDictList(),
- this.getuserInfo(),
- ]).then(() => {
- uni.navigateTo({
- url: "/pages/index/index",
- });
- });
- return false
- } else if (this.password == "") {
- this.$refs.uToast.show({
- type: "error",
- message: "请输入密码",
- });
- return false
- }
-
- let formData = {
- username: this.account,
- password: this.password,
- };
- //登录功能
- this.$api.post("/login", formData).then((res) => {
- if (res.data.code == 0) {
- uni.setStorageSync("tokendata", res.data.data.token); //token
- uni.setStorageSync("Userinformation", formData); //用户信息
-
- //勾选就缓存账号和密码
- if (this.rememberPsw) {
- uni.setStorageSync('HBusername', this.account);
- uni.setStorageSync('HBpassword', this.password);
- } else {//销毁缓存
- uni.removeStorageSync('HBusername');
- uni.removeStorageSync('HBpassword');
- }
-
-
-
- //获取用户的信息,如组织架构,个人信息,权限等
- Promise.all([
- this.getpermissions(),
- this.getDictList(),
- this.getuserInfo(),
- ]).then(() => {
- uni.navigateTo({
- url: "/pages/index/index",
- });
- });
- } else {
- this.$refs.uToast.show({
- type: "error",
- message: "账号或者密码错误,请重新输入",
- });
- }
- });
- })
- },
- getpermissions() {
- //获取用户权限功能
- return new Promise((resolve, reject) => {
- this.$api
- .get("/menu/permissions", {})
- .then((res) => {
- uni.setStorageSync("ButtonPermissions", res.data.data);
- resolve(res);
- })
- .catch((e) => {
- reject(e);
- });
- });
- },
- getDictList() {
- //获取字典列表, 添加并全局变量保存
- return new Promise((resolve, reject) => {
- this.$api
- .get("/all", {})
- .then((res) => {
- uni.setStorageSync("getDictDataList", res.data.data);
- resolve(res);
- // console.log('222222', res)
- })
- .catch((e) => {
- reject(e);
- });
- });
- },
- getuserInfo() {
- //获取用户信息
- return new Promise((resolve, reject) => {
- this.$api
- .get("/user/userInfo", {})
- .then((res) => {
- uni.setStorageSync("getuserInfo", res.data.data);
- resolve(res);
- })
- .catch((e) => {
- reject(e);
- });
- });
- },
- // 密码显示/密码隐藏
- showOrHide() {
- this.isShowPassword = !this.isShowPassword;
- },
- Userprotocol() {
- uni.navigateTo({
- url: "/pages/login/Privacyagreement",
- success: (res) => {},
- fail: () => {},
- complete: () => {},
- });
- },
- useragement(){
- uni.navigateTo({
- url: "/pages/login/useragree",
- success: (res) => {},
- fail: () => {},
- complete: () => {},
- });
- },
- // 找回密码
- forget() {
- uni.navigateTo({
- url: "/pages/login/forget",
- success: (res) => {},
- fail: () => {},
- complete: () => {},
- });
- },
- // 注册
- register() {
- uni.navigateTo({
- url: "/pages/login/register",
- success: (res) => {},
- fail: () => {},
- complete: () => {},
- });
- },
- },
- };
- </script>
- <style lang="scss">
- .Userprotocol{
- margin-top: 60rpx;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- font-size: 12px;
- }
-
- .Userprotocols{
- margin-top: -30rpx;
- margin-right:-70rpx;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- transform: scale(.75);
- }
- .Userprotocoltext{
- color: #5C8FFF;
- span{
- color: #a1a2a3;
- }
- }
- .form-box {
- width: 91%;
- background: #fff;
- margin: -148rpx auto 0;
- position: relative;
- z-index: 3;
- padding: 60rpx 40rpx 100rpx;
- box-sizing: border-box;
- border-radius: 32rpx;
- .loginTxt {
- color: #0c1935;
- font-size: 40rpx;
- margin-bottom: 80rpx;
- text-align: center;
- }
- .row-input {
- display: flex;
- align-items: center;
- height: 80rpx;
- background-color: #f4f7ff;
- border-radius: 36rpx;
- margin-bottom: 40rpx;
- padding: 0 20rpx;
- input {
- width: 460rpx;
- font-size: 30rpx;
- color: #a1a2a3;
- flex: 1;
- }
- }
- .Userprotocol{
- display: flex;
- align-items: center;
- justify-content: center;
- margin-top: 140rpx;
- }
- .login-btn {
- margin-top: 20rpx;
- font-size: 16px;
- letter-spacing: 7px;
- color: #ffffff;
- height: 40px;
- border-radius: 18px;
- background: #5c8fff;
- text-align: center;
- line-height: 40px;
- }
- }
- .content {
- .bgImg {
- width: 78%;
- position: absolute;
- left: -5px;
- top: 9px;
- z-index: 0;
- }
- .title {
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
- z-index: 2;
- image {
- width: 64rpx;
- height: 64rpx;
- margin-right: 4rpx;
- }
- text {
- font-size: 36rpx;
- color: #fff;
- }
- }
- }
- .info_bg {
- padding-top: 60rpx;
- width: 100%;
- height: 400rpx;
- background: #5c8fff;
- border-radius: 0px 0px 32rpx 32rpx;
- position: relative;
- image {
- width: 272px;
- height: 157px;
- }
- }
- </style>
|