ll

liukangdong

2025-01-23 904436a616ca08fc95e1cbbbd13059835ef37e72

 h5/pages/waybill/home.vue

@@ -1,201 +1,217 @@
<template>
   <view class="main_app">
      <image class="bg" src="@/static/wuliuche_bg@2x.png" mode="widthFix"></image>
      <view class="login_wrap">
         <view class="item">
            <view class="la">手机号</view>
           <input v-model="form.phone" type="tel" maxlength="18" placeholder-class="placeholder9" placeholder="请输入手机号" />
         </view>
         <view class="item">
            <view class="la">验证码</view>
           <view class="df_sb">
              <input
                v-model="form.code"
                placeholder="请输入验证码"
                 placeholder-class="placeholder9"
                  :maxlength="6"
                type="number"
              />
              <text class="captcha" v-if="countDown == 0" @click="initCaptcha"
                >获取验证码</text
              >
              <text class="placeholder9" v-else>{{ countDown }}</text>
           </view>
         </view>
         <view class="login_btn" @click="onSubmit">
            <view class="login_btn_n">查询</view>
         </view>
      </view>
   </view>
</template>

<script>
   import { sendSms, loginGkUserWithCode, wxAuthorizea, getUserInfo } from '@/api'
   export default {
      data() {
         return {
            form: {
               code: '',
               phone: ''
            },
            countDown: 0,
				
            code: ''
         };
      },
      onShow() {
         var that = this
         let url = 'https://atwl.ahzyssl.com/zhyq_h5/#/pages/waybill/home'
         let code = ''
         if (window.location.href.indexOf('code=') !== -1 || this.code) {
            this.userAuth(3)
         } 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: {
         onSubmit() {
            const { code, phone } = this.form
            if (!phone) return this.showToast('手机号不能为空')
            if (!code) return this.showToast('验证码不能为空')
            loginGkUserWithCode({
              phone, code,openid: this.$store.state.openId, userType: 3
            }).then(res => {
              if (res && res.code == 200) {
                  this.$store.commit('setToken', res.data)
                  getUserInfo().then(ress => {
                     this.$store.commit('setWaybillInfo', ress.data)
                     uni.navigateTo({
                        url: '/pages/waybill/list'
                     })
                  })
              }
            })
         },
         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.token) {
                        that.$store.commit('setToken', res.data.token)
                        getUserInfo().then(ress => {
                           that.$store.commit('setWaybillInfo', ress.data)
                           uni.navigateTo({
                              url: '/pages/waybill/list'
                           })
                        })
                     }
                  }
               })
            }
         },
         initCaptcha() {
           if (!this.form.phone) return uni.showToast({
             title: '手机号不能为空',
             icon: 'none'
           })
           sendSms({ phone: this.form.phone }).then(res => {
             this.countDown = 60
             setInterval(() => {
               if (this.countDown == 0) return
               this.countDown--
             }, 1000)
           })
         },
      }
   }
</script>

<style lang="scss">
.main_app{
   padding-top: 218rpx;
   .bg{
      width: 750rpx;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
   }
   .login_wrap {
     width: 690rpx;
     height: 490rpx;
     background: #FFFFFF;
     box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(39,155,170,0.16);
     border-radius: 16rpx;
     padding: 40rpx 30rpx;
     box-sizing: border-box;
		
     .item {
       width: 100%;
       height: 126rpx;
         padding-right: 10rpx;
       box-sizing: border-box;
       margin-bottom: 30rpx;
         border-bottom: 1px solid #E5E5E5;
       &:last-child {
         margin-bottom: 0 !important;
       }
			
       .la{
            font-weight: 400;
            font-size: 28rpx;
            color: #222222;
         }
       .captcha {
         color: $uni-color-primary;
       }
         .df_sb{
            display: flex;
            justify-content: space-between;
            align-items: center;
         }
       input {
         flex: 1;
         height: 86rpx;
         color: #666666;
         // margin-left: 24rpx;
            display: flex;
            align-items: center;
         border: none;
       }
     }
   }
   .login_btn {
    width: 630rpx;
    height: 88rpx;
     box-sizing: border-box;
     margin-top: 40rpx;
     .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-size: 30rpx;
       color: #ffffff;
       border-radius: 50rpx;
     }
   }
}
</style>
<template>

   <view class="main_app">

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

      <view class="login_wrap">

         <view class="item">

            <view class="la">手机号</view>

            <input v-model="form.phone" type="tel" maxlength="18" placeholder-class="placeholder9" placeholder="请输入手机号" />

         </view>

         <view class="item">

            <view class="la">验证码</view>

            <view class="df_sb">

               <input v-model="form.code" placeholder="请输入验证码" placeholder-class="placeholder9" :maxlength="6"

                  type="number" />

               <text class="captcha" v-if="countDown == 0" @click="initCaptcha">获取验证码</text>

               <text class="placeholder9" v-else>{{ countDown }}</text>

            </view>

         </view>

         <view class="login_btn" @click="onSubmit">

            <view class="login_btn_n">查询</view>

         </view>

      </view>

   </view>

</template>



<script>

   import {

      sendSms,

      loginGkUserWithCode,

      wxAuthorizea,

      getUserInfo

   } from '@/api'

   export default {

      data() {

         return {

            form: {

               code: '',

               phone: ''

            },

            countDown: 0,



            code: '111'

         };

      },

      onShow() {

         var that = this

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

         let code = ''

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

            this.userAuth(3)

         } 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: {

         onSubmit() {

            const {

               code,

               phone

            } = this.form

            if (!phone) return this.showToast('手机号不能为空')

            if (!code) return this.showToast('验证码不能为空')

            loginGkUserWithCode({

               phone,

               code,

               openid: this.$store.state.openId,

               userType: 3

            }).then(res => {

               if (res && res.code == 200) {

                  this.$store.commit('setToken', res.data)

                  getUserInfo().then(ress => {

                     this.$store.commit('setWaybillInfo', ress.data)

                     uni.navigateTo({

                        url: '/pages/waybill/list'

                     })

                  })

               }

            })

         },

         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.token) {

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

                        getUserInfo().then(ress => {

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

                           uni.navigateTo({

                              url: '/pages/waybill/list'

                           })

                        })

                     }

                  }

               })

            }

         },

         initCaptcha() {

            if (!this.form.phone) return uni.showToast({

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

               icon: 'none'

            })

            sendSms({

               phone: this.form.phone

            }).then(res => {

               if (res.code === 200) {

                  this.countDown = 60

                  setInterval(() => {

                     if (this.countDown == 0) return

                     this.countDown--

                  }, 1000)

               }

            })

         },

      }

   }

</script>



<style lang="scss">

   .main_app {

      padding-top: 218rpx;



      .bg {

         width: 750rpx;

         position: absolute;

         left: 0;

         top: 0;

         z-index: -1;

      }



      .login_wrap {

         width: 690rpx;

         height: 490rpx;

         background: #FFFFFF;

         box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(39, 155, 170, 0.16);

         border-radius: 16rpx;

         padding: 40rpx 30rpx;

         box-sizing: border-box;



         .item {

            width: 100%;

            height: 126rpx;

            padding-right: 10rpx;

            box-sizing: border-box;

            margin-bottom: 30rpx;

            border-bottom: 1px solid #E5E5E5;



            &:last-child {

               margin-bottom: 0 !important;

            }



            .la {

               font-weight: 400;

               font-size: 28rpx;

               color: #222222;

            }



            .captcha {

               color: $uni-color-primary;

            }



            .df_sb {

               display: flex;

               justify-content: space-between;

               align-items: center;

            }



            input {

               flex: 1;

               height: 86rpx;

               color: #666666;

               // margin-left: 24rpx;

               display: flex;

               align-items: center;

               border: none;

            }

         }

      }



      .login_btn {

         width: 630rpx;

         height: 88rpx;

         box-sizing: border-box;

         margin-top: 40rpx;



         .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-size: 30rpx;

            color: #ffffff;

            border-radius: 50rpx;

         }

      }

   }

</style>