menduner-uniapp/pages/login/index.vue

<template>
  <view class="ss-p-30 head-box">
    <view class="head-title">欢迎来到门墩儿，新用户注册领积分</view>
    <view class="head-subtitle ss-m-t-30 justify-center">未注册的手机号，验证后自动注册账号</view>

    <view class="ss-m-t-60">
      <!-- 短信验证码登录 -->
      <uni-forms
        ref="smsLoginRef"
        v-model="state.sms"
        :rules="state.smsRules"
        validateTrigger="bind"
        labelWidth="140"
        labelAlign="center"
      >
        <uni-forms-item name="phone" label="手机号">
          <uni-easyinput placeholder="请输入手机号" v-model="state.sms.phone" :inputBorder="false" type="number">
            <template v-slot:right>
              <button class="login-code" :disabled="state.isMobileEnd" :class="{ 'code-btn-end': state.isMobileEnd }" @tap="handleCode">
                {{ getSmsTimer('smsLogin') }}
              </button>
            </template>
          </uni-easyinput>
        </uni-forms-item>

        <uni-forms-item name="code" label="验证码">
          <uni-easyinput placeholder="请输入验证码" v-model="state.sms.code" :inputBorder="false" type="number" maxlength="6"></uni-easyinput>
        </uni-forms-item>
      </uni-forms>

      <button class="send-button" @tap="handleLogin"> 注册 </button>
      <view class="agreement-box ss-flex ss-row-center">
        <uni-icons size="20" :type="protocol ? 'checkbox-filled' : 'circle'" :color="protocol ? '#00B760' : '#ccc'" @tap="protocol = !protocol"></uni-icons>
        <view class="color-999 ss-flex ss-col-center ss-m-l-8 font-size-13">
          我已阅读并遵守
          <view class="color-primary" @tap.stop="handleToDetail('user')">
            《用户协议》
          </view>
          <view class="agreement-text">和</view>
          <view class="color-primary" @tap.stop="handleToDetail('privacy')">
            《隐私协议》
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 扫码登录注册
import { ref, unref } from 'vue'
import { mobile, code } from '@/utils/validate'
import { getSmsCode, getSmsTimer } from '@/utils/code'
import { userStore } from '@/store/user'
import { onLoad } from '@dcloudio/uni-app'
import { useIM } from '@/hooks/useIM'
import { watch } from 'vue'

const useUserStore = userStore()
const smsLoginRef = ref()
const protocol = ref(false)
const state = ref({
  isMobileEnd: false, // 手机号输入完毕
  codeText: '获取验证码',
  sms: {
    phone: '',
    code: '',
    inviteCode: ''
  },
  smsRules: {
    code,
    phone: mobile
  }
})

const { resetConfig } = useIM()
watch(() => useUserStore?.accountInfo?.userId, (newVal, oldVal) => {
  if (useUserStore.refreshToken) {
		// 监听登录状态
    resetConfig()
	}
})

onLoad((options) => {
  console.log(options, 'options-my-share=========')
	if (options.scene) {
    const scene = decodeURIComponent(options.scene)
    const shareUserId = scene.split('=')[1]
    state.value.sms.inviteCode = shareUserId
    console.log(shareUserId, 'shareUserId')
  }
})

// 获取验证码
const handleCode = () => {
  if (!state.value.sms.phone) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none',
      duration: 2000
    })
    return
  }
  getSmsCode('smsLogin', state.value.sms.phone)
}

// 查看协议详情
const handleToDetail = (type) => {
  const url = type === 'user' ? '/pagesB/agreement/user' : '/pagesB/agreement/privacy'
  uni.navigateTo({
    url
  })
}

// 登录
const handleLogin = async () => {
  if (!protocol.value) return uni.showToast({ title: '请先阅读并同意用户协议和隐私政策', icon: 'none' })
  const validate = await unref(smsLoginRef).validate()
  if (!validate) return
  if (!state.value.sms.inviteCode) {
    uni.showToast({
      title: '邀请码缺失，请重新扫码',
      icon: 'none'
    })
    return
  }
  const result = await useUserStore.handleShareUserRegister(state.value.sms)
  if (!result || !Object.keys(result).length) return
  uni.switchTab({
    url: '/pages/index/my'
  })
}
</script>

<style scoped lang="scss">
.login-code {
  width: 73px;
  min-width: 73px;
  color: #00B760;
  text-align: center; 
  font-size: 12px; 
  cursor: pointer;
  border: 1px dashed #00B760;
  border-radius: 26px;
  padding: 0;
}
.head-title {
  font-size: 40rpx;
  text-align: center;
  color: #00B760;
}
.wxLogon {
  text-align: center;
  font-size: .85em;
  color: #00B760;
  border: none;
  margin: 0;
  padding: 0;
  // margin: 40rpx;
  margin-top: -20px;
  margin-bottom: -15px;
}
</style>