ll

liukangdong

2024-12-09 9ce28811e94fa042adb7cabe6581b0393c6d576d

 h5/pages/login.vue

@@ -1,213 +1,283 @@
<template>
  <view class="login">
    <view class="login_title">欢迎登录</view>
    <view class="login_title login_title2">阜宁文体中心</view>
    <view class="login_list">
      <view class="login_list_item">
        <image src="@/static/login_ic_phone@2x.png" mode="widthFix" />
        <input v-model="form.phone" maxlength="18" 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 class="login_list_item">
        <image src="@/static/login_ic_password@2x.png" mode="widthFix"></image>
        <input v-model="form.code" placeholder="请输入验证码" type="text" />
        <view v-if="downTime == 0" class="btn" @click="sendSms">获取验证码</view>
        <view v-else class="btn gray">{{ downTime }}</view>
      </view>
    </view>
    <view class="login_btn">
      <view class="login_btn_n" @click="onLogin">登录</view>
    </view>
  </view>
</template>

<script>
import { loginPost, getUserInfo, sendSMsPost } from '@/api'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'login',

  data() {
    return {
      form: {
            phone: '18888888888',
            code: '1'
      },
         downTime: 0
    }
  },

  onLoad() {
  },
  onBackPress(options) {
    uni.redirectTo({
      url: '/pages/login/login'
    })
    return true
  },
  methods: {
    ...mapMutations(["setToken", "setUserInfo"]),
      sendSms() {
         this.downTime = 60
         let timer = setInterval(() => {
            if(this.downTime == 0) return clearInterval(timer)
            this.downTime = this.downTime - 1
         }, 1000)
         const { form } = this
         sendSMsPost({
            phone: form.phone,
            type: 0
         }).then(res => {
            this.showToast('短信发送成功')
         })
      },
    onLogin() {
      const { form, ProtocolFlag } = this
      // if (!ProtocolFlag) return uni.showToast({
      //   title: '请先阅读并同意用户协议',
      //   icon: 'none'
      // })
      if (!form.phone) return uni.showToast({
        title: '手机号不能为空',
        icon: 'none'
      })
      if (!form.code) return uni.showToast({
        title: '验证码不能为空',
        icon: 'none'
      })
      loginPost({
        ...form,
        openId: this.$store.state.openId
      }).then(res => {
        if (res.code === 200) {
          this.setToken(res.data)
               this.showToast('登录成功')
          getUserInfo().then(ress => {
            this.setUserInfo(ress.data)
            uni.redirectTo({
              url: "/pages/index"
            })
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  display: flex;
  padding-top: 130rpx;
  box-sizing: border-box;
  align-items: center;
  flex-direction: column;
  background: linear-gradient( 180deg, #C5DDFF 0%, #FFFFFF 100%);
  .login_title {
    font-weight: 500;
    font-size: 52rpx;
    color: #222222;
    margin-top: 180rpx;
      width: 100%;
      padding-left: 60rpx;
  }
   .login_title2{
      margin-top: 10rpx;
      margin-bottom: 80rpx;
   }
  .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;
      }
      .btn{
         width: 145rpx;
         color:  $primaryColor;
            text-align: center;
      }
         .gray{
            color: #999999;
         }
      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: 60rpx;
    .for_psd {
      color: $uni-color-primary;
      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;
      color: #ffffff;
      border-radius: 50rpx;
         font-weight: 500;
         font-size: 32rpx;
    }
  }
  .deal_wrap {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    bottom: 88rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .deal {
      color: $uni-color-primary;
    }
    .checked {
      width: 48rpx;
      margin-right: 12rpx;
    }
  }
}
.modal {
  width: 690rpx;
  min-height: 920rpx;
  max-height: 720px;
  border-radius: 24rpx;
  padding: 32rpx;
}
</style>
<template>

   <view class="login">

      <view class="login_title">欢迎登录</view>

      <view class="login_title login_title2">阜宁文体中心</view>

      <view class="login_list">

         <view class="login_list_item">

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

            <input v-model="form.phone" maxlength="18" 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 class="login_list_item">

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

            <input v-model="form.code" placeholder="请输入验证码" type="text" />

            <view v-if="downTime == 0" class="btn" @click="sendSms">获取验证码</view>

            <view v-else class="btn gray">{{ downTime }}</view>

         </view>

      </view>

      <view class="login_btn">

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

      </view>

   </view>

</template>



<script>

   import {

      loginPost,

      getUserInfo,

      sendSMsPost,

      ywWxAuthorize

   } from '@/api'

   import {

      mapState,

      mapMutations

   } from 'vuex'

   export default {

      name: 'login',



      data() {

         return {

            form: {

               phone: '',

               code: ''

            },

            downTime: 0,

            // code: '011dfEkl2PzcFe4ZxSnl22NKXz4dfEkQ'
            code: ''

         }

      },



      onShow() {

         // return

         var that = this

         let url = window.location.href

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

            let 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)

               }

            }

            ywWxAuthorize({

               code: code || this.code

            }).then(res => {

               if (res.code === 200) {

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

                  if (res.data.token && res.data.token != '') {
                     that.$store.commit('setToken', res.data.token)

                     getUserInfo().then(ress => {

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

                     })

                     setTimeout(() => {

                        uni.redirectTo({

                           url: "/pages/index"

                        })

                     }, 300)

                  }

               }

            })

         } else {

            let url = 'https://zhcg.fnwtzx.com/yunwei_h5'

            const appID = 'wx95ac1efb67f0330d'

            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

         }



      },

      // onBackPress(options) {

      //    uni.redirectTo({

      //       url: '/pages/login/login'

      //    })

      //    return true

      // },

      methods: {

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

         onLogin() {

            const {

               form,

               ProtocolFlag

            } = this

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

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

               icon: 'none'

            })

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

               title: '验证码不能为空',

               icon: 'none'

            })



            loginPost({

               ...form,

               openid: this.$store.state.openId

            }).then(res => {

               if (res.code === 200) {

                  this.setToken(res.data)

                  this.showToast('登录成功')

                  getUserInfo().then(ress => {

                     this.setUserInfo(ress.data)

                     uni.redirectTo({

                        url: "/pages/index"

                     })

                  })

               }

            })







         },

         sendSms() {

            this.downTime = 60

            let timer = setInterval(() => {

               if (this.downTime == 0) return clearInterval(timer)

               this.downTime = this.downTime - 1

            }, 1000)

            const {

               form

            } = this

            sendSMsPost({

               phone: form.phone,

               type: 0

            }).then(res => {

               this.showToast('短信发送成功')

            })

         },

      }

   }

</script>



<style lang="scss" scoped>

   .login {

      width: 100%;

      height: 100vh;

      display: flex;

      padding-top: 130rpx;

      box-sizing: border-box;

      align-items: center;

      flex-direction: column;

      background: linear-gradient(180deg, #C5DDFF 0%, #FFFFFF 100%);



      .login_title {

         font-weight: 500;

         font-size: 52rpx;

         color: #222222;

         margin-top: 180rpx;

         width: 100%;

         padding-left: 60rpx;

      }



      .login_title2 {

         margin-top: 10rpx;

         margin-bottom: 80rpx;

      }



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

            }



            .btn {

               width: 145rpx;

               color: $primaryColor;

               text-align: center;

            }



            .gray {

               color: #999999;

            }



            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: 60rpx;



         .for_psd {

            color: $uni-color-primary;

            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;

            color: #ffffff;

            border-radius: 50rpx;

            font-weight: 500;

            font-size: 32rpx;

         }

      }



      .deal_wrap {

         position: absolute;

         width: 100%;

         left: 0;

         text-align: center;

         bottom: 88rpx;

         display: flex;

         justify-content: center;

         align-items: center;



         .deal {

            color: $uni-color-primary;

         }



         .checked {

            width: 48rpx;

            margin-right: 12rpx;

         }

      }

   }



   .modal {

      width: 690rpx;

      min-height: 920rpx;

      max-height: 720px;

      border-radius: 24rpx;

      padding: 32rpx;

   }

</style>