Merge remote-tracking branch 'origin/master'

jiangping

2024-12-25 9ae3baca4c8730fcc5f7c8daf3b6368cec554ae6

 h5/pages/driver/login.vue

@@ -1,228 +1,260 @@
<template>
  <view class="login">
    <image class="login_bg" src="@/static/login_bg@2x.png" mode="widthFix" />
    <image class="login_logo" src="@/static/logo@2x.png" mode="widthFix" />
    <view class="login_title">安泰物流智慧园区</view>
    <view class="login_title">物流车司机登录</view>
    <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="手机号" />
      </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="密码"
        />
      </view>
    </view>
    <view class="login_btn">
      <view class="login_btn_n" @click="onLogin">立即登录</view>
    </view>
    <!--  -->
      <view class="btns" v-if="!showKeyboard">
         <view class="btn" @click="handleRegister">立即注册</view>
         <view class="btn separate"> | </view>
         <view class="btn" @click="handleSetPsd">忘记密码</view>
      </view>
  </view>
</template>

<script>
import { driverLogin, loginCaptcha, getUserInfo } from '@/api'
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      form: {
            username: '',
            password: ''
      },
      isShowProtocol: false,
         showKeyboard: false,
      countDown: 0
    }
  },
  onLoad() {
      this.initCaptcha()
  },
	
  methods: {
      ...mapMutations(["setToken", "setDriverInfo"]),
      handleRegister() {
         uni.navigateTo({
            url: "/pages/driver/register"
         })
      },
      handleSetPsd() {
         uni.navigateTo({
            url: "/pages/driver/forgetPsd?phone=" + this.form.username
         })
      },
    dealChange(e) {
      console.log(e)
    },
    initCaptcha() {
      loginCaptcha().then(res => {
        this.captcha = res.data
      })
    },

    onLogin() {
      const { form } = this
      if (!form.username) return uni.showToast({
        title: '手机号不能为空',
        icon: 'none'
      })
      if (!form.password) return uni.showToast({
        title: '密码不能为空',
        icon: 'none'
      })
      driverLogin({
        ...form,
            uuid: this.captcha.uuid,
            openid: this.$store.state.openId,
            code: '1'
      }).then(res => {
        if (res.code === 200) {
          this.setToken(res.data)
          getUserInfo().then(ress => {
                  setTimeout(() => {
                     this.showToast('登录成功')
                  })
            this.setDriverInfo(ress.data)
            uni.redirectTo({
              url: "/pages/driver/index"
            })
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  display: flex;
  padding-top: 100rpx;
  box-sizing: border-box;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(
    180deg,
    rgba(39, 155, 170, 0.2) 0%,
    rgba(39, 155, 170, 0) 100%
  );
  .login_logo {
    width: 180rpx;
    height: 180rpx;
      margin-bottom: 40rpx;
  }
  .login_bg {
     position: absolute;
     top: 0;
     left: 0;
     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;
      height: 98rpx;
      padding: 0 40rpx;
      box-sizing: border-box;
      background: #ffffff;
      margin-bottom: 40rpx;
      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%;
        color: #666666;
        margin-left: 24rpx;
        border: none;
      }
    }
  }
  .login_btn {
    width: 100%;
    padding: 0 60rpx;
    box-sizing: border-box;
    margin-top: 80rpx;
    .for_psd {
      color: $uni-color-primary;
      margin-top: 40rpx;
      width: 140rpx;
      text-align: center;
      margin: 40rpx auto;
    }
    .login_btn_n {
      width: 100%;
      height: 98rpx;
      background: $uni-color-primary;
      box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(39, 155, 170, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 32rpx;
      color: #ffffff;
      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;
      justify-content: center;
      position: fixed;
      bottom: 60rpx;
      left: 0;
      width: 100%;
      .btn{
         font-size: 30rpx;
         color: $uni-color-primary;
      }
      .separate{ margin: 0 8rpx; }
   }
}
.modal {
  padding: 32rpx;
}
</style>
<template>

   <view class="login">

      <image class="login_bg" src="@/static/login_bg@2x.png" mode="widthFix" />

      <image class="login_logo" src="@/static/logo@2x.png" mode="widthFix" />

      <view class="login_title">安泰物流智慧园区</view>

      <view class="login_title">物流车司机登录</view>

      <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="手机号" />

         </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="密码" />

         </view>

      </view>

      <view class="login_btn">

         <view class="login_btn_n" @click="onLogin">立即登录</view>

      </view>

      <!--  -->

      <view class="btns" v-if="!showKeyboard">

         <view class="btn" @click="handleRegister">立即注册</view>

         <view class="btn separate"> | </view>

         <view class="btn" @click="handleSetPsd">忘记密码</view>

      </view>

   </view>

</template>



<script>

   import {

      driverLogin,

      loginCaptcha,

      getUserInfo

   } from '@/api'

   import {

      mapState,

      mapMutations

   } from 'vuex'

   export default {

      data() {

         return {

            form: {

               username: '',

               password: ''

            },

            isShowProtocol: false,

            showKeyboard: false,

            countDown: 0,
				
            ywinfo: {}

         }

      },

      onLoad() {

         this.initCaptcha()

         const ywinfo = uni.getStorageSync('ywinfo') || {}

         if (ywinfo.ywid && ywinfo.type == 0) {
            this.ywinfo = ywinfo

            uni.setStorageSync('ywinfo', {})

         }

      },



      methods: {

         ...mapMutations(["setToken", "setDriverInfo"]),

         handleRegister() {

            uni.navigateTo({

               url: "/pages/driver/register"

            })

         },

         handleSetPsd() {

            uni.navigateTo({

               url: "/pages/driver/forgetPsd?phone=" + this.form.username

            })

         },

         dealChange(e) {

            console.log(e)

         },

         initCaptcha() {

            loginCaptcha().then(res => {

               this.captcha = res.data

            })

         },



         onLogin() {

            const {

               form

            } = this

            if (!form.username) return uni.showToast({

               title: '手机号不能为空',

               icon: 'none'

            })

            if (!form.password) return uni.showToast({

               title: '密码不能为空',

               icon: 'none'

            })

            driverLogin({

               ...form,

               uuid: this.captcha.uuid,

               openid: this.$store.state.openId,

               code: '1'

            }).then(res => {

               if (res.code === 200) {

                  this.setToken(res.data)

                  getUserInfo().then(ress => {

                     setTimeout(() => {

                        this.showToast('登录成功')

                     })
                     uni.setStorageSync('ywinfo', this.ywinfo)

                     this.setDriverInfo(ress.data)

                     uni.redirectTo({

                        url: "/pages/driver/index"

                     })

                  })

               }

            })

         }

      }

   }

</script>



<style lang="scss" scoped>

   .login {

      width: 100%;

      display: flex;

      padding-top: 100rpx;

      box-sizing: border-box;

      align-items: center;

      flex-direction: column;

      background: linear-gradient(180deg,

            rgba(39, 155, 170, 0.2) 0%,

            rgba(39, 155, 170, 0) 100%);



      .login_logo {

         width: 180rpx;

         height: 180rpx;

         margin-bottom: 40rpx;

      }



      .login_bg {

         position: absolute;

         top: 0;

         left: 0;

         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;

            height: 98rpx;

            padding: 0 40rpx;

            box-sizing: border-box;

            background: #ffffff;

            margin-bottom: 40rpx;

            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%;

               color: #666666;

               margin-left: 24rpx;

               border: none;

            }

         }

      }



      .login_btn {

         width: 100%;

         padding: 0 60rpx;

         box-sizing: border-box;

         margin-top: 80rpx;



         .for_psd {

            color: $uni-color-primary;

            margin-top: 40rpx;

            width: 140rpx;

            text-align: center;

            margin: 40rpx auto;

         }



         .login_btn_n {

            width: 100%;

            height: 98rpx;

            background: $uni-color-primary;

            box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(39, 155, 170, 0.2);

            display: flex;

            align-items: center;

            justify-content: center;

            font-weight: 600;

            font-size: 32rpx;

            color: #ffffff;

            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;

         justify-content: center;

         position: fixed;

         bottom: 60rpx;

         left: 0;

         width: 100%;



         .btn {

            font-size: 30rpx;

            color: $uni-color-primary;

         }



         .separate {

            margin: 0 8rpx;

         }

      }

   }



   .modal {

      padding: 32rpx;

   }

</style>