提交

pan

3 天以前 e4e304318532574e418bc01b5a45b8836dac3e1a

 ÏîÄ¿´úÂë/WIDESEA_WMSClient/src/views/Login.vue

@@ -29,9 +29,27 @@
            placeholder="请输入密码"
          />
        </div>

         <div class="item station-select-item">
          <div class="input-icon el-icon-lock"></div>
          <el-select
            v-model="stationValue"
            placeholder="选择站台"
            class="station-select"
            @change="handleStationChange"
          >
            <el-option
              v-for="item in stationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

    
        <div class="item">
          <div class="input-icon el-icon-mobile"></div>

          <input
            v-focus
            type="text"
@@ -56,72 +74,61 @@
          <span v-else>正在登录...</span>
        </el-button>
      </div>

      <!-- è´¦å·ä¿¡æ¯ -->
      <!-- <div class="account-info">
        <p>演示账号：admin666 &nbsp; &nbsp;密码:123456</p>
        <p>本地账号：admin &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;密码:123456</p>
        <p><a href="https://jq.qq.com/?_wv=1027&k=Sqstuy0M" style="text-decoration: none"
            target="_blank">QQ3群:743852316</a>
          &nbsp; &nbsp;&nbsp; &nbsp;
          <a href="http://v2.volcore.xyz/document/guide" style="text-decoration: none" target="_blank">框架文档</a>
        </p>
      </div> -->
      <!-- é“¾æŽ¥ä½ç½® -->
      <!-- <div class="app-link" >
        <a href="#" style="text-decoration: none">移动端扫码</a>
        <a>
          <i class="el-icon-chat-dot-round"></i> å°ç¨‹åº
          <img src="https://app-1256993465.cos.ap-nanjing.myqcloud.com/wechat.jpg" /></a>
        <a>
          <i class="el-icon-apple"></i>
          Android
          <img src="https://app-1256993465.cos.ap-nanjing.myqcloud.com/Android.png" /></a>
        <a>
          <i class="el-icon-document"></i>
          H5
          <img src="https://app-1256993465.cos.ap-nanjing.myqcloud.com/H5.png" /></a>
      </div> -->
    </div>

    <!-- é¡µé¢åº•éƒ¨ -->
    <!-- <div class="login-footer">
      <a style="text-decoration: none" href="https://beian.miit.gov.cn/" target="_blank">京ICP备19056538号-1</a>


      <a href="https://dotnet9.com/" style="text-decoration: none" target="blank">Dotnet9</a>
      <a href="https://space.bilibili.com/525836469" style="text-decoration: none" target="blank">NET视频教程(微软MVP-ACE录制)</a>
      <a href="https://www.cctalk.com/m/group/90268531" style="text-decoration: none" target="blank">VOL框架视频</a>
      <a href="http://120.48.115.252:9990" style="text-decoration: none" target="blank">视频演示地址</a>
    </div> -->

    <img class="login-bg" src="/static/login_bg.png" />
  </div>
</template>


<script >
<script>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  getCurrentInstance,
  onMounted,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import store from "../store/index";
import http from "@/../src/api/http.js";
import { stationManager, STATION_STORAGE_KEY } from "@/../src/uitils/stationManager";
export default defineComponent({
  setup(props, context) {
    store.commit("clearUserInfo", "");
    const loading = ref(false);
    const codeImgSrc = ref("");
    const value = ref("");
    const userInfo = reactive({
      userName: "",
      password: "",
      verificationCode: "",
      UUID: undefined,
    });
     const stationValue = ref("");
   const stationOptions = reactive([
      { label: "站台2", value: "2-1" },
      { label: "站台3", value: "3-1" },
    ]);
     // åˆå§‹åŒ–站台值
    onMounted(() => {
      // ä»Žæœ¬åœ°å­˜å‚¨åŠ è½½ä¿å­˜çš„站台值
      const savedStation = stationManager.getStation();
      if (savedStation) {
        stationValue.value = savedStation;
      } else if (stationOptions.length > 0) {
        // å¦‚果没有保存的值，使用第一个选项
        stationValue.value = stationOptions[0].value;
      }
    });
    const handleStationChange = (value) => {
      // ä¿å­˜ç«™å°é€‰æ‹©åˆ°æœ¬åœ°å­˜å‚¨
      if (value) {
        stationManager.saveStation(value);
        // ä¹Ÿä¿å­˜åˆ°Vuex/store中，方便全局访问
        store.commit("setStation", value);
      }
    };

    const getVierificationCode = () => {
      http.get("/api/User/getVierificationCode").then((x) => {
@@ -130,7 +137,7 @@
      });
    };
    getVierificationCode();
    

    let appContext = getCurrentInstance().appContext;
    let $message = appContext.config.globalProperties.$message;
    let router = useRouter();
@@ -141,6 +148,13 @@
      if (!userInfo.verificationCode) {
        return $message.error("请输入验证码");
      }

          // ç¡®ä¿ç«™å°å€¼å·²ä¿å­˜
      if (stationValue.value) {
        stationManager.saveStation(stationValue.value);
        store.commit("setStation", stationValue.value);
      }

      loading.value = true;
      http.post("/api/User/login", userInfo, "正在登录....").then((result) => {
        if (!result.status) {
@@ -150,7 +164,7 @@
        }
        $message.success("登录成功,正在跳转!");
        store.commit("setUserInfo", result.data);
        

        router.push({ path: "/" });
      });
    };
@@ -170,6 +184,9 @@
      userInfo,
      loginPress,
      openUrl,
     stationOptions,
      stationValue,
      handleStationChange,
    };
  },
  directives: {
@@ -196,12 +213,9 @@
  width: 50%;
  display: flex;
  flex-direction: column;
  // margin-right: 150px;
  z-index: 999;

  .form-user {
    // margin: 25px 0;

    .item {
      border-radius: 5px;
      border: 1px solid #ececec;
@@ -210,19 +224,31 @@
      background: #ffff;
      height: 45px;
      padding-left: 20px;
      display: flex;
      align-items: center;

      &.station-select-item {
        padding-left: 0;
        
        .input-icon {
          margin-left: 20px;
          min-width: 20px;
        }
      }

      .code {
        position: relative;
        cursor: pointer;
        width: 74px;
        padding: 5px 10px 0 0;
        display: flex;
        align-items: center;
      }

      .input-icon {
        line-height: 45px;
        color: #7a7a7a;
        padding-right: 20px;
        display: flex;
        align-items: center;
      }
    }
  }
@@ -241,12 +267,27 @@
    margin: 0;
    padding: 0;
    color: #323233;
    line-height: inherit;
    text-align: left;
    border: 0;
    outline: none;
    font-size: 16px;
    line-height: 20px;
    height: 100%;
    line-height: normal;
  }

  select {
    background: white;
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #323233;
    text-align: left;
    border: 0;
    outline: none;
    font-size: 16px;
  }
}

@@ -270,7 +311,6 @@
  font-weight: bolder;
  font-size: 20px;
  letter-spacing: 2px;

  position: relative;
  display: flex;

@@ -309,10 +349,120 @@
  color: transparent;
  font-size: 25px;
}

// ä¸‹æ‹‰æ¡†è‡ªå®šä¹‰æ ·å¼ - ç§»é™¤æ‰€æœ‰äº¤äº’效果
.station-select {
  width: 100%;
  height: 100%;
  flex: 1;

  :deep(.el-input) {
    height: 100%;
    cursor: pointer; // æ·»åŠ æŒ‡é’ˆæ˜¾ç¤ºä¸ºå¯ç‚¹å‡»
  }

  :deep(.el-input__wrapper) {
    height: 100%;
    box-shadow: none;
    border: none;
    padding: 0;
    background: transparent;
    
    // ç§»é™¤æ‰€æœ‰hover、focus效果
    &:hover, &:focus, &.is-focus {
      box-shadow: none !important;
      outline: none !important;
      border: none !important;
    }
  }

  :deep(.el-input__inner) {
    height: 100%;
    padding-left: 10px;
    padding-top: 10px;
    font-size: 16px;
    color: #323233;
    cursor: pointer; // æ·»åŠ æŒ‡é’ˆæ˜¾ç¤ºä¸ºå¯ç‚¹å‡»
    
    &::placeholder {
      color: #c0c4cc;
    }
  }

  :deep(.el-input__suffix) {
    display: flex;
    align-items: center;
    height: 100%;
  }

  :deep(.el-select__caret) {
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: 10px;
  }

  // ç§»é™¤æ•´ä¸ªç»„件上的任何hover和focus样式
  &:hover, &:focus, &.is-focus {
    :deep(.el-input__wrapper) {
      box-shadow: none !important;
      outline: none !important;
      border: none !important;
    }
  }
}

// ä¿®æ”¹å…¨å±€çš„下拉框样式
:deep(.el-select-dropdown) {
  border: 1px solid #ececec;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  
  .el-select-dropdown__item {
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    color: #323233;
    padding: 0 20px;
    
    &:hover {
      background-color: #f5f7fa;
    }
    
    &.selected {
      color: #3a6cd1;
      font-weight: normal;
      background-color: #f0f7ff;
    }
  }
  
  // éšè—æ»šåŠ¨æ¡æˆ–调整滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }
}

// ç§»é™¤æ‰€æœ‰input的focus和hover样式
input {
  &:hover, &:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
}
</style>
<style lang="less" scoped>
.app-link {
  // font-weight: bolder;
  text-align: center;
  padding-top: 5px;
  font-size: 12px;
@@ -343,7 +493,6 @@
      top: -130px;
      width: 120px;
      left: -22px;

      border: 1px solid #b1b1b1;
    }
  }