if I use this.f7router.navigate in the function like
goNextSlide(slideNum) {
this.$router.navigate(’/schedule/’)
}
it won’t work
but i was able to do it in mount hook
mounted() {
this.$router.navigate(’/schedule/’)
}
how can i use navigate in my method?
Framework7 core or Vue?
oh it is based on f7 vue
f7router => $f7router
Can you show your full component?
<template>
<f7-page name="signupswiper">
<!-- nav bar -->
<f7-navbar>
<f7-link popup-close class="left"><a class="link sheet-close" href="#" style="color: #A4A4A4;"><f7-icon slot="media" f7="close" size="30px"></f7-icon></a></f7-link>
</f7-navbar>
<f7-swiper :params="{observer: true, observeParents: true, followFinger: false, shortSwipes: false, longSwipes: false}" class="signup_swiper">
<!--// 연령대 -->
<f7-swiper-slide>
<div class="progresbar color-green">
<p class="pro_padd">
<f7-progressbar :progress="12.5" id="demo-inline-progressbar"></f7-progressbar>
</p>
<div class="signup_st_center">
<h3>연령대가 어떻게 되세요?</h3>
<div class="age_total">
<ul class="selec_ul">
<li v-for="age in ages" :key="age.value" :class="{select_border: selectedAge == age.value}" class="age_class_1" @click="selectedAge == age.value? selectedAge = '':selectedAge = age.value">
<span class="check_age_txt">{{age.name}}</span>
</li>
</ul>
</div>
<div class="befor_next_btn">
<f7-button fill class="before_btn">
<a class="link" @click="goPrevSlide()">이전</a>
</f7-button>
<f7-button fill class="submit_next_btn">
<a class="link" @click="goNextSlide(1)">다음</a>
</f7-button>
</div>
</div>
</div>
</f7-swiper-slide>
<!-- 연령대 //-->
<!--// 영어실력 -->
<!--// 정보입력 -->
<f7-swiper-slide>
<div class="progresbar color-green">
<p class="pro_padd">
<f7-progressbar :progress="50" id="demo-inline-progressbar"></f7-progressbar>
</p>
<div class="signup_st_center">
<h3>닉네임을 입력해 주시겠어요?</h3>
<f7-list inline-labels no-hairlines-md>
<f7-list-input :value="nickname" @input="nickname = $event.target.value" label="닉네임" type="text" placeholder="선생님이 부를 이름입니다." clear-button>
</f7-list-input>
</f7-list>
<p class="change_signup_info">너무 고민하지 마세요~^^</p>
<p class="change_signup_info">언제든 내 정보에서 변경 가능합니다.</p>
<div class="befor_next_btn">
<f7-button fill class="before_btn">
<a class="link" @click="goPrevSlide()">이전</a>
</f7-button>
<f7-button fill class="submit_next_btn">
<a class="link" @click="goNextSlide(3)">다음</a>
</f7-button>
</div>
</div>
</div>
</f7-swiper-slide>
<!-- 정보입력 //-->
<!--// 회원가입_휴대폰 -->
<f7-swiper-slide>
<div class="progresbar color-green">
<p class="pro_padd">
<f7-progressbar :progress="75" id="demo-inline-progressbar"></f7-progressbar>
</p>
<div class="signup_st_center">
<h3>아미고톡은 휴대폰 번호로 가입해요. 번호는 안전하게 보관되며 어디에도 공개되지 않아요.</h3>
<f7-list inline-labels no-hairlines-md>
<f7-list-input :value="phoneNumber" @input="phoneNumber = $event.target.value" label="" type="tel" placeholder="휴대폰 번호" clear-button>
</f7-list-input>
</f7-list>
<f7-button fill color="white" class="get_agree_btn" @click="sendSms()">
<a class="link">인증문자 받기</a>
</f7-button>
<f7-block v-html="time" v-if="timerRunning"></f7-block>
<f7-list inline-labels no-hairlines-md>
<f7-list-input :value="userAuthInput" @input="userAuthInput = $event.target.value" label="" type="tel" placeholder="인증번호" clear-button>
</f7-list-input>
</f7-list>
<p class="change_signup_info">
신청을 클릭함으로써<br>
<span class="under_st"><a href="#">이용약관</a></span>과
<span class="under_st"><a href="#">개인정보취급방침</a></span>에 동의합니다.
</p>
<div class="befor_next_btn">
<f7-button fill class="before_btn">
<a class="link" @click="goPrevSlide()">이전</a>
</f7-button>
<f7-button fill class="submit_next_btn">
<a class="link" @click="openCustomDialog()">신청</a>
</f7-button>
</div>
</div>
</div>
</f7-swiper-slide>
<!-- 회원가입_휴대폰 //-->
<!--// 무료체험 유도 -->
<f7-swiper-slide>
<div class="progresbar color-green">
<p class="pro_padd">
<f7-progressbar :progress="87.5" id="demo-inline-progressbar"></f7-progressbar>
</p>
<div class="signup_st_left">
<div class="com_wrap">
<h3>축하드립니다! Sora님:)</h3>
<p><a class="bold">Sora</a>님만의 튜터카드를 생성 하였습니다.</p>
<p class="change_signup_info">
외국인 선생님과 대화하며 자신의 정확한 영어 레벨도 알 수 있는 <a class="bold">무료체험권 1회</a>를 받으실 수 있습니다.
</p>
</div>
<div class="befor_next_btn">
<f7-button fill class="free_btn acc_btn">
<a><f7-icon f7="phone_portrait" size="20px" color="white"></f7-icon>무료체험권 받기</a>
</f7-button>
<f7-button fill popup-open=".freeclassNotePopup" class="tutor_btn acc_btn">
<a><f7-icon f7="data_fill" size="20px" color="white"></f7-icon>튜터카드 학습하기</a>
</f7-button>
</div>
</div>
</div>
</f7-swiper-slide>
<!-- 무료체험 유도 //-->
<!--// 무료체험 도구 선택 -->
<f7-swiper-slide>
<div class="choose_wrap">
<div class="progresbar color-green">
<p class="pro_padd"><f7-progressbar :progress="100" id="demo-inline-progressbar"></f7-progressbar></p>
</div>
<div class="howto_class">
<h3>어떤 도구로 수업하시겠어요?</h3>
<div class="howto_total">
<ul class="selec_ul">
<li class="week_fl howto_class_1 check_li_fir">
<f7-checkbox class="check_bo_st"></f7-checkbox>
<span class="check_box_txt">화상(PC&모바일앱)</span>
</li>
<li class="week_fl howto_class_1">
<f7-checkbox class="check_bo_st"></f7-checkbox>
<span class="check_box_txt">화상(PC&모바일앱)</span>
</li>
</ul>
</div>
<div class="cf"></div>
<div class="week_selected">
<p class="coupon_txt">*전화번호는 내정보에서 변경 가능합니다.</p>
<!-- <p class="coupon_txt">*무료체험 신청 완료 후 화상 앱을 꼭 설치해주세요.</p> -->
</div>
<div class="befor_next_btn">
<f7-button fill class="before_btn">
<a class="link" @click="goPrevSlide()">이전</a>
</f7-button>
<f7-button fill class="submit_next_btn">
<a class="link" @click="goNextSlide(2)">다음</a>
</f7-button>
</div>
</div>
</div>
</f7-swiper-slide>
<!-- 무료체험 도구 선택 //-->
</f7-swiper>
<!-- popups -->
<f7-popup class="freeclassNotePopup" :opened="freeclassNoteOpened" @popup:closed="freeclassNoteOpened = false">
<freeClassNote></freeClassNote>
</f7-popup>
</f7-page>
</template>
<style scoped src="../../assets/css/signup_swiper.css"></style>
<style scoped src="../../assets/css/freetry_choice.css"></style>
<style scoped>
.list .item-inner {
display: flex !important;
}
</style>
<script>
import freeClassNote from '../signup/freeClassNote.vue'
import routes from '../../js/routes.js'
export default {
name: 'signUpProcess',
components: {
freeClassNote,
},
routes: routes,
data () {
return {
router: null,
mySwiperInstance: null,
freeclassNoteOpened: false,
selectedInterests: [],
selectedAge: '',
selectedLevel: '',
nickname:'',
phoneNumber: '',
totalTime: (5 * 60),
timerRunning: false,
interval: null,
authNumber: '',
authPhone: '',
userAuthInput: '',
messageSent: false,
}
},
methods: {
openCustomDialog() {
if(this.phoneNumber == '') {
this.$toast.warn({message:"핸드폰 번호를 입력 해 주세요", timeOut: 5000})
return false
}else if(this.userAuthInput == '') {
this.$toast.warn({message:"인증 번호를 입력 해 주세요", timeOut: 5000})
}
let loginId = this.phoneNumber
let loginPw = this.userAuthInput
const self = this;
self.$f7.dialog.preloader(this.nickname +'님의 튜터카드를 생성 중입니다..');
setTimeout(() => {
self.$f7.dialog.close();
self.$store.dispatch('LOGIN', { loginId, loginPw })
self.$rou
}, 2000);
},
addInterest(interest) {
if(this.selctedInterestsContains(interest)){
this.$delete(this.selectedInterests, this.selectedInterests.indexOf(interest))
}else {
this.selectedInterests.push(interest)
}
},
sendSms() {
if(/^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{4})[-. ]*(\d{4})(?: *x(\d+))?\s*$/.test(this.phoneNumber)) {
if(this.timerRunning) {
this.timerReset()
this.timerRun()
}else {
this.timerRun()
}
let messageVo = {
to: this.phoneNumber.replace(/-/gi, ''),
from: '',
subject: '',
contents: ''
}
this.axios.post(this.$store.state.domain + '/message/sms', messageVo).then((response) => {
if (response.data.success) {
this.messageSent = true
} else {
this.$toast.error('에러발생, 관리자에게 문의해주세요')
}
})
}else {
this.$toast.warn({message:"올바른 핸드폰 번호를 입력해주세요", timeOut: 5000})
}
},
requestAuth(authUserInput) {
this.axios.get(this.$store.state.domain + '/authPhone/getAuthNum/' + this.phoneNumber.replace(/-/gi, '')).then((response) => {
if(this.userAuthInput == response.data) { //success
// login process
}else { //auth fail
this.$toast.warn({message:"인증번호를 확인해 주세요", timeOut: 5000})
}
})
},
selctedInterestsContains(interest) {
return this.selectedInterests.indexOf(interest) > -1
},
setOptions(cdAlias) {
let options = []
this.$root.getCdDtlsByCdAlias(cdAlias).forEach(cdDtl => {
options.push({ value: cdDtl.cdDtlNo, name: cdDtl.cdDtlNm, code: cdDtl.cdDtlDesc})
})
return options
},
getSwiperInstance() {
this.mySwiperInstance = this.$f7.swiper.get('.signup_swiper')
},
goNextSlide(slideNum) {
if(slideNum == 1) {
if(this.selectedAge =='') {
this.$toast.warn({message:"연령대를 선택해주세요", timeOut: 5000})
return false
}
}
if(slideNum == 2) {
if(this.selectedLevel =='') {
this.$toast.warn({message:"현재 영어실력정도를 선택해주세요", timeOut: 5000})
return false
}
}
if(slideNum == 3) {
if(this.nickname =='') {
this.$toast.warn({message:"닉네임을 입력해주세요", timeOut: 5000})
return false
}
}
if(slideNum == 4) {
}
this.mySwiperInstance.slideNext()
this.$f7router.navigate('/schedule/')
},
goPrevSlide() {
this.mySwiperInstance.slidePrev()
},
timerRun() {
this.timerRunning = true
this.interval = setInterval(this.countdownTimer, 1000)
console.log(this.totalTime)
},
timerReset() {
this.timerRunning = false
clearInterval(this.interval)
this.totalTime = (5 * 60)
},
countdownTimer() {
if (this.timerRunning == true) {
this.totalTime--
}
if ( this.totalTime == 0 ) {
this.timerRunning = false
clearInterval(this.interval)
this.totalTime = (5 * 60)
}
console.log(this.totalTime)
}
},
computed: {
ages() {
return this.setOptions('AGE_GROUP')
},
time: function() {
return this.minutes + " : " + this.seconds
},
minutes: function() {
var min = Math.floor(this.totalTime / 60)
return min >= 10 ? min : '0' + min
},
seconds: function() {
var sec = this.totalTime - (this.minutes * 60)
return sec >= 10 ? sec : '0' + sec
},
filterDash: function(number) {
return number.replace(/-/gi, '')
}
},
mounted() {
this.getSwiperInstance()
this.$f7router.navigate('/schedule/')
}
};
</script><template>
<f7-page name="signupswiper">
<!-- nav bar -->
<f7-navbar>
<f7-link popup-close class="left"><a class="link sheet-close" href="#" style="color: #A4A4A4;"><f7-icon slot="media" f7="close" size="30px"></f7-icon></a></f7-link>
</f7-navbar>
<f7-swiper :params="{observer: true, observeParents: true, followFinger: false, shortSwipes: false, longSwipes: false}" class="signup_swiper">
<!--// 연령대 -->
<f7-swiper-slide>
<div class="progresbar color-green">
<p class="pro_padd">
<f7-progressbar :progress="12.5" id="demo-inline-progressbar"></f7-progressbar>
</p>
<div class="signup_st_center">
<h3>연령대가 어떻게 되세요?</h3>
<div class="age_total">
<ul class="selec_ul">
<li v-for="age in ages" :key="age.value" :class="{select_border: selectedAge == age.value}" class="age_class_1" @click="selectedAge == age.value? selectedAge = '':selectedAge = age.value">
<span class="check_age_txt">{{age.name}}</span>
</li>
</ul>
</div>
<div class="befor_next_btn">
<f7-button fill class="before_btn">
<a class="link" @click="goPrevSlide()">이전</a>
</f7-button>
<f7-button fill class="submit_next_btn">
<a class="link" @click="goNextSlide(1)">다음</a>
</f7-button>
</div>
</div>
</div>
</f7-swiper-slide>
<!-- 연령대 //-->
<!--// 영어실력 -->
<f7-swiper-slide>
<div class="progresbar color-green">
<p class="pro_padd">
<f7-progressbar :progress="25" id="demo-inline-progressbar"></f7-progressbar>
</p>
<div class="signup_st_center">
<h3>현재 영어실력은 어느 정도인가요?</h3>
<div class="age_total">
<ul class="age_en_level">
<li class="current_class_1" :class="{select_border: selectedLevel == 1}" @click="selectedLevel == 1? selectedLevel = '':selectedLevel = 1">
영어로 거의 한마디도 말하기 어렵다.
</li>
<li class="current_class_1" :class="{select_border: selectedLevel == 2}" @click="selectedLevel == 2? selectedLevel = '':selectedLevel = 2">
친숙한 일상 주제에 간단하게는 응답할 수 있다.
</li>
<li class="current_class_1" :class="{select_border: selectedLevel == 3}" @click="selectedLevel == 3? selectedLevel = '':selectedLevel = 3">
외국 여행지에서 필요한 일은 어느정도도 해결할 수 있다.
</li>
<li class="current_class_1" :class="{select_border: selectedLevel == 4}" @click="selectedLevel == 4? selectedLevel = '':selectedLevel = 4">
여러 주제에 대해 내 의견을 말할 수 있다.
</li>
</ul>
</div>
<div class="befor_next_btn">
<f7-button fill class="before_btn">
<a class="link" @click="goPrevSlide()">이전</a>
</f7-button>
<f7-button fill class="submit_next_btn">
<a class="link" @click="goNextSlide(2)">다음</a>
</f7-button>
</div>
</div>
</div>
</f7-swiper-slide>
<!-- 영어실력 //-->
<!--// 선생님발음선택 -->
<!-- <f7-swiper-slide>
<div class="progresbar color-green">
<p class="pro_padd">
<f7-progressbar :progress="37.5" id="demo-inline-progressbar"></f7-progressbar>
</p>
<div class="signup_st_center">
<h3>튜터카드를 어떤 발음으로 학습 하시겠어요?</h3>
<div class="age_total age_total1">
<ul class="selec_ul">
<li class="current_class_1">
미국식<img src="../../static/icons/usa-2887014_640.png" alt="미국국기">
</li>
<li class="current_class_1">
영국식<img src="../../static/icons/union-jack-1027898_640.png" alt="영국국기">
</li>
<li class="current_class_1">
호주식<img src="../../static/icons/australia-28586_640.png" alt="호주국기">
</li>
</ul>
</div>
<p class="change_signup_info">너무 고민하지 마세요~^^</p>
<p class="change_signup_info">언제든 내 정보에서 변경 가능합니다.</p>
<div class="befor_next_btn">
<f7-button fill class="before_btn">
<a class="link" @click="goPrevSlide()">이전</a>
</f7-button>
<f7-button fill class="submit_next_btn">
<a class="link" @click="goNextSlide(2)">다음</a>
</f7-button>
</div>
</div>
</div>
</f7-swiper-slide> -->
<!-- 선생님발음선택 //-->
<!--// 정보입력 -->
<f7-swiper-slide>
<div class="progresbar color-green">
<p class="pro_padd">
<f7-progressbar :progress="50" id="demo-inline-progressbar"></f7-progressbar>
</p>
<div class="signup_st_center">
<h3>닉네임을 입력해 주시겠어요?</h3>
<f7-list inline-labels no-hairlines-md>
<f7-list-input :value="nickname" @input="nickname = $event.target.value" label="닉네임" type="text" placeholder="선생님이 부를 이름입니다." clear-button>
</f7-list-input>
</f7-list>
<p class="change_signup_info">너무 고민하지 마세요~^^</p>
<p class="change_signup_info">언제든 내 정보에서 변경 가능합니다.</p>
<div class="befor_next_btn">
<f7-button fill class="before_btn">
<a class="link" @click="goPrevSlide()">이전</a>
</f7-button>
<f7-button fill class="submit_next_btn">
<a class="link" @click="goNextSlide(3)">다음</a>
</f7-button>
</div>
</div>
</div>
</f7-swiper-slide>
<!-- 정보입력 //-->
<!--// 관심사 -->
<f7-swiper-slide>
<div class="progresbar color-green">
<p class="pro_padd">
<f7-progressbar :progress="62.5" id="demo-inline-progressbar"></f7-progressbar>
</p>
<div class="signup_st_center">
<h3>Sora님의 관심사를 모두 선택해주세요.</h3>
<f7-block>
<f7-row>
<f7-col class="interest_ting1">
<f7-block-header>자기관리</f7-block-header>
<f7-chip outline text="뷰티" :class="{select_bg: selctedInterestsContains('뷰티')}" @click="addInterest('뷰티')"></f7-chip>
<f7-chip outline text="다이어트" :class="{select_bg: selctedInterestsContains('다이어트')}" @click="addInterest('다이어트')"></f7-chip>
<f7-chip outline text="피트니스" :class="{select_bg: selctedInterestsContains('피트니스')}" @click="addInterest('피트니스')"></f7-chip>
<f7-chip outline text="패션" :class="{select_bg: selctedInterestsContains('패션')}" @click="addInterest('패션')"></f7-chip>
</f7-col>
<f7-col class="interest_ting2">
<f7-block-header>자연</f7-block-header>
<f7-chip outline text="동물" :class="{select_bg: selctedInterestsContains('동물')}" @click="addInterest('동물')"></f7-chip>
<f7-chip outline text="식물" :class="{select_bg: selctedInterestsContains('식물')}" @click="addInterest('식물')"></f7-chip>
<f7-chip outline text="환경" :class="{select_bg: selctedInterestsContains('환경')}" @click="addInterest('환경')"></f7-chip>
<f7-chip outline text="우주" :class="{select_bg: selctedInterestsContains('우주')}" @click="addInterest('우주')"></f7-chip>
</f7-col>
<f7-col class="interest_ting3">
<f7-block-header>취미</f7-block-header>
<f7-chip outline text="자동차" :class="{select_bg: selctedInterestsContains('자동차')}" @click="addInterest('자동차')"></f7-chip>
<f7-chip outline text="스포츠" :class="{select_bg: selctedInterestsContains('스포츠')}" @click="addInterest('스포츠')"></f7-chip>
<f7-chip outline text="여행" :class="{select_bg: selctedInterestsContains('여행')}" @click="addInterest('여행')"></f7-chip>
<f7-chip outline text="사진" :class="{select_bg: selctedInterestsContains('사진')}" @click="addInterest('사진')"></f7-chip>
<f7-chip outline text="미술" :class="{select_bg: selctedInterestsContains('미술')}" @click="addInterest('미술')"></f7-chip>
<f7-chip outline text="음악" :class="{select_bg: selctedInterestsContains('음악')}" @click="addInterest('음악')"></f7-chip>
<f7-chip outline text="요리" :class="{select_bg: selctedInterestsContains('요리')}" @click="addInterest('요리')"></f7-chip>
<f7-chip outline text="인테리어" :class="{select_bg: selctedInterestsContains('인테리어')}" @click="addInterest('인테리어')"></f7-chip>
<f7-chip outline text="게임" :class="{select_bg: selctedInterestsContains('게임')}" @click="addInterest('게임')"></f7-chip>
<f7-chip outline text="기기" :class="{select_bg: selctedInterestsContains('기기')}" @click="addInterest('기기')"></f7-chip>
<f7-chip outline text="연예인" :class="{select_bg: selctedInterestsContains('연예인')}" @click="addInterest('연예인')"></f7-chip>
<f7-chip outline text="전시공연" :class="{select_bg: selctedInterestsContains('전시공연')}" @click="addInterest('전시공연')"></f7-chip>
</f7-col>
<f7-col class="interest_ting4">
<f7-block-header>자기개발</f7-block-header>
<f7-chip outline text="입시" :class="{select_bg: selctedInterestsContains('입시')}" @click="addInterest('입시')"></f7-chip>
<f7-chip outline text="취업" :class="{select_bg: selctedInterestsContains('취업')}" @click="addInterest('취업')"></f7-chip>
<f7-chip outline text="일" :class="{select_bg: selctedInterestsContains('일')}" @click="addInterest('일')"></f7-chip>
<f7-chip outline text="사업" :class="{select_bg: selctedInterestsContains('사업')}" @click="addInterest('사업')"></f7-chip>
<f7-chip outline text="주식" :class="{select_bg: selctedInterestsContains('주식')}" @click="addInterest('주식')"></f7-chip>
<f7-chip outline text="부동산" :class="{select_bg: selctedInterestsContains('부동산')}" @click="addInterest('부동산')"></f7-chip>
<f7-chip outline text="유학" :class="{select_bg: selctedInterestsContains('유학')}" @click="addInterest('유학')"></f7-chip>
<f7-chip outline text="이민" :class="{select_bg: selctedInterestsContains('이민')}" @click="addInterest('이민')"></f7-chip>
<f7-chip outline text="성공" :class="{select_bg: selctedInterestsContains('성공')}" @click="addInterest('성공')"></f7-chip>
</f7-col>
</f7-row>
<f7-row>
<f7-col class="interest_ting5">
<f7-block-header>사람</f7-block-header>
<f7-chip outline text="정치" :class="{select_bg: selctedInterestsContains('정치')}" @click="addInterest('정치')"></f7-chip>
<f7-chip outline text="철학" :class="{select_bg: selctedInterestsContains('철학')}" @click="addInterest('철학')"></f7-chip>
<f7-chip outline text="과학" :class="{select_bg: selctedInterestsContains('과학')}" @click="addInterest('과학')"></f7-chip>
<f7-chip outline text="종교" :class="{select_bg: selctedInterestsContains('종교')}" @click="addInterest('종교')"></f7-chip>
<f7-chip outline text="기술" :class="{select_bg: selctedInterestsContains('기술')}" @click="addInterest('기술')"></f7-chip>
</f7-col>
<f7-col class="interest_ting6">
<f7-block-header>기타</f7-block-header>
<f7-chip outline text="연애" :class="{select_bg: selctedInterestsContains('연애')}" @click="addInterest('연애')"></f7-chip>
<f7-chip outline text="결혼" :class="{select_bg: selctedInterestsContains('결혼')}" @click="addInterest('결혼')"></f7-chip>
<f7-chip outline text="육아" :class="{select_bg: selctedInterestsContains('육아')}" @click="addInterest('육아')"></f7-chip>
<f7-chip outline text="자녀교육" :class="{select_bg: selctedInterestsContains('자녀교육')}" @click="addInterest('자녀교육')"></f7-chip>
<f7-chip outline text="인간관계" :class="{select_bg: selctedInterestsContains('인간관계')}" @click="addInterest('인간관계')"></f7-chip>
</f7-col>
<f7-col class="interest_ting7">
<f7-block-header>행복</f7-block-header>
<f7-chip outline text="건강" :class="{select_bg: selctedInterestsContains('건강')}" @click="addInterest('건강')"></f7-chip>
<f7-chip outline text="봉사" :class="{select_bg: selctedInterestsContains('봉사')}" @click="addInterest('봉사')"></f7-chip>
<f7-chip outline text="기부" :class="{select_bg: selctedInterestsContains('기부')}" @click="addInterest('기부')"></f7-chip>
</f7-col>
</f7-row>
</f7-block>
<div class="befor_next_btn">
<f7-button fill class="before_btn">
<a class="link" @click="goPrevSlide()">이전</a>
</f7-button>
<f7-button fill class="submit_next_btn">
<a class="link" @click="goNextSlide(2)">다음</a>
</f7-button>
</div>
</div>
</div>
</f7-swiper-slide>
<!-- 관심사 //-->
<!--// 회원가입_휴대폰 -->
<f7-swiper-slide>
<div class="progresbar color-green">
<p class="pro_padd">
<f7-progressbar :progress="75" id="demo-inline-progressbar"></f7-progressbar>
</p>
<div class="signup_st_center">
<h3>아미고톡은 휴대폰 번호로 가입해요. 번호는 안전하게 보관되며 어디에도 공개되지 않아요.</h3>
<f7-list inline-labels no-hairlines-md>
<f7-list-input :value="phoneNumber" @input="phoneNumber = $event.target.value" label="" type="tel" placeholder="휴대폰 번호" clear-button>
</f7-list-input>
</f7-list>
<f7-button fill color="white" class="get_agree_btn" @click="sendSms()">
<a class="link">인증문자 받기</a>
</f7-button>
<f7-block v-html="time" v-if="timerRunning"></f7-block>
<f7-list inline-labels no-hairlines-md>
<f7-list-input :value="userAuthInput" @input="userAuthInput = $event.target.value" label="" type="tel" placeholder="인증번호" clear-button>
</f7-list-input>
</f7-list>
<p class="change_signup_info">
신청을 클릭함으로써<br>
<span class="under_st"><a href="#">이용약관</a></span>과
<span class="under_st"><a href="#">개인정보취급방침</a></span>에 동의합니다.
</p>
<div class="befor_next_btn">
<f7-button fill class="before_btn">
<a class="link" @click="goPrevSlide()">이전</a>
</f7-button>
<f7-button fill class="submit_next_btn">
<a class="link" @click="openCustomDialog()">신청</a>
</f7-button>
</div>
</div>
</div>
</f7-swiper-slide>
<!-- 회원가입_휴대폰 //-->
</f7-swiper>
<!-- popups -->
<f7-popup class="freeclassNotePopup" :opened="freeclassNoteOpened" @popup:closed="freeclassNoteOpened = false">
<freeClassNote></freeClassNote>
</f7-popup>
</f7-page>
</template>
<style scoped src="../../assets/css/signup_swiper.css"></style>
<style scoped src="../../assets/css/freetry_choice.css"></style>
<style scoped>
.list .item-inner {
display: flex !important;
}
</style>
<script>
import freeClassNote from '../signup/freeClassNote.vue'
import routes from '../../js/routes.js'
export default {
name: 'signUpProcess',
components: {
freeClassNote,
},
routes: routes,
data () {
return {
router: null,
mySwiperInstance: null,
freeclassNoteOpened: false,
selectedInterests: [],
selectedAge: '',
selectedLevel: '',
nickname:'',
phoneNumber: '',
totalTime: (5 * 60),
timerRunning: false,
interval: null,
authNumber: '',
authPhone: '',
userAuthInput: '',
messageSent: false,
}
},
methods: {
openCustomDialog() {
if(this.phoneNumber == '') {
this.$toast.warn({message:"핸드폰 번호를 입력 해 주세요", timeOut: 5000})
return false
}else if(this.userAuthInput == '') {
this.$toast.warn({message:"인증 번호를 입력 해 주세요", timeOut: 5000})
}
let loginId = this.phoneNumber
let loginPw = this.userAuthInput
const self = this;
self.$f7.dialog.preloader(this.nickname +'님의 튜터카드를 생성 중입니다..');
setTimeout(() => {
self.$f7.dialog.close();
self.$store.dispatch('LOGIN', { loginId, loginPw })
self.$rou
}, 2000);
},
addInterest(interest) {
if(this.selctedInterestsContains(interest)){
this.$delete(this.selectedInterests, this.selectedInterests.indexOf(interest))
}else {
this.selectedInterests.push(interest)
}
},
sendSms() {
if(/^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{4})[-. ]*(\d{4})(?: *x(\d+))?\s*$/.test(this.phoneNumber)) {
if(this.timerRunning) {
this.timerReset()
this.timerRun()
}else {
this.timerRun()
}
let messageVo = {
to: this.phoneNumber.replace(/-/gi, ''),
from: '',
subject: '',
contents: ''
}
this.axios.post(this.$store.state.domain + '/message/sms', messageVo).then((response) => {
if (response.data.success) {
this.messageSent = true
} else {
this.$toast.error('에러발생, 관리자에게 문의해주세요')
}
})
}else {
this.$toast.warn({message:"올바른 핸드폰 번호를 입력해주세요", timeOut: 5000})
}
},
requestAuth(authUserInput) {
this.axios.get(this.$store.state.domain + '/authPhone/getAuthNum/' + this.phoneNumber.replace(/-/gi, '')).then((response) => {
if(this.userAuthInput == response.data) { //success
// login process
}else { //auth fail
this.$toast.warn({message:"인증번호를 확인해 주세요", timeOut: 5000})
}
})
},
selctedInterestsContains(interest) {
return this.selectedInterests.indexOf(interest) > -1
},
setOptions(cdAlias) {
let options = []
this.$root.getCdDtlsByCdAlias(cdAlias).forEach(cdDtl => {
options.push({ value: cdDtl.cdDtlNo, name: cdDtl.cdDtlNm, code: cdDtl.cdDtlDesc})
})
return options
},
getSwiperInstance() {
this.mySwiperInstance = this.$f7.swiper.get('.signup_swiper')
},
goNextSlide(slideNum) {
if(slideNum == 1) {
if(this.selectedAge =='') {
this.$toast.warn({message:"연령대를 선택해주세요", timeOut: 5000})
return false
}
}
if(slideNum == 2) {
if(this.selectedLevel =='') {
this.$toast.warn({message:"현재 영어실력정도를 선택해주세요", timeOut: 5000})
return false
}
}
if(slideNum == 3) {
if(this.nickname =='') {
this.$toast.warn({message:"닉네임을 입력해주세요", timeOut: 5000})
return false
}
}
if(slideNum == 4) {
}
this.mySwiperInstance.slideNext()
this.$f7router.navigate('/schedule/')
},
goPrevSlide() {
this.mySwiperInstance.slidePrev()
},
computed: {
ages() {
return this.setOptions('AGE_GROUP')
},
time: function() {
return this.minutes + " : " + this.seconds
},
minutes: function() {
var min = Math.floor(this.totalTime / 60)
return min >= 10 ? min : '0' + min
},
seconds: function() {
var sec = this.totalTime - (this.minutes * 60)
return sec >= 10 ? sec : '0' + sec
},
filterDash: function(number) {
return number.replace(/-/gi, '')
}
},
mounted() {
this.getSwiperInstance()
this.$f7router.navigate('/schedule/')
}
};
</script>This should work. Probably some issue in code somewhere else, do you see any errors in console?
sorry that was a typo it does not work with $f7router
oh, the code above works because i just put this.$f7router.navigate(’/schedule/’) in mounted
so it is redirected to ‘/schedule/’ when the page is loaded
but i just could not figure out how to use it in function like below.
If i do
goNextSlide(slideNum) {
this.$f7router.navigate('/schedule/')
}
nothing happens, and there is no error in console,
seems like i should get the router instance when it is mounted but i do not know exactly how.
any idea?
thanks
Hard to say without context, but if this is a real code, then you already navigated to that page /schedule/ in your mounted hook, means it can’t navigate to page with same url again. To disable such behavior you need to set allowDuplicateUrls: true View’s parameter https://framework7.io/docs/view.html#view-parameters