<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    disableScroll: true
  }
}
</route>
<template>
  <view>
    <TopNavigation></TopNavigation>
    <view class="text-6 ml-4 pt-7 custom-color-black font-bold">请输入手机号</view>
    <view class="p-5">
      <wd-input
        v-model="phone"
        :maxlength="11"
        clearable
        placeholder="请输入手机号码"
        placeholderClass="text-4 custom-color-grey"
        size="large"
        type="number"
        @change="phoneChange"
      />
    </view>
  </view>
  <view class="p-5">
    <wd-button :block="true" :disabled="!phonePass" :round="false" size="large" @click="codeLogin">
      获取验证码
    </wd-button>
  </view>
</template>

<script setup lang="ts">
  import { phoneRegExp } from '@/constants/regular-expressions'

  const phone = ref<string>('')
  const phonePass = computed(() => phoneRegExp.test(phone.value))

  onLoad(options => {
    if (options.phone) {
      phone.value = options.phone
    }
  })

  const codeLogin = () => {
    if (!phonePass.value) {
      return
    }
    uni.navigateTo({
      url: `/pages/code/code?phone=${phone.value}&type=reset-password`
    })
  }

  const phoneChange = (value: string) => {
    phone.value = value
  }
</script>

<style scoped lang="scss"></style>
