bigdata_WX/pages/login/login.vue

<template>
  <view>
    <view class="bg">
      <image
        :src="$imageURL + '/bigdata_app/log/bg.png'"
        mode=""
        class="bgimg"
      ></image>
    </view>
    <!-- <view class="status_bar"></view> -->
    <view class="apptitle"> 云飞智控 </view>
    <view class="set" @click="set" v-if="setTF">
      <u-icon name="setting-fill" size="50" color="#fff"></u-icon>
    </view>
    <view class="formbox">
      <form @submit="formSubmit">
        <view class="uni-form-item uni-column">
          <view class="username">
            <u-icon
              name="account"
              size="36"
              style="margin-right: 30rpx; color: #fff"
            ></u-icon>
            <u-input
              class="uni-input"
              name="username"
              v-model="formdata.username"
              placeholder-class="icon iconfont icon-bianji1"
              placeholder="请输入用户名"
              placeholderStyle="color:#ffffff;"
              color="#FFFFFF"
              @blur="blur"
            />
          </view>
          <view class="passwold">
            <u-icon
              name="lock"
              size="36"
              style="margin-right: 30rpx; color: #fff"
            ></u-icon>
            <u-input
              v-model="formdata.passwold"
              type="password"
              :password-icon="true"
              :clearable="false"
              placeholder="请输入密码"
              @confirm="formSubmit"
              @input="passwoldddata"
              placeholderStyle="color:#fff;"
              suffixIconStyle="color:#fff;"
              color="#fff"
              class="uni-input"
            />
          </view>
          <view class="aboutpass">
            <u-checkbox-group>
              <u-checkbox
                v-model="checked"
                :label-disabled="false"
                size="28"
                @change="rempass"
                >记住密码
              </u-checkbox>
            </u-checkbox-group>
          </view>
          <view class="uni-btn-v">
            <button form-type="submit" @click="denglu">登 录</button>
          </view>
        </view>
      </form>
    </view>
    <u-modal
      title="升级中请勿随意操作"
      :show-confirm-button="false"
      v-model="showA"
      :content="contentA"
    >
      <view class="upgradeBox">
        <u-line-progress
          v-show="isShow"
          active-color="#19be6b"
          :striped="true"
          :percent="percentNum"
          :striped-active="true"
        ></u-line-progress>
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      formdata: {
        username: '',
        passwold: '',
      },
      setbgtf: false,
      setTF: false,
      value: 'http://8.136.98.49:8002',
      httparr: ['http://8.136.98.49:8002', 'http://dev.hnyfwlw.com'],
      arrowtf: false,
      showA: false, //
      contentA: '',
      isShow: false, //进度条
      percentNum: 0, //在线下载进度
      passvalue: false,
    };
  },
  onLoad() {
    uni.getStorage({
      key: 'user_pass',
      success: (res) => {
        if (res.data) {
          this.formdata.passwold = res.data;
          this.checked = true;
        } else {
          this.checked = false;
        }
      },
    });
    uni.getStorage({
      key: 'user_name',
      success: (res) => {
        this.formdata.username = res.data;
      },
    });
    uni.getStorage({
      key: 'http',
      success: (res) => {
        this.value = res.data;
      },
    });
    this.getEquipList();
  },
  onShow() {},
  methods: {
    async getEquipList() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=home.homes.app_version_record',
        data: {
          ret: 'first',
        },
      });
      console.log(res);
      this.appName = res[0].app_name;
      // uni.getStorage({
      // 	key: 'session_key',
      // 	success: (res) => {
      // 		console.log(res)
      // 		if (res.data != "") {
      // 			uni.switchTab({
      // 				url: "../index/index"
      // 			})
      // 		}
      // 	},
      // })
      // }
    },
    async formSubmit() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=user.login.login_user',
        data: {
          username: this.formdata.username,
          password: this.formdata.passwold,
        },
      });
      console.log(res.session_key);
      let session_key = res.session_key;
      uni.setStorage({
        key: 'session_key',

        data: session_key,
        success: () => {
          // 登录前清除可能残留的权限缓存，再用新账号拉取
          this.$resetPermissionList();
          this.$fetchPermissionList();
          uni.switchTab({
            url: '../index/index',
          });
        },
      });
    },
    passwoldddata() {
      this.formdata.passwold = this.formdata.passwold.replace(
        /[\u4E00-\u9FA5]/g,
        '',
      );
    },
    rempass(val) {
      this.passvalue = val.value;
      if (val.value) {
        uni.setStorage({
          key: 'user_pass',
          data: this.formdata.passwold,
          success: function () {
            console.log('success');
          },
        });
      }
    },
    blur(val) {
      uni.setStorage({
        key: 'user_name',
        data: val,
        success: function () {
          console.log('success');
        },
      });
    },
    logoTime() {
      this.setTF = true;
    },
    set() {
      this.setbgtf = true;
    },
    sethttp() {
      uni.setStorage({
        key: 'http',
        data: this.value,
        success: () => {
          // console.log(this.value);
          this.setbgtf = false;
          uni.showToast({
            title: '修改成功',
            icon: 'none',
          });
          this.getEquipList();
        },
      });
    },
    arrow() {
      this.arrowtf = !this.arrowtf;
    },
    denglu() {
      if (this.passvalue) {
        uni.setStorage({
          key: 'user_pass',
          data: this.formdata.passwold,
          success: function () {
            console.log('success');
          },
        });
      } else {
        uni.removeStorage({
          key: 'user_pass',
          success: function () {
            console.log('success');
          },
        });
      }
    },
  },
};
</script>

<style lang="scss">
.bg {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  .bgimg {
    width: 100%;
    height: 100%;
  }
}
.apptitle {
  font-size: 52rpx;
  color: #fff;
  width: 80%;
  margin: 600rpx auto 40rpx;
}
.logo {
  width: 100%;
  height: 340rpx;
  text-align: center;
  display: flex;
  align-items: center;
  padding-top: 240rpx;

  image {
    width: 280rpx;
    margin: 0 auto;
    height: 120rpx;
  }
}

.set {
  position: absolute;
  right: 50rpx;
  top: 150rpx;
}

.bg {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: -1;

  image {
    width: 100%;
  }
}

/deep/.u-input__right-icon {
  line-height: 35px !important;
}
.uni-form-item {
  width: 100%;

  .username {
    width: 80%;
    margin: 0 auto;
    display: flex;
    margin-bottom: 40rpx;
    padding-bottom: 10rpx;
    border-bottom: 2rpx solid rgba(249, 249, 249, 0.4);

    .u-icon__icon {
      margin-top: 17rpx;
    }

    .uni-input {
      width: 100%;
      color: #fff;
    }
    .u-input__input {
      color: #fff !important;
    }
  }

  .passwold {
    width: 80%;
    margin: 0 auto;
    display: flex;
    margin-bottom: 40rpx;
    padding-bottom: 10rpx;
    border-bottom: 2rpx solid rgba(249, 249, 249, 0.4);

    .u-icon__icon {
      margin-top: 17rpx;
    }
    /deep/.u-input__input {
      color: #fff;
    }
    .uni-input {
      width: 100%;
      color: #fff;
    }
    /deep/.uicon-eye {
      color: #fff !important;
    }
  }

  .aboutpass {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;

    p {
      color: #fff;
      font-size: 28rpx;
    }
    /deep/.uicon-checkbox-mark {
      border-color: #ff0000;
      // color: #f00 !important;
    }
    /deep/.u-checkbox__label {
      font-size: 28rpx;
      color: #fff;
      margin-right: 0;
    }
  }

  .uni-btn-v {
    width: 80%;
    margin: 112rpx auto 0;
    position: relative;
    z-index: 100;

    button {
      width: 100%;
      height: 90rpx;
      line-height: 90rpx;
      color: #ffffff;
      font-size: 36rpx;
      background-image: linear-gradient(
        to bottom,
        rgba(249, 249, 249, 0.6),
        rgba(249, 249, 249, 0.1)
      );
      color: #5dc18b;
    }
  }
}

.setbg {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  z-index: 99999;

  .mengban {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    background-color: rgba($color: #000000, $alpha: 0.5);
  }

  .set_http {
    position: absolute;
    width: 90%;
    left: 5%;
    top: 30%;

    .set_http_top {
      display: flex;
      justify-content: space-around;
      background-color: #5dc18b;
      height: 60px;
      line-height: 60px;
      color: #ffffff;
      border-top-right-radius: 20px;
      border-top-left-radius: 20px;
      font-size: 32rpx;
    }

    .set_http_bot {
      height: 150px;
      background-color: #ffffff;
      border-bottom-right-radius: 20px;
      border-bottom-left-radius: 20px;
      padding: 30px;

      .set_http_bot_input {
        margin-top: 20rpx;
        border: 2rpx solid #bdb6a6;
        border-radius: 20rpx;
        padding: 10rpx 40rpx 0 20rpx;
        font-size: 32rpx;
        height: 30px;
        display: flex;
        justify-content: space-between;

        input {
          width: 90%;
        }
      }
    }

    .scroll-Y {
      border: 2rpx solid #d0d0d0;
      border-radius: 20rpx;

      .scroll-view-item {
        padding-left: 20rpx;
        height: 70rpx;
        font-size: 28rpx;
        line-height: 70rpx;
        border-bottom: 2rpx solid #d0d0d0;
      }
    }
  }
}

.upgradeBox {
  padding: 15rpx;
}
</style>