bigDataApp/pages/login/login.vue

<template>
  <view class="bg-img">
    <!-- <view class="status_bar"></view> -->
    <view class="apptitle" @longpress="logoTime">
      {{ $isneutral ? '云飞智控' : '智控' }}
    </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>
    <!-- <view class="bg">
			<image :src="'http://www.hnyfwlw.com:8006/bigdata_app'+'/image/login/850c9307f4ef2d7dc6db1049711ab55.jpg'" mode=""></image>
		</view> -->
    <view class="setbg" v-if="setbgtf">
      <view class="mengban" @click.stop="setbgtf = !setbgtf"></view>
      <view class="set_http">
        <view class="set_http_top">
          <u-icon name="close" size="40" @click="setbgtf = !setbgtf"></u-icon>
          <p>设置服务器地址</p>
          <u-icon name="checkbox-mark" size="40" @click="sethttp"></u-icon>
        </view>
        <view class="set_http_bot">
          <p>服务器访问地址</p>
          <view class="set_http_bot_input">
            <input
              type="text"
              v-model="value"
              placeholder="请在此处输入服务器地址(http://...)"
            />
            <u-icon
              :name="arrowtf ? 'arrow-up' : 'arrow-down'"
              @click="arrow"
            ></u-icon>
          </view>
          <scroll-view scroll-y="true" class="scroll-Y" v-if="arrowtf">
            <view
              :id="'demo' + index"
              class="scroll-view-item uni-bg-red"
              v-for="(item, index) in httparr"
              :key="index"
              @click="value = item"
              >{{ item }}</view
            >
          </scroll-view>
        </view>
      </view>
    </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://114.115.147.140:8002'],
      arrowtf: false,
      showA: false, //
      contentA: '',
      isShow: false, //进度条
      percentNum: 0, //在线下载进度
      passvalue: false,
      turnover: true,
    };
  },
  onLoad() {},
  onShow() {
    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;
      },
    });
    console.log(this.value);
    uni.getStorage({
      key: 'turnover',
      success: (res) => {
        console.log(res.data);
        this.turnover = res.data;
      },
    });
    this.getEquipList();
  },
  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;
      this.versions = Number(res[0].app_num.match(/\d+/g).join(''));
      var id = Number(plus.runtime.version.match(/\d+/g).join(''));
      console.log(this.versions, plus.runtime.version);
      if (this.percentNum > 0) {
        console.log('更新中');
      } else {
        console.log(this.turnover);
        if (this.turnover) {
          if (this.versions > id) {
            uni.showModal({
              title: '检测到有新版本，是否更新？',
              content: '建议更新,不更新可能会出现部分数据无法获取！',
              confirmText: '更新',
              cancelText: '不更新',
              success: (res) => {
                if (res.confirm) {
                  console.log('用户点击确定');
                  this.showA = true;
                  this.isShow = true;
                  this.upgrade();
                } else if (res.cancel) {
                  // plus.runtime.quit();
                  console.log('用户点击取消');
                  uni.showModal({
                    title: '是否每次进入提示更新？',
                    content: '不再提示后可在<我的>-<关于我们>-<版本更新>中更新',
                    confirmText: '提示',
                    cancelText: '不再提示',
                    success: (res) => {
                      if (res.confirm) {
                        console.log('用户点击确定');
                        uni.setStorage({
                          key: 'turnover',
                          data: true,
                        });
                      } else if (res.cancel) {
                        uni.setStorage({
                          key: 'turnover',
                          data: false,
                        });
                      }
                    },
                  });
                }
              },
            });
          } else {
            uni.getStorage({
              key: 'session_key',
              success: (res) => {
                console.log(res);
                if (res.data != '') {
                  uni.switchTab({
                    url: '../index/index',
                  });
                }
              },
            });
          }
        } else {
          uni.getStorage({
            key: 'session_key',
            success: (res) => {
              console.log(res);
              if (res.data != '') {
                uni.switchTab({
                  url: '../index/index',
                });
              }
            },
          });
        }
      }
    },
    upgrade() {
      console.log(this.appName);
      // var url = this.value + "/app_file/" + this.appName
      var appName = '';
      if (this.$isneutral) {
        appName = 'big_data'; //云飞
      } else {
        appName = 'big_data2'; //中性
      }
      var url = 'http://hnyfwlw.com/app/' + appName + '.apk';
      const downloadTask = uni.downloadFile({
        url: url, //仅为示例，并非真实的资源
        success: (res) => {
          console.log(res);
          if (res.statusCode === 200) {
            console.log('下载成功');
            console.log(
              '安装包下载成功，即将安装：' + JSON.stringify(res, null, 4)
            );
            plus.runtime.openFile(res.tempFilePath);
            this.showA = false;
            this.isShow = false;
          }
        },
        fail: (err) => {
          console.log(err);
        },
        complete: (com) => {
          console.log(com);
        },
      });
      downloadTask.onProgressUpdate((res) => {
        this.percentNum = res.progress;
        if (res.progress == 100) {
          console.log('下载完成了');
        }
      });
    },
    async formSubmit() {
      console.log(11111);
      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: () => {
          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();
          uni.removeStorage({
            key: 'session_key',
          });
        },
      });
    },
    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-img {
  height: 100vh;
  background-image: url(../../static/images/login/bg.png);
  background-size: 100% 100%;
  padding-top: 500rpx;
  box-sizing: border-box;
}
.apptitle {
  font-size: 52rpx;
  color: #fff;
  width: 80%;
  margin: 0 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%;
  }
}

::v-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;
    }
    ::v-deep .uni-input-input {
      color: #fff;
    }
  }

  .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;
    }
    ::v-deep .uni-input-input {
      color: #fff;
    }
    .uni-input {
      width: 100%;
      color: #fff;
    }
    ::v-deep .uicon-eye {
      color: #fff !important;
    }
  }

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

    p {
      color: #fff;
      font-size: 28rpx;
    }
    ::v-deep .uicon-checkbox-mark {
      border-color: #ff0000;
      // color: #f00 !important;
    }
    ::v-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>