代码提交

zjh

2025-04-26 18db0dbf100ff81ead99b1d6a3daa6c4c26e5d91

 pages/BasePages/login.vue

@@ -1,144 +1,131 @@
<template>
  <view class="login-page">
    <view class="login-content">
      <view class="logo-area">
        <image src="../../static/img/bj/gs.png" alt="广深科技" class="company-logo"></image>
       
      </view>
      
      <form class="login-form" @submit.prevent="handleSubmit">
        <view class="form-group">
          <text class="form-label">账号</text>
          <input 
            type="text" 
            id="username" 
            v-model="username"
            placeholder="请输入账号"
            class="form-input"
            autocapitalize="off"
            autocomplete="username"
         @keyup.enter="handleSubmit" 
          />
        </view>
        
        <view class="form-group">
          <text class="form-label">密码</text>
          <input 
            :type="showPassword ? 'text' : 'password'" 
            id="password" 
            v-model="password"
            placeholder="请输入密码" 
            class="form-input"
            autocomplete="current-password"
         @keyup.enter="handleSubmit" 
          />
          <view class="password-toggles">
            <text class="show-password" @tap="toggleShowPassword">
              {{ showPassword ? '隐藏密码' : '显示密码' }}
            </text>
          </view>
        </view>
        
        <button form-type="submit" class="login-button">登 录</button>
      </form>
      
      <view class="footer">
        <text>广深科技技术支持</text>
        <text class="version">版本号 v1.0.1</text>
      </view>
    </view>
  </view>
   <view class="login-page">
      <view class="login-content">
         <view class="logo-area">
            <image src="../../static/img/bj/gs.png" alt="广深科技" class="company-logo"></image>

         </view>

         <form class="login-form" @submit.prevent="handleSubmit">
            <view class="form-group">
               <text class="form-label">账号</text>
               <input type="text" id="username" v-model="username" placeholder="请输入账号" class="form-input"
                  autocapitalize="off" autocomplete="username" @keyup.enter="handleSubmit" />
            </view>

            <view class="form-group">
               <text class="form-label">密码</text>
               <input :type="showPassword ? 'text' : 'password'" id="password" v-model="password"
                  placeholder="请输入密码" class="form-input" autocomplete="current-password"
                  @keyup.enter="handleSubmit" />
               <view class="password-toggles">
                  <text class="show-password" @tap="toggleShowPassword">
                     {{ showPassword ? '隐藏密码' : '显示密码' }}
                  </text>
               </view>
            </view>

            <button form-type="submit" class="login-button">登 录</button>
         </form>

         <view class="footer">
            <text>广深科技技术支持</text>
            <text class="version">版本号 v1.0.1</text>
         </view>
      </view>
   </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      showPassword: false,
     accountFocus: false,
     passwordFocus: false,
     tokenId: '',
     account: '',
     factoryArray: [],
     //selectFactory: { value: this.$loginInfo.factoryKey||'',text:this.$loginInfo.factoryName||'',index: this.$loginInfo.factoryIndex}, //选择的账套信息
     selectFactory: {},
     selectLanguage: {}, //选择的语言
    }
  },
  async onReady() {
     this.account = this.$loginInfo.account || '';
     this.selectFactory = this.$loginInfo.factory || 0;
     this.selectLanguage = this.$loginInfo.language || 0;
  },
  methods: {
    toggleShowPassword() {
      this.showPassword = !this.showPassword;
    },
    handleSubmit() {
      // uni.showToast({
      //   title: '登录功能仅为演示',
      //   icon: 'none'
      // });
      // 实际登录逻辑可以在这里实现
      // this.$request.post('/login', {
      //   username: this.username,
      //   password: this.password
      // }).then(...)
     console.log(this.username)
     if (!this.username) {
        uni.showToast({
           icon: 'none',
           title: '请输入账号'
        });
        this.accountFocus = true;
        return;
     }
     if (!this.password) {
        uni.showToast({
           icon: 'none',
           title: '请输入密码'
        });
        this.passwordFocus = true;
        return;
     }
     uni.showLoading({
        mask: true,
        title: "登录中..."
     });
     uni.request({
        url: this.$store.state.serverInfo.serverAPI + '/login/login',
        method: "POST",
        header: {
           'content-type': "application/json"
        },
        data: {
           userID: this.username,
           userPass: this.password
        },
        success: res => {
           if (res.data.status == 0) {
              this.toMain(res.data.data.tbBillList[0]);
           } else {
              uni.showToast({
                 icon: 'none',
                 title: res.data.message
              });
           }
        },
        fail(err) {
           uni.showToast({
              icon: 'none',
              title: "服务器断开"
           });
        },
        complete: () => {
           uni.hideLoading();
        }
     });
	  
    },
   export default {
      data() {
         return {
            username: '',
            password: '',
            showPassword: false,
            accountFocus: false,
            passwordFocus: false,
            tokenId: '',
            account: '',
            factoryArray: [],
            //selectFactory: { value: this.$loginInfo.factoryKey||'',text:this.$loginInfo.factoryName||'',index: this.$loginInfo.factoryIndex}, //选择的账套信息
            selectFactory: {},
            selectLanguage: {}, //选择的语言
         }
      },
      async onReady() {
         this.account = this.$loginInfo.account || '';
         this.selectFactory = this.$loginInfo.factory || 0;
         this.selectLanguage = this.$loginInfo.language || 0;
      },
      methods: {
         toggleShowPassword() {
            this.showPassword = !this.showPassword;
         },
         handleSubmit() {
				
            // uni.showToast({
            //   title: '登录功能仅为演示',
            //   icon: 'none'
            // });
            // 实际登录逻辑可以在这里实现
            // this.$request.post('/login', {
            //   username: this.username,
            //   password: this.password
            // }).then(...)

            if (!this.username) {
               uni.showToast({
                  icon: 'none',
                  title: '请输入账号'
               });
               this.accountFocus = true;
               return;
            }
            if (!this.password) {
               uni.showToast({
                  icon: 'none',
                  title: '请输入密码'
               });
               this.passwordFocus = true;
               return;
            }
            uni.showLoading({
               mask: true,
               title: "登录中..."
            });
            uni.request({
               url: this.$store.state.serverInfo.serverAPI + '/login/login',
               method: "POST",
               header: {
                  'content-type': "application/json"
               },
               data: {
                  userID: this.username,
                  userPass: this.password
               },
               success: res => {
                  if (res.data.status == 0) {
                     this.toMain(res.data.data.tbBillList[0]);
                  } else {
                     uni.showToast({
                        icon: 'none',
                        title: res.data.message
                     });
                  }
               },
               fail(err) {
                  uni.showToast({
                     icon: 'none',
                     title: "服务器断开"
                  });
               },
               complete: () => {
                  uni.hideLoading();
               }
            });

         },
         toMain(user) {
            this.$loginInfo.account = user.fcode;
            this.$loginInfo.userName = user.fname;
@@ -148,7 +135,22 @@
            this.$loginInfo.deptNo = user.departmentid;
            this.$loginInfo.chineseName = user.fname;
            this.$loginInfo.id = user.fid;
            this.$loginInfo.roleid=user.roleids;
            this.$loginInfo.roleid = user.roleids;

            uni.setStorage({
               key: 'gs_mes_pad_userid',
               data: this.username,
               success: function() {

               }
            });
            uni.setStorage({
               key: 'gs_mes_pad_userkey',
               data: this.password,
               success: function() {

               }
            });
            this.$login();
            if (this.$loginInfo.forcedLogin) {
               uni.reLaunch({
@@ -158,246 +160,298 @@
               uni.navigateBack();
            }
         }
  }
}
      },
      onLoad(options) {
       try {
          const id = uni.getStorageSync('gs_mes_pad_userid');
         const pwd = uni.getStorageSync('gs_mes_pad_userkey');
         if(id){
            this.username=id;
         }
         if(pwd){
            this.password=pwd;
         }
          if (id&&pwd) {
		 		
             uni.showLoading({
                mask: true,
                title: "登录中..."
             });
             uni.request({
                url: this.$store.state.serverInfo.serverAPI + '/login/login',
                method: "POST",
                header: {
                   'content-type': "application/json"
                },
                data: {
                   userID: id,
                   userPass: pwd
                },
                success: res => {
                   if (res.data.status == 0) {
                      this.toMain(res.data.data.tbBillList[0]);
                   } else {
                      uni.showToast({
                         icon: 'none',
                         title: res.data.message
                      });
                   }
                },
                fail(err) {
                   uni.showToast({
                      icon: 'none',
                      title: "服务器断开"
                   });
                },
                complete: () => {
                   uni.hideLoading();
                }
             });
          }
       } catch (e) {
          // error
       }
      }
   }
</script>

<style>
/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
   /* 基础样式 */
   * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
   }

.login-page {
  width: 100%;
  min-height: 96vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}
   .login-page {
      width: 100%;
      min-height: 96vh;
      display: flex;
      flex-direction: column;
      background-color: #f5f7fa;
   }

.login-content {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  padding: 20px;
}
   .login-content {
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex-grow: 1;
      padding: 20px;
   }

/* 标志区域 */
.logo-area {
  margin-bottom: 6vh;
  text-align: center;
}
   /* 标志区域 */
   .logo-area {
      margin-bottom: 6vh;
      text-align: center;
   }

.company-logo {
  width: 25vw;
  height: 25vw;
  max-width: 100px;
  max-height: 100px;
  margin-bottom: 2vh;
}
   .company-logo {
      width: 25vw;
      height: 25vw;
      max-width: 100px;
      max-height: 100px;
      margin-bottom: 2vh;
   }

.welcome-text {
  color: #333;
  font-size: 7vw;
  font-weight: 500;
  line-height: 1.3;
}
   .welcome-text {
      color: #333;
      font-size: 7vw;
      font-weight: 500;
      line-height: 1.3;
   }

/* 表单样式 */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 4vh;
  width: 100%;
}
   /* 表单样式 */
   .login-form {
      display: flex;
      flex-direction: column;
      gap: 4vh;
      width: 100%;
   }

.form-group {
  text-align: left;
  width: 100%;
}
   .form-group {
      text-align: left;
      width: 100%;
   }

.form-label {
  display: block;
  margin-bottom: 2vh;
  font-size: 4.5vw;
  color: #666;
  font-weight: 500;
}
   .form-label {
      display: block;
      margin-bottom: 2vh;
      font-size: 4.5vw;
      color: #666;
      font-weight: 500;
   }

.form-input {
  width: 100%;
  padding: 4.5vw;
  border: 1px solid #e0e0e0;
  border-radius: 2vw;
  font-size: 4.8vw;
  transition: all 0.3s;
  -webkit-appearance: none;
  background-color: white;
  height: 12vw;
  min-height: 50px;
}
   .form-input {
      width: 100%;
      padding: 4.5vw;
      border: 1px solid #e0e0e0;
      border-radius: 2vw;
      font-size: 4.8vw;
      transition: all 0.3s;
      -webkit-appearance: none;
      background-color: white;
      height: 12vw;
      min-height: 50px;
   }

.form-input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
  outline: none;
}
   .form-input:focus {
      border-color: #3498db;
      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
      outline: none;
   }

/* 密码相关控制 */
.password-toggles {
  display: flex;
  justify-content: space-between;
  margin-top: 2vh;
  font-size: 4vw;
}
   /* 密码相关控制 */
   .password-toggles {
      display: flex;
      justify-content: space-between;
      margin-top: 2vh;
      font-size: 4vw;
   }

.show-password {
  color: #3498db;
  padding: 1vw 0;
}
   .show-password {
      color: #3498db;
      padding: 1vw 0;
   }

/* 登录按钮 */
.login-button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 4.5vw;
  border-radius: 2vw;
  font-size: 5vw;
  font-weight: 500;
  transition: all 0.3s;
  margin-top: 4vh;
  width: 100%;
  height: 12vw;
  min-height: 50px;
}
   /* 登录按钮 */
   .login-button {
      background-color: #3498db;
      color: white;
      border: none;
      padding: 4.5vw;
      border-radius: 2vw;
      font-size: 5vw;
      font-weight: 500;
      transition: all 0.3s;
      margin-top: 4vh;
      width: 100%;
      height: 12vw;
      min-height: 50px;
   }

.login-button:active {
  background-color: #2980b9;
}
   .login-button:active {
      background-color: #2980b9;
   }

/* 页脚 */
.footer {
  margin-top: 6vh;
  color: #999;
  font-size: 3.8vw;
  line-height: 1.5;
  text-align: center;
}
   /* 页脚 */
   .footer {
      margin-top: 6vh;
      color: #999;
      font-size: 3.8vw;
      line-height: 1.5;
      text-align: center;
   }

.version {
  margin-top: 1vh;
  font-size: 3.5vw;
  margin-left: 1vh;
}
   .version {
      margin-top: 1vh;
      font-size: 3.5vw;
      margin-left: 1vh;
   }

/* 平板和桌面样式 */
@media (min-width: 768px) {
  .login-content {
    max-width: 800px;
    padding: 40px;
  }
  
  .company-logo {
    width: 80px;
    height: 80px;
  }
  
  .welcome-text {
    font-size: 28px;
  }
  
  .login-form {
    gap: 25px;
  }
  
  .form-label {
    font-size: 16px;
    margin-bottom: 12px;
  }
  
  .form-input {
    padding: 16px;
    font-size: 16px;
    height: auto;
    border-radius: 8px;
  }
  
  .password-toggles {
    font-size: 14px;
  }
  
  .login-button {
    padding: 0px;
    font-size: 18px;
    border-radius: 8px;
    height: auto;
  }
  
  .footer {
    font-size: 14px;
  }
  
  .version {
    font-size: 13px;
  }
}
/* 手机样式 */
@media (min-width: 300px) {
  .login-content {
    max-width: 800px;
    padding: 40px;
  }
  
  .company-logo {
    width: 80px;
    height: 80px;
  }
  
  .welcome-text {
    font-size: 28px;
  }
  
  .login-form {
    gap: 25px;
  }
  
  .form-label {
    font-size: 0px;
    margin-bottom: 12px;
  }
  
  .form-input {
    padding: 16px;
    font-size: 16px;
    height: auto;
    border-radius: 8px;
  }
  
  .password-toggles {
    font-size: 14px;
  }
  
  .login-button {
    padding: 0px;
    font-size: 18px;
    border-radius: 8px;
    height: auto;
  }
  
  .footer {
    font-size: 14px;
  }
  
  .version {
    font-size: 13px;
  }
}
   /* 平板和桌面样式 */
   @media (min-width: 768px) {
      .login-content {
         max-width: 800px;
         padding: 40px;
      }

      .company-logo {
         width: 80px;
         height: 80px;
      }

      .welcome-text {
         font-size: 28px;
      }

      .login-form {
         gap: 25px;
      }

      .form-label {
         font-size: 16px;
         margin-bottom: 12px;
      }

      .form-input {
         padding: 16px;
         font-size: 16px;
         height: auto;
         border-radius: 8px;
      }

      .password-toggles {
         font-size: 14px;
      }

      .login-button {
         padding: 0px;
         font-size: 18px;
         border-radius: 8px;
         height: auto;
      }

      .footer {
         font-size: 14px;
      }

      .version {
         font-size: 13px;
      }
   }

   /* 手机样式 */
   @media (min-width: 300px) {
      .login-content {
         max-width: 800px;
         padding: 40px;
      }

      .company-logo {
         width: 80px;
         height: 80px;
      }

      .welcome-text {
         font-size: 28px;
      }

      .login-form {
         gap: 25px;
      }

      .form-label {
         font-size: 0px;
         margin-bottom: 12px;
      }

      .form-input {
         padding: 16px;
         font-size: 16px;
         height: auto;
         border-radius: 8px;
      }

      .password-toggles {
         font-size: 14px;
      }

      .login-button {
         padding: 0px;
         font-size: 18px;
         border-radius: 8px;
         height: auto;
      }

      .footer {
         font-size: 14px;
      }

      .version {
         font-size: 13px;
      }
   }
</style>