bigDataApp/pages/login/login.vue

<template>
  <view class="login-container">
    <!-- 顶部渐变背景区域 -->
    <view class="header-bg"></view>

    <!-- Logo 区域（长按显示设置按钮） -->
    <view class="logo-section" @longpress="logoTime">
      <view class="logo-circle">
        <image
          src="./assets/logo.png"
          class="logo-img"
          mode="aspectFit"
        ></image>
      </view>
      <text class="app-title">{{
        $isneutral ? '智慧农业大数据平台' : '云飞智控'
      }}</text>
    </view>

    <!-- 设置按钮（长按 Logo 显示） -->
    <view class="set-btn" @click="set" v-if="setTF">
      <u-icon name="setting-fill" size="44" color="#24b35d"></u-icon>
    </view>

    <!-- 登录表单卡片 -->
    <view class="form-card">
      <form @submit="formSubmit">
        <!-- 账号输入 -->
        <view class="form-item">
          <u-icon name="account" size="36" color="#999"></u-icon>
          <u-input
            v-model="formdata.username"
            class="form-input"
            placeholder="请输入账号/手机号"
            placeholderStyle="color:#BBBBBB;"
            color="#333"
            :border="false"
            @blur="blur"
          />
        </view>

        <!-- 密码输入 -->
        <view class="form-item">
          <u-icon name="lock" size="36" color="#999"></u-icon>
          <u-input
            v-model="formdata.passwold"
            type="password"
            :password-icon="true"
            :clearable="false"
            placeholder="请输入密码"
            placeholderStyle="color:#BBBBBB;"
            suffixIconStyle="color:#999;"
            color="#333"
            :border="false"
            class="form-input"
            @confirm="formSubmit"
            @input="passwoldddata"
          />
        </view>

        <!-- 记住密码 -->
        <view class="form-extra">
          <u-checkbox-group>
            <u-checkbox
              v-model="checked"
              shape="square"
              size="28"
              active-color="#24b35d"
              :label-disabled="false"
              @change="rempass"
              >记住密码</u-checkbox
            >
          </u-checkbox-group>
        </view>

        <!-- 登录按钮 -->
        <view class="login-btn-wrap">
          <button form-type="submit" class="login-btn" @click="denglu">
            登 录
          </button>
        </view>

        <!-- 用户隐私协议 -->
        <view class="agreement">
          <u-checkbox-group>
            <u-checkbox
              v-model="agree"
              shape="circle"
              size="26"
              active-color="#24b35d"
              :label-disabled="false"
            >
              我已阅读并同意
            </u-checkbox>
          </u-checkbox-group>
          <text class="agree-link" @click="goAgreement">《用户隐私协议》</text>
        </view>
      </form>
    </view>

    <!-- 底部版本号 -->
    <view class="version-footer">
      <text class="version-text">V{{ appVersion || '1.0.0' }}</text>
    </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>
          <text class="set_title">设置服务器地址</text>
          <u-icon name="checkbox-mark" size="40" @click="sethttp"></u-icon>
        </view>
        <view class="set_http_bot">
          <text class="set_label">服务器访问地址</text>
          <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"
              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="#24b35d"
          :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: 'https://web.hnyfwlw.com',
      httparr: ['https://web.hnyfwlw.com'],
      arrowtf: false,
      showA: false,
      contentA: '',
      isShow: false,
      percentNum: 0,
      passvalue: false,
      turnover: true,
      agree: false,
      appVersion: '',
    };
  },
  onLoad() {},
  onShow() {
    // 获取当前 app 版本号
    // #ifdef APP-PLUS
    this.appVersion = plus.runtime.version;
    // #endif
    // #ifndef APP-PLUS
    this.appVersion = '1.0.0';
    // #endif
    // 恢复记住的密码
    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) {
                  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 appName = '';
      if (this.$isneutral) {
        appName = 'big_data'; // 云飞
      } else {
        appName = 'big_data2'; // 中性
      }
      var url = 'https://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() {
      // 1. 必填校验：用户名
      if (!this.formdata.username || !this.formdata.username.trim()) {
        uni.showToast({
          title: '请输入账号/手机号',
          icon: 'none',
        });
        return;
      }
      // 2. 必填校验：密码
      if (!this.formdata.passwold) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none',
        });
        return;
      }
      // 3. 隐私协议校验
      if (!this.agree) {
        uni.showToast({
          title: '请先阅读并同意用户隐私协议',
          icon: 'none',
        });
        return;
      }
      // 4. 发起登录请求（仅成功时才继续后续流程）
      try {
        const res = await this.$myRequest({
          url: '/api/api_gateway?method=user.login.login_user',
          data: {
            username: this.formdata.username,
            password: this.formdata.passwold,
          },
        });

        // 兼容：登录接口可能直接返回 session_key，也可能在 data 里
        let session_key = res.session_key || (res.data && res.data.session_key);
        if (!session_key) {
          uni.showToast({
            title: res.msg || res.message || '登录失败，请检查账号密码',
            icon: 'none',
          });
          return;
        }

        // 5. 登录成功，存储 session_key 并跳转
        uni.setStorage({
          key: 'session_key',
          data: session_key,
          success: () => {
            // 登录前清除可能残留的权限缓存，再用新账号拉取
            this.$resetPermissionList();
            this.$fetchPermissionList();
            uni.switchTab({
              url: '../index/index',
            });
          },
        });
      } catch (err) {
        // 网络错误或接口抛错，提示后不再往下走
        console.log('登录请求失败:', err);
        uni.showToast({
          title: (err && err.message) || '网络异常，请稍后重试',
          icon: 'none',
        });
      }
    },
    // 密码输入过滤中文
    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: () => {
          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');
          },
        });
      }
    },
    // 跳转用户隐私协议
    goAgreement() {
      uni.navigateTo({
        url: './agreement',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/* 页面整体容器 */
.login-container {
  height: 100vh;
  width: 100%;
  background: linear-gradient(180deg, #e8f7ef 0%, #f5f9f6 45%, #ffffff 100%);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* 顶部淡绿色渐变背景层 */
.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 420rpx;
  background: linear-gradient(180deg, #c8ecdb 0%, #e8f7ef 100%);
  z-index: 0;
}

/* Logo 区域 */
.logo-section {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 160rpx;
}

/* 绿色圆形 Logo */
.logo-circle {
  width: 160rpx;
  height: 160rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32rpx;
}

/* Logo 内的真实图片 */
.logo-img {
  width: 80%;
  height: 80%;
}

/* 应用标题 */
.app-title {
  font-size: 40rpx;
  color: #333333;
  font-weight: 500;
  letter-spacing: 2rpx;
}

/* 设置按钮 */
.set-btn {
  position: absolute;
  right: 40rpx;
  top: 80rpx;
  z-index: 10;
}

/* 登录表单（无卡片，直接平铺） */
.form-card {
  position: relative;
  z-index: 1;
  width: 640rpx;
  margin: 72rpx auto 0;
  padding: 0 16rpx;
}

/* 表单输入项 */
.form-item {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #e5e5e5;
  padding: 28rpx 0;

  .form-input {
    flex: 1;
    margin-left: 20rpx;
    font-size: 28rpx;
  }

  ::v-deep .uni-input-input {
    color: #333333 !important;
    font-size: 28rpx !important;
  }

  ::v-deep .uicon-eye,
  ::v-deep .uicon-eye-off {
    color: #bbbbbb !important;
  }
}

/* 表单附加项：记住密码 */
.form-extra {
  margin-top: 24rpx;
  display: flex;
  align-items: center;

  ::v-deep .u-checkbox__label {
    font-size: 26rpx;
    color: #666666;
    margin-left: 8rpx;
  }

  ::v-deep .u-checkbox__icon-wrap {
    border-color: #cccccc;
  }
}

/* 登录按钮 */
.login-btn-wrap {
  margin-top: 48rpx;

  .login-btn {
    width: 100%;
    height: 96rpx;
    line-height: 96rpx;
    background: linear-gradient(135deg, #24b35d 0%, #1a9e4e 100%);
    border-radius: 48rpx;
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 500;
    border: none;
    box-shadow: 0 8rpx 24rpx rgba(36, 179, 93, 0.3);

    &::after {
      border: none;
    }
  }
}

/* 用户隐私协议 */
.agreement {
  margin-top: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  ::v-deep .u-checkbox__label {
    font-size: 22rpx;
    color: #999999;
    margin-left: 4rpx;
  }

  ::v-deep .u-checkbox__icon-wrap {
    border-color: #cccccc;
  }

  .agree-link {
    font-size: 22rpx;
    color: #24b35d;
    margin-left: 4rpx;
  }
}

/* 底部版本号 */
.version-footer {
  position: absolute;
  bottom: 60rpx;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 1;

  .version-text {
    font-size: 24rpx;
    color: #bbbbbb;
    letter-spacing: 4rpx;
  }
}

/* 服务器设置弹窗 */
.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;
      align-items: center;
      background-color: #24b35d;
      height: 100rpx;
      line-height: 100rpx;
      color: #ffffff;
      border-top-right-radius: 20rpx;
      border-top-left-radius: 20rpx;

      .set_title {
        font-size: 30rpx;
      }
    }

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

      .set_label {
        font-size: 26rpx;
        color: #666666;
      }

      .set_http_bot_input {
        margin-top: 20rpx;
        border: 2rpx solid #eeeeee;
        border-radius: 12rpx;
        padding: 16rpx 24rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        input {
          width: 90%;
          font-size: 28rpx;
        }
      }
    }

    .scroll-Y {
      border: 2rpx solid #eeeeee;
      border-radius: 12rpx;
      margin-top: 16rpx;

      .scroll-view-item {
        padding: 0 20rpx;
        height: 70rpx;
        font-size: 26rpx;
        line-height: 70rpx;
        border-bottom: 2rpx solid #f5f5f5;
        color: #333333;
      }
    }
  }
}

/* 升级进度框 */
.upgradeBox {
  padding: 15rpx;
}
</style>