ll

liukangdong

2024-12-10 a8c03746e6bd8ac1d46dc48c1b10bceff543664f

 h5/pages/login/login.vue

@@ -1,150 +1,207 @@
<template>
  <view class="login">
      <image class="login_bg" src="@/static/login_bg@2x.png" />
    <image class="login_logo" src="@/static/logo@2x.png" mode="widthFix" />
    <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.idCard" maxlength="18" type="number" placeholder="账号">
      </view>
      <view class="login_list_item">
        <image src="@/static/login_ic_password@2x.png" mode="widthFix" />
        <input v-model="form.password" type="password" placeholder="密码">
      </view>
    </view>
    <view class="login_btn">
      <view class="login_btn_n">立即登录</view>
         <view class="for_psd">忘记密码</view>
    </view>

      <view class="deal_wrap">
         <checkbox @change="dealChange" />
         <text>登录即同意</text>
         <text class="deal">《安泰物流用户协议》</text>
      </view>
  </view>
</template>

<script>
export default {
  name: 'login',

  data () {
    return {
      form: {
        idCard: '',
        password: ''
      }
    }
  },

  created () {
      console.log('---');
  },

  methods: {
      dealChange(e) {
         console.log(e);
      }
  }
}
</script>

<style lang="scss" scoped>
   .login {
      width: 100%;
      height: 100vh;
      display: flex;
      padding-top: 160rpx;
      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;
      }
      .login_bg{
         position: absolute;
         top: 0;
         width: 750rpx;
      }
      .login_title {
         font-size: 44rpx;
         font-weight: 600;
         color: #333333;
         margin-top: 40rpx;
         margin-bottom: 120rpx;
      }
      .login_list {
         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;
            }
            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: #279BAA;
            margin-top: 40rpx;
            width: 140rpx;
            text-align: center;
            margin: 40rpx auto;
         }
         .login_btn_n {
            width: 100%;
            height: 98rpx;
            background: #279BAA;
            box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(39,155,170,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 32rpx;
            color: #FFFFFF;
            border-radius: 50rpx;
         }
      }
      .deal_wrap{
         position: absolute;
         width: 100%;
         left: 0;
         text-align: center;
         bottom: 108rpx;
         .deal{
            color: #279BAA;
         }
			
      }
  }
</style>
<template>

   <view class="main_app">

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

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

      <view class="placeholder6 place">请选择您的身份</view>

      <view class="item" @click="userAuth(1)">

         <image class="avatar" src="@/static/ic_visitor@2x.png" />

         <view class="content">

            <view class="name">我是访客</view>

            <view class="placeholder6">VISITOR</view>

         </view>

         <u-icon name="arrow-right" size="24" color="#979797" />

      </view>

      <view class="item" @click="userAuth(2)">

         <image class="avatar" src="@/static/ic_staff@2x.png" />

         <view class="content">

            <view class="name">我是员工</view>

            <view class="placeholder6">STAFF</view>

         </view>

         <u-icon name="arrow-right" size="24" color="#979797" />

      </view>

      <view class="item" @click="userAuth(0)">

         <image class="avatar" src="@/static/ic_driver@2x.png" />

         <view class="content">

            <view class="name">我是物流车司机</view>

            <view class="placeholder6">DRIVER</view>

         </view>

         <u-icon name="arrow-right" size="24" color="#979797" />

      </view>

   </view>

</template>



<script>

   import {

      wxAuthorizea,

      getUserInfo

   } from '@/api'

   import {

      baseUrl

   } from "@/utils/config.js"

   export default {

      data() {

         return {

            code: ''

         }

      },

      onShow() {

         var that = this

         let url = 'https://atwl.ahzyssl.com/zhyq_h5/#/'

         let code = ''

         if (window.location.href.indexOf('code=') !== -1 || this.code) {



         } else {

            // let url = window.location.href

            const appID = 'wx173e6caf5abc718a'

            let uri = encodeURIComponent(url)

            let authURL =

               `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appID}&redirect_uri=${uri}&response_type=code&scope=snsapi_base#wechat_redirect`

            window.location.href = authURL

         }



      },

      methods: {

         jump(url) {

            console.log(url)

            uni.navigateTo({

               url

            })

         },

         driverLogin(flag) {

            // const driverInfo = uni.getStorageSync('driverInfo') || {}

            if (flag) {

               uni.navigateTo({

                  url: '/pages/driver/index'

               })

            } else {

               uni.navigateTo({

                  url: '/pages/driver/login'

               })

            }

         },

         staffLogin(flag) {

            // const userInfo = uni.getStorageSync('userInfo') || {}

            if (flag) {

               uni.navigateTo({

                  url: '/pages/staff/index'

               })

            } else {

               uni.navigateTo({

                  url: '/pages/staffLogin/login'

               })

            }

         },

         // source   来源:0=司机；1=访客；2=内部员工

         userAuth(source) {

            var that = this

            let url = window.location.href

            let code = ''

            if (url.indexOf('code=') !== -1 || this.code) {

               const query = url.split('?')

               for (const q of query) {

                  if (q.indexOf('code=') !== -1) {

                     let statusIndex = q.indexOf('&state')

                     code = q.substring(q.indexOf('code=') + 5, statusIndex)

                  }

               }

               wxAuthorizea({

                  code: code || this.code,

                  source: source

               }).then(res => {

                  if (res.code === 200) {

                     that.$store.commit('setOpenId', res.data.openid)

                     if (res.data.member) {

                        that.$store.commit('setMember', res.data.member)

                     }

                     let flag = res.data.member && res.data.member.id

                     setTimeout(() => {

                        if (source == 0) {

                           if (res.data.token) {

                              that.$store.commit('setToken', res.data.token)

                              getUserInfo().then(ress => {

                                 that.$store.commit('setDriverInfo', ress.data)

                              })

                           }

                           this.driverLogin(flag)

                        } else if (source == 2) {

                           if (res.data.token) {

                              that.$store.commit('setToken', res.data.token)

                              getUserInfo().then(ress => {

                                 that.$store.commit('setUserInfo', ress.data)

                              })

                           }

                           this.staffLogin(flag)

                        } else {

                           this.jump('/pages/index/index')

                        }

                     }, 300)

                  }

               })

            }

         }

      }

   }

</script>



<style lang="scss">

   .main_app {

      width: 100vw;

      box-sizing: border-box;

      overflow: hidden;

      margin: 0;

      height: 100vh;

      padding-top: 80rpx;

      background: linear-gradient(180deg,

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

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



      .login_bg {

         position: absolute;

         top: 0;

         left: 0;

         width: 100%;

         z-index: -1;

      }



      .h1 {

         font-weight: 600;

         font-size: 48rpx;

         color: #222222;

         line-height: 66rpx;

         margin-bottom: 16rpx;

      }



      .place {

         margin-bottom: 98rpx;

      }



      .item {

         width: 690rpx;

         height: 200rpx;

         background: #ffffff;

         border-radius: 8rpx;

         display: flex;

         align-items: center;

         padding: 40rpx;

         font-size: 26rpx;

         margin-bottom: 40rpx;



         .avatar {

            width: 120rpx;

            height: 120rpx;

            margin-right: 30rpx;

         }



         .content {

            flex: 1;



            .name {

               font-weight: 600;

               font-size: 38rpx;

               color: #222222;

               margin-bottom: 20rpx;

            }

         }

      }

   }

</style>