TODO#130017 [預約前詢問] API 串接

Mila

2021-11-11 8d823f18353363e61b11b547c443aff8bbf85d95

TODO#130017 [預約前詢問] API 串接

 PAMapp/assets/ts/api/consultant.ts

@@ -1,6 +1,7 @@
import axios from 'axios';
import { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios';
import { MessageBox } from 'element-ui';
import { functionsIn } from 'lodash';
import Router from 'vue-router';

export const service = axios.create({
@@ -11,26 +12,14 @@
})

service.interceptors.request.use(function (config: AxiosRequestConfig) {
    window.$nuxt.$loading.start();
    return config;
}, function (error: AxiosError) {
    return Promise.reject(error);
});

service.interceptors.response.use(function (response: AxiosResponse) {
    window.$nuxt.$loading.finish();
    return response;
}, function (error: AxiosError) {
    console.log(error.request.status)
    const errorCode = error.request.status;
    if (errorCode === 401) {
        window.$nuxt.$router.push('/login');
    } else {
        // MessageBox.alert(error.request.statusText, errorCode, {
        //     confirmButtonText: '確定' });
    }

    window.$nuxt.$loading.finish();
    return Promise.reject(error);
});

@@ -59,6 +48,10 @@
    return service.post('/consultant/favorite', {agentNoList})
}

// 預約前詢問
export function appointmentDemand(data: AppointmentParams) {
    return service.post('/appointment/customer/create', data)
}
export interface Consultants {
    agentNo: string,
    name: string,
@@ -76,4 +69,17 @@
    communicationStyles: string[],
    avgScore: number,
    status: string
}

export interface AppointmentParams {
    phone: string,
    email: string,
    contactType: string,
    gender: string,
    age: string,
    job: string,
    requirement: string,
    hopeContactTime: string,
    otherRequirement: string,
    agentNo: string
}

 PAMapp/components/AddAndReservedBtns.vue

@@ -51,7 +51,7 @@
    }

    reserveCommunication() {
        isLogin() ? this.$router.push('/questionnaire') : this.$router.push('/login');
        isLogin() ? this.$router.push(`/questionnaire/${this.agentInfo.agentNo}`) : this.$router.push('/login');
    }

    @Emit('openPopUp') openPopUp(popUpTxt: string = '成功加入顧問清單') {

 PAMapp/components/Consultant/ConsultantCard.vue

@@ -99,7 +99,7 @@
    reserveCommunication() {
        const contactStatus = this.agentInfo.contactStatus;
        if (contactStatus !== 'reserved' && contactStatus !== 'contacted') {
            isLogin() ? this.$router.push('/questionnaire') : this.$router.push('/login');
            isLogin() ? this.$router.push(`/questionnaire/${this.agentInfo.agentNo}`) : this.$router.push('/login');
        } else {
            this.width = isMobileDevice() ? '80%' : '';
            this.isVisibleDialog = true;

 PAMapp/pages/questionnaire/_agentNo.vue

File was renamed from PAMapp/pages/questionnaire/index.vue
@@ -1,29 +1,29 @@
<template>
    <div class="pam-page">
        <div class="pb-18">          
        <div class="pb-18">
            <span class="mdTxt  required">請問您希望保險顧問以電話或Email聯繫您呢?</span>
            <span class="hint">可複選</span>
        </div>
        <div class="pam-tags">
            <el-button :class="{ 'active': isConnectMobile}" @click="toggleConnectDevice('mobile')" class="contactMax Btn">手機</el-button>
            <el-button :class="{ 'active': isConnectEmail}" @click="toggleConnectDevice('email')" class="contactMax Btn">Email</el-button>  
        </div>    
            <el-button :class="{ 'active': isConnectEmail}" @click="toggleConnectDevice('email')" class="contactMax Btn">Email</el-button>
        </div>
        <div class="connectDesktop">
            <div v-if="isConnectMobile">
                <span class="fz-20 phone-no">0912345678</span>
            </div>       
            </div>
            <el-row class="pb-10 pt-10">
                <el-input class="pam-input" v-if="isConnectEmail" placeholder="請輸入電子郵件信箱" v-model="email">
                </el-input>
            </el-row>  
            </el-row>
            <div v-if="isConnectMobile">
                <div class="datepicker">
                    <span class="mdTxt required">手機連絡的方便時間</span>
                    <PhoneContactTimePicker :scheduleList.sync="initScheduleList"/>
                </div>  
                </div>
            </div>
        </div>
        


        <div class="mb-30">
            <div>
@@ -35,7 +35,7 @@
        </div>
        <div>
            <div class="pb-10 mdTxt pt-10">您的性別</div>
            <div class="mb-30 pam-tags"> 
            <div class="mb-30 pam-tags">
                <el-button class="desktopBtn tags" @click="gender = 'male'" :class="{ 'active': gender ==='male'}">男性</el-button>
                <el-button class="desktopBtn tags" @click="gender = 'female'" :class="{'active': gender === 'female'}">女性</el-button>
            </div>
@@ -52,31 +52,31 @@
                <el-button class="ageDesktopP2" @click="age = '70'" :class="{'active': age === '70'}">61-70歲</el-button>
                <el-button class="mb-10" @click="age = '71'" :class="{'active': age === '71'}">71歲以上</el-button>
            </div>
        </div>   
        
        </div>

        <div class="mdTxt pt-10 pb-10">職業</div>
        <div class="job-pick" @click="showJobDrawer = true">      
            <input class="fz-20 pl-18 input" 
        <div class="job-pick" @click="showJobDrawer = true">
            <input class="fz-20 pl-18 input"
                style="outline:none margin-right:-18px"
                @click="showJobDrawer = true" placeholder="請選擇" :value="staff === '其他' ? `其他, ${inputValue}` : staff">
            

            <i class="icon-down down-icon " style="margin-right:18px" @click="showJobDrawer = true" ></i>
        </div>
        <div class="ques-footer pt-30">
            <el-button type="primary" @click="sendReserve = true">送出</el-button>
            <el-button type="primary" @click="sentDemand">送出</el-button>
        </div>

        <PopUpFrame :isOpen.sync="showDrawer" :drawerSize=" '95%' ">
            <div class="qaTextTitle mdTxt"><strong>想要詢問的問題</strong></div>
                <div class="qa-dialog">                   
                <div class="qa-dialog">
                    <div v-for="(qaText,index) in queaAboutList" :key="index" >
                        <div class="pt-10">
                            <p class=" p bold">{{qaText.title}}</p>
                            <p class="p">{{qaText.content}}</p>
                        </div>                
                        </div>
                    </div>
                </div>
            <div class="qa-dialog-footer mdTxt" @click="showDrawer = false"><p>我知道了</p></div> 
            <div class="qa-dialog-footer mdTxt" @click="showDrawer = false"><p>我知道了</p></div>
        </PopUpFrame>
        <PopUpFrame :isOpen.sync="showJobDrawer" drawerSize='60%'>
            <div class="job-drawerTxt fz-20">
@@ -91,17 +91,18 @@
                </div>
                <div class="job-inputDiv"><input v-if="staff === '其他'" class="job-input mb-30 fz-20 pl-20" v-model="inputValue" > </div>
                <el-button type="primary" class="job-drawerBtn" @click="showJobDrawer = false">確定</el-button>
            </div>         
            </div>
        </PopUpFrame>
        <PopUpFrame :isOpen.sync="sendReserve">
        <PopUpFrame :isOpen.sync="sendReserve" @update:isOpen="closeReservePopUp">
            <div class="fz-20 mt-30 sendReserve-txt">預約成功！您預約的保險顧問會</div>
            <div class="fz-20 sendReserve-txt">儘速與您聯絡！</div>
            <div class="qa-dialog-footer mdTxt" @click="sendReserve = false"><p>我知道了</p></div>  
            <div class="qa-dialog-footer mdTxt" @click="closeReservePopUp"><p>我知道了</p></div>
        </PopUpFrame>
    </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { appointmentDemand } from '~/assets/ts/api/consultant';

@Component
    export default class Questionnaire extends Vue {
@@ -112,10 +113,10 @@
                mobileNumber = '';
                email = '';
                inputValue='';
                selectedQuestion = [];
                selectedQuestion: SelectedQuestion[] = [];
                // staff:'in'|'out'|'jobOther'='in';
                staff = '外勤';
            

                age:'20'|'30'|'40'|'50'|'55'|'60'|'70'|'71' = '20';
                showDrawer= false;
                showJobDrawer = false;
@@ -165,7 +166,7 @@
                        content:'匹配度是透過嚴選配對或快速篩選後，將每一位保險顧問資料進行比對後排序推薦給您的媒合數值，您可以作為選擇適合顧問的參考值。'
                    },
                ]
                
                agentNo!: string;

                get disableActionButton(): boolean {
                    return true;
@@ -179,6 +180,10 @@
                    return this.connectDevices.includes('email');
                }

                mounted() {
                    this.agentNo = this.$route.params.agentNo;
                }

                toggleConnectDevice(selectDevice: 'mobile' | 'email'): void {
                    const deviceSelected = this.connectDevices.includes(selectDevice);
                    if (deviceSelected) {
@@ -189,6 +194,51 @@
                    this.connectDevices.push(selectDevice);
                }

                sentDemand() {
                    const data = {
                        phone: '09123456789',
                        email: this.email,
                        contactType: this.connectDevices.toString(),
                        gender: this.gender,
                        age: this.age,
                        job: this.staff,
                        requirement: this.getRequirement(),
                        hopeContactTime: this.getHopeContactTime(),
                        otherRequirement: '',
                        agentNo: this.agentNo
                    }
                    appointmentDemand(data).then(res => {
                        this.sendReserve = true
                    })
                }

                getRequirement() {
                    const requirement = this.selectedQuestion.filter(item => item.selected)
                    return requirement.map(item => item.name).toString();
                }

                getHopeContactTime() {
                    const initScheduleList = this.initScheduleList.map(item => {
                        return {
                            selectWeekOptions: item.selectWeekOptions.toString(),
                            selectTimesOptions: item.selectTimesOptions.toString()
                        }
                    })

                    return initScheduleList.map(i => {
                        return `'${i.selectWeekOptions},${i.selectTimesOptions}'`}
                    ).toString()
                }

                closeReservePopUp() {
                    this.sendReserve = false;
                    this.$router.push('/')
                }
    }

    export interface SelectedQuestion {
        name: string;
        selected: boolean;
    }
</script>
<style lang="scss">
@@ -359,7 +409,7 @@
.qa-dialog-footer{
    display: flex;
    justify-content: center;
    margin-bottom: 81px;  
    margin-bottom: 81px;
}
.el-button+.el-button{
    margin-left: 0;