doum
2026-06-18 93de43267e1663031fe5dc2f5ae40d128a182a76
h5/pages/login.vue
@@ -1,313 +1,138 @@
<template>
   <view class="login">
      <view class="login_title">欢迎登录</view>
      <view class="login_title login_title2">阜宁文体中心</view>
      <view v-if="devMockTip" class="dev-tip">{{ devMockTip }}</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>
  <view class="cu-login">
    <view class="cu-auth-topbar">
      <view class="cu-auth-topbar__btn" @click="goRoleSelect">
        <u-icon name="reload" color="#2080f7" size="22" />
      </view>
    </view>
    <view class="cu-login__brand">
      <view class="cu-login__title">欢迎登录</view>
      <view class="cu-login__sub">阜宁文体中心 · 运维服务平台</view>
    </view>
    <view v-if="devMockTip" class="cu-login__tip">{{ devMockTip }}</view>
    <view class="cu-input-wrap">
      <input v-model="form.phone" maxlength="18" placeholder="请输入手机号" />
    </view>
    <view class="cu-input-wrap">
      <input v-model="form.code" placeholder="请输入验证码" />
      <view v-if="downTime == 0" class="cu-sms-btn" @click="sendSms">获取验证码</view>
      <view v-else class="cu-sms-btn cu-sms-btn--disabled">{{ downTime }}s</view>
    </view>
    <view class="cu-btn cu-btn--primary" @click="onLogin">登录</view>
  </view>
</template>
<script>
   import {
      loginPost,
      getUserInfo,
      sendSMsPost,
      ywWxAuthorize,
import {
  loginPost,
  getUserInfo,
  sendSMsPost,
  ywWxAuthorize,
  getRecordByUserPoint
} from '@/api'
import { devWechatMock } from '@/utils/config.js'
import { runWechatOAuthFlow } from '@/utils/wechatAuth.js'
import { requestLoginSmsCode } from '@/utils/loginSms.js'
import { mapMutations } from 'vuex'
      getRecordByUserPoint
   } from '@/api'
   import { devWechatMock } from '@/utils/config.js'
   import { runWechatOAuthFlow } from '@/utils/wechatAuth.js'
   import { requestLoginSmsCode } from '@/utils/loginSms.js'
   import {
      mapState,
      mapMutations
   } from 'vuex'
   export default {
      name: 'login',
export default {
  name: 'login',
  data () {
    return {
      form: { phone: '', code: '' },
      ywinfo: {},
      downTime: 0,
      code: '',
      devMockTip: devWechatMock.enabled ? `开发模式:模拟 openid ${devWechatMock.openId}` : ''
    }
  },
  onLoad (option) {
    uni.setStorageSync('userType', 0)
    const ywinfo = uni.getStorageSync('ywinfo') || {}
    if (ywinfo.ywid && (ywinfo.type || ywinfo.type == 0)) {
      this.ywinfo = ywinfo
      uni.setStorageSync('ywinfo', {})
    }
    if (option.ywid || option.ywid == 0) {
      uni.setStorageSync('ywinfo', {
        type: option.type,
        ywid: option.ywid
      })
    }
  },
  onShow () {
    const that = this
    runWechatOAuthFlow({
      authorizeApi: ywWxAuthorize,
      fallbackCode: this.code,
      onSuccess: (res) => {
        if (res.data.openid) {
          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)
          })
          const ywinfo = this.ywinfo
          if (ywinfo.ywid && (ywinfo.type || ywinfo.type == 0)) {
            getRecordByUserPoint({ pointCode: ywinfo.ywid }).then(res => {
              if (res.data && res.data.id) {
                uni.redirectTo({ url: '/pages/polling/point?id=' + res.data.id })
              } else {
                uni.redirectTo({ url: '/pages/polling/empty?message=' + res.message })
              }
            })
          } else {
            setTimeout(() => {
              uni.redirectTo({ url: '/pages/index' })
            }, 300)
          }
        }
      }
    })
  },
  methods: {
    ...mapMutations(['setToken', 'setUserInfo']),
    goRoleSelect () {
      uni.redirectTo({ url: '/pages/roleSelect?switch=1' })
    },
    onLogin () {
      const { form } = this
      if (!form.phone) return uni.showToast({ title: '手机号不能为空', icon: 'none' })
      if (!form.code) return uni.showToast({ title: '验证码不能为空', icon: 'none' })
      data() {
         return {
            form: {
               phone: '',
               code: ''
            },
            ywinfo: {},
            downTime: 0,
            code: '',
            devMockTip: devWechatMock.enabled ? `开发模式:模拟 openid ${devWechatMock.openId}` : ''
         }
      },
      onLoad(option) {
         console.log('onLoad');
         // https://zhcg.fnwtzx.com/#/pages/login?type=0&ywid=ywid
         const ywinfo = uni.getStorageSync('ywinfo') || {}
         if (ywinfo.ywid && (ywinfo.type || ywinfo.type == 0)) {
            this.ywinfo = ywinfo
            uni.setStorageSync('ywinfo', {})
         }
         if (option.ywid || option.ywid == 0) {
            uni.setStorageSync('ywinfo', {
               type: option.type,
               ywid: option.ywid
            })
         }
      },
      onShow() {
         const that = this
         runWechatOAuthFlow({
            authorizeApi: ywWxAuthorize,
            fallbackCode: this.code,
            onSuccess: (res) => {
               if (res.data.openid) {
                  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)
                  })
                  const ywinfo = this.ywinfo
                  if (ywinfo.ywid && (ywinfo.type || ywinfo.type == 0)) {
                     getRecordByUserPoint({
                        pointCode: ywinfo.ywid
                     }).then(res => {
                        if (res.data && res.data.id) {
                           uni.redirectTo({
                              url: "/pages/polling/point?id=" + res.data.id
                           })
                        } else {
                           uni.redirectTo({
                              url: "/pages/polling/empty?message=" + res.message
                           })
                        }
                     })
                  } else {
                     setTimeout(() => {
                        uni.redirectTo({
                           url: "/pages/index"
                        })
                     }, 300)
                  }
               }
            }
         })
      },
      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)
                     const ywinfo = this.ywinfo
                     if (ywinfo.ywid && (ywinfo.type || ywinfo.type == 0)) {
                        // getRecordByUserPoint({pointCode: ywinfo.ywid}).then(res => {
                        getRecordByUserPoint({
                           pointCode: ywinfo.ywid
                        }).then(res => {
                           if (res.data && res.data.id) {
                              uni.redirectTo({
                                 url: "/pages/polling/point?id=" + res.data.id
                              })
                           } else {
                              uni.redirectTo({
                                 url: "/pages/polling/empty?message=" + res.message
                              })
                           }
                        })
                        // })
                     } else {
                        uni.redirectTo({
                           url: "/pages/index"
                        })
                     }
                  })
               }
            })
         },
         sendSms() {
            requestLoginSmsCode(this, this.form.phone, sendSMsPost, { phone: this.form.phone, userType: 0 })
         },
      }
   }
      loginPost({
        ...form,
        openid: this.$store.state.openId
      }).then(res => {
        if (res.code === 200) {
          this.setToken(res.data)
          getUserInfo().then(ress => {
            this.setUserInfo(ress.data)
            const ywinfo = this.ywinfo
            if (ywinfo.ywid && (ywinfo.type || ywinfo.type == 0)) {
              getRecordByUserPoint({ pointCode: ywinfo.ywid }).then(res => {
                if (res.data && res.data.id) {
                  uni.redirectTo({ url: '/pages/polling/point?id=' + res.data.id })
                } else {
                  uni.redirectTo({ url: '/pages/polling/empty?message=' + res.message })
                }
              })
            } else {
              uni.redirectTo({ url: '/pages/index' })
            }
          })
        }
      })
    },
    sendSms () {
      requestLoginSmsCode(this, this.form.phone, sendSMsPost, { phone: this.form.phone, userType: 0 })
    }
  }
}
</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: 40rpx;
      }
      .dev-tip {
         width: 100%;
         padding: 0 60rpx;
         box-sizing: border-box;
         font-size: 24rpx;
         color: #e6a23c;
         margin-bottom: 40rpx;
         line-height: 1.5;
      }
      .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>