chazhi_teaspecialist_manage/src/pages/login/set-password.vue

<route lang="jsonc" type="page">{
    "layout": "default",
    "style": {
        "navigationBarTitleText": "",
        "navigationBarBackgroundColor": "#fff"
    }
}</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.password" 
                            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"
                        />
                    </view>
                </view>

                <view class="mt-40rpx">
                    <view class="font-400 text-30rpx text-[#606266] leading-44rpx">再次确认</view>
                    <view class="mt-20rpx">
                        <wd-input 
                            v-model="model.password_confirm" 
                            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"
                        />
                    </view>
                </view>
            </wd-form>
        </view>

        <view class="h-90rpx leading-90rpx mx-60rpx rounded-8rpx text-center mt-112rpx bg-[#4C9F44] text-[#fff]" @click="SetPassword.handleToConfirm">确定</view>

        <!-- 手机号修改成功 -->
        <wd-popup v-model="showEditSuccessPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
            <view class="relative pt-64rpx pb-74rpx">
                <view class="flex justify-center items-center">
                    <view class="bg-[#4C9F44] w-280rpx rounded-280rpx">
                        <wd-img width="280rpx" height="280rpx" :src="`${OSS}images/reserve_room/reserve_room_image7.png`"/>
                    </view>
                </view>
                <view class="text-[#303133] text-36rpx leading-46rpx text-center mt-48rpx">密码修改成功</view>
                <view class="text-[#9CA3AF] text-28rpx leading-44rpx mt-16rpx text-center">请记住你的登录密码</view>
                <view class="w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff] mt-174rpx mx-auto" @click="router.reLaunch('/pages/login/login')">好的</view>
            </view>
        </wd-popup>
    </view>
</template>


<script lang="ts" setup>
    import { mobile } from '@/utils/test'
    import { useToast  } from 'wot-design-uni'
    import { router } from '@/utils/tools'
    import { resetPassword } from '@/api/user'

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

    // 手机号修改成功弹窗
    const showEditSuccessPopup = ref<boolean>(false)

    const model = ref({
        mobile: '',
        code: '',
        password: '',
        password_confirm: ''
    })

    // 手机和验证码
    const mobile = ref<string>('')
    const code = ref<string>('')

    onLoad((args) => {
        mobile.value = args.mobile || ''
        code.value = args.code || ''
    })

    const SetPassword = {
        // 重置密码
        handleToConfirm: async () => {
            if (!mobile) {
                toast.show({
                    iconClass: 'info-circle',
                    msg: '手机号异常，请重新操作',
                    direction: 'vertical'
                })
                return
            }

            if (!code) {
                toast.show({
                    iconClass: 'info-circle',
                    msg: '验证码异常，请重新操作',
                    direction: 'vertical'
                })
                return
            }

            if (!model.value.password) {
                toast.show({
                    iconClass: 'info-circle',
                    msg: '请输入新密码',
                    direction: 'vertical'
                })
                return
            }   

            if (model.value.password !== model.value.password_confirm) {
                toast.show({
                    iconClass: 'info-circle',
                    msg: '两次输入密码不一致',
                    direction: 'vertical'
                })
                return
            }

            const res = await resetPassword({
                mobile: mobile.value,
                code: code.value,
                password: model.value.password,
                password_confirm: model.value.password_confirm
            })

            showEditSuccessPopup.value = true
        },

        // 修改手机成功后返回
        handleToBack: () => {
            router.navigateBack()
        }
    }
</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>