zx_flk_app/pages/loginRegister/forgetPassword.vue

<template>
    <view class="forgetPassword-page">
        <zx-input
            v-model="email"
            :placeholder="$t('请输入要重置的邮箱账号')"
        />
        <view :class="['zx-form-btn', email && 'is-submit']" style="margin-top: 48rpx;"  @tap="resetHandle">
            {{ $t('重置密码') }}
        </view>
        <NoticeDialog
            :title="$t('重置密码邮件已发送')"
            :btnText="$t('我知道了')"
            :text="noticeText"
            v-model="isSendSucceed"
        />
    </view>
</template>

<script>
import { emailRegex } from '@/common/constant'
import NoticeDialog from '@/component/comPopup/Notice.vue'
import ZxInput from './components/ZxInput.vue'
const http = require('@/common/http.js');
const config = require('@/common/config.js');
const common = require('@/common/common.js');
export default {
    components: {
        ZxInput,
        NoticeDialog
    },
    data() {
        return {
            isSendSucceed: false,
            email: ''
        }
    },
    computed: {
        noticeText({ email }) {
            return `我们向 <span style="color: #0A59F7;">${email}</span> 发送了一封密码重置邮件，请您登录邮箱操作处理。`
        }
    },
    methods: {
        resetHandle() {
            if (!emailRegex.test(this.email)) {
                uni.showToast({ title: this.$t('请输入有效的邮箱地址'), icon: 'none' })
                return
            }
            http.postApi(config.API_RESET_PASSWORD, { email: this.email }, res => {
                if (res.succeed) {
                    this.isSendSucceed = true
                } else {
                }
                uni.showToast({ title: res.data.msg, icon: 'none' })
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/libs/css/layout.scss";

.forgetPassword-page {
    width: 100%;
    background: #F1F3F4;
    min-height: 100vh;
    padding: 32rpx;
}
</style>