통합구현 2022/03/15(Mypage, Menu1,2,3,)

파일명 components/MypageView.vue

<template>
    <div style="padding: 20px;">
        <h3>Mypage.vue</h3>

        <button @click="state.menu = 1">정보수정</button>
        <button @click="state.menu = 2">암호변경</button>
        <button @click="state.menu = 3">회원탈퇴</button>

        <hr />
        <menu-1 v-if="state.menu ===1 "></menu-1>
        <menu-2 v-if="state.menu ===2 "></menu-2>
        <menu-3 v-if="state.menu ===3 "></menu-3>

    </div>
</template>

<script>
import { reactive } from 'vue';
import Menu1 from './mypage/Menu1View';
import Menu2 from './mypage/Menu2View';
import Menu3 from './mypage/Menu3View';

export default {
    components : {
        Menu1, Menu2, Menu3
    },

    setup () {
        const state = reactive({
            menu : 1
        })
        
        return { state }
    }
}
</script>

<style lang="scss" scoped>

</style>

파일명 components/mypage/Menu1.vue

<template>
    <div v-if="state.item" style="padding: 20px;">
        <h3>정보수정 Menu1</h3>

        <label style="width:80px; height: 30px; display:inline-block;">이름 </label>
        <input type="text" v-model="state.item.name" placeholder="이름" /> <br />

        <label style="width:80px; height: 30px; display:inline-block;">나이 </label>
        <input type="text" v-model="state.item.age" placeholder="나이" /> <br />

        <label style="width:80px; height: 30px; display:inline-block;"> </label>
        <el-button type="primary" @click="handleUpdate" size="small">정보수정</el-button>

    </div>
</template>

<script>
import { onMounted, reactive } from 'vue';
import axios from 'axios';

export default {
    setup () {
        const state = reactive({
            token    : sessionStorage.getItem("TOKEN"),            
        })       

        const handleData = async() => {
            const url = `/member/selectone`;
            const headers = {"Content-Type":"application/json", "auth": state.token};
            const response = await axios.get(url, {headers});
            console.log(response.data);
            if(response.data.status === 200){
                state.item = response.data.result;
            }
        }
        
        onMounted(()=>{
            handleData();
        })

        const handleUpdate = async() =>{
            const url = `/member/update`;
            const headers = { "Content-Type":"application/json","auth"  : state.token }
            const body = {
                name :state.item.name,
                age : state.item.age
            }
            const response = await axios.put(url, body, {headers});
            console.log(response.data);
            if(response.data.status === 200){
                alert('수정되었습니다.');
            }
        }

        return { state, handleUpdate }
    }
}
</script>

<style lang="scss" scoped>

</style>

파일명 components/mypage/Menu2.vue

<template>
    <div style="padding: 20px;">
        <h3>암호변경 Menu2</h3>
        
        <label style="width:80px; height: 30px; display:inline-block;">기존암호 </label>
        <input type="password" v-model="state.userpw" placeholder="기존암호" /> <br />
        
        <label style="width:80px; height: 30px; display:inline-block;">변경암호 </label>
        <input type="password" v-model="state.userpw1" placeholder="변경암호" /> <br />

        <label style="width:80px; height: 30px; display:inline-block;">암호확인 </label>
        <input type="password" v-model="state.userpw2" placeholder="암호확인" /> <br />

        <label style="width:80px; height: 30px; display:inline-block;"></label>
        <el-button type="primary" @click="handlePwUpdate" size="small">암호변경</el-button>

    </div>
</template>

<script>
import { reactive } from 'vue';
import axios from 'axios';
import {useRouter } from 'vue-router';

export default {
    setup () {
        const router = useRouter();

        const state = reactive({
            token   : sessionStorage.getItem("TOKEN"),
            userpw  : '',
            userpw1 : '',
            userpw2 : '',
        })

        const handlePwUpdate = async() => {
            if(state.userpw.length <= 0){
                alert('암호를 입력하세요');
                return false;
            }
            if(state.userpw1.length <= 0){
                alert('변경할암호를 입력하세요');
                return false;
            }
            if(state.userpw === state.userpw1){
                alert('이전 암호와 같습니다.');
                return false;
            }            
            if(state.userpw1 != state.userpw2){
                alert('변경할암호와 암호확인이 같지 않습니다.');
                return false;
            }

            const url = `/member/updatepw`;
            const headers = { "Content-Type":"application/json","auth"  : state.token }
            const body = {
                pw    : state.userpw,
                newpw : state.userpw1
            }
            const response = await axios.put(url, body, {headers:headers});
            console.log(response);
            if(response.status === 200){
                alert('변경되었습니다.');
                router.push({name:'Home'});
            }
        }        

        return { state, handlePwUpdate }
    }
}
</script>

<style lang="scss" scoped>

</style>

파일명 components/mypage/Menu3.vue

<template>
    <div style="padding: 20px;">
        <h3>회원탈퇴 Menu3</h3>

        <label style="width : 80px; height : 30px; display : inline-block;"></label>
        <el-button type="primary" @click="handleDelete" size="small" >회원탈퇴</el-button>

    </div>
</template>

<script>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

export default {
    setup () {
        const router = useRouter();

        const state = reactive({
            token : sessionStorage.getItem("TOKEN")
        });
        
        const handleDelete = async ()=>{
            if(confirm('탈퇴 할까요?')){
                const url = `/member/delete`;
                const headers = { "Content-Type" : "application/json", "auth"  : state.token }
                const response = await axios.delete(url, {headers:headers, data:{}});
                console.log(response.data);
                if(response.data.status === 200) {
                    alert('탈퇴 되었습니다.');
                    router.push({name:'Logout'});
                }
            }
        }

        return {state, handleDelete}
    }
}
</script>

<style lang="scss" scoped>

</style>