Houjie
4 天以前 51c7896fd8e45085dd5cdfff11e79a00ee0a7379
pages/login/login.vue
@@ -24,9 +24,6 @@
                       :class="[shape=='round'?'round':'']" @tap="onLogin"><text
                          space="emsp">{{loading ? "登录中...":" 登录 "}}</text>
                    </button>
                    <!-- <button class="cu-btn line-blue lg margin-left shadow" :loading="loading" :class="[shape=='round'?'round':'']"
                     @tap="loginWay=3-loginWay">短信登录
                  </button> -->
                 </view>
              </block>
              <block v-else>
@@ -64,12 +61,39 @@
        </scroll-view>
        <!-- 登录加载弹窗 -->
        <view class="cu-load load-modal" v-if="loading">
           <!-- <view class="cuIcon-emojifill text-orange"></view> -->
           <image src="/static/logo-lx.png" mode="aspectFit" class="round"></image>
           <view class="gray-text">登录中...</view>
        </view>
     </view>
      <!-- 产线选择弹窗 - 从底部弹出 -->
      <view class="line-modal-mask" v-if="showLineModal" @click="closeLineModal"></view>
      <view class="line-modal" v-if="showLineModal" :class="{ 'line-modal-active': showLineModal }">
         <view class="line-modal-header">
            <view class="line-modal-title">选择产线</view>
            <text class="cuIcon-close" @click="closeLineModal"></text>
         </view>
         <view class="line-modal-content">
            <view v-if="lineLoading" class="loading-view">
               <view class="cu-load"></view>
               <view class="text-gray">加载产线中...</view>
            </view>
            <view v-else-if="lineList.length === 0" class="empty-view">
               <text class="cuIcon-meh text-gray text-xl"></text>
               <view class="text-gray">暂无可用产线</view>
            </view>
            <view class="line-item" v-for="(line, index) in lineList" :key="line.id" @click="selectLine(line)"
               :class="{ 'line-item-selected': selectedLineId === line.id }">
               <view class="line-name">{{ line.name }}</view>
               <text class="cuIcon-check text-blue" v-if="selectedLineId === line.id"></text>
            </view>
         </view>
         <view class="line-modal-footer">
            <button class="cu-btn bg-blue lg" @click="confirmLineSelection" :disabled="!selectedLineId">
               确认选择
            </button>
         </view>
      </view>
   </view>
  </template>
  <script>
@@ -79,8 +103,10 @@
        USER_INFO
     } from "@/common/util/constants"
     import {
        mapActions
     } from "vuex"
      mapActions,
      mapState,
      mapGetters
   } from "vuex" // 新增mapGetters
     import configService from '@/common/service/config.service.js';
     export default {
@@ -107,19 +133,17 @@
              id: '',
              url: {
                 bindingThirdPhone: '/sys/thirdLogin/bindingThirdPhone'
              }
            },
            // 产线选择相关
            showLineModal: false, // 产线弹窗是否显示
            lineList: [], // 产线列表
            selectedLineId: null, // 当前选中的产线ID
            lineLoading: false // 产线加载状态
           };
        },
        onLoad: function(options) {
           this.id = options.id;
           // #ifdef APP-PLUS
           var that = this
           plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
              that.version = wgtinfo.version
           });
           // #endif
        },
        computed: {
         ...mapState(['currentLineId']),
         ...mapGetters(['currentLineName']), // 新增:获取当前产线名称(用于验证)
           isSendSMSEnable() {
              return this.smsCountDown <= 0 && this.phoneNo.length > 4;
           },
@@ -137,8 +161,18 @@
              return this.userName.length > 4 && this.password.length > 4;
           },
        },
      onLoad: function(options) {
         this.id = options.id;
         // #ifdef APP-PLUS
         var that = this
         plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
            that.version = wgtinfo.version
         });
         // #endif
      },
        methods: {
           ...mapActions(["mLogin", "PhoneLogin", "ThirdLogin"]),
         ...mapActions(["mLogin", "PhoneLogin", "ThirdLogin", "fetchLineList", "setCurrentLine"]),
           onLogin: function() {
              if (!this.userName || this.userName.length == 0) {
                 this.$tip.toast('请填写用户名');
@@ -156,27 +190,12 @@
              this.mLogin(loginParams).then((res) => {
                 this.loading = false;
                 if (res.data.success) {
                  console.log('账号登录成功,准备处理产线选择');
                    // #ifdef APP-PLUS
                    this.saveClientId()
                    // #endif
                    // #ifndef APP-PLUS
                    this.$tip.success('登录成功!')
                    this.$Router.replaceAll({
                       name: 'index'
                    })
                    // if (this.id) {
                    //    uni.navigateTo({
                    //       url: `/pages/device/deviceWebDeils/deviceWebDeils?equipmentId=${this.id}`
                    //    });
                    // } else {
                    //    this.$tip.success('登录成功!')
                    //    this.$Router.replaceAll({
                    //       name: 'index'
                    //    })
                    // }
                  this.handleLoginSuccess()
                    // #endif
                 } else {
                    this.$tip.alert(res.data.message);
@@ -189,6 +208,7 @@
                 this.loading = false;
              })
           },
           saveClientId() {
              var info = plus.push.getClientInfo();
              var cid = info.clientid;
@@ -198,15 +218,17 @@
                 }
              }).then(res => {
                 console.log("res::saveClientId>", res)
                 this.$tip.success('登录成功!')
                 this.$Router.replaceAll({
                    name: 'index'
                 })
               this.handleLoginSuccess();
            }).catch(err => {
               console.error('保存clientId失败:', err);
               this.handleLoginSuccess();
              })
           },
           changePassword() {
              this.showPassword = !this.showPassword;
           },
           onSMSSend() {
              let smsParams = {};
              smsParams.mobile = this.phoneNo;
@@ -230,6 +252,7 @@
                 }
              });
           },
           startSMSTimer() {
              this.smsCountInterval = setInterval(() => {
                 this.smsCountDown--;
@@ -238,6 +261,7 @@
                 }
              }, 1000);
           },
           onSMSLogin() {
              let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
@@ -258,12 +282,9 @@
                 captcha: this.smsCode
              };
              this.PhoneLogin(loginParams).then((res) => {
                 console.log("res====》", res)
               console.log("短信登录成功,准备处理产线选择");
                 if (res.data.success) {
                    this.$tip.success('登录成功!')
                    this.$Router.replaceAll({
                       name: 'index'
                    })
                  this.handleLoginSuccess();
                 } else {
                    this.$tip.error(res.data.message);
                 }
@@ -272,12 +293,100 @@
                 this.$tip.error(msg);
              });
           },
         // 登录成功后的处理
         handleLoginSuccess() {
            console.log('进入handleLoginSuccess方法');
            this.$tip.success('登录成功!');
            // 检查是否已有保存的产线(包含ID和名称)
            const savedLineId = uni.getStorageSync('currentLineId');
            const savedLineName = uni.getStorageSync('currentLineName');
            console.log('本地存储的产线ID:', savedLineId, '名称:', savedLineName);
            if (savedLineId && savedLineName) {
               // 已有完整的产线信息,直接进入首页
               console.log('已有保存的产线,直接进入首页');
               this.navigateToHome();
            } else {
               // 无保存的产线,获取产线列表并显示弹窗
               console.log('无保存的产线,准备获取产线列表');
               this.getLineListAndShowModal();
            }
         },
         // 获取产线列表并显示弹窗
         getLineListAndShowModal() {
            console.log('进入getLineListAndShowModal方法');
            this.lineLoading = true;
            this.lineList = [];
            this.selectedLineId = null;
            // 调用Vuex action获取产线列表
            this.fetchLineList().then(lineList => {
               console.log('获取产线列表成功:', lineList);
               this.lineList = lineList || [];
               this.lineLoading = false;
               // 如果有产线,默认选中第一条并显示弹窗
               if (this.lineList.length > 0) {
                  this.selectedLineId = this.lineList[0].id;
                  this.showLineModal = true;
                  console.log('产线列表不为空,显示弹窗');
               } else {
                  console.log('产线列表为空,不显示弹窗');
                  this.$tip.toast('未获取到产线数据,请联系管理员');
                  this.navigateToHome();
               }
            }).catch(err => {
               console.error('获取产线列表失败:', err);
               this.lineLoading = false;
               this.$tip.toast('获取产线列表失败,请重试');
               // 3秒后重试
               setTimeout(() => {
                  this.getLineListAndShowModal();
               }, 3000);
            });
         },
         // 选择产线
         selectLine(line) {
            console.log('选中的产线:', line.id, line.name); // 打印选中的产线名称
            this.selectedLineId = line.id;
         },
         // 确认选择产线(触发Vuex保存ID和名称)
         confirmLineSelection() {
            if (!this.selectedLineId) return;
            // 调用setCurrentLine,Vuex会自动同步名称
            this.setCurrentLine(this.selectedLineId).then(() => {
               console.log('产线选择成功,ID:', this.selectedLineId, '名称:', this.currentLineName);
               this.showLineModal = false;
               this.navigateToHome();
            });
         },
         // 关闭产线选择弹窗
         closeLineModal() {
            this.showLineModal = false;
         },
         // 跳转到首页
         navigateToHome() {
            this.$Router.replaceAll({
               name: 'index'
            });
         },
           loginSuccess() {
              // 登陆成功,重定向到主页
              this.$Router.replace({
                 name: 'index'
              })
           },
           requestFailed(err) {
              this.$message.warning("登录失败")
           },
@@ -286,11 +395,12 @@
           if (this.smsCountInterval) {
              clearInterval(this.smsCountInterval);
           }
        },
      }
     }
  </script>
  <style>
   /* 原有样式保持不变 */
     .login-paddingtop {
        padding-top: 100upx;
     }
@@ -336,8 +446,98 @@
        border: 0;
     }
     /*按钮点击效果*/
     .zai-btn.button-hover {
        transform: translate(1upx, 1upx);
     }
   /* 产线选择弹窗样式 */
   .line-modal-mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 998;
      opacity: 0;
      transition: opacity 0.3s ease;
   }
   .line-modal {
      position: fixed;
      left: 0;
      right: 0;
      bottom: -100%;
      background-color: #fff;
      border-top-left-radius: 20upx;
      border-top-right-radius: 20upx;
      z-index: 999;
      transition: bottom 0.3s ease;
      max-height: 80vh;
   }
   .line-modal-active {
      bottom: 0;
   }
   .line-modal-active+.line-modal-mask {
      opacity: 1;
   }
   .line-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20upx 30upx;
      border-bottom: 1px solid #eee;
   }
   .line-modal-title {
      font-size: 34upx;
      font-weight: bold;
   }
   .line-modal-content {
      padding: 20upx;
      overflow-y: auto;
      max-height: calc(80vh - 180upx);
   }
   .line-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25upx 20upx;
      border-bottom: 1px solid #f5f5f5;
      font-size: 30upx;
   }
   .line-item-selected {
      background-color: #f0f7ff;
   }
   .line-item:last-child {
      border-bottom: none;
   }
   .line-modal-footer {
      padding: 20upx 30upx;
      border-top: 1px solid #eee;
   }
   .loading-view {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60upx 0;
   }
   .empty-view {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60upx 0;
   }
  </style>