#

whycq

2023-10-13 6a00b39ef5de18aab2baf47db37a9ec947109755

 pages/LoginDemo/LoginDemo.vue

@@ -1,7 +1,7 @@
<template>
   <view class="main">
      <!-- 设置按钮 -->
      <uni-icons type="gear" size="30" color="#b1b3b8" class="setting"></uni-icons>
      <uni-icons type="gear" size="30" color="#b1b3b8" class="setting" @click="settings"></uni-icons>
      <view class="left">
         <!-- logo -->
         <view class="logo-box">
@@ -17,10 +17,40 @@
               <switch :checked='remberPassword' color="#FFCC33" style="zoom:.5" @change="remberChange"/>
            </view>
         </view>
         <view class="button">
            登录
         <view class="button" @click="login" :loading="load.loading">
            {{load.btnText}}
         </view>
      </view>
      <!-- 设置弹窗区域 -->
      <uni-popup ref="settings" type="dialog">
         <view class="popup">
            <!-- 标题 -->
            <view class="title">网 络 配 置</view>
               <scroll-view scroll-y="true" style="height: 23vh;touch-action: none;">
                  <view style="margin: 4px; color: #606266;font-size: 12px; " v-for="net in network">
                     <text style="font-size: 14px;">{{net.name}}</text>
                     <view style="display: flex;align-items: center;">
                        <input class="settings-input1" type="text" v-model="net.ip"> 
                        <text style="font-weight: 900;">:</text>
                        <input class="settings-input2" type="text" v-model="net.port"> 
                        <text style="font-weight: 900;">/</text>
                        <input class="settings-input3" type="text" v-model="net.address">
                     </view>
                  </view>
               </scroll-view>
            <view class="operate">
               <view class="operate-cancel" @click="cancel">
                  取消
               </view>
               <view class="operate-confirm" @click="confirm">
                  确认
               </view>
            </view>
         </view>
      </uni-popup>
		
		
		
      <!-- 版本号 -->
      <!-- #ifdef APP-PLUS -->
      <view class="version">
@@ -31,11 +61,21 @@
</template>

<script>
   // import { data } from 'jquery'
   import md5 from '../../static/js/md5.js'
   export default {
      data() {
         return {
            version: '',
            remberPassword: true
            remberPassword: true,
            network: [
               {name: 'wms',ip:'192.168.1.1',port: '8080',address: 'pswms'},
               {name: 'wcs',ip:'192.168.1.1',port: '9090',address: 'pswcs'}
            ],
            load: {
               loading: false,
               btnText: '登录'
            },
         }
      },
      mounted() {
@@ -55,6 +95,56 @@
      methods: {
         remberChange() {
            
         },
         settings() {
            this.$refs.settings.open()
         },
         cancel() {
            console.log(uni.getStorageSync('Network'));
            this.$refs.settings.close()
         },
         confirm() {
            uni.setStorageSync('Network', this.network);
            this.$refs.settings.close()
         },
         login() {
            let _this = this,path = 'demo',network = uni.getStorageSync('Network');
            if(network) {
               path = network[0].address
               path = path.substring(0, path.length - 3);
            }
            let baseUrl = `http://${network[0].ip}:${network[0].port}/${network[0].address}`
            uni.request({
               url: `${baseUrl}/login.action`,
               data: {
                  username: 'super',
                  password: md5.hex_md5('xltys1995')
               },
               success(res) {
                  res = res.data
                  if (res.code === 200) {
                     uni.setStorageSync('token', res.data.token);
                     _this.load.btnText = '登录中';
                     setTimeout(() => {
                        uni.showToast({
                           title: '登录成功'
                        })
                        setTimeout(() => {
                           uni.reLaunch({
                              url: `/pages/project/${path}/home/home`,
                           });
                        }, 300)
                     }, 700)
                  }
                  // uni.navigateTo({
                  //    url: `/pages/project/${path}/home/home`,
                  //    fail(res) {
                  //       console.log(`没有${path}项目,请联系管理元`);
                  //    }
							
                  // })
               }
            })
         }
      }
   }
@@ -63,13 +153,14 @@
<style lang="scss" scoped>
   .setting {
      position: absolute;
      top: 16rpx;
      right: 16rpx;
      border-radius: 40rpx;
      box-shadow: inset 4rpx 4rpx 4rpx rgba(0,0,0,.3),
               inset -4rpx -4rpx 4rpx rgba(255,255,255,.7),
               -4rpx -4rpx 4rpx rgba(0,0,0,.4);
      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);
   }
	
   .main {
      height: 100%;
      width: 100%;
@@ -84,7 +175,7 @@
   }
   .logo-box {
      background-color:  #ECF0F1;
      border-radius: 40rpx;
      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);
@@ -103,7 +194,7 @@
   }
   .my-input {
      width: 80%;
      margin: 32rpx 10% 32rpx 10%;
      margin: 16px 10% 16px 10%;
   }
   .rember-password {
      width: 78%;
@@ -119,16 +210,16 @@
   .button {
      width: 40%;
      margin: 0 auto;
      height: 100rpx;
      height: 50px;
      text-align: center;
      line-height: 100rpx;
      line-height: 50px;
      font-size: 20px;
      background-color:  #409EFF;
      color: #ECF0F1;
      border-radius: 14rpx;
      box-shadow: inset 8rpx 8rpx 8rpx rgba(0,0,0,.3),
               inset -8rpx -8rpx 8rpx rgba(255,255,255,.4),
               -8rpx -8rpx 10rpx rgba(0,0,0,.4);
      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);
   }
   @media screen and (orientation: portrait) {
      /* 竖屏 */
@@ -174,4 +265,63 @@
      font-size: 10px;
      color: #909399;
   }
	
   .popup {
      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-input1 {
      border: 1px solid #dcdfe6;
      flex: 2;
      margin: 2px;
      padding: 4px;
      border-radius: 4px;
   }
   .settings-input2 {
      border: 1px solid #dcdfe6;
      flex: 1;
      margin: 2px;
      padding: 4px;
      border-radius: 4px;
   }
   .settings-input3 {
      border: 1px solid #dcdfe6;
      flex: 2;
      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>