<template>
<div>
<HeaderVue style="height: 220px;"></HeaderVue>
<v-app>
<v-main style="padding: 10px;">
<v-row dense>
<!-- 사이드 -->
<v-col md="2"></v-col>
<!-- 메인 -->
<v-col md="8">
<v-row dense="" style="border-bottom: 1px solid #CCC;">
<v-col sm="6">
<h5><router-link to="/">홈</router-link> > <router-link to="/mypage">마이페이지</router-link> > 찜목록 </h5>
</v-col>
</v-row>
<v-row dense class="row_bwrite2" style="padding-top: 20px; padding-bottom: 15px; padding-left: 10px;">
<v-col sm="6" class="col_left">
<h2>찜목록</h2>
</v-col>
<v-col class="col_right">
<router-link to="/pupdate"><v-btn><h3>회원정보수정</h3></v-btn></router-link>
<router-link to="/pwupdate"><v-btn><h3>비밀번호변경</h3></v-btn></router-link>
<router-link to="/dontgo"><v-btn><h3>회원탈퇴</h3></v-btn></router-link>
<router-link to="/likelist"><v-btn><h3>찜목록</h3></v-btn></router-link>
<router-link to="/activity"><v-btn><h3>내활동</h3></v-btn></router-link>
</v-col>
</v-row>
<v-row>
<v-col
v-for="n in 12"
:key="n"
cols="4"
>
<v-card height="200px" class="club_card" style="padding: 20px;">
<v-row dense>
<v-col sm="3">
<input type="checkbox" style="width: 15px; height: 15px;">
</v-col>
<v-col sm="6" class="col_center">
<router-link to="/cdetail" class="col_center">
<img :src="require(`../../assets/img/${state.logo}.png`)" style="width: 100%"/>
</router-link>
</v-col>
<v-col sm="3" class="col_right">
<v-btn style="height: 100%; width: 10px;" id="like" @click="changeheart()">
<img :src="require(`../../assets/img/${state.imgName}.png`)" style="width: 30px"/>
</v-btn>
</v-col>
</v-row>
<v-row dense>
<v-col>
<h4>{{state.card.clubname}}</h4>
</v-col>
</v-row>
<v-row dense>
<v-col sm="12">
{{state.card.desc}}
</v-col>
</v-row>
<v-row dense>
<v-col>
<h5>{{state.card.area1}} {{state.card.area2}}</h5>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row>
<v-col class="col_center" style="margin-top: 15px;">
<v-btn style="margin-right: 15px;"><h3>선택삭제</h3></v-btn>
<v-btn style="margin-left: 15px;"><h3>전체삭제</h3></v-btn>
</v-col>
</v-row>
</v-col>
<!-- 사이드 -->
<v-col md="2"></v-col>
</v-row>
</v-main>
</v-app>
<FooterVue></FooterVue>
</div>
</template>
<script>
import { reactive } from '@vue/reactivity';
import { useRouter } from 'vue-router';
import FooterVue from '../../components/FooterVue.vue';
import HeaderVue from '../HeaderVue.vue';
import { onMounted } from '@vue/runtime-core';
export default {
components: { HeaderVue, FooterVue },
setup () {
const router = useRouter();
const state = reactive({
imgName: 'heart',
logo: 'club_logo',
card: {
clubname: '삥뽕탁구클럽',
desc: '설명글을 잔뜩!',
desc1: '',
area1: '부산',
area2: '연제구',
},
});
const changeheart = () => {
if (state.imgName === 'heart') {
state.imgName = 'heart1'
} else {
state.imgName = 'heart'
}
};
onMounted (()=>{
if (state.card.desc.length >= 40) {
state.card.desc1 = state.card.desc.substring(0, 40) + '...'
}
state.card.desc1 = state.card.desc;
})
const clubDetail = () => {
router.push({ name: "ClubDetailVue" });
}
return { state, changeheart, clubDetail }
}
}
</script>
<style lang="scss" scoped>
</style>
마이액티비티
<template>
<div>
<HeaderVue style="height: 220px;"></HeaderVue>
<v-app>
<v-main style="padding: 10px;">
<v-row dense>
<!-- 사이드 -->
<v-col md="2"></v-col>
<!-- 메인 -->
<v-col md="8">
<v-row dense="" style="border-bottom: 1px solid #CCC;">
<v-col sm="6">
<h5><router-link to="/">홈</router-link> > <router-link to="/mypage">마이페이지</router-link> > 나의 활동</h5>
</v-col>
</v-row>
<v-row dense class="row_bwrite2" style="padding-top: 20px; padding-bottom: 15px; padding-left: 10px;">
<v-col sm="6" class="col_left">
<h2>나의 활동</h2>
</v-col>
<v-col class="col_right">
<router-link to="/pupdate"><v-btn><h3>회원정보수정</h3></v-btn></router-link>
<router-link to="/pwupdate"><v-btn><h3>비밀번호변경</h3></v-btn></router-link>
<router-link to="/dontgo"><v-btn><h3>회원탈퇴</h3></v-btn></router-link>
<router-link to="/likelist"><v-btn><h3>찜목록</h3></v-btn></router-link>
<router-link to="/activity"><v-btn><h3>내활동</h3></v-btn></router-link>
</v-col>
</v-row>
<v-row dense>
<v-col>
<v-tabs v-model="state.tab" fixed-tabs>
<v-tab value='1'><h3>내 글</h3></v-tab>
<v-tab value='2'><h3>내 댓글</h3></v-tab>
<v-tab value='3'><h3>내 활동</h3></v-tab>
</v-tabs>
<v-window v-model="state.tab">
<v-window-item value='1'>
<v-card style="padding: 10px;">
<v-row dense>
<v-col class="col_right">
<v-btn><h4>선택삭제</h4></v-btn>
</v-col>
</v-row>
<v-row dense>
<v-col>
<v-table>
<thead>
<tr>
<td style="border-bottom: 2px solid #CCC; width:70px;"><h3>체크</h3></td>
<td style="border-bottom: 2px solid #CCC;"><h3>제목</h3></td>
<td style="border-bottom: 2px solid #CCC; width:170px;"><h3>날짜</h3></td>
<td style="border-bottom: 2px solid #CCC; width:70px;"><h3>조회</h3></td>
<td style="border-bottom: 2px solid #CCC; width:80px;"><h3>좋아요</h3></td>
</tr>
</thead>
<tbody>
<tr v-for="item in state.my" :key="item">
<td><input type="checkbox"></td>
<td>{{item.title}}</td>
<td>{{item.date}}</td>
<td>{{item.hit}}</td>
<td>{{item.like}}</td>
</tr>
</tbody>
</v-table>
</v-col>
</v-row>
<v-col>
<v-pagination
v-model="state.page"
:length="state.total"
>
</v-pagination>
</v-col>
</v-card>
</v-window-item>
<v-window-item value='2'>
<v-card style="padding: 10px;">
<v-row dense>
<v-btn><h4>선택삭제</h4></v-btn>
</v-row>
<v-row dense>
<v-col>
<v-table>
<thead>
<tr>
<td style="border-bottom: 2px solid #CCC; width:70px;"><h3>체크</h3></td>
<td style="border-bottom: 2px solid #CCC;"><h3>제목</h3></td>
<td style="border-bottom: 2px solid #CCC; width:170px;"><h3>날짜</h3></td>
<td style="border-bottom: 2px solid #CCC; width:80px;"><h3>좋아요</h3></td>
</tr>
</thead>
<tbody>
<tr v-for="item in state.my" :key="item">
<td><input type="checkbox"></td>
<td>{{item.title}}</td>
<td>{{item.date}}</td>
<td>{{item.like}}</td>
</tr>
</tbody>
</v-table>
</v-col>
</v-row>
<v-col>
<v-pagination
v-model="state.page"
:length="state.total"
>
</v-pagination>
</v-col>
</v-card>
</v-window-item>
<v-window-item value='3'>
<v-card style="padding: 10px;">
<v-row dense style="border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;">
<v-col>
<v-row dense>
<v-col>
<h4>알림 코드에 따라 다른 글이 와야함. v-if..?</h4>
</v-col>
</v-row>
</v-col>
</v-row>
<v-row>
<v-col>
<v-pagination
v-model="state.page"
:length="state.total"
>
</v-pagination>
</v-col>
</v-row>
</v-card>
</v-window-item>
</v-window>
</v-col>
</v-row>
<v-row dense>
</v-row>
</v-col>
<!-- 사이드 -->
<v-col md="2"></v-col>
</v-row>
</v-main>
</v-app>
<FooterVue></FooterVue>
</div>
</template>
<script>
import { reactive } from '@vue/reactivity';
import { useRouter } from 'vue-router';
import FooterVue from '../../components/FooterVue.vue';
import HeaderVue from '../HeaderVue.vue';
import { onMounted } from '@vue/runtime-core';
export default {
components: { HeaderVue, FooterVue },
setup () {
const router = useRouter();
const state = reactive({
tab: '',
page: 1,
my: {
chk: false,
title: '아니 어젴ㅋㅋ',
date: '2021-04-24 14:22:03',
hit: 53,
like: 4,
content: '어제 포켓몬빵을 사러 갔는데 진짜 레전드였음ㅋㅋㅋzzzzzzzzzzzzzzzzzzzzzzzzzzㅋ',
content1: ''
},
myreply: {
chk: false,
title: '아니 어젴ㅋㅋ',
date: '2021-04-24 14:22:03',
like: 4,
content: '어제 포켓몬빵을 사러 갔는데 진짜 레전드였음ㅋㅋㅋzzzzzzzzzzzzzzzzzzzzzzzzzzㅋ',
content1: ''
}
})
onMounted (()=>{
if (state.my.content.length >= 15) {
state.my.content1 = state.my.content.substring(0, 15) + '...'
}
state.my.content1 = state.my.content;
if (state.myreply.content.length >= 15) {
state.myreply.content1 = state.myreply.content.substring(0, 15) + '...'
}
state.myreply.content1 = state.myreply.content;
});
return { state }
}
}
</script>
<style lang="scss" scoped>
</style>마이페이지뷰
<template>
<div>
<HeaderVue style="height: 220px;"></HeaderVue>
<v-app>
<v-main style="padding: 10px;">
<v-row dense>
<!-- 사이드 -->
<v-col md="2"></v-col>
<!-- 메인 -->
<v-col md="8">
<v-row dense="" style="border-bottom: 1px solid #CCC;">
<v-col sm="6">
<h5><router-link to="/">홈</router-link> > 마이페이지</h5>
</v-col>
</v-row>
<v-row dense class="row_bwrite2" style="padding-top: 20px; padding-bottom: 15px; padding-left: 10px;">
<v-col sm="6" class="col_left">
<h2>마이페이지</h2>
</v-col>
</v-row>
<v-row dense>
<v-col class="col_center" style="padding: 10px;">
<router-link to="/pupdate"><v-btn><h3>회원정보수정</h3></v-btn></router-link>
<router-link to="/pwupdate"><v-btn><h3>비밀번호변경</h3></v-btn></router-link>
<router-link to="/dontgo"><v-btn><h3>회원탈퇴</h3></v-btn></router-link>
<router-link to="/likelist"><v-btn><h3>찜목록</h3></v-btn></router-link>
<router-link to="/activity"><v-btn><h3>내활동</h3></v-btn></router-link>
</v-col>
</v-row>
</v-col>
<!-- 사이드 -->
<v-col md="2"></v-col>
</v-row>
</v-main>
</v-app>
<FooterVue></FooterVue>
</div>
</template>
<script>
import { reactive } from '@vue/reactivity';
import { useRouter } from 'vue-router';
import FooterVue from '../../components/FooterVue.vue';
import HeaderVue from '../HeaderVue.vue';
export default {
components: { HeaderVue, FooterVue },
setup () {
const router = useRouter();
const state = reactive({
tabs: [
'a', 'b'
]
})
return { state }
}
}
</script>
<style lang="scss" scoped>
</style>회원탈퇴
<template><div>
<HeaderVue style="height: 220px;"></HeaderVue>
<v-app>
<v-main style="padding: 10px;">
<v-row dense>
<!-- 사이드 -->
<v-col md="2"></v-col>
<!-- 메인 -->
<v-col md="8">
<v-row dense="" style="border-bottom: 1px solid #CCC;">
<v-col sm="6">
<h5><router-link to="/">홈</router-link> > <router-link to="/mypage">마이페이지</router-link> > 회원탈퇴 </h5>
</v-col>
</v-row>
<v-row dense class="row_bwrite2" style="padding-top: 20px; padding-bottom: 15px; padding-left: 10px;">
<v-col sm="6" class="col_left">
<h2>회원탈퇴</h2>
</v-col>
<v-col class="col_right">
<router-link to="/pupdate"><v-btn><h3>회원정보수정</h3></v-btn></router-link>
<router-link to="/pwupdate"><v-btn><h3>비밀번호변경</h3></v-btn></router-link>
<router-link to="/dontgo"><v-btn><h3>회원탈퇴</h3></v-btn></router-link>
<router-link to="/likelist"><v-btn><h3>찜목록</h3></v-btn></router-link>
<router-link to="/activity"><v-btn><h3>내활동</h3></v-btn></router-link>
</v-col>
</v-row>
<v-row dense style="padding-top: 20px; padding-bottom: 20px;">
<v-col sm="2"></v-col>
<v-col sm="8">
<v-row dense>
<v-col sm="3" class="col_right">
<h4>현재비밀번호</h4>
</v-col>
<v-col style="height: 80px; padding-left: 10px;" class="col_left">
<input type="password" class="board_search_box1" style="outline-width: 0;" v-model="state.pw">
</v-col>
</v-row>
</v-col>
</v-row>
<v-row>
<v-col class="col_center">
<v-btn style="background-color: gold;" @click="exit()"><h3>회원탈퇴</h3></v-btn>
</v-col>
</v-row>
</v-col>
<!-- 사이드 -->
<v-col md="2"></v-col>
</v-row>
</v-main>
</v-app>
<FooterVue></FooterVue>
</div>
</template>
<script>
import { reactive } from '@vue/reactivity';
import FooterVue from '../FooterVue.vue';
import HeaderVue from '../HeaderVue.vue';
import { useRouter } from 'vue-router';
export default {
components: { HeaderVue, FooterVue },
setup () {
const router = useRouter();
const state = reactive({
pw: '',
})
const exit = () => {
if (confirm('정말 탈퇴하시겠습니까?') == true) {
alert("탈퇴 되었습니다");
router.push({ name: "HomeVue"});
}
}
return { state, exit }
}
}
</script>
<style lang="scss" scoped>
@import '../../assets/css/style';
</style>정보수정
<template>
<div v-if="state.items">
<HeaderVue style="height: 220px;"></HeaderVue>
<v-app>
<v-main style="padding: 10px;">
<v-row dense>
<v-col md="2"></v-col>
<v-col md="8">
<v-row dense="" style="border-bottom: 1px solid #CCC;">
<v-col sm="6">
<h5><router-link to="/">홈</router-link> > <router-link to="/mypage">마이페이지</router-link> > 회원정보수정</h5>
</v-col>
</v-row>
<v-row dense class="row_bwrite2" style="padding-top: 20px; padding-bottom: 15px; padding-left: 10px;">
<v-col sm="6" class="col_left">
<h2>회원정보수정</h2>
</v-col>
<v-col class="col_right">
<router-link to="/pupdate"><v-btn><h3>회원정보수정</h3></v-btn></router-link>
<router-link to="/pwupdate"><v-btn><h3>비밀번호변경</h3></v-btn></router-link>
<router-link to="/dontgo"><v-btn><h3>회원탈퇴</h3></v-btn></router-link>
<router-link to="/likelist"><v-btn><h3>찜목록</h3></v-btn></router-link>
<router-link to="/activity"><v-btn><h3>내활동</h3></v-btn></router-link>
</v-col>
</v-row>
</v-col>
</v-row>
<v-row dense style="padding-top: 20px;">
<v-col sm="3"></v-col>
<!-- 프로필 사진 -->
<v-col sm="2">
<v-expansion-panels>
<v-expansion-panel style="width: 300px;">
<v-row dense>
<v-col style="padding-left: 20px; padding-top: 10px;">
<h3>프로필 사진</h3>
</v-col>
</v-row>
<v-row dense>
<v-col style="width: 100%; height: 165px;" class="col_center">
<img :src="state.imageUrl" style="width: 160px; border: 1px solid #CCC;"/>
</v-col>
</v-row>
<v-row dense style="padding: 10px;">
<v-col class="col_center">
<input type="file" name="file" @change="handleImage($event)" style="width: 80px;">
<v-btn @click="nullbutton()">초기화</v-btn>
</v-col>
</v-row>
</v-expansion-panel>
</v-expansion-panels>
</v-col>
</v-row>
<v-row dense>
<v-col sm="3"></v-col>
<v-col sm="6" style="display: flex; align-items: center;">
<v-expansion-panels style="width:100%">
<v-form v-model="valid" style="width:100%">
<!-- 닉네임 -->
<v-expansion-panel class="panel">
<v-row>
<v-col style="height: 80px;">
<v-text-field
label="닉네임"
v-model="state.nick"
variant="plain"
:rules="nicknameRules"
density="compact"
required
></v-text-field>
</v-col>
</v-row>
</v-expansion-panel>
<!-- 이메일 -->
<v-expansion-panel class="panel">
<v-row>
<v-col style="height:80px;">
<v-text-field
label="이메일"
v-model="state.items.memail"
variant="plain"
:rules="emailRules"
density="compact"
required
></v-text-field>
</v-col>
</v-row>
</v-expansion-panel>
<!-- 연락처 -->
<v-expansion-panel class="panel">
<v-row>
<v-col sm="10" style="height: 80px;">
<v-text-field
label="연락처"
v-model="state.items.mphone"
variant="plain"
:rules="phoneRules"
hint="숫자만 입력하세요"
density="compact"
required
></v-text-field>
</v-col>
<v-col sm="2">
<v-btn style="width: 100%; height:40px;">
<h4>인증번호전송</h4>
</v-btn>
</v-col>
</v-row>
</v-expansion-panel>
<!-- 인증번호 -->
<v-expansion-panel class="panel">
<v-row>
<v-col sm="10" style="height: 80px;">
<v-text-field
label="인증번호"
v-model="validnumber"
variant="plain"
:rules="validnumberRules"
density="compact"
hint="숫자만 입력하세요"
required
></v-text-field>
</v-col>
<v-col sm="2">
<v-btn style="width: 100%; height:40px;">
<h4>확인</h4>
</v-btn>
</v-col>
</v-row>
</v-expansion-panel>
<!-- 주소 -->
<v-expansion-panel class="panel">
<v-row>
<!-- 주소 -->
<v-col sm="10" style="height: 80px;">
<v-text-field
id="address"
label="주소"
v-model="state.items.maddress"
variant="plain"
:rules="nameRules"
density="compact"
required
></v-text-field>
</v-col>
<!-- 우편번호찾기버튼 -->
<v-col sm="2">
<v-btn @click="post" style="width: 100%; height:40px;">
<h4>우편번호찾기</h4>
</v-btn>
</v-col>
</v-row>
</v-expansion-panel>
<!-- 상세주소, 우편번호 -->
<v-expansion-panel class="panel">
<v-row>
<v-col sm="8" style="height: 80px;">
<v-text-field
label="상세주소"
v-model="state.items.detailaddress"
id="detailAddress"
variant="plain"
:rules="nameRules"
density="compact"
required
></v-text-field>
</v-col>
<!-- <v-col sm="4" style="height: 80px;">
<v-text-field
label="우편번호"
v-model="state.postcode"
id="postcode"
variant="plain"
:rules="nameRules"
density="compact"
required
></v-text-field>
</v-col> -->
</v-row>
</v-expansion-panel>
</v-form>
</v-expansion-panels>
</v-col>
<v-col sm="3"></v-col>
</v-row>
<v-row dense="">
<v-col md="2"></v-col>
<v-col md="8" >
<!-- 수정버튼 -->
<v-row dense style="padding-top: 20px;">
<v-col sm="4"></v-col>
<v-col sm="4">
<v-row dense>
<v-btn @click="handleUpdate()" style="width:100%; height:80px; background-color: gold;">
<h2>회원정보수정</h2>
</v-btn>
</v-row>
</v-col>
<v-col sm="4"></v-col>
</v-row>
</v-col>
<v-col md="2"></v-col>
</v-row>
</v-main>
</v-app>
<FooterVue></FooterVue>
</div>
</template>
<script>
import { useRouter } from 'vue-router';
import FooterVue from '../FooterVue.vue';
import HeaderVue from '../HeaderVue.vue';
import axios from 'axios';
import { onMounted, reactive } from 'vue';
export default {
components: { HeaderVue, FooterVue },
setup () {
const state = reactive({
imagenull : null,
nick : '',
token : sessionStorage.getItem("TOKEN"),
id : '',
pw : '',
pw1 : '',
mname : '',
phone : '',
address : '',
detailAddress : '',
postcode : '',
email : '',
nickname : '',
birth : '',
role : 'PERSONAL',
imageUrl : require('../../assets/img/profile_sample.png'),
imageUrl1 : '',
imageFile : null,
})
onMounted(() => {
handlenick(),mypage();
})
const nullbutton = () => {
// state.imageFile = require('../../assets/img/profile_sample.png');
console.log(state.imageFile);
state.imageUrl = require('../../assets/img/profile_sample.png');
state.imageFile = null;
state.items.mprofile = null;
console.log(state.items.mprofile);
}
const router = useRouter();
const handleImage = (e) => {
if(e.target.files[0]){
state.imageUrl = URL.createObjectURL(e.target.files[0]);
state.imageFile = e.target.files[0];
}
else{
state.imageUrl = state.imageUrl1
state.imageFile = '';
}
}
const handlenickupdate = async() => {
const url = `/ROOT/member/updatenickname`;
const headers = {"Content-Type":"application/json",
token : state.token};
const body = {
mpnickname : state.nick
};
const response = await axios.put(url,body,{headers});
console.log(state.nick);
if(response.data.status === 200){
console.log(state.nick);
}
}
const handlenick = async() => {
const url = `/ROOT/member/psmynick`;
const headers = {"Content-Type":"application/json",
token : state.token};
const response = await axios.get(url, {headers});
console.log(response.data.result);
if(response.data.status === 200){
state.nick = response.data.result.mpnickname;
console.log(state.nick);
}
}
const handleUpdate = async() => {
const url = `/ROOT/member/updatemember`;
const headers = {"Content-Type":"multipart/form-data",
token : state.token};
const body = new FormData;
body.append("mname",state.items.mname);
body.append("mphone",state.items.mphone);
body.append("maddress",state.items.maddress);
body.append("detailaddress",state.items.detailaddress);
body.append("memail",state.items.memail);
body.append("file", state.imageFile);
const response = await axios.put(url,body,{headers});
console.log(state.imagenull);
console.log(response.data);
if(response.data.status === 200){
handlenickupdate();
alert('정보수정완료')
router.push({path : 'mypage'})
}
else{
console.log('실패');
}
}
const mypage = async() => {
const url = `/ROOT/member/mypage`;
const headers = {"Content-Type":"application/json",
token : state.token};
const response = await axios.get(url, {headers});
console.log(response.data.result);
if(response.data.status === 200){
state.items = response.data.result;
if(state.items.mprofile != ""){
if(state.items.mprofile != null){
state.imageUrl = response.data.result.mimageurl
state.imageUrl1 = response.data.result.mimageurl
}
}
else{
state.imageUrl = require('../../assets/img/profile_sample.png');
}
// if(response.data.result.mimageurl)
// handlenick();
}
}
return { handleUpdate, state,handleImage,nullbutton,handlenickupdate }
},
data () {
return {
column: null,
row: null,
e6: 1,
valid: false,
id: '',
pw: '',
pw1: '',
name: '',
nickname: '',
email: '',
birth: '',
gender: '',
phone: '',
postcode: '',
address: '',
extraAddress: '',
detailAddress: '',
validnumber: '',
show1: false,
show2: false,
idRules: [
v => !!v || '필수 입력 사항입니다',
v => v.length >= 6 || '6자 이상 입력하세요',
],
nameRules: [
v => !!v || '필수 입력 사항입니다',
],
nicknameRules: [
v => !!v || '필수 입력 사항입니다',
],
emailRules: [
v => !!v || '필수 입력 사항입니다',
v => /.+@.+/.test(v) || '이메일 형식이 아닙니다',
],
birthRules: [
v => !!v || '필수 입력 사항입니다',
v => v.length >= 8 || '8자만 입력하세요',
v => v.length <= 8 || '8자만 입력하세요',
],
phoneRules: [
v => !!v || '필수 입력 사항입니다',
v => v.length >= 8 || '',
v => v.length <= 11 || '',
],
validnumberRules: [
v => !!v || '필수 입력 사항입니다',
v => v.length >= 6 || '',
v => v.length <= 6 || '',
],
}
},
methods: {
// 주소 API
post() {
new window.daum.Postcode({
oncomplete: (data) => {
if (this.extraAddress !== "") {
this.extraAddress = "";
}
if (data.userSelectedType === "R") {
// 사용자가 도로명 주소를 선택했을 경우
this.address = data.roadAddress;
} else {
// 사용자가 지번 주소를 선택했을 경우(J)
this.address = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
if (data.userSelectedType === "R") {
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if (data.bname !== "" && /[동|로|가]$/g.test(data.bname)) {
this.extraAddress += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if (data.buildingName !== "" && data.apartment === "Y") {
this.extraAddress +=
this.extraAddress !== ""
? `, ${data.buildingName}`
: data.buildingName;
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if (this.extraAddress !== "") {
this.extraAddress = `(${this.extraAddress})`;
}
} else {
this.extraAddress = "";
}
// 우편번호를 입력한다.
this.postcode = data.zonecode;
},
}).open();
},
},
}
</script>
<style lang="scss" scoped>
@import '../../assets/css/style';
</style><template>
<div>
<HeaderVue style="height: 220px;"></HeaderVue>
<v-app>
<v-main style="padding: 10px;">
<v-row dense>
<!-- 사이드 -->
<v-col md="2"></v-col>
<!-- 메인 -->
<v-col md="8">
<v-row dense="" style="border-bottom: 1px solid #CCC;">
<v-col sm="6">
<h5><router-link to="/">홈</router-link> > <router-link to="/mypage">마이페이지</router-link> > 비밀번호변경 </h5>
</v-col>
</v-row>
<v-row dense class="row_bwrite2" style="padding-top: 20px; padding-bottom: 15px; padding-left: 10px;">
<v-col sm="6" class="col_left">
<h2>비밀번호변경</h2>
</v-col>
<v-col class="col_right">
<router-link to="/pupdate"><v-btn><h3>회원정보수정</h3></v-btn></router-link>
<router-link to="/pwupdate"><v-btn><h3>비밀번호변경</h3></v-btn></router-link>
<router-link to="/dontgo"><v-btn><h3>회원탈퇴</h3></v-btn></router-link>
<router-link to="/likelist"><v-btn><h3>찜목록</h3></v-btn></router-link>
<router-link to="/activity"><v-btn><h3>내활동</h3></v-btn></router-link>
</v-col>
</v-row>
<v-row dense style="padding-top: 20px; padding-bottom: 20px;">
<v-col sm="2"></v-col>
<v-col sm="8">
<v-row dense>
<v-col sm="3" class="col_right">
<h4>현재비밀번호</h4>
</v-col>
<v-col style="height: 80px; padding-left: 10px;" class="col_left">
<input type="password" class="board_search_box1" style="outline-width: 0;" v-model="state.pw">
</v-col>
</v-row>
<v-row dense>
<v-col sm="3" class="col_right">
<h4>바꿀비밀번호</h4>
</v-col>
<v-col style="height: 80px; padding-left: 10px;" class="col_left">
<input type="password" class="board_search_box1" style="outline-width: 0;" v-model="state.pw1">
</v-col>
</v-row>
<v-row dense>
<v-col sm="3" class="col_right">
<h4>바꿀비밀번호확인</h4>
</v-col>
<v-col style="height: 80px; padding-left: 10px;" class="col_left">
<input type="password" class="board_search_box1" style="outline-width: 0;" v-model="state.pw2">
</v-col>
</v-row>
</v-col>
<v-col sm="2"></v-col>
</v-row>
<v-row>
<v-col class="col_center">
<v-btn style="background-color: gold;"><h3>비밀번호변경</h3></v-btn>
</v-col>
</v-row>
</v-col>
<!-- 사이드 -->
<v-col md="2"></v-col>
</v-row>
</v-main>
</v-app>
<FooterVue></FooterVue>
</div>
</template>
<script>
import { reactive } from '@vue/reactivity';
import FooterVue from '../FooterVue.vue';
import HeaderVue from '../HeaderVue.vue';
export default {
components: { HeaderVue, FooterVue },
setup () {
const state = reactive({
pw: '',
pw1: '',
pw2: '',
})
return { state }
}
}
</script>
<style lang="scss" scoped>
@import '../../assets/css/style';
</style>
20211208-