chazhi_store/src/bundle/profile/change-password.vue

<route lang="jsonc" type="page">{
	"needLogin": true,
    "layout": "default",
    "style": {
        "navigationStyle": "custom"
    }
}</route>

<template>
    <view>
        <view class="mx-60rpx mt-20rpx">
            <view class="text-[#303133] text-48rpx leading-80rpx font-600">
                修改密码
            </view>
            <view class="font-400 text-28rpx leading-44rpx text-[#6B7280] mt-12rpx">需要验证绑定手机</view>
        </view>
        <view class="mt-106rpx mx-48rpx">
            <wd-form ref="form" :model="model">
                <view>
                    <view class="font-400 text-30rpx text-[#606266] leading-44rpx">手机号</view>
                    <view class="mt-20rpx">
                        <wd-input 
                            v-model="model.mobile" 
                            type="text" 
                            placeholder="请输入手机号码"
                            inputmode="numeric"
                            no-border 
                            custom-class="!bg-[#F6F7F8] !border !border-solid !border-[#EAECF0] !rounded-16rpx" 
                            custom-input-class="!px-32rpx !h-104rpx"
                            @input="Mobile.handleInputMobile"
                        />
                    </view>
                </view>

                <view class="mt-40rpx">
                    <view class="font-400 text-30rpx text-[#606266] leading-44rpx">验证码</view>
                    <view class="mt-20rpx">
                        <wd-input type="text" placeholder="请输入验证码" v-model="model.code" inputmode="numeric" no-border custom-class="!bg-[#F6F7F8] !border !border-solid !border-[#EAECF0] !rounded-16rpx" custom-input-class="!px-32rpx !h-104rpx">
                            <template #suffix> 
                                <view class="flex items-center mr-34rpx">
                                    <view class="flex items-center">
                                        <wd-divider color="#C9C9C9" vertical />
                                    </view>

                                    <view class="flex items-center">
                                        <view class="text-[#4C9F44] text-32rpx font-400 leading-44rpx" v-if="!startCountDown" @click="Mobile.handleCountDown">发送验证码</view>
                                        <view class="!text-[#C9C9C9] text-32rpx font-400 leading-44rpx flex items-center" v-if="startCountDown">
                                            <wd-count-down ref="countDown" :time="countDownTime" millisecond :auto-start="false" format="ss" custom-class="!text-[#C9C9C9] !text-32rpx" @finish="Mobile.handleFinishCountDown"></wd-count-down>
                                            <view> S后重发</view>
                                        </view>
                                    </view>
                                </view> 
                            </template>
                        </wd-input>
                    </view>
                </view>
            </wd-form>
        </view>

        <view class="h-90rpx leading-90rpx mx-60rpx rounded-8rpx text-center mt-112rpx bg-[#4C9F44] text-[#fff]" :class="disabled ? 'opacity-40' : ''" @click="Mobile.handleNext">下一步</view>
    </view>
</template>


<script lang="ts" setup>
    import { mobile as testMobile } from '@/utils/test'
    import { useToast  } from 'wot-design-uni'
    import { getVerificationCode } from '@/api/user'
    import { SMS_ENUM } from '@/enum/sms'
    import { router } from '@/utils/tools'

	const OSS = inject('OSS')
    const toast = useToast()
    const disabled = ref<boolean>(true)

	/** 页面 **/
    const page = ref<{title: string, desc: string}>({title: '其他手机号登录', desc: '请输入你要登录的手机号'})
    const showEditSuccessPopup = ref<boolean>(false) // 显示手机号修改成功弹窗

	/** 验证码倒计时 **/
    const countDownTime = ref<number>(1 * 60 * 1000)  // 60s倒计时
    const startCountDown = ref<boolean>(false) // 是否开始倒计时
    const countDown = ref<any>(null) // 倒计时组件

	/** 表单相关 **/
    const model = reactive<{
        mobile: string
        code: string
    }>({
        mobile: '',
        code: ''
    })

    onLoad((args) => {

    })

    const Mobile = {
        /**
         * 验证手机号码
         * @param e 手机号
         */
        handleInputMobile: (e: {value: string}) => {
            model.mobile = e.value
            disabled.value = !testMobile(model.mobile)
        },

        /**
         * 发送验证码
         */
        handleCountDown: async () => {
            if (disabled.value) {
                toast.show({
                    iconClass: 'info-circle',
                    msg: '手机号码错误请重新输入',
                    direction: 'vertical'
                })
                return
            }

            await getVerificationCode({ scene: SMS_ENUM.ZHDLMM, mobile: String(model.mobile)})

            startCountDown.value = true
            nextTick(() => {
                countDown.value?.start()

                // 发送验证码请求
            })
        },

        // 验证码倒计时结束
        handleFinishCountDown: () => {
            startCountDown.value = false
        },
        
        // 登录
        handleToLogin: () => {
            // TODO 如果是edit的话就是修改手机号
            if (!testMobile(model.mobile)) {
                toast.show({
                    iconClass: 'info-circle',
                    msg: '手机号码错误请重新输入',
                    direction: 'vertical'
                })
                return
            }

            if (!model.code) {
                toast.show({
                    iconClass: 'info-circle',
                    msg: '验证码错误',
                    direction: 'vertical'
                })
                return
            }
        },

        // 获取手机号
        handleGetPhoneNumber: (e: object) => {
            console.log("🚀 ~ e:", e)
        },

        /**
         * 下一步
         */
        handleNext: () => {
            if (disabled.value) {
                toast.show({
                    iconClass: 'info-circle',
                    msg: '手机号码错误请重新输入',
                    direction: 'vertical'
                })
                return
            }

            if (!model.code) {
                toast.show({
                    iconClass: 'info-circle',
                    msg: '请输入验证码',
                    direction: 'vertical'
                })
                return
            }

            router.navigateTo(`/bundle/profile/set-password?mobile=${model.mobile}&code=${model.code}`)
        },
    }
</script>

<style lang="scss">
    page {
        background-color: #fff;
    }

    .service {
        :deep() {
            .wd-checkbox {
                display: flex;
                align-content: flex-start;
            }

            .wd-checkbox__label {
                margin-left: 6rpx;
            }
        }
    }
</style>