setInterval 예제1
const token_check_time = 60000
if (this.$user.isLogin === true){
this.$tokenAxios.get('/user/getUserInfo')
setInterval(()=>{
this.$tokenAxios.get('/user/getUserInfo')
}, token_check_time)
}
this.passwordAuthProc = setInterval(()=>{
console.log("interval");
function numberFill(number){
return ("0"+number).substr(-2,2);
}
this.passwordAuthTime.date = new Date(this.passwordAuthTime.date.getTime()-1000);
this.passwordAuthTime.msg = `${numberFill(this.passwordAuthTime.date.getMinutes())}:${numberFill(this.passwordAuthTime.date.getSeconds())}`;
if(this.passwordAuthTime.msg === "00:00"){
this.sendCodeState= false;
clearInterval(this.passwordAuthProc);
}
}, 1000);
setInterval 예제2
<template>
<div id="point">
<div class="point_head">
<div class="point_step font_youandi">포인트 적립</div>
<div class="point_title font_youandi">휴대전화번호를 입력해주세요</div>
<img class="closeIcon" :src="close_icon" alt="close" @click="back()" />
</div>
<div class="point_content">
<!-- 좌측 컨텐츠 -->
<div class="point_guid">
<div class="guid_title font_youandi">입력한 번호로 포인트가 지급됩니다.</div>
<div class="guid_next">
<div class="guid_next_label font_youandi">NEXT.</div>
<div class="guid_next_text font_youandi">입력하신 번호로 게이즈샵 매너지님이<br> 직접 포인트 지급을 해드립니다.</div>
</div>
<img class="logo" :src="logo" alt="logo" />
</div>
<!-- 넘패드 -->
<div class="point_numpad">
<div class="numpad_result font_galano">{{fullNumber}}</div>
<table class="numpad_buttonWrap font_galano">
<tr>
<td @click="number(1)">1</td>
<td @click="number(2)">2</td>
<td @click="number(3)">3</td>
</tr>
<tr>
<td @click="number(4)">4</td>
<td @click="number(5)">5</td>
<td @click="number(6)">6</td>
</tr>
<tr>
<td @click="number(7)">7</td>
<td @click="number(8)">8</td>
<td @click="number(9)">9</td>
</tr>
<tr>
<td @click="deletePhone()">
<img :src="delete_icon" alt="delete" />
</td>
<td @click="number(0)">0</td>
<td class="auth_submit font_youandi" @click="send_point()">입력</td>
</tr>
</table>
</div>
</div>
<!-- // 포인트 지급 진행중 -->
<div class="wating_modal" v-if="send_state === 'wating'">
<div class="wating_modal_contents font_youandi">포인트 지급이 진행중입니다.<br>잠시만 기다려주세요</div>
</div>
<!-- // 포인트 지급 취소 -->
<div class="cancel_modal" v-if="send_state === 'cancle'">
<img class="cancle_close" :src="close_icon_white" alt="close_white" @click="back()" />
<div class="cancle_modal_contents font_youandi">포인트 지급이 취소되었습니다.<br>다시 시도해주세요</div>
</div>
<!-- // 포인트 지급 완료 -->
<div class="complete_modal" v-if="send_state === 'complete'">
<div class="complete_modal_head">
<img :src="logo_white" alt="logo_white" />
</div>
<img class="complete_close" :src="close_icon_white" alt="close_white" @click="back()" />
<div class="complete_modal_contents">
<div class="complete_modal_contents_point font_youandi">{{ point }}P</div>
<div class="complete_modal_contents_text font_youandiM">적립이 완료되었습니다.</div>
</div>
<div class="complete_modal_total">
<div class="font_youandiM">total.</div>
<div>
<span class="complete_modal_total_point font_youandi">{{ total_point }}</span><span class="font_youandiM">P</span>
</div>
</div>
</div>
</div>
</template>
<script>
import { Console } from 'console';
import { mapState } from 'vuex'
export default {
data() {
return {
userNumber : '',
interval_state: false,
check_interval: null,
phone:'',
displayPhoneNumber :'',
fullNumber:'', //store
delNum:'',
close_icon: require('~/assets/images/icons/close.svg'),
close_icon_white: require('~/assets/images/icons/close_white.svg'),
delete_icon: require('~/assets/images/icons/delete.svg'),
logo: require('~/assets/images/logo_black.png'),
logo_white: require('~/assets/images/logo_white.png'),
send_state: 'default', // default = 기본 상태, wating = 지급 진행 중, complete = 적립 완료,
request_point_id: null,
cellphone: null,
point:'',
total_point:'',
}
},
computed :{
...mapState(['main_name', 'sub_name', 'is_login', 'username','user_data']),
},
mounted(){
this.fullNumber='';
console.log(this.displayPhoneNumber,'displayPhoneNumber')
console.log(this.user_data,'this.user_data@@@ ')
console.log(this.main_name, 'main_name')
console.log(this.sub_name, 'sub_name')
console.log(this.is_login, '관리자 is_login')
},
methods: {
show_common_modal(title, type = 'alert', func = null){
this.$nuxt.$emit('popup', {
state: true,
title,
type,
func
})
},
back(){
this.$router.push('/user/dashboard')
return;
},
number(num){
this.phone = num
this.displayPhoneNumber+=this.phone
if(this.displayPhoneNumber.length<=3){
this.fullNumber = this.displayPhoneNumber
}
else{
if(this.displayPhoneNumber.length<=7){
this.fullNumber = this.displayPhoneNumber.substr(0,3) + '-' + this.displayPhoneNumber.substr(3,4)
}else{
this.fullNumber = this.displayPhoneNumber.substr(0,3) + '-' + this.displayPhoneNumber.substr(3,4) + '-' + this.displayPhoneNumber.substr(7,4)
}
}
},
deletePhone(){
this.displayPhoneNumber = '';
this.fullNumber=''
},
//유저 1개 가져오기 테스트
async send_point(){
if(!this.displayPhoneNumber){
this.show_common_modal('핸드폰 번호를 입력하세요.');
return
}
this.userNumber = this.fullNumber
try {
const res = await this.$axios.get('/myPage/getAllListOfCustomerInformation/', {params : { cellphone : this.userNumber }})
const searchUser = res.data.data
const member_id = searchUser.member_id;
const member_name = searchUser.name;
const member_cellphone = searchUser.cellphone;
this.cellphone = searchUser.cellphone;
if(!!this.userNumber && !!member_id){
const recheckPoint = await this.$axios.get('/myPage/recheckPoint', { params :{phone : member_cellphone}});
console.log(recheckPoint,'recheckPoint')
if(recheckPoint.data.success == true){
this.send_state = 'wating';
const requestPoint = await this.$axios.post('/myPage/requestPoint', {
member_id : member_id, // 포인트 적립요청한 번호 주인
name : member_name, // 포인트 적립요청한 번호 주인
phone : member_cellphone, // 포인트 적립요청한 번호 주인
main_name : this.main_name, //store 값
sub_name : this.sub_name, //store 값
status:'R',
})
this.request_point_id = requestPoint.data.data;
this.start_timer(requestPoint, member_cellphone)
}
}
} catch (error) {
if(error.response !== undefined){
this.show_common_modal(error.response.data.message);
this.displayPhoneNumber = '';
this.fullNumber=''
}
}
},
async checkFunc(){
if(!this.interval_state){
await this.$axios.get('/myPage/checkPointResult', {
params :{
id : this.request_point_id,
phone : this.cellphone,
}
}).then(res => {
if(res.data.data.status == 'F'){
this.displayPhoneNumber = '';
this.fullNumber='';
this.send_state = 'complete';
this.point = Math.floor(Number(res.data.data.point)).toLocaleString() ;
this.total_point = Math.floor(Number(res.data.data.total_point)).toLocaleString() ;
this.end_timer();
}
if(res.data.data.status == 'C'){
this.displayPhoneNumber = '';
this.fullNumber='';
this.send_state = 'cancle';
this.end_timer();
}
}).catch(error => {
if(error.response == undefined){ // 토큰만료시 에러
console.log('AAAAAAA')
this.displayPhoneNumber = '';
this.fullNumber=''
this.end_timer();
}
if(error.response.data.message === '적립요청이 들어오지 않았습니다.'){
console.log('BBBBBBBBB')
this.show_common_modal(error.response.data.message)
this.send_state = 'default';
this.displayPhoneNumber = '';
this.fullNumber=''
this.end_timer();
}
});
}
},
start_timer(){
this.interval_state = false;
const check_time = 3000; // 3초
this.check_interval = setInterval(this.checkFunc, check_time)
},
end_timer(){
console.log('end_timer@@@@@@@@@@@@')
this.interval_state = true;
clearInterval(this.check_interval);//
},
}
}
</script>
setInterval 예제3
<template>
<div id="admin_user_info" class="common_admin_container">
<div class="request_count" v-if="!!request_count_value">{{request_count_value}}초 후 회원정보를 갱신합니다.</div>
<div class="user_infoWrapper">
<div class="left_contents">
<img class="card_icon" :src="card_icon" alt="card_icon" />
<div class="left_contents_mid">
<div class="mid_left">
<div class="user_name font_youandi">{{ user_data.name }}</div>
<div class="user_phone font_youandiM">
<div>{{ user_data.cellphone_divided[0] }}.</div>
<div>{{ user_data.cellphone_divided[1] }}.</div>
<div>{{ user_data.cellphone_divided[2] }}</div>
</div>
</div>
<div class="mid_right">
<div class="common_button user_modify font_youandi" @click="modal_show('info')">정보수정</div>
<div class="common_button font_youandi">카톡보내기</div>
<div class="common_button font_youandi" @click="modal_show('message')">문자보내기</div>
</div>
</div>
<div class="user_account font_youandi" style="margin-bottom:15px;">
<div class="user_account_title">ID</div>
<div class="user_account_content">{{ user_data.member_id }}</div>
</div>
<div class="user_account font_youandi">
<div class="user_account_title">E_Mail</div>
<div class="user_account_content">{{ user_data.email || '등록된 이메일이 없습니다.' }}</div>
</div>
<div class="user_tags">
<div style="width:100%; text-align:center; color:#7d7d7d" v-if="!user_data.memos.length">작성된 메모가 없습니다.</div>
<div class="user_tags_item font_youandi" v-for="(item, index) in user_data.memos" :key="index">#{{ item.memo }}</div>
</div>
<div class="user_createdAt">
<div class="user_createdAt_item font_youandi" style="margin-bottom:5px;">
<div class="user_createdAt_title">등록일</div>
<div>{{ user_data.created_date }}</div>
</div>
<div class="user_createdAt_item font_youandi">
<div class="user_createdAt_title">{{ `${$store.state.main_name} ${$store.state.sub_name}` }}</div>
</div>
</div>
</div>
<div class="right_contents">
<div class="right_contents_inner">
<div class="close_icon">
<img :src="close_icon" alt="close" @click="clear_count('route')" />
</div>
<div class="point_box right_box" style="margin-bottom:17px;">
<div class="right_box_title font_youandiM">포인트</div>
<div class="right_box_number font_youandiM">{{ Number(user_data.available_points).toLocaleString() }}</div>
<div class="right_box_buttons">
<div class="common_button font_youandi" style="margin-top:10px;" @click="modal_show('point')">적립 수정</div>
<div class="common_button font_youandi" @click="retrievePoints">내역 보기</div>
</div>
</div>
<div class="point_box right_box">
<div class="right_box_title font_youandiM">쿠폰</div>
<div class="right_box_number font_youandiM">{{ user_coupons.length || 0 }}</div>
<div class="right_box_buttons">
<div class="common_button font_youandi" style="margin-top:10px;" @click="modal_show('coupon')">쿠폰</div>
<div class="common_button font_youandi" @click="modal_show('coupon_add')">쿠폰 추가</div>
</div>
</div>
<div class="offline_list">
<div class="offline_list_head">
<div class="offline_list_head_title font_youandi">오프라인 구매내역 <span>({{ user_data.product_list.length || 0 }})</span></div>
<div class="common_button font_youandi" @click="modal_show('product_add')">구매추가</div>
</div>
<div v-if="!user_data.product_list.length" class="product_empty">오프라인 구매내역이 없습니다.</div>
<table class="offline_table font_youandiM" v-if="!!user_data.product_list.length">
<colgroup>
<col width="40%" />
<col width="40%" />
<col width="20%" />
</colgroup>
<thead>
<tr>
<th>매장 / 날짜</th>
<th>내용</th>
<th>금액</th>
</tr>
</thead>
<tbody>
<tr class="table_list" v-for="(item, index) in paginatedData" :key="index">
<td>{{ item.store_main }}_{{ item.store_sub }}_{{ item.created_at }}</td>
<td>{{ item.content }}</td>
<td>+{{ item.price.toLocaleString() }}원</td>
</tr>
</tbody>
</table>
<div class="common_pagination font_youandi" v-if="!!user_data.product_list.length">
<button :class="{'common_pagination_disabled' : pageNum === 0}" :disabled="pageNum === 0" @click="prevPage">이전</button>
<span>{{ pageNum + 1 }} / {{ pageCount || 0 }}</span>
<button :class="{'common_pagination_disabled' : pageNum + 1 === pageCount}" :disabled="pageNum + 1 === pageCount" @click="nextPage">다음</button>
</div>
</div>
</div>
</div>
</div>
<!-- 여기부터 모달 -->
<!-- 포인트 사용/추가 모달 -->
<div class="point_modal common_modal_wrapper font_youandi" v-if="!!modal_state.point">
<div class="common_modal_title cursor_pointer" style="margin-bottom:25px;" :class="{ 'common_modal_inActive': total_data.point.point_type === 'add' }" @click="total_data.point.point_type = 'use'">포인트 사용</div>
<div class="common_modal_title cursor_pointer" style="margin-top:50px;" :class="{ 'common_modal_inActive': total_data.point.point_type === 'use' }" @click="total_data.point.point_type = 'add'">포인트 추가</div>
<img class="common_modal_close" :src="close_icon" alt="close" @click="modal_hide" />
<!-- 포인트 사용/추가 -->
<div class="modal_contents">
<div class="modal_contents_title">내용</div>
<textarea class="modal_textAread" placeholder="내용입력" v-model="total_data.point.content" style="height:300px" />
<div class="message_bottom">
<div class="message_check font_youandi"></div>
<div class="message_count font_youandiM"><span :class="{ 'text_over': cal_point_length > 60}">{{ cal_point_length }}</span>/ 60bytes</div>
</div>
<div class="modal_input_calc">
<div class="modal_input_calc_sign">{{ `${total_data.point.point_type === 'use' ? '-' : '+'}` }}</div>
<input type="number" class="modal_input" placeholder="0" v-model="total_data.point.amount" />
</div>
<div class="modal_button" @click="point_handler()">포인트 수정하기</div>
</div>
</div>
<!-- 포인트 추가확인 모달 -->
<div class="add_complete_modal" v-if="!!modal_state.add_complete">
<div class="modal_contents font_youandi">
<div class="modal_contents_title">포인트 추가</div>
<img class="modal_close" :src="close_icon" alt="close" @click="modal_hide" />
<div class="modal_content">{{ total_data.point.content }}</div>
<div class="modal_point">{{ Number(total_data.point.amount).toLocaleString() }}P</div>
<div class="modal_total_point">total {{ (Number(user_data.total_points) + Number(total_data.point.amount)).toLocaleString() }}P</div>
<div class="modal_complete" @click="add_complete">확인 완료하기</div>
</div>
<div class="common_dim" @click="modal_hide"></div>
</div>
<!-- 포인트 내역 모달 -->
<div class="point_list_modal common_modal_wrapper font_youandi" v-if="!!modal_state.point_history">
<div class="common_modal_title cursor_pointer" style="margin-bottom:25px;">포인트 내역<span style="font-weight:400;">({{ user_data.point_history.length || 0 }})</span></div>
<div style="position:absolute; left:25px; top:90px; color:#a5a5a5">최근 3개월 최대 100개의 내역만 표시됩니다.</div>
<img class="common_modal_close" :src="close_icon" alt="close" @click="modal_hide" />
<div class="modal_contents">
<div>
<point-list :items="user_data.point_history" />
</div>
<div class="modal_button" style="width:calc(100% - 50px);position:absolute; left:25px; bottom:50px;" @click="modal_hide">확인완료</div>
</div>
</div>
<!-- 회원정보 수정 모달 -->
<div class="modify_info common_modal_wrapper font_youandi" v-if="!!modal_state.info">
<div class="common_modal_title cursor_pointer" style="margin-bottom:25px;">회원정보 수정</div>
<img class="common_modal_close" :src="close_icon" alt="close" @click="modal_hide" />
<div class="modal_contents">
<input type="text" v-model="user_data.name" disabled class="modal_input common_disabled" style="margin-top:0;" />
<input type="number" v-model="user_data.cellphone" class="modal_input font_youandiM" placeholder="전화번호 입력" />
<input type="text" v-model="user_data.email" class="modal_input font_youandiM" placeholder="이메일 입력" />
<div class="modify_info_memo">
<div class="modal_contents_title">메모 추가</div>
<input type="text" placeholder="내용입력" v-model="total_data.memo" />
</div>
<div class="memo_list">
<div class="memo_list_item" v-for="(item, index) in user_data.memos" :key="index">
<img :src="close_icon" alt="memo_delete" @click="deleteCustomerMemo(item.memo_no)" />
<div class="memo_list_item_content">#{{ item.memo }}</div>
</div>
</div>
<div class="modal_button" @click="updateCustomerInformation">회원정보 수정하기</div>
</div>
</div>
<!-- 쿠폰 리스트 모달 -->
<div class="coupon_list_modal common_modal_wrapper font_youandi" v-if="!!modal_state.coupon">
<div class="common_modal_title cursor_pointer" style="margin-bottom:25px;">사용 가능 쿠폰<span style="font-weight:400;">({{ user_data.coupons.length || 0 }})</span></div>
<img class="common_modal_close" :src="close_icon" alt="close" @click="modal_hide" />
<div class="modal_contents">
<ul class="coupon_list">
<li v-for="(item, index) in user_data.coupons" :key="index">
<div class="coupon_list_img">
<v-img :src="item.coupon_image_path || default_img" alt="coupon_image" width="90" height="90" />
</div>
<div class="coupon_list_contents">
<div class="coupon_list_contents_type">{{ item.coupon_name }}</div>
<div class="coupon_list_contents_content">{{ item.benefit_price ? `${ Math.floor(item.benefit_price) }원 할인` : `${ Math.floor(item.benefit_percentage) }% 할인`}}</div>
<div class="coupon_list_contents_date">
<span>{{ item.available_date }}</span>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- 쿠폰 추가 모달 -->
<div class="coupon_add_modal common_modal_wrapper font_youandi" v-if="!!modal_state.coupon_add">
<div class="common_modal_title cursor_pointer" style="margin-bottom:25px;">쿠폰 추가 발급</div>
<img class="common_modal_close" :src="close_icon" alt="close" @click="modal_hide" />
<div class="modal_contents">
<div class="coupon_select">
<img :src="select_arrow_big" alt="select_arrow" />
<select v-model="selected_coupon">
<option selected value="">쿠폰 종류</option>
<option v-for="(item, index) in shop_coupons" :key="index" :value="item">{{ item.coupon_name }}</option>
</select>
</div>
<ul class="coupon_list" v-if="selected_coupon">
<li>
<div class="coupon_list_img">
<v-img :src="selected_coupon.coupon_image_path || default_img" alt="coupon_image" width="90" height="90" />
</div>
<div class="coupon_list_contents">
<div class="coupon_list_contents_type">{{ selected_coupon.coupon_name }}</div>
<div class="coupon_list_contents_content">{{ selected_coupon.benefit_price ? `${ Math.floor(selected_coupon.benefit_price) }원 할인` : `${ Math.floor(selected_coupon.benefit_percentage) }% 할인`}}</div>
<div class="coupon_list_contents_date">
<span>{{ selected_coupon.available_date }}</span>
</div>
</div>
</li>
</ul>
<div class="modal_button" style="width:calc(100% - 50px);position:absolute; left:25px; bottom:50px;" @click="createCouponIssuanceHistory">쿠폰 발급하기</div>
</div>
</div>
<!-- 문자 보내기 모달 -->
<div class="message_modal common_modal_wrapper font_youandi" v-if="!!modal_state.message">
<div class="common_modal_title cursor_pointer" style="margin-bottom:25px;" :class="{ 'common_modal_inActive': total_data.message.message_type === 'LMS' }" @click="total_data.message.message_type = 'SMS'">단문 문자</div>
<div class="common_modal_title cursor_pointer" style="margin-top:50px;" :class="{ 'common_modal_inActive': total_data.message.message_type === 'SMS' }" @click="total_data.message.message_type = 'LMS'">장문 문자</div>
<img class="common_modal_close" :src="close_icon" alt="close" @click="modal_hide" />
<!-- 문자 보내기 내용 -->
<div class="modal_contents">
<div class="modal_contents_title">문자 내용</div>
<textarea class="modal_textAread" placeholder="내용입력" v-model="total_data.message.content" />
<div class="message_bottom">
<div class="message_check font_youandi">
<v-checkbox v-model="total_data.message.ad" color="black" />
<span>광고성 정보</span>
</div>
<div class="message_count font_youandiM"><span :class="{ 'text_over': (total_data.message.message_type === 'SMS' && cal_msg_length > 90) || (total_data.message.message_type === 'LMS' && cal_msg_length > 2000) }">{{ cal_msg_length }}</span>/{{ total_data.message.message_type === 'SMS' ? '90' : '2,000' }} bytes</div>
</div>
<div class="modal_button" @click="SendSMS">문자 보내기</div>
</div>
</div>
<!-- 구매상품 추가 모달 -->
<div class="point_modal common_modal_wrapper font_youandi" v-if="!!modal_state.product_add">
<div class="common_modal_title cursor_pointer">구매 상품 추가</div>
<img class="common_modal_close" :src="close_icon" alt="close" @click="modal_hide" />
<!-- 구매상품 추가 -->
<div class="modal_contents">
<div class="modal_contents_title">내용</div>
<textarea class="modal_textAread" placeholder="내용입력" v-model="total_data.product.content" />
<div class="modal_input_calc">
<div class="modal_input_calc_sign">+</div>
<input type="number" class="modal_input" placeholder="0" v-model="total_data.product.price" />
</div>
<div class="modal_button" @click="product_add()">구매 추가하기</div>
</div>
</div>
<div class="common_dim" v-if="!!dim_state" @click="modal_hide"></div>
</div>
</template>
<script>
export default {
layout: 'admin',
asyncData({ params }){
return {
member_id: params.member_id
}
},
data() {
return {
more: require('~/assets/images/icons/more.svg'), // 더보기 이미지
card_icon: require('~/assets/images/card_small.png'), // 카드 이미지
close_icon: require('~/assets/images/icons/close.svg'), // 닫기 이미지
select_arrow: require('~/assets/images/icons/select_arrow.png'), // 셀렉트 화살표 이미지
select_arrow_big: require('~/assets/images/icons/select_arrow_big.svg'), // 셀렉트 화살표 이미지
default_img: require('~/assets/images/default_background.jpg'), // 기본 이미지
coupon_used: require('~/assets/images/coupon_used.png'), // 쿠폰 사용완료 이미지
coupon_expired: require('~/assets/images/coupon_expired.png'), // 쿠폰 기한만료 이미지
request_count: null,
request_count_value: null,
modal_state: { // 모달 상태
point: false,
point_history: false,
info: false,
coupon: false,
coupon_add: false,
message: false,
product_add: false,
add_complete: false
},
dim_state: false, // 모달 배경 상태
total_data: { // 입력 데이터
point: {
point_type: 'use', // 포인트 토글 use or add
content: '',
amount: null
},
message: {
message_type: 'SMS', // 문자 토글 SMS or LMS
content: '',
ad: false
},
product: {
content: '',
price: null
},
memo: ''
},
user_data: { // 유저 데이터
name: null,
member_id: null,
email: null,
cellphone: null,
total_points: 0,
cellphone_divided: [],
memos: [],
coupons: [],
point_history: [],
product_list: []
},
user_coupons: [],
shop_coupons: [],
selected_coupon: '', // 쿠폰 발급시 선택된 쿠폰
pageNum: 0,
pageSize: 5
}
},
computed: {
pageCount () {
let listLeng = this.user_data.product_list.length,
listSize = this.pageSize,
page = Math.floor(listLeng / listSize);
if (listLeng % listSize > 0) {
page += 1;
return page;
}
},
paginatedData () {
const start = this.pageNum * this.pageSize,
end = start + this.pageSize;
return this.user_data.product_list.slice(start, end);
},
// byte 계산
cal_msg_length() {
let msg = this.total_data.message.content;
var nbytes = 0;
for (let i = 0; i < msg.length; i++) {
var ch = msg.charAt(i);
if(escape(ch).length > 4) {
nbytes += 2;
} else if (ch == '\n') {
if (msg.charAt(i-1) != '\r') {
nbytes += 1;
}
} else if (ch == '<' || ch == '>') {
nbytes += 4;
} else {
nbytes += 1;
}
}
return nbytes;
},
cal_point_length() {
let msg = this.total_data.point.content;
var nbytes = 0;
for (let i = 0; i < msg.length; i++) {
var ch = msg.charAt(i);
if(escape(ch).length > 4) {
nbytes += 2;
} else if (ch == '\n') {
if (msg.charAt(i-1) != '\r') {
nbytes += 1;
}
} else if (ch == '<' || ch == '>') {
nbytes += 4;
} else {
nbytes += 1;
}
}
return nbytes;
},
},
watch: {
// 포인트 사용/추가 모달 타입 초기화
'modal_state.point'(val) {
if(!val) this.total_data.point.point_type = 'use'
},
// 메세지 보내기 모달 타입 초기화
'modal_state.message'(val) {
if(!val) this.total_data.message.message_type = 'SMS'
}
},
created(){
// 새로고침시 스토어에서 정보 가져옴
if(!this.member_id){
this.member_id = this.$store.state.search_member.member_id
}
},
mounted(){
this.retrieveCustomerInformation(this.member_id); // 유저 정보 가져오기
this.retrieveListOfCustomerMemos(this.member_id); // 유저 메모 가져오기
this.product_list(this.member_id); // 오프라인 구매내역 리스트 가져오기
this.coupons(); // 쿠폰 가져오기
// 입력 데이터 초기화
this.data_init();
},
methods: {
// 최근 가입 유저 다음 버튼
nextPage () {
this.pageNum += 1;
},
// 최근 가입 유저 이전 버튼
prevPage () {
this.pageNum -= 1;
},
// 갱신 카운트 중지
clear_count(val){
if(val === 'route'){
clearInterval(this.request_count);
this.$router.push('/admin/search')
} else {
clearInterval(this.request_count);
this.retrieveCustomerInformation(this.member_id);
this.coupons(); // 쿠폰 가져오기
}
},
// 해당 유저 정보 가져오기
retrieveCustomerInformation(member_id){
this.request_count && clearInterval(this.request_count);
this.$axios.get('/admin/retrieveCustomerInformation', {
params: {
member_id
}
})
.then(res => {
this.request_count_value = res.data.max_age ? res.data.max_age.split('max-age=')[1] : null; // max-age가 존재하는 경우
if(!!res.data.max_age) this.request_count = setInterval(() => { // max-age 1초간격 카운팅
this.request_count_value = this.request_count_value > 0 ? this.request_count_value - 1 : this.clear_count();
}, 1000)
this.user_data = {
...this.user_data,
...res.data.data.customersprivacy,
cellphone: res.data.data.customersprivacy.cellphone.replaceAll('-',''),
cellphone_divided : res.data.data.customersprivacy.cellphone.split('-'),
created_date: res.data.data.customersprivacy.created_date.substr(0,10)
};
window.scrollTo(0,0);
}).catch(err => {
console.log(err);
this.show_common_modal(err.response.message);
})
},
// 해당 유저 메모 가져오기
retrieveListOfCustomerMemos(member_id){
this.$axios.get('/admin/retrieveListOfCustomerMemos', {
params: {
member_id
}
})
.then(res => {
this.user_data.memos = res.data.data.memos;
}).catch(err => {
console.log(err)
this.show_common_modal(err.response.message);
})
},
// 쇼핑몰에 생성된 쿠폰 리스트 가져오기
coupons(){
this.$axios.get('/admin/coupons')
.then(res => {
this.shop_coupons = res.data.data.coupons;
this.retrieveListOfCustomerCoupons(this.member_id);
}).catch(err => {
console.log(err);
this.show_common_modal(err.response.data.message);
})
},
// 해당 유저 쿠폰 리스트 가져오기
retrieveListOfCustomerCoupons(member_id){
this.user_data.coupons = [];
this.$axios.get('/admin/retrieveListOfCustomerCoupons', {
params: {
member_id
}
})
.then(res => {
this.user_coupons = res.data.data.coupons;
for(let i = 0; i < this.user_coupons.length; i++){
for(let j = 0; j < this.shop_coupons.length; j++){
if(this.user_coupons[i].coupon_no === this.shop_coupons[j].coupon_no){
this.user_data.coupons.push(this.shop_coupons[j]);
}
}
}
window.scrollTo(0,0);
}).catch(err => {
console.log(err);
this.show_common_modal(err.response.data.message);
})
},
// 특정 회원에게 쿠폰 발급
createCouponIssuanceHistory(){
if(!this.selected_coupon){
this.show_common_modal('쿠폰을 선택해주세요');
return;
}
this.$axios.post('/admin/createCouponIssuanceHistory', {
data: {
shop_no: 1,
request: {
issued_member_scope: 'M',
member_id: this.member_id,
send_sms_for_issue: 'T',
allow_duplication: 'T'
}
},
coupon_no: this.selected_coupon.coupon_no
}).then(res => {
this.user_data.coupons = [];
this.show_common_modal(res.data.message);
this.coupons();
}).catch(err => {
this.show_common_modal(err.response.data.message);
}).finally(() => {
this.modal_hide();
})
},
// 회원의 적립금 증가, 차감
issueAndDeductPoints(member_id, amount, type, reason){
this.$axios.post('/admin/issueAndDeductPoints',
{
shop_no: 1,
request: {
member_id,
amount,
type, // increase 증가, decrease 차감
reason
}
}).then(res => {
this.show_common_modal(res.data.message);
}).catch(err => {
console.log(err)
this.show_common_modal(err.response.data.message)
}).finally(() => {
this.modal_hide();
})
},
// 적립금 사용/추가
point_handler(){
if(!this.total_data.point.content) {
this.show_common_modal('내용을 입력주세요');
return;
}
if(!this.total_data.point.amount) {
this.show_common_modal('금액을 입력주세요');
return;
}
if(this.cal_point_length > 60) {
this.show_common_modal('내용 길이를 초과하였습니다');
return;
}
if(this.total_data.point.point_type === 'use'){
this.issueAndDeductPoints(this.user_data.member_id, this.total_data.point.amount, 'decrease', this.total_data.point.content); // 포인트 사용인 경우
} else {
this.modal_state.add_complete = true; // 포인트 추가인 경우 추가 확인 모달 오픈
}
},
// 적립금 추가 완료
add_complete(){
this.$axios.put('/admin/updatePoint', {
point: this.total_data.point.amount,
total_points: this.user_data.total_points,
member_id: this.user_data.member_id,
content: this.cal_point_length
}).then(res => {
this.issueAndDeductPoints(this.user_data.member_id, this.total_data.point.amount, 'increase', this.total_data.point.content);
}).catch(err => {
this.show_common_modal(err.response.data.message);
this.modal_hide();
})
},
// 회원의 적립금 사용내역 조회
retrievePoints(){
this.$axios.get('/admin/retrievePoints',{
params: {
member_id: this.user_data.member_id
}
})
.then(res => {
this.modal_show('point_history');
this.user_data.point_history = res.data.data.points;
}).catch(err => {
console.log(err)
this.show_common_modal(err.response.data.message);
})
},
// 모달 보이기
modal_show(target) {
for(let item in this.modal_state){
if(item === target) this.modal_state[item] = true;
}
this.dim_state = true;
},
// 모달 숨기기
modal_hide() {
for(let item in this.modal_state){
this.modal_state[item] = false;
}
this.retrieveCustomerInformation(this.member_id); // 유저 정보 가져오기
this.retrieveListOfCustomerMemos(this.member_id); // 유저 메모 가져오기
this.data_init();
this.dim_state = false;
},
// 입력 데이터 초기화
data_init(){
this.total_data = {
point: {
point_type: 'use', // 포인트 토글 use or add
content: '',
amount: null
},
message: {
message_type: 'SMS', // 문자 토글 SMS or LMS
content: '',
ad: false
},
product: {
content: '',
price: null
},
memo: ''
};
this.selected_coupon = ''
},
// 전화번호 형식 변경
convertPhone(phone){
if(phone.startsWith('02')){
if(phone.length < 10){
return phone.substring(0, 2) + '-' + phone.substring(2, 5) + '-' + phone.substring(5);
}else{
return phone.substring(0, 2) + '-' + phone.substring(2, 6) + '-' + phone.substring(6);
}
}else{
if(phone.length < 11){
return phone.substring(0, 3) + '-' + phone.substring(3, 6) + '-' + phone.substring(6);
}else{
return phone.substring(0, 3) + '-' + phone.substring(3, 7) + '-' + phone.substring(7);
}
}
},
// 회원정보 수정
updateCustomerInformation() {
if(!this.user_data.cellphone) {
this.show_common_modal('전화번호를 확인해주세요');
return;
}
const regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
if(!regExp.test(this.user_data.email)){
this.show_common_modal('이메일 형식을 확인해주세요');
}
this.$axios.post('/admin/updateCustomerInformation', {
data: {
shop_no: 1,
request: {
email: this.user_data.email,
cellphone: this.convertPhone(String(this.user_data.cellphone))
}
},
member_id: this.user_data.member_id
}).then(res => {
if(!!this.total_data.memo){
this.createCustomerMemo();
} else {
this.show_common_modal(res.data.message);
this.modal_hide();
}
}).catch(err => {
console.log(err);
this.show_common_modal(err.response.data.message);
this.modal_hide();
})
},
// 메모 등록
async createCustomerMemo() {
await this.$axios.post('/admin/createCustomerMemo', {
data: {
shop_no: 1,
request: {
author_id: 'subadmin1',
memo: this.total_data.memo
}
},
member_id: this.user_data.member_id
}).then(res => {
this.show_common_modal('회원정보 수정 성공');
}).catch(err => {
console.log(err);
this.show_common_modal(err.response.data.message);
}).finally(() => {
this.modal_hide();
})
},
// 메모 삭제
deleteCustomerMemo(memo_no){
this.$axios.delete('/admin/deleteCustomerMemo', {
data: {
member_id: this.user_data.member_id,
memo_no
}
}).then(res => {
this.show_common_modal(res.data.message);
}).catch(err => {
console.log(err);
this.show_common_modal(err.response.data.message);
}).finally(() => {
this.modal_hide();
})
},
// 문자 전송
SendSMS(){
if(!this.total_data.message.content) {
this.show_common_modal('내용을 입력주세요');
return;
}
if((this.total_data.message.message_type === 'SMS' && this.cal_msg_length > 90) || (this.total_data.message.message_type === 'LMS' && this.cal_msg_length > 2000)) {
this.show_common_modal('문자 길이를 초과하였습니다');
return;
}
this.$axios.post('/admin/SendSMS', {
shop_no: 1,
request: {
sender_no: 15,
content: this.total_data.message.content,
member_id: [
this.user_data.member_id
],
exclude_unsubscriber: !!this.total_data.message.ad ? 'T' : 'F',
type: this.total_data.message.message_type
}
}).then(res => {
this.show_common_modal(res.data.message);
}).catch(err => {
console.log(err)
this.show_common_modal(err.response.data.message);
}).finally(() => {
this.modal_hide();
})
},
// 오프라인 구매내역 조회
product_list(member_id){
this.$axios.get('/admin/product_list', {
params: {
member_id
}
}).then(res => {
this.user_data.product_list = res.data.data.map(item => {
return {
...item,
created_at: item.created_at.replaceAll('-', '.').substr(0,10)
}
});
}).catch(err => {
console.log(err)
this.show_common_modal(err.response.data.message);
})
},
// 오프라인 구매상품 추가
product_add() {
if(!this.total_data.product.content) {
this.show_common_modal('내용을 입력주세요');
return;
}
if(!this.total_data.product.price) {
this.show_common_modal('금액을 입력주세요');
return;
}
this.$axios.post('/admin/product_add', {
member_id: this.user_data.member_id,
content: this.total_data.product.content,
price: this.total_data.product.price,
store_main: this.$store.state.main_name,
store_sub: this.$store.state.sub_name,
}).then(res => {
this.show_common_modal(res.data.message);
this.product_list(this.member_id)
}).catch(err => {
console.log(err);
this.show_common_modal(err.response.data.message);
}).finally(() => {
this.modal_hide();
})
},
// 공통 모달
show_common_modal(title, type = 'alert', func = null){
this.$nuxt.$emit('popup', {
state: true,
title,
type,
func
})
},
}
}
</script>
