From b6661a090e8bcf8f45be24a01b6a7bb08e3aaff1 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 08 十二月 2021 08:50:04 +0800
Subject: [PATCH] refactor: pages component - separate vue files
---
PAMapp/pages/questionnaire/_agentNo.vue | 365 ---------------------------------------------------
1 files changed, 4 insertions(+), 361 deletions(-)
diff --git a/PAMapp/pages/questionnaire/_agentNo.vue b/PAMapp/pages/questionnaire/_agentNo.vue
index 9febebc..9e60e96 100644
--- a/PAMapp/pages/questionnaire/_agentNo.vue
+++ b/PAMapp/pages/questionnaire/_agentNo.vue
@@ -1,5 +1,5 @@
<template>
- <div class="ques-page--reset">
+ <div class="ques-page--reset" v-if="isLogin">
<div class="ques-header">
<div class="ques-header__mob-banner"></div>
<div
@@ -127,365 +127,8 @@
</div>
</template>
-<script lang="ts">
- import { Vue, Component } from 'vue-property-decorator';
- import { addFavoriteConsultant, appointmentDemand, AppointmentParams, AppointmentRequests ,RegisterInfo } from '~/assets/ts/api/consultant';
- import { getRequestsFromStorage, setRequestsToStorage } from '~/assets/ts/storageRequests';
- import { Gender } from '~/assets/ts/models/enum/Gender';
- import { ContactType } from '~/assets/ts/models/enum/ContactType';
- import _ from 'lodash';
+<script src="./questionnaire.component.ts"></script>
- @Component
- export default class Questionnaire extends Vue {
- genderOptions=[
- {
- title:'���',
- label:Gender.MALE,
- },
- {
- title:'憟單��',
- label:Gender.FEMALE,
- }
- ];
-
- requirementOptions=[
- {
- title:'�摨瑁����',
- label:'�摨瑁����',
- },
- {
- title:'摮戊��',
- label:'摮戊��',
- },
- {
- title:'鞈閬��',
- label:'鞈閬��',
- },
- {
- title:'璅暑��隡�',
- label:'璅暑��隡�',
- },
- {
- title:'靽�瑼�/閬��',
- label:'靽�瑼�/閬��',
- },
- {
- title:'��������',
- label:'��������',
- },
- ];
-
- ageRangeOptions=[
- {
- title:'20甇脖誑銝�',
- label:'under_20',
- },
- {
- title:'21-30 甇�',
- label:'21-30'
- },
- {
- title:'31-40 甇�',
- label:'31-40'
- },
- {
- title:'41-50 甇�',
- label:'41-50'
- },
- {
- title:'46-55 甇�',
- label:'46-55',
- },
- {
- title:'51-60 甇�',
- label:'51-60',
- },
- {
- title:'61-70 甇�',
- label:'61-70',
- },
- {
- title:'71 甇脖誑銝�',
- label:'over_71',
- }
- ];
-
- quesAboutList = [
- {
- title:'�摨瑁����',
- content:'����澈擃憿批末嚗�靽�兢蝳�嚗��������嚗��飩������摮拙��粥銝��頝荔�犖����迤閬����'
- },
- {
- title:'摮戊��',
- content:'摮拙���������葦銋摮貊��撠靘�蒂�雿嚗飛���������������瓷嚗��楝銝���韏瑕飛��'
- },
- {
- title:'鞈閬��',
- content:'��迤��瓷撖��雓寡�����嚗鈭箇�����蝳西瓷��◢�����Ⅱ靽�蝛拙��嚗�摰嗆��靘�末��皞���'
- },
- {
- title:'璅暑��隡�',
- content:'�銝�頛拙����隡��摮���翰瘣鳴�停敺�����������隡瓷����撌勗�帘摰�嚗蝎曉蔗���僑鈭箇�������'
- },
- {
- title:'靽�瑼�/閬��',
- content:'��瑼Ｚ�撌梁������蝚血����靘�◢�蝘餉��瘙��'
- },
- {
- title:'����',
- content:'���� ���������憸券�����鈭怒�����嚗���摰帘摰漲嚗��隞亙��澈��ˊ�靽���嚗�'
- }
- ];
-
- myRequest: AppointmentRequests = {
- phone: this.userInfo?.phone ? this.userInfo.phone :'',
- email: this.userInfo?.email ? this.userInfo.email :'',
- contactType: _.isEqual(this.userInfo.contactType,ContactType.SMS) ? ContactType.PHONE : ContactType.EMAIL ,
- gender: '',
- age: '',
- job: '',
- requirement: [],
- hopeContactTime: [{
- selectWeekOptions: [],
- selectTimesOptions: [],
- }],
- agentNo: '',
- };
-
- showDrawer= false;
- sendReserve = false;
-
- mounted() {
- const storageMyRequest = getRequestsFromStorage();
- if (storageMyRequest) {
- this.myRequest = {
- ...storageMyRequest,
- hopeContactTime: storageMyRequest.hopeContactTime?.length
- ? storageMyRequest.hopeContactTime
- : [{
- selectWeekOptions: [],
- selectTimesOptions: [],
- }],
- };
- }
- }
-
- get phoneValid(): boolean {
- const rule = /^09[0-9]{8}$/;
- return this.myRequest.phone
- ? rule.test(this.myRequest.phone) && _.isEqual(this.myRequest.phone.length,10)
- : true;
- }
-
- get userInfo(): RegisterInfo {
- const initUserInfo = JSON.parse(localStorage.getItem('userInfo')!);
- return initUserInfo;
- }
-
- get isDisabledSubmitBtn(): boolean {
- return _.includes(this.myRequest.contactType,ContactType.PHONE)
- ? !this.isHopeContactTimeDone()
- : !this.phoneValid;
- }
-
- private isHopeContactTimeDone():boolean{
- return this.myRequest.hopeContactTime[0]?.selectWeekOptions.length >0 && this.myRequest.hopeContactTime[0]?.selectTimesOptions.length >0;
- }
-
- sentDemand() {
- addFavoriteConsultant([this.$route.params.agentNo]).then(res => this.sentAppointmentDemand());
- }
-
- private sentAppointmentDemand() {
- const data: AppointmentParams = {
- ...this.myRequest,
- requirement: _.map(this.myRequest.requirement,o=>o).toString(),
- hopeContactTime: this.myRequest.phone && this.phoneValid ? this.getHopeContactTime() :'',
- agentNo: this.$route.params.agentNo
- };
-
- appointmentDemand(data).then(res => {
- this.sendReserve = true;
- this.myRequest.hopeContactTime = [];
- setRequestsToStorage(this.myRequest);
- });
- }
-
- getHopeContactTime() {
- const selectedHopeContactTime = this.myRequest.hopeContactTime.filter((i) => i.selectWeekOptions?.length && i.selectTimesOptions?.length);
- return selectedHopeContactTime.map(i => {
- return `'${i.selectWeekOptions}��${i.selectTimesOptions}'`}
- ).toString();
- }
-
- closeReservePopUp() {
- this.sendReserve = false;
- this.$router.push('/')
- }
-
- }
-</script>
-
-<style lang="scss" scoped>
-.sendReserve-txt{
- display: flex;
- justify-content: center;
- margin-top: 10px;
- margin-bottom: 26px;
-}
-
-//drawer��摨���見撘�
-.qa-dialog-footer{
- display: flex;
- justify-content: center;
- margin-bottom: 81px;
- color: #ED1B2E;
- cursor: pointer;
-}
-
-//����見撘����
-.ques-footer{
- justify-content: center;
- margin: 30px 0;
- display: flex;
- flex-direction: column;
- align-items: center;
- .el-button {
- width: 120px;
- height:50px;
- background-color: #ED1B2E;
- color:#FFFFFF;
- font-weight: normal;
- @extend .text--middle ;
- &.el-button--default {
- color: $PRIMARY_RED;
- background-color: #FFFFFF;
- border-color: $PRIMARY_RED;
- }
- &.el-button--primary {
- background-color: $PRIMARY_RED;
- border-color: $PRIMARY_RED;
- }
- &.is-disabled {
- color: $PRIMARY_WHITE;
- background-color: $MID_GREY;
- border-color: $MID_GREY;
- border-style: solid;
- pointer-events: none;
- }
- }
-}
-
-//閰喟敦���rawer銝剝�摰寧征��之撠身蝵�
-.qa-dialog{
- overflow-y:auto;
- height: 500px;
- margin-top: 20px;
-}
-
-//閰喟敦���rawer銝餉����
-.qaTextTitle{
- margin-top:30px;
- display: flex;
- justify-content: center;
-}
-
-.el-button+.el-button{
- margin-left: 0;
-}
-
-.datepicker{
- display: flex;
- flex-direction: column;
-}
-
-.required {
- position: relative;
- &::before {
- content: '*';
- position: absolute;
- color: #FF0000;
- transform: translate(-12px, 0);
- }
-}
-
-.ques-page--reset.pam-page-container {
- margin: 0px auto;
-}
-
-.ques-header {
- position: relative;
-}
-
-.ques-header__mob-banner {
- width: 100%;
- min-height: 80px;
- background-color: #F8F9FA;
- background-image: url('~/assets/images/questionnaire/reserve_bg_mob.svg');
- background-repeat: no-repeat;
- background-size: cover;
- background-position: center;
-}
-
-.ques-header__info {
- position: relative;
- padding:30px 20px;
- margin: 0px 20px;
- background-color: #B3E7E3;
- border-radius: 10px;
-}
-
-.ques-header__input-block {
- display: flex;
- align-items: center;
- @extend .text--middle,.mt-10 ;
- .ques-header__input{
- &.is-invalid{
- border: 2px solid $PRIMARY_RED !important;
- }
- flex: 1;
- height: 50px;
- border-radius: 10px;
- border: 1px #CCCCCC solid;
- background-color: $PRIMARY_WHITE;
- padding: 15px 10px;
- box-sizing: border-box;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- }
-}
-
-.ques-container {
- position: relative;
- margin: 0px 20px;
-}
-
-
-@include desktop{
- .ques-header{
- display: flex;
- justify-content: flex-end;
- min-height: 460px;
- background-image: url('~/assets/images/questionnaire/reserve_bg_web.svg');
- background-repeat: no-repeat;
- background-size: contain;
- background-position: bottom;
- }
- .ques-header__mob-banner{
- display: none;
- }
- .ques-header__info{
- margin: 30px 20px;
- width:500px;
- min-height: 400px;
- -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
- -moz-box-sizing: border-box; /* Firefox, other Gecko */
- box-sizing: border-box;
- }
- .ques-container{
- margin: 0px;
- }
-}
-
+<style lang="scss">
+ @import "./questionnaire.component.scss";
</style>
-
--
Gitblit v1.8.0