From 9bdb95c9e34cef640534e5e5a1e2225a80442000 Mon Sep 17 00:00:00 2001
From: HelenHuang <LinHuang@pollex.com.tw>
Date: 星期四, 09 六月 2022 15:48:15 +0800
Subject: [PATCH] TODO#139894 [ footer -最下方說明與保經代合作 ] 文案修改
---
PAMapp/pages/questionnaire/_agentNo.vue | 366 ++++++++++++++++++++++++++++++++-------------------
1 files changed, 228 insertions(+), 138 deletions(-)
diff --git a/PAMapp/pages/questionnaire/_agentNo.vue b/PAMapp/pages/questionnaire/_agentNo.vue
index 7426d2d..4e55158 100644
--- a/PAMapp/pages/questionnaire/_agentNo.vue
+++ b/PAMapp/pages/questionnaire/_agentNo.vue
@@ -6,7 +6,7 @@
class="ques-header__info"
v-if="myRequest.contactType==='phone'">
<div class="text--middle">
- <div class="mdTxt">雿���蝜急撘�</div>
+ <div class="mdTxt">�����蝜急撘�</div>
<div class="mt-10">
<span>�����</span>
<span>{{myRequest.phone}}</span>
@@ -16,32 +16,36 @@
<div class="datepicker required">
<span class="mdTxt">�����蝯∠�靘踵���</span>
<PhoneContactTimePicker
- :scheduleList.sync="myRequest.hopeContactTime"/>
+ :scheduleList="myRequest.hopeContactTime"/>
</div>
</div>
<div class="mt-30">
<div class="mdTxt">�隞��蝜急撘�</div>
<div class="ques-header__input-block">
<span>Email嚗�</span>
- <input class="ques-header__input"
+ <input class="ques-header__input break"
+ :class="{ 'is-invalid': !emailValid}"
placeholder="隢撓�"
v-model="myRequest.email">
+ </div>
+ <div class="error mt-5 mb-5" style="margin-left:65px">
+ <span v-show="!emailValid">Email�撘�炊</span>
</div>
</div>
</div>
<div class="ques-header__info" v-else>
<div class="text--middle">
- <div class="mdTxt">雿���蝜急撘�</div>
+ <div class="mdTxt">�����蝜急撘�</div>
<div class="mt-10 ques-header__input-block">
<span>Email嚗�</span>
- <span>{{myRequest.email}}</span>
+ <span class=" break">{{myRequest.email}}</span>
</div>
</div>
<div class="mt-30">
<div class="mdTxt">�隞��蝜急撘�</div>
<div class="ques-header__input-block">
- <span>�����</span>
- <input class="ques-header__input"
+ <span>���� : </span>
+ <input class="ques-header__input ml-4"
:class="{'is-invalid': !phoneValid}"
placeholder="隢撓�"
maxlength="10"
@@ -55,7 +59,7 @@
<div class="datepicker">
<span class="mdTxt">�����蝯∠�靘踵���</span>
<PhoneContactTimePicker
- :scheduleList.sync="myRequest.hopeContactTime"/>
+ :scheduleList="myRequest.hopeContactTime"/>
</div>
</div>
</div>
@@ -63,7 +67,7 @@
<div class="ques-container">
<div class="pam-paragraph">
<div class="mdTxt">
- �閬岷������
+ �鈭圾�����
<span class="hint text--bold">
(�銴)
</span>
@@ -80,7 +84,7 @@
:options="genderOptions" />
</div>
<div class="pam-paragraph">
- <div class="mdTxt">撟湧翩</div>
+ <div class="mdTxt">���僑朣�</div>
<SingleSelectBtn class="mt-10"
:singleSelected.sync="myRequest.age"
:options="ageRangeOptions" />
@@ -99,7 +103,7 @@
<PopUpFrame :isOpen.sync="showDrawer">
<div class="qaTextTitle mdTxt">
- <strong>�閬岷������</strong>
+ <strong>�鈭圾�����</strong>
</div>
<div class="qa-dialog">
<div v-for="(qaText,index) in quesAboutList" :key="index" >
@@ -115,12 +119,21 @@
</PopUpFrame>
<PopUpFrame :isOpen.sync="sendReserve" @update:isOpen="closeReservePopUp">
- <div class="text--middle mt-30 sendReserve-txt">�����������憿批���</div>
- <div class="text--middle sendReserve-txt">�����蝯∴��</div>
+ <div class="mdTxt mt-30 sendReserve-txt">�������</div>
+ <div class="mdTxt sendReserve-txt mb-30">�����“�������蝯∴��</div>
+ <div class="pam-app-review mb-10">
+ <div class="mdTxt mb-10">撠
+ <span class="mdTxt text--primary text--bold ">������</span>
+ 撟喳��擃����
+ </div>
+ <div class="mdTxt">�蝯虫�嗾憿��嚗�</div>
+ </div>
+ <el-rate v-model="score" class="pam-satisfaction-rate fix-chrome-click--issue"></el-rate>
<div class="text--center mdTxt">
+ <el-button @click="closeReservePopUp">����</el-button>
<el-button type="primary"
- @click="closeReservePopUp">
- ������
+ @click="reviewPlatform">
+ �
</el-button>
</div>
</PopUpFrame>
@@ -140,19 +153,42 @@
<script lang="ts">
import { Vue, Component, State, Action, Watch, namespace } from 'nuxt-property-decorator';
-import { addFavoriteConsultant, appointmentDemand, AppointmentParams, AppointmentRequests ,editAppointment,RegisterInfo } from '~/assets/ts/api/consultant';
-import { getRequestQuestionFromStorage, getRequestsFromStorage, removeRequestQuestionFromStorage, setRequestsToStorage } from '~/assets/ts/storageRequests';
+import { getRequestsFromStorage, removeRequestQuestionFromStorage, setRequestsToStorage } from '~/shared/storageRequests';
import _ from 'lodash';
-import { Consultant } from '~/assets/ts/models/consultant.model';
-import { ContactType } from '~/assets/ts/models/enum/ContactType';
-import { Gender } from '~/assets/ts/models/enum/Gender';
+
+import accountSettingService from '~/shared/services/account-setting.service';
+import appointmentService from '~/shared/services/appointment.service';
+import authService from '~/shared/services/auth.service';
+import queryConsultantService from '~/shared/services/query-consultant.service';
+import reviewsService from '~/shared/services/reviews.service';
+import { Consultant } from '~/shared/models/consultant.model';
+import { ContactType } from '~/shared/models/enum/ContactType';
+import { Gender } from '~/shared/models/enum/Gender';
+import { RegisterInfo } from '~/shared/models/registerInfo';
+import { AppointmentParams, AppointmentRequests } from '~/shared/models/appointment.model';
+import { UserSetting } from '~/shared/models/account.model';
+import { SatisfactionType } from '~/shared/models/enum/satisfaction-type';
+import { UserReviewParams } from '~/shared/models/reviews.model';
const roleStorage = namespace('localStorage');
@Component
export default class Questionnaire extends Vue {
- @State('myConsultantList') myConsultantList!: Consultant[];
- @Action storeConsultantList!: () => Promise<number>;
- @roleStorage.Getter isUserLogin!:boolean;
+ @State('myConsultantList')
+ myConsultantList!: Consultant[];
+
+ @Action
+ storeConsultantList!: () => Promise<number>;
+
+ @roleStorage.Getter
+ isUserLogin!:boolean;
+
+ @roleStorage.State
+ recommendConsultantItem!:string;
+
+ @roleStorage.Mutation
+ storageUserInfo!: (params: RegisterInfo) => void;
+
+ score = 0;
genderOptions=[
{
@@ -246,13 +282,14 @@
},
{
title:'����',
- content:'���� ���������憸券�����鈭怒�����嚗���摰帘摰漲嚗��隞亙��澈��ˊ�靽���嚗�'
+ content:'���������憸券�����鈭怒�����嚗���摰帘摰漲嚗��隞亙��澈��ˊ�靽���嚗�'
}
];
myRequest: AppointmentRequests = {
- phone : this.userInfo?.phone ? this.userInfo.phone : '',
- email : this.userInfo?.email ? this.userInfo.email : '',
+ name : '',
+ phone : '',
+ email : '',
contactType : _.isEqual(this.userInfo?.contactType,ContactType.SMS) ? ContactType.PHONE: ContactType.EMAIL,
gender : '',
age : '',
@@ -273,9 +310,11 @@
appointmentId = 0;
appointmentTime = '';
+ ////////////////////////////////////////////////////////////////////////////
+
beforeRouteEnter(to: any, from: any, next: any) {
next(vm => {
- const isUserLogin = vm.$store.getters['localStorage/isUserLogin'];
+ const isUserLogin = authService.isUserLogin();
if (from.name === 'login' && !isUserLogin) {
vm.$router.go(-1);
return;
@@ -287,19 +326,16 @@
})
}
- async fetch() {
- if (this.isUserLogin) {
- await this.storeConsultantList();
- };
- }
-
mounted(): void {
+ if (authService.isUserLogin()) {
+ this.storeConsultantList();
+ };
this.setMyRequest();
}
private setMyRequest(): void {
const storageMyRequest = getRequestsFromStorage();
- const storageMyQuestion = getRequestQuestionFromStorage();
+ const storageMyRequirement = this.recommendConsultantItem ? JSON.parse(this.recommendConsultantItem).requirements:[];
if (storageMyRequest) {
this.myRequest = {
@@ -313,100 +349,52 @@
};
}
- if (storageMyQuestion) {
+ if (storageMyRequirement) {
this.myRequest = {
...this.myRequest,
- requirement: storageMyQuestion
+ requirement: storageMyRequirement
}
removeRequestQuestionFromStorage();
}
- }
- 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() {
- if (this.isEditBtn) {
- this.sentEditAppointmentDemand();
- } else {
- addFavoriteConsultant([this.$route.params.agentNo]).then(res => this.sentAppointmentDemand());
+ if (authService.isUserLogin()) {
+ accountSettingService.getUserAccountSetting().then((contactTypeDetail) => {
+ this.myRequest = {
+ ...this.myRequest,
+ ...contactTypeDetail
+ }
+ })
}
+
}
- 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);
- });
- }
+ @Watch('myConsultantList')
+ onMyConsultantListChange() {
+ if (authService.isUserLogin() && this.myConsultantList.length > 0) {
+ const editAppointment = this.getLatestReserved(this.$route.params.agentNo);
- private sentEditAppointmentDemand() {
- const info = {
- ...this.myRequest,
- requirement: _.map(this.myRequest.requirement,o=>o).toString(),
- hopeContactTime: this.myRequest.phone && this.phoneValid ? this.getHopeContactTime() :'',
- id: this.appointmentId,
- otherRequirement: null
- }
- editAppointment(info).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('/')
+ if (editAppointment && editAppointment.agentNo) {
+ this.myRequest = JSON.parse(JSON.stringify(editAppointment));
+ if (!this.$route.query || this.$route.query.edit !== 'true') {
+ this.isEditPopup = true;
+ }
+ this.isEditBtn = true;
+ }
+ }
}
private getLatestReserved(agentNo) {
const agentInfo = this.myConsultantList.filter(item => item.agentNo === agentNo);
-
const appointmentInfo = agentInfo.length > 0 && agentInfo[0].appointments
? agentInfo[0].appointments!
- .filter((appointment) => appointment.communicateStatus !== 'contacted')
- .map((reversedAppointment) => {
- return {
- ...reversedAppointment,
+ .filter((appointment) => appointment.communicateStatus === 'reserved')
+ .map((reversedAppointment) => (
+ { ...reversedAppointment,
sortDate: new Date(reversedAppointment.appointmentDate)
- }
- })
+ }))
.sort((preAppointment, nextAppointment) => +nextAppointment.sortDate - +preAppointment.sortDate)[0]
: null;
return this.getReservedData(appointmentInfo);
@@ -414,24 +402,20 @@
private getReservedData(appointmentInfo) {
if (appointmentInfo) {
- const hopeContactTime = appointmentInfo!.hopeContactTime.split("'")
- .filter(item => item && item !== ',');
- this.getAppointmentId(appointmentInfo);
- return {
- age: appointmentInfo.age,
- agentNo: appointmentInfo.agentNo,
- contactType: appointmentInfo.contactType,
- email: appointmentInfo.email || '',
- gender: appointmentInfo.gender,
- hopeContactTime: hopeContactTime.map(item => {
+ const hopeContactTime = appointmentInfo!.hopeContactTime
+ ? appointmentInfo!.hopeContactTime.split("'").filter(item => item && item !== ',').map(item => {
const info = item.split('��');
return {
selectWeekOptions: info[0].split(','),
selectTimesOptions: info[1].split(',')
}
- }),
- job: appointmentInfo.job,
- phone: appointmentInfo.phone || '',
+ })
+ :[{selectWeekOptions : [],selectTimesOptions: []}];
+ this.getAppointmentId(appointmentInfo);
+
+ return {
+ ...appointmentInfo,
+ hopeContactTime: hopeContactTime,
requirement: appointmentInfo.requirement.split(',')
}
} else {
@@ -445,20 +429,109 @@
? appointmentInfo.lastModifiedDate
: appointmentInfo.appointmentDate;
}
- @Watch('myConsultantList') onMyConsultantListChange() {
- if (this.isUserLogin && this.myConsultantList.length > 0) {
- const editAppointment = this.getLatestReserved(this.$route.params.agentNo);
- if (editAppointment && editAppointment.agentNo) {
- this.myRequest = JSON.parse(JSON.stringify(editAppointment));
- if (!this.$route.query || this.$route.query.edit !== 'true') {
- this.isEditPopup = true;
- }
- this.isEditBtn = true;
- return;
- }
+ ////////////////////////////////////////////////////////////////////////////
+
+ sentDemand() {
+ if (this.isEditBtn) {
+ this.editAppointmentDemand();
+ } else {
+ queryConsultantService.addFavoriteConsultant([{ agentNo: this.$route.params.agentNo, createdTime: new Date().toISOString()}]).then(res => this.sentAppointmentDemand());
}
+ const editSettingInfo: UserSetting = {
+ name: this.myRequest.name,
+ phone: this.myRequest.phone,
+ email: this.myRequest.email,
+ }
+
+ accountSettingService.updateAccountSetting(editSettingInfo).then((_) => {
+ this.storageUserInfo(this.userInfo);
+ });
}
+
+ private editAppointmentDemand() {
+ const info = {
+ ...this.myRequest,
+ requirement: _.map(this.myRequest.requirement,o=>o).toString(),
+ hopeContactTime: this.myRequest.phone && this.phoneValid ? this.getHopeContactTime() :'',
+ id: this.appointmentId,
+ otherRequirement: null
+ }
+ appointmentService.editAppointment(info).then(res => {
+ this.sendReserve = true;
+ this.myRequest.hopeContactTime = [];
+ setRequestsToStorage(this.myRequest);
+ });
+ }
+
+ 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
+ };
+
+ queryConsultantService.appointmentDemand(data).then(res => {
+ this.sendReserve = true;
+ this.myRequest.hopeContactTime = [];
+ this.appointmentId = res['id'];
+ setRequestsToStorage(this.myRequest);
+ });
+ }
+
+ private getHopeContactTime() {
+ const selectedHopeContactTime = this.myRequest.hopeContactTime.filter((i) => i.selectWeekOptions?.length && i.selectTimesOptions?.length);
+ return selectedHopeContactTime.map(i => {
+ return `'${i.selectWeekOptions}��${i.selectTimesOptions}'`}
+ ).toString();
+ }
+
+ reviewPlatform(): void {
+ const reviewPlatformParams: UserReviewParams = {
+ appointmentId: this.appointmentId,
+ score: this.score,
+ type: SatisfactionType.SYSTEM
+ };
+ reviewsService.reviewPlatform(reviewPlatformParams).then((_) => {
+ this.closeReservePopUp();
+ });
+ }
+
+ closeReservePopUp() {
+ this.sendReserve = false;
+ this.$router.push('/')
+ }
+
+ ////////////////////////////////////////////////////////////////////////////
+
+ 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 emailValid() {
+ const rule = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+ return this.myRequest.email ? rule.test(this.myRequest.email) : 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.emailValid
+ : !this.phoneValid;
+ }
+
+ private isHopeContactTimeDone():boolean{
+ return this.myRequest.hopeContactTime[0]?.selectWeekOptions.length >0 && this.myRequest.hopeContactTime[0]?.selectTimesOptions.length >0;
+ }
+
}
</script>
@@ -467,7 +540,6 @@
display: flex;
justify-content: center;
margin-top: 10px;
- margin-bottom: 26px;
}
//drawer��摨���見撘�
@@ -478,7 +550,9 @@
color: #ED1B2E;
cursor: pointer;
}
-
+.error {
+ color:$PRIMARY_RED
+}
//����見撘����
.ques-footer{
justify-content: center;
@@ -540,7 +614,10 @@
transform: translate(-12px, 0);
}
}
-
+.break{
+ word-break: break-all;
+ line-height: 1.2;
+}
.ques-page--reset.pam-page-container {
margin: 0px auto;
}
@@ -573,7 +650,7 @@
@extend .text--middle,.mt-10 ;
.ques-header__input{
&.is-invalid{
- border: 2px solid $PRIMARY_RED !important;
+ border: 1px solid $PRIMARY_RED !important;
}
flex: 1;
height: 50px;
@@ -586,12 +663,24 @@
-moz-box-sizing: border-box;
}
}
-
+ .ml-4{
+ margin-left: 4px;
+ }
.ques-container {
position: relative;
margin: 0px 20px;
}
+.pam-app-review{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.pam-satisfaction-rate{
+ margin-bottom: 45px;
+}
@include desktop{
.ques-header{
@@ -619,5 +708,6 @@
}
}
+
</style>
--
Gitblit v1.8.0