beefCattle-uni/src/pages/phone/phone.vue

<route lang="json5" type="page">
{
  style: { navigationBarTitleText: '手机登录', navigationStyle: 'custom' },
}
</route>

<template>
  <view class="text-center px-5 pt-30">
    <view class="text-green-500">
      <wd-form ref="form" :model="model">
        <wd-cell-group border>
          <wd-input
            prop="phoneNumber"
            clearable
            size="large"
            v-model="model.phoneNumber"
            placeholder="请输入手机号"
            type="number"
            @change="rolePhone"
            :rules="[{ required: true, message: '请输入手机号' }]"
          />
          <view class="num-box">
            <wd-input
              prop="verificationCode"
              clearable
              size="large"
              type="number"
              v-model="model.verificationCode"
              placeholder="请输验证码"
              :rules="[{ required: true, message: '请输验证码' }]"
            />
            <view class="codeBtn">
              <wd-button type="primary" @click="sendCode" :disabled="model.isClick">
                获取验证码
              </wd-button>
            </view>
          </view>
        </wd-cell-group>
        <view class="footer mt-10">
          <wd-button
            type="primary"
            size="large"
            @click="handleSubmit"
            :disabled="model.isClick"
            block
          >
            提交
          </wd-button>
        </view>
        <view class="mt-5">
          <wd-radio-group
            :modelValue="model.isChecked"
            inline
            checked-color="#eea441"
            @change="setChecked"
          >
            <wd-radio :value="true" shape="dot" inline class="title">
              我已认真阅读并同意《服务协议》、《隐私政策》
            </wd-radio>
          </wd-radio-group>
        </view>
      </wd-form>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMessage } from 'wot-design-uni'
import { reactive, ref } from 'vue'

const message = useMessage()
const model = reactive<{
  phoneNumber: string
  verificationCode: string
  isClick: boolean
  isChecked: boolean
}>({
  phoneNumber: '',
  verificationCode: '',
  isClick: true,
  isChecked: false,
})

const form = ref()

// 短信获取验证码
const sendCode = () => {
  // 接口请求
}

// 校验手机号正确咋显示按钮
const rolePhone = (tel) => {
  // console.log(tel, '手机号')
  const reg = /^[1][3,4,5,7,8][0-9]{9}$/

  if (reg.test(tel.value)) {
    console.log(model.isClick, '手机号')
    model.isClick = false
  } else {
    model.isClick = true
  }
  console.log(model, 'isClick')
}
// 提交验证码
const handleSubmit = () => {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        uni.setStorageSync('userToken', 123) // 存储用户信息
        message.show('登录成功')
      } else {
        message.show('登录失败')
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}

// 勾选同意
const setChecked = (val) => {
  if (model.isChecked) {
    model.isChecked = false
  } else {
    model.isChecked = true
  }
}
</script>

<style lang="scss" scoped>
//
.footer {
  padding: 24rpx;
}
.num-box {
  position: relative;
}
.codeBtn {
  position: absolute !important;
  top: 22rpx;
  right: 10rpx;
}

::v-deep .title > .wd-radio__label {
  font-size: 20rpx !important;
}
</style>