#

whycq

2024-02-23 ccdc55062883495b4a4c7bfe47289582b7664aca

 pages/LoginDemo/LoginDemo.vue

@@ -10,52 +10,45 @@
      </view>
      <view class="right">
         <view class="input-box">
            <My-input class="my-input" titleIcon="person" title="账号" placeholder="请输入账号" inputType="text" optIcon="bottom" />
            <My-input class="my-input" titleIcon="locked" title="密码" placeholder="请输入密码" inputType="password" optIcon="eye" optIconShow/>
            <My-input class="my-input" v-model="user.username" titleIcon="person" title="账号" placeholder="请输入账号"
               inputType="text" optIcon="bottom" />
            <My-input class="my-input" v-model="user.password" titleIcon="locked" title="密码" placeholder="请输入密码"
               inputType="password" optIcon="eye" optIconShow />
            <view class="rember-password">
               <view class="text">记住密码</view>
               <switch :checked='remberPassword' color="#FFCC33" style="zoom:.5" @change="remberChange"/>
               <switch :checked='remberPassword' color="#FFCC33" style="zoom:.5" @change="remberChange" />
            </view>
         </view>
         <view class="button" @click="login">
            登录
         </view>
         <button class="button" @click="onLogin()" :loading="load.loading">{{load.btnText}}</button>
      </view>
      <!-- 设置弹窗区域 -->
      <uni-popup ref="settings" type="dialog">
         <view class="popup">
            <!-- 标题 -->
            <view class="title">配置</view>
				
            <scroll-view style="height: 20vh;">
               <view style="background-color: aqua;margin: 4px;height: 40px;width: 20px;" v-for="it in 10"></view>
					
            <view class="title">网 络 配 置</view>
            <scroll-view scroll-y="true" class="settings-scroll">
               <view class="scroll-item">
                  <view class="item-title" style="">{{network.name}}</view>
                  <view style="display: flex;align-items: center;">
                     <input class="settings-input1" type="text" v-model="network.ip">
                     <text style="font-weight: 900;">:</text>
                     <input class="settings-input2" type="text" v-model="network.port">
                     <text style="font-weight: 900;">/</text>
                     <input class="settings-input3" type="text" v-model="network.address">
                  </view>
               </view>
            </scroll-view>
            <view class="">
               <view class="">
            <view class="operate">
               <view class="operate-cancel" @click="cancel">
                  取消
               </view>
               <view class="">
               <view class="operate-confirm" @click="confirm">
                  确认
               </view>
            </view>
            <view class="popup-item">
               <view class="popup-item-left">IP:</view>
               <view class="popup-item-right"><input type="text" v-model="url.ip"></view>
            </view>
            <view class="popup-item">
               <view class="popup-item-left">端口:</view>
               <view class="popup-item-right"><input type="text" v-model="url.port"></view>
            </view>
            <view class="popup-item">
               <view class="popup-item-left">项目:</view>
               <view class="popup-item-right"><input type="text" v-model="url.project"></view>
            </view>
         </view>
      </uni-popup>
		
		
		

      <!-- 版本号 -->
      <!-- #ifdef APP-PLUS -->
      <view class="version">
@@ -66,49 +59,119 @@
</template>

<script>
   // import { data } from 'jquery'
   import { mapState } from 'vuex' //引入mapState
   import store from '@/store/index.js';
   import md5 from '../../static/js/md5.js'
   import common from '../api/common/common.js'
   import login from '../api/login/login.js'
   export default {
      data() {
         return {
            version: '',
            remberPassword: true,
            url: {
               ip: '',
               port: '',
               project: ''
            user: {
               username: '',
               password: ''
            },
            network: {
               name: 'wms',
               ip: '192.168.1.1',
               port: '8080',
               address: 'pswms'
            },
            load: {
               loading: false,
               btnText: '登录'
            },
         }
      },
      computed: mapState({
         project: state => state.project,
			
      }),
      onShow() {
      },
      mounted() {
         uni.getSystemInfo({
            success(res) {
               // console.log(res);
            }
         })
         // 从 state 获取网络信息
         // 从 state 获取账号信息
         console.log(store.state);
         this.user = store.state.userInfo
         this.network = store.state.network
         // 手机端版本号
         // #ifdef APP-PLUS
         var that = this
         var _this = this
         plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
            that.version = wgtinfo.version
            _this.version = wgtinfo.version
         });
         // #endif
      },
      methods: {
         remberChange() {
				
            this.remberPassword = !this.remberPassword
         },
         settings() {
            if (uni.getStorageSync('Network')) {
               this.network = uni.getStorageSync('Network')
            }
            this.$refs.settings.open()
				
         },
         login() {
            let path = 'demo'
            uni.navigateTo({
               url: `/pages/project/${path}/home/home`,
               fail(res) {
                  console.log(`没有${path}项目,请联系管理元`);
               }
					
            })
         }
         cancel() {
            this.$refs.settings.close()
         },
         confirm() {
            let baseUrl = `http://${this.network.ip}:${this.network.port}/${this.network.address}`
            this.$store.commit("setNetwork", this.network);
            this.$store.commit("setBaseUrl", baseUrl);
            this.$refs.settings.close()
         },
         async onLogin() {
            // 验证ip信息
            // 验证账号信息
            if (!this.user.username ) {
               uni.showToast({ icon: 'none', title: '请输入账号' }) 
               return
            }
            if (!this.user.password ) {
               uni.showToast({ icon: 'none', title: '请输入密码' }) 
               return
            }
            this.load.loading = true;
            this.load.btnText = '登录中';
            let res = await login.onLogin(this.user)
            if (res.code === 200) {
               setTimeout(() => {
                  uni.showToast({
                     title: '登录成功'
                  })
                  setTimeout(() => {
                     uni.reLaunch({
                        url: `/pages/home/home`,
                     });
                  }, 300)
                  if (!this.remberPassword) {
                     this.user.password = ''
                  }
                  // uni.setStorageSync('user', this.user);
                  this.$store.commit("setUserInfo", this.user);
               }, 700)
            } else if (res.code === 0) {
               this.load.loading = false;
               this.load.btnText = '登录';
               uni.showToast({
                  icon: 'none',
                  title: '连接失败，请检查设备网络/IP地址是否正确！'
               })
            } else {
               this.load.loading = false;
               this.load.btnText = '登录';
               uni.showToast({
                  icon: 'none',
                  title: `${this.user.username} ${res.msg}`
               })
            }
         },
      }
   }
</script>
@@ -119,10 +182,11 @@
      top: 8px;
      right: 8px;
      border-radius: 10px;
      box-shadow: inset 2px 2px 2px rgba(0,0,0,.3),
               inset -2px -2px 2px rgba(255,255,255,.7),
               -2px -2px 2px rgba(0,0,0,.4);
      box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .3),
         inset -2px -2px 2px rgba(255, 255, 255, .7),
         -2px -2px 2px rgba(0, 0, 0, .4);
   }

   .main {
      height: 100%;
      width: 100%;
@@ -130,45 +194,54 @@
      background-color: #ECF0F1;
      position: absolute;
   }

   .left {
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .logo-box {
      background-color:  #ECF0F1;
      background-color: #ECF0F1;
      border-radius: 15px;
      box-shadow: inset 8px 8px 8px rgba(0,0,0,.3),
               inset -8px -8px 8px rgba(255,255,255,.7),
               -8px -8px 10px rgba(0,0,0,.4);
      box-shadow: inset 8px 8px 8px rgba(0, 0, 0, .3),
         inset -8px -8px 8px rgba(255, 255, 255, .7),
         -8px -8px 10px rgba(0, 0, 0, .4);
   }

   image {
      height: 100%;
      width: 100%;
   }

   .right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
   }

   .input-box {
      width: 100%;
   }

   .my-input {
      width: 80%;
      margin: 16px 10% 16px 10%;
   }

   .rember-password {
      width: 78%;
      margin: 0 11% 0 11%;
      display: flex;
      justify-content: space-between;

      .text {
         font-size: 12px;
         color: #606266;
         line-height: 1;
      }
   }

   .button {
      width: 40%;
      margin: 0 auto;
@@ -176,49 +249,67 @@
      text-align: center;
      line-height: 50px;
      font-size: 20px;
      background-color:  #409EFF;
      background-color: #409EFF;
      color: #ECF0F1;
      border-radius: 7px;
      box-shadow: inset 4px 4px 4px rgba(0,0,0,.3),
               inset -4px -4px 4px rgba(255,255,255,.4),
               -4px -4px 5px rgba(0,0,0,.4);
      box-shadow: inset 4px 4px 4px rgba(0, 0, 0, .3),
         inset -4px -4px 4px rgba(255, 255, 255, .4),
         -4px -4px 5px rgba(0, 0, 0, .4);
   }

   .button:active {
      transform: translateY(5px) scale(0.99, 0.99);
      box-shadow: inset 4px 4px 4px rgba(0, 0, 0, .3),
         inset -4px -4px 8px rgba(255, 255, 255, .7),
         -5px -5px 5px rgba(0, 0, 0, .3);
   }

   @media screen and (orientation: portrait) {

      /* 竖屏 */
      .main {
         flex-direction: column;
      }

      .left {
         height: 40%;
         width: 100%;
      }

      .right {
         height: 40%;
         height: 50%;
         width: 100%;
      }

      .logo-box {
         height: 60%;
         width: 80%;
      }
   }

   @media screen and (orientation: landscape) {

      /* 横屏 */
      .main {
         display: flex;
      }

      .left {
         height: 100%;
         width: 50%;
      }

      .right {
         height: 100%;
         width: 50%;
      }

      .logo-box {
         height: 60%;
         width: 80%;
      }
   }

   .version {
      position: fixed;
      width: 100%;
@@ -227,18 +318,87 @@
      font-size: 10px;
      color: #909399;
   }
	

   .popup {
      width: 70vw;
      width: 90vw;
      height: 40vh;
      background-color: #fff;
      border-radius: 16px;
   }

   .title {
      height: 10vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #a8abb2;
   }

   .settings-scroll {
      height: 23vh;
      touch-action: none;
   }

   .scroll-item {
      margin: 4px 16px;
      color: #606266;
      font-size: 12px;
   }

   .item-title {
      font-size: 14px;
      width: 100%;
      text-align: center;
   }

   .settings-input1 {
      border: 1px solid #dcdfe6;
      flex: 5;
      margin: 2px;
      padding: 4px;
      border-radius: 4px;
   }

   .settings-input2 {
      border: 1px solid #dcdfe6;
      flex: 3;
      margin: 2px;
      padding: 4px;
      border-radius: 4px;
   }

   .settings-input3 {
      border: 1px solid #dcdfe6;
      flex: 3;
      margin: 2px;
      padding: 4px;
      border-radius: 4px;

   }

   .operate {
      height: 7vh;
      display: flex;
      text-align: center;
      border-top: 1px solid #dcdfe6;
      font-size: 16px;
   }

   .operate-cancel {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #606266;
   }

   .operate-confirm {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #dcdfe6;
      color: #00aeec;
   }
</style>