jiangping
2024-12-25 9ae3baca4c8730fcc5f7c8daf3b6368cec554ae6
h5/pages/driver/login.vue
@@ -7,16 +7,13 @@
    <view class="login_list">
      <view class="login_list_item">
        <image src="@/static/login_ic_phone@2x.png" mode="widthFix" />
        <input v-model="form.username"  type="tel"  @focus="showKeyboard = true" @blur="showKeyboard = false" maxlength="18" placeholder="手机号" />
            <input v-model="form.username" type="tel" @focus="showKeyboard = true" @blur="showKeyboard = false"
               maxlength="18" placeholder="手机号" />
      </view>
      <view class="login_list_item">
        <image src="@/static/login_ic_password@2x.png" mode="widthFix" />
        <input
          v-model="form.password"
               @focus="showKeyboard = true" @blur="showKeyboard = false"
          type="password"
          placeholder="密码"
        />
            <input v-model="form.password" @focus="showKeyboard = true" @blur="showKeyboard = false" type="password"
               placeholder="密码" />
      </view>
    </view>
    <view class="login_btn">
@@ -32,8 +29,15 @@
</template>
<script>
import { driverLogin, loginCaptcha, getUserInfo } from '@/api'
import { mapState, mapMutations } from 'vuex'
   import {
      driverLogin,
      loginCaptcha,
      getUserInfo
   } from '@/api'
   import {
      mapState,
      mapMutations
   } from 'vuex'
export default {
  data() {
    return {
@@ -43,11 +47,18 @@
      },
      isShowProtocol: false,
         showKeyboard: false,
      countDown: 0
            countDown: 0,
            ywinfo: {}
    }
  },
  onLoad() {
      this.initCaptcha()
         const ywinfo = uni.getStorageSync('ywinfo') || {}
         if (ywinfo.ywid && ywinfo.type == 0) {
            this.ywinfo = ywinfo
            uni.setStorageSync('ywinfo', {})
         }
  },
   
  methods: {
@@ -72,7 +83,9 @@
    },
    onLogin() {
      const { form } = this
            const {
               form
            } = this
      if (!form.username) return uni.showToast({
        title: '手机号不能为空',
        icon: 'none'
@@ -93,6 +106,7 @@
                  setTimeout(() => {
                     this.showToast('登录成功')
                  })
                     uni.setStorageSync('ywinfo', this.ywinfo)
            this.setDriverInfo(ress.data)
            uni.redirectTo({
              url: "/pages/driver/index"
@@ -113,16 +127,16 @@
  box-sizing: border-box;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(
    180deg,
      background: linear-gradient(180deg,
    rgba(39, 155, 170, 0.2) 0%,
    rgba(39, 155, 170, 0) 100%
  );
            rgba(39, 155, 170, 0) 100%);
  .login_logo {
    width: 180rpx;
    height: 180rpx;
      margin-bottom: 40rpx;
  }
  .login_bg {
     position: absolute;
     top: 0;
@@ -130,16 +144,19 @@
     width: 100%;
     z-index: -1;
  }
  .login_title {
    font-size: 44rpx;
    font-weight: 600;
    color: #333333;
  }
  .login_list {
      margin-top: 60rpx;
    width: 100%;
    padding: 0 60rpx;
    box-sizing: border-box;
    .login_list_item {
      width: 100%;
      border-radius: 50rpx;
@@ -151,17 +168,21 @@
      display: flex;
      align-items: center;
      justify-content: space-between;
      &:last-child {
        margin-bottom: 0 !important;
      }
      image {
        flex-shrink: 0;
        width: 40rpx;
        height: 40rpx;
      }
      .captcha {
        color: $uni-color-primary;
      }
      input {
        flex: 1;
        height: 100%;
@@ -171,11 +192,13 @@
      }
    }
  }
  .login_btn {
    width: 100%;
    padding: 0 60rpx;
    box-sizing: border-box;
    margin-top: 80rpx;
    .for_psd {
      color: $uni-color-primary;
      margin-top: 40rpx;
@@ -183,6 +206,7 @@
      text-align: center;
      margin: 40rpx auto;
    }
    .login_btn_n {
      width: 100%;
      height: 98rpx;
@@ -197,16 +221,19 @@
      border-radius: 50rpx;
    }
  }
  .deal_wrap {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    bottom: 108rpx;
    .deal {
      color: $uni-color-primary;
    }
  }
   .btns{
      display: flex;
      align-items: center;
@@ -215,13 +242,18 @@
      bottom: 60rpx;
      left: 0;
      width: 100%;
      .btn{
         font-size: 30rpx;
         color: $uni-color-primary;
      }
      .separate{ margin: 0 8rpx; }
         .separate {
            margin: 0 8rpx;
   }
}
   }
.modal {
  padding: 32rpx;
}