<template> <div class="find-wrap"> <div class="login-logo mb50"> <img src="../../../resources/img/content/login_logo.svg" alt="로고"> </div> <div class="login-box"> <p v-if="type === 'id'" class="find-title mb30">아이디 찾기</p> <p v-else-if="type === 'pw'" class="find-title mb30">비밀번호 찾기</p> <div class="error-message mb30"> <p> <img src="../../../resources/img/component/common/ico_invalid_error_20.svg" alt=""> <span v-if="type === 'id' && step === 1">아이디 찾을 방법을 선택해주세요.</span> <span v-if="type === 'pw' && step === 1">비밀번호 찾을 방법을 선택해주세요.</span> <span v-if="type === 'id' && step === 2">아이디를 찾았습니다.</span> <span v-if="type === 'pw' && step === 2">변경할 비밀번호를 입력해주세요.</span> </p> </div> <div class="find-methods" v-if="step === 1"> <div class="form-check"> <input type="radio" id="find-phone" name="find-method" value="phone" v-model="selectedMethod"/> <label for="find-phone">회원 정보에 등록한 휴대전화로 인증</label> <!-- 휴대폰 인증 영역 --> <div v-if="selectedMethod === 'phone'" class="auth-form phone-auth"> <p class="warning">회원정보에 등록한 휴대전화 번호와 입력된 휴대전화번호가 같아야, 인증번호를 받을 수 있습니다.</p> <input type="text" placeholder="이름" class="form-control sm mb10"/> <div class="input-group mb10"> <input type="tel" placeholder="휴대전화 번호" class="form-control sm "/> <button class="btn sm black" @click="certification">인증번호 받기</button> </div> <input type="text" placeholder="인증번호 입력" class="form-control sm" style="background-color: #ebebeb;"/> </div> </div> <div class="form-check"> <input type="radio" id="find-email" name="find-method" value="email" v-model="selectedMethod"/> <label for="find-email">본인 확인 이메일로 인증</label> <!-- 이메일 인증 영역 --> <div v-if="selectedMethod === 'email'" class="auth-form email-auth"> <!-- <p class="warning">회원정보에 등록한 휴대전화 번호와 입력된 휴대전화번호가 같아야, 인증번호를 받을 수 있습니다.</p> --> <input type="text" placeholder="이름" class="form-control sm mb10"/> <div class="input-group mb10"> <input type="tel" placeholder="이메일 주소" class="form-control sm "/> <button class="btn sm black">인증번호 받기</button> </div> <input type="text" placeholder="인증번호 입력" class="form-control sm" style="background-color: #ebebeb;"/> </div> </div> </div> <div class="find-methods" v-else-if="step === 2"> <div v-if="type === 'id'"> <div class="input-group"> <label for="id">아이디</label> <input type="text" id="id" class="form-control sm" disabled/> </div> </div> <div v-else-if="type === 'pw'"> <div class="input-group"> <label for="pw" class="newpw">새 비밀번호</label> <input type="password" id="pw" placeholder="8-16자의 영문/ 숫자 조합으로 입력해주세요." class="form-control sm mb10"/> </div> <div class="input-group"> <label for="pwCk" class="newpw">새 비밀번호 확인</label> <input type="password" id="pwCk" placeholder="다시 입력해주세요." class="form-control sm mb10"/> </div> </div> </div> <div class="btn-zone"> <button class="btn lg netx-btn" @click="stepGo(2)">다음</button> </div> </div> </div> </template> <script> export default { props: ['type'], inject: ['$alert'], data() { return { step: 1, // 단계 관리 (1: 방법 선택, 2: 인증 입력 등) selectedMethod: '', // 선택된 인증 방법 }; }, methods: { stepGo() { if (this.step === 1 && !this.selectedMethod) { this.$alert({ message: '인증 방법을 선택해주세요.',icon:require('../../../resources/img/component/common/ico_invalid_error_20.svg') }); return; }else{ this.step = 2; // 다음 단계로 이동 } }, certification() { // 인증번호 받기 로직 구현 this.$alert( { message: '인증번호가 발송되었습니다.', icon:require('../../../resources/img/content/ico_certification.svg') , subMessage: '인증번호가 오지 않으면 입력하신 정보가 회원정보와 일치하는지 확인해주세요.' } ); } }, watch: {}, computed: {}, components: {}, created() {}, mounted() { }, beforeUnmount() {}, }; </script>