From ab4e8129d5c94ff96e6c85d0d2b66a04a052b4e5 Mon Sep 17 00:00:00 2001
From: HelenHuang <LinHuang@pollex.com.tw>
Date: 星期四, 09 六月 2022 15:26:15 +0800
Subject: [PATCH] TODO#139888 嚴選配對 - 文案修改
---
PAMapp/pages/recommendConsultant/index.vue | 549 +++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 518 insertions(+), 31 deletions(-)
diff --git a/PAMapp/pages/recommendConsultant/index.vue b/PAMapp/pages/recommendConsultant/index.vue
index 305c56d..e085da4 100644
--- a/PAMapp/pages/recommendConsultant/index.vue
+++ b/PAMapp/pages/recommendConsultant/index.vue
@@ -1,51 +1,57 @@
<template>
<div class="pam-rec-consultant-page">
<div class="pb-10 mdTxt">憿批��批</div>
- <SingleSelectBtn :singleSelected.sync="strictQueryDto.gender" :options="genderOptions"/>
+ <SingleSelectBtn :singleSelected.sync="strictQueryDto.gender"
+ :options="genderOptions" />
<div class="pam-paragraph">
- <div class="pb-10 mdTxt required">憿批������</div>
- <div class="job-pick cursor--pointer"
+ <div class="pb-10 mdTxt required">憿批�����</div>
+ <div class="job-pick"
@click="showAddress = true">
- <input class="text--middle input cursor--pointer pl-10"
+ <input class="text--middle cursor--pointer input pl-10"
:value="strictQueryDto.area"
- placeholder="隢���">
+ placeholder="隢���"
+ readonly>
<i class="icon-down down-icon"></i>
</div>
- <PopUpFrame :isOpen.sync="showAddress"
- :drawerSize="'65%'">
- <AddressPicker
- @confirm="confirmAddress" />
+ <PopUpFrame :isOpen.sync="showAddress">
+ <AddressPicker @confirm="confirmAddress" />
</PopUpFrame>
</div>
<div class="pam-paragraph">
<div class="pb-10 mdTxt required">
- �閬岷������
+ �鈭圾�����
<span class="hint text--bold">
(�銴)
</span>
- <i class="icon-information text--bold fix-chrome-click--issue" @click="showDialog = true"></i>
+ <i class="icon-information text--bold fix-chrome-click--issue"
+ @click="showDialog = true"></i>
</div>
- <MultiSelectBtn :mutiSelect.sync="strictQueryDto.requirements" :options="requirementOptions" class="rec-multi-select" />
+ <MultiSelectBtn :mutiSelect.sync="strictQueryDto.requirements"
+ :options="requirementOptions"
+ class="rec-multi-select" />
</div>
<div class="pam-paragraph">
<div class="pb-10 mdTxt">憿批�僑鞈�</div>
- <SingleSelectBtn :singleSelected.sync="strictQueryDto.seniority" :options="seniorityOptions"/>
+ <SingleSelectBtn :singleSelected.sync="strictQueryDto.seniority"
+ :options="seniorityOptions" />
</div>
- <div class="pam-paragraph">
- <div class="pb-10 mdTxt">靽憿批�遛��漲</div>
+ <div class="pam-paragraph" v-if="!hideReviews">
+ <div class="pb-10 mdTxt">憿批�遛��漲</div>
<el-rate class="pam-consultant-rate" v-model="strictQueryDto.avgScore">
</el-rate>
</div>
<div class="pam-paragraph">
<div class="rec-popular">
- <div class="pb-10 mdTxt">���瑼Ｙ揣</div>
+ <div class="pb-10 mdTxt">����摮�</div>
<div class="hint text--bold ml-10">(�銴)</div>
</div>
<div class="rec-pop-container">
- <MultiSelectBtn :mutiSelect.sync="strictQueryDto.popularTags"
- :options="popularOptions"
- :nameOfOtherOption="'#�隞�'" :otherSelect.sync="strictQueryDto.otherPopularTags" class="rec-pop-options"/>
- </div>
+ <MultiSelectBtn :mutiSelect.sync="strictQueryDto.popularTags"
+ :options="popularOptions"
+ :nameOfOtherOption="'#�隞�'"
+ :otherSelect.sync="strictQueryDto.otherPopularTags"
+ class="rec-pop-options" />
+ </div>
</div>
<div class="rec-footer pam-paragraph">
<el-button type="primary"
@@ -53,10 +59,9 @@
@click="makePair">擐砌����</el-button>
</div>
- <PopUpFrame :isOpen.sync="showDialog"
- :drawerSize=" '95%' ">
+ <PopUpFrame :isOpen.sync="showDialog">
<div class="qaTextTitle mdTxt">
- <strong>�閬岷������</strong>
+ <strong>�鈭圾�����</strong>
</div>
<div class="qa-dialog">
<div v-for="(qaText,index) in queaAboutList"
@@ -67,24 +72,506 @@
</div>
</div>
</div>
- <div class="text--center mdTxt mt-30 mb-30">
- <el-button type="primary" @click="showDialog = false">������</el-button>
+ <div class="text--center mdTxt mt-30">
+ <el-button type="primary"
+ @click="showDialog = false">������</el-button>
</div>
</PopUpFrame>
<PopUpFrame :isOpen.sync="isVisiblePopUp">
<div class="text--center mdTxt">
- <p class="mb-50">撠��鞈��</p>
- <div class="text--center mdTxt">
- <el-button type="primary" @click="isVisiblePopUp = false">������</el-button>
- </div>
+ <p class="mb-50">撠��鞈��</p>
+ <div class="text--center mdTxt">
+ <el-button type="primary"
+ @click="isVisiblePopUp = false">������</el-button>
</div>
+ </div>
</PopUpFrame>
</div>
</template>
-<script src="./recommend-consultant.component.ts"></script>
+<script lang="ts">
+ import { Action, Component, Mutation, namespace ,State,Vue } from "nuxt-property-decorator";
+ import { StrictQueryDto } from "~/shared/models/strictQueryDto.model";
+ import { Gender } from "~/shared/models/enum/Gender";
+ import { Seniority } from "~/shared/models/enum/seniority";
+ import { hideReviews } from '~/shared/const/hide-reviews';
+
+
+ const localStorage = namespace('localStorage');
+ @Component
+ export default class RecommendConsultant extends Vue {
+ isVisiblePopUp = false;
+ hideReviews = hideReviews;
+ strictQueryDto: StrictQueryDto = {
+ gender: '',
+ area: '',
+ status: '',
+ requirements: [],
+ otherRequirement: '',
+ seniority: '',
+ avgScore: 0,
+ popularTags: [],
+ otherPopularTags: '',
+ };
+ genderOptions = [{
+ title: '���',
+ label: Gender.MALE,
+ },
+ {
+ title: '憟單��',
+ label: Gender.FEMALE,
+ }
+ ];
+ requirementOptions = [{
+ title: '�摨瑁����',
+ label: '�摨瑁����',
+ },
+ {
+ title: '摮戊��',
+ label: '摮戊��',
+ },
+ {
+ title: '鞈閬��',
+ label: '鞈閬��',
+ },
+ {
+ title: '璅暑��隡�',
+ label: '璅暑��隡�',
+ },
+ {
+ title: '靽�瑼�/閬��',
+ label: '靽�瑼�/閬��',
+ },
+ {
+ title: '����',
+ label: '����',
+ },
+ ];
+ seniorityOptions = [{
+ title: '銝��',
+ subTitle: '蝬風銝����',
+ label: Seniority.UNLIMITED,
+ },
+ {
+ title: '����',
+ subTitle: '���暑��遛暺�',
+ label: Seniority.YOUNG,
+ },
+ {
+ title: '鞈楛',
+ subTitle: '����麾',
+ label: Seniority.SENIOR,
+ }
+ ];
+ popularOptions = [{
+ title: '#��',
+ label: '��'
+ },
+ {
+ title: '#憭梯',
+ label: '憭梯'
+ },
+ {
+ title: '#����',
+ label: '����'
+ },
+ {
+ title: '#����',
+ label: '����'
+ },
+ {
+ title: '#憯賡',
+ label: '憯賡'
+ },
+ {
+ title: '#����',
+ label: '����'
+ },
+ {
+ title: '#����',
+ label: '����'
+ },
+ {
+ title: '#����',
+ label: '����'
+ }
+ ];
+ queaAboutList = [{
+ title: '�摨瑁����',
+ content: '����澈擃憿批末嚗�靽�兢蝳�嚗��������嚗��飩������摮拙��粥銝��頝荔�犖����迤閬����'
+ },
+ {
+ title: '摮戊��',
+ content: '摮拙���������葦銋摮貊��撠靘�蒂�雿嚗飛���������������瓷嚗��楝銝���韏瑕飛��'
+ },
+ {
+ title: '鞈閬��',
+ content: '��迤��瓷撖��雓寡�����嚗鈭箇�����蝳西瓷��◢�����Ⅱ靽�蝛拙��嚗�摰嗆��靘�末��皞���'
+ },
+ {
+ title: '璅暑��隡�',
+ content: '�銝�頛拙����隡��摮���翰瘣鳴�停敺�����������隡瓷����撌勗�帘摰�嚗蝎曉蔗���僑鈭箇�������'
+ },
+ {
+ title: '靽�瑼�/閬��',
+ content: '��瑼Ｚ�撌梁������蝚血����靘�◢�蝘餉��瘙��'
+ },
+ {
+ title: '����',
+ content: '���������憸券�����鈭怒�����嚗���摰帘摰漲嚗��隞亙��澈��ˊ�靽���嚗�'
+ }
+ ];
+ showDialog = false;
+ showAddress = false;
+
+ @Mutation
+ updateStrictQueryList!: (data: any) => void;
+
+ @Action
+ storeStrictQueryList!: (data: any) => Promise < number > ;
+
+ @State
+ strictQueryList!: any;
+
+ @localStorage.State
+ recommendConsultantItem!: string;
+
+ //////////////////////////////////////////////////////////////////////
+ mounted() {
+ if (!!this.recommendConsultantItem) {
+ this.strictQueryDto = {
+ ...this.strictQueryDto,
+ ...JSON.parse(this.recommendConsultantItem)
+ };
+ }
+ }
+
+ //////////////////////////////////////////////////////////////////////
+ async makePair() {
+ await this.storeStrictQueryList(this.strictQueryDto).then(dataLength => {
+ if (dataLength === 0) {
+ this.isVisiblePopUp = true;
+ return;
+ }
+ this.$router.push('/recommendConsultant/result');
+ });
+ }
+
+ confirmAddress(area: string) {
+ this.strictQueryDto.area = area;
+ this.showAddress = false;
+ }
+
+ //////////////////////////////////////////////////////////////////////
+ get notFinishByRequireRules(): boolean {
+ const area = this.strictQueryDto.area;
+ const requirementLength = this.strictQueryDto.requirements
+ ? this.strictQueryDto.requirements.length
+ : 0;
+ return !(area && requirementLength > 0)
+ }
+ }
+
+</script>
<style lang="scss">
- @import "./recommend-consultant.component.scss";
+ .pam-rec-consultant-page {
+ .rec-pop-container {
+ width: 310px;
+
+ .rec-pop-options {
+ .el-checkbox-group {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+
+ .el-checkbox {
+ width: 90px;
+ height: 50px;
+ padding: 0;
+
+ .el-checkbox__label {
+ justify-content: center;
+ align-items: center;
+ display: flex;
+ padding: 15px 20px;
+ text-align: center;
+ }
+ }
+
+ .pam-selectAll-btn {
+ margin-top: 60px;
+ margin-left: -203px;
+ height: 50px;
+ width: 90px;
+ padding: 10px;
+ }
+
+ }
+ }
+
+ }
+
+ .rec-multi-select {
+ .el-checkbox-group {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ }
+
+ input:focus,
+ textarea:focus {
+ outline: none;
+ }
+
+ .input {
+ border: none;
+ width: 90%;
+ border-radius: 10px;
+ }
+
+ .job-pick {
+ height: 50px;
+ border-radius: 10px;
+ border: 1px solid #D0D0CE;
+ display: flex;
+ justify-content: space-between;
+ background-color: #FFFFFF;
+ }
+
+ .down-icon {
+ margin-right: 15px;
+ }
+
+ .popOtherBtn {
+ margin-left: -190px;
+ margin-top: 45px;
+ }
+
+ .genderBtn {
+ width: 80px;
+ height: 47px;
+ display: contents;
+ }
+
+ .qa-dialog {
+ overflow-y: auto;
+ height: 60vh;
+ margin-top: 20px;
+ text-align: justify;
+ }
+
+ .qaTextTitle {
+ margin-top: 30px
+ }
+
+ .qa-dialog-footer {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 81px;
+ color: #ED1B2E;
+ cursor: pointer;
+ }
+
+ .el-drawer__container ::-webkit-scrollbar {
+ display: none;
+ }
+
+ .el-button+.el-button {
+ margin-left: 0;
+ }
+
+ .seniority-choice {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .area-choice {
+ height: 50px;
+ border-radius: 10px;
+ border: 1px solid #D0D0CE;
+ display: flex;
+ justify-content: space-between;
+ background-color: #FFFFFF;
+ }
+
+ .area-icon {
+ color: #ED1B2E;
+ font-size: 25px;
+ display: flex;
+ justify-content: flex-end;
+ padding-right: 16px;
+ padding-top: 11px;
+ }
+
+ input::-webkit-input-placeholder {
+ font-size: 20px;
+ padding-left: 10px;
+ }
+
+ .el-button.is-disabled {
+ font-size: 20px;
+ border-radius: 20px;
+ color: #FFFFFF;
+ background-color: #A7A8AA;
+ border: 1px solid #A7A8AA;
+ }
+
+ .rec-footer {
+ height: 70px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .other-PopBtn {
+ width: 90px;
+ height: 47px;
+ margin-top: 10px;
+ }
+
+
+
+ .rec-ques-location {
+ display: flex;
+ align-items: center;
+ }
+
+ .pop-tag {
+ display: flex;
+ flex-wrap: wrap;
+ margin: -10px;
+
+ }
+
+ .rec-popular {
+ display: flex;
+ align-items: baseline;
+ padding-top: 10px;
+ margin-bottom: 10px;
+ }
+
+ .rec-btn-type {
+ padding-bottom: 10px;
+ }
+
+ .rec-question {
+ display: flex;
+ flex-direction: column;
+
+ }
+
+ .rec-banner {
+ height: 120px;
+ background-color: #D0D0CE;
+
+ }
+
+ .rec-btn {
+ font-size: 20px;
+ border-radius: 20px;
+ color: black;
+ border: 1px solid #D0D0CE;
+ }
+
+ .rec-pop-btn {
+ font-size: 20px;
+ border-radius: 20px;
+ color: black;
+ margin: 0px 0px 10px 10px;
+ border: 1px solid #D0D0CE;
+ width: 90px;
+ height: 47px;
+ }
+
+ .el-progress__text {
+ display: none;
+ }
+
+ .el-progress-bar {
+ padding-right: 0;
+ }
+
+ .el-progress-bar__inner {
+ background-color: #ED1B2E;
+ }
+
+ .required {
+ position: relative;
+
+ &::before {
+ content: '*';
+ position: absolute;
+ color: #FF0000;
+ transform: translate(-12px, 0);
+ z-index: 5;
+ }
+ }
+
+ .area-txt {
+ display: flex;
+ align-items: center;
+ margin-left: 18px;
+ }
+
+ @include desktop {
+
+ .desktopBtn {
+ margin-right: 10px;
+ height: 47px
+ }
+
+ .popOtherBtn {
+ margin-left: 10px;
+ margin-top: -10px;
+ }
+
+ .rec-pop-container {
+ width: auto;
+
+ .rec-pop-options {
+ .el-checkbox-group {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: none;
+
+ .el-checkbox {
+ width: 90px;
+ height: 50px;
+ padding: 0;
+
+ .el-checkbox__label {
+ justify-content: center;
+ align-items: center;
+ display: flex;
+ padding: 15px 20px;
+ text-align: center;
+ }
+ }
+
+ .pam-selectAll-btn {
+ margin-top: 0px;
+ margin-left: 0px;
+ height: 50px;
+ width: 90px;
+ padding: 10px;
+ }
+ }
+ }
+
+ }
+
+ .rec-multi-select {
+ .el-checkbox-group {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ flex-wrap: wrap;
+ }
+ }
+ }
+ }
+
</style>
--
Gitblit v1.8.0