From 7cfc771d3ace8f057ef7f534b9ee7c9649ac7d8f Mon Sep 17 00:00:00 2001 From: HelenHuang <LinHuang@pollex.com.tw> Date: 星期四, 30 十二月 2021 10:09:25 +0800 Subject: [PATCH] [Fix] TODO#133359 [調整文案 - 「你」調整成「您」] --- PAMapp/pages/recommendConsultant/index.vue | 896 +++++++++++++++++++++++++++++++++++----------------------- 1 files changed, 538 insertions(+), 358 deletions(-) diff --git a/PAMapp/pages/recommendConsultant/index.vue b/PAMapp/pages/recommendConsultant/index.vue index 3678695..1b59b21 100644 --- a/PAMapp/pages/recommendConsultant/index.vue +++ b/PAMapp/pages/recommendConsultant/index.vue @@ -1,396 +1,576 @@ <template> -<div class="pam-page"> - <div class="pb-10 mdTxt">����批</div> - <div class="mb-30 pam-tags "> - <el-button style="margin-right:10px" @click="gender = 'male'" :class="{ 'active': gender ==='male'}">���</el-button> - <el-button @click="gender = 'female'" :class="{'active': gender === 'female'}">憟單��</el-button> + <div class="pam-rec-consultant-page"> + <div class="pb-10 mdTxt">憿批��批</div> + <SingleSelectBtn :singleSelected.sync="strictQueryDto.gender" + :options="genderOptions" /> + <div class="pam-paragraph"> + <div class="pb-10 mdTxt required">憿批�����</div> + <div class="job-pick" + @click="showAddress = true"> + <input class="text--middle cursor--pointer input pl-10" + :value="strictQueryDto.area" + placeholder="隢���" + readonly> + <i class="icon-down down-icon"></i> + </div> + <PopUpFrame :isOpen.sync="showAddress"> + <AddressPicker @confirm="confirmAddress" /> + </PopUpFrame> </div> - <div class="mb-30"> - <div class="pb-10 mdTxt required">������</div> - <div class="area-choice"><div class="fz-20 area-txt">�����</div><i class="icon-down area-icon"></i></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> + </div> + <MultiSelectBtn :mutiSelect.sync="strictQueryDto.requirements" + :options="requirementOptions" + class="rec-multi-select" /> </div> - <div class="mb-10"> - <div class="pb-10 mdTxt required">�閬岷������<span class="hint text--bold" @click="showDialog = true"><i class="icon-information text--bold" @click="showDialog = true"></i>�銴</span></div> - + <div class="pam-paragraph"> + <div class="pb-10 mdTxt">憿批�僑鞈�</div> + <SingleSelectBtn :singleSelected.sync="strictQueryDto.seniority" + :options="seniorityOptions" /> </div> - <ConsultantQues class="mb-30"/> + <!-- <div class="pam-paragraph"> + TODO:���遛��漲 + <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">���瑼Y揣</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> + </div> + <div class="rec-footer pam-paragraph"> + <el-button type="primary" + :disabled="notFinishByRequireRules" + @click="makePair">擐砌����</el-button> + </div> - - <div class="mb-30 pam-tags"> - <div class= "pb-10 mdTxt">憿批�僑鞈�</div> - <div class="rec-ageDesktop"> - <el-button class="mb-10 qaTags" @click="seniority = 'unlimited'" :class="{'active':seniority === 'unlimited'}"> - <span class="text--bold">銝�� </span><span>撟湧翩銝����</span> - </el-button> - <el-button class="mb-10 qaTags" @click="seniority = 'junior'" :class="{'active':seniority === 'junior'}"> - <span class="text--bold">撟渲�� </span><span>蝯血僑頛犖銝�����</span> - </el-button> - <el-button class="mb-10 qaTags" @click="seniority = 'senior'" :class="{'active':seniority === 'senior'}"> - <span class="text--bold">鞈楛 </span><span>����麾</span> - </el-button> + <PopUpFrame :isOpen.sync="showDialog"> + <div class="qaTextTitle mdTxt"> + <strong>�閬岷������</strong> + </div> + <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 class="text--center mdTxt mt-30"> + <el-button type="primary" + @click="showDialog = false">������</el-button> + </div> + </PopUpFrame> - </div> - - <div class="rate-consultant mb-30"> - <div> - <div class="pb-10 mdTxt">靽憿批�遛��漲</div> + <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> - <el-rate v-model="ratevalue" :colors="elRateColors" class="rate" @change="selected"></el-rate> - </div> - - <div class="mb-30"> - <div class="rec-popular"> - <div class="pb-10 mdTxt">���瑼Y揣</div> - <div class="hint text--bold ml-10">�銴</div> - </div> - <div class="pop-tag pam-tags"> - <div v-for="(popularItem,index) in popularList" :key="index"> - <el-button class="rec-pop-btn" :class="{'active': popularItem.reversation}" - @click="popularTarget(index)">{{'#'+popularItem.name}} - </el-button> - </div> - <div class="pam-tags popOtherBtn"> - <el-button class="other-PopBtn " @click="popOther=!popOther" :class="{'active':popOther=popOther}">#�隞�</el-button> - </div> - </div> - <div> - <input v-if="popOther" class="other-input " placeholder="隢撓�,��摮�"> - </div> - </div> - - <div class="rec-footer"> - <el-button - :disabled="disableActionButton" - @click="$router.push('recommendConsultant/result')">擐砌����</el-button> - </div> - <UiDrawer :is-visible.sync="showDialog" size='95%'> - - <div class="qaTextTitle mdTxt"><strong>�閬岷������</strong></div> - - <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 class="qa-dialog-footer mdTxt" @click="showDialog = false"><p>������</p></div> - </UiDrawer> - <!-- <UiDialog :is-visible.sync="showDialog" > - - - - - </UiDialog> --> -</div> + </div> + </PopUpFrame> + </div> </template> + <script lang="ts"> -import { Vue, Component } from 'vue-property-decorator'; -@Component - export default class RecommendConsultant extends Vue { - - ratevalue = null; - showDialog = false; - elRateColors=['#ED1B2E','#ED1B2E','#ED1B2E']; - gender: 'male'|'female' = 'male'; - seniority:'unlimited'|'junior'|'senior' = 'unlimited' ; - popOther = ''; - yearList=[ - { - title:'銝�� ', - subTitle:'撟湧翩銝����', - reversation:false - }, - { - title:'撟渲�� ', - subTitle:'蝯血僑頛犖銝�����', - reversation:false - }, - { - title:'鞈楛 ', - subTitle:'����麾', - reversation:false - }, - ] - popularList=[ - { - name:'��', - reversation:false - }, - { - name:'憭梯', - reversation:false - }, - { - name:'����', - reversation:false - }, - { - name:'����', - reversation:false - }, - { - name:'憯賡', - reversation:false - }, - { - name:'����', - reversation:false - }, - { - name:'����', - reversation:false - }, - { - name:'����', - reversation:false - } - ] - queaAboutList=[ - { - title:'�摨瑁����', - content:'蝒���������敺����犖��振摨剜����������������������靘��' - }, - { - title:'摮戊��', - content:'������嚗������� ���摮戊雿�����暑�������' - }, - { - title:'鞈閬��', - content:'�鞎∪�痊隞餃�������雲������������風嚗鈭箇����撥�����' - }, - { - title:'璅暑��隡�', - content:'��靽�������嚗��暑����車������犖�����挾���暑��閬��' - }, - { - title:'靽�瑼�/閬��', - content:'��瑼Z�撌梁������蝚血����靘�◢�蝘餉��瘙�������������銝��' - }, - { - title:'��靽', - content:'���漲��������翰�祟�敺����雿�憿批����脰�������蝯行�����潘��隞乩������“������潦��' - }, - { - title:'�隞�', - content:'���漲��������翰�祟�敺����雿�憿批����脰�������蝯行�����潘��隞乩������“������潦��' - }, - ] - ageTarget(index: any){ - this.yearList[index].reversation = !this.yearList[index].reversation ; - } - popularTarget(index: any){ - this.popularList[index].reversation = !this.popularList[index].reversation ; - } - - get disableActionButton(): boolean { - return true; - } + 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"; + const localStorage = namespace('localStorage'); + @Component + export default class RecommendConsultant extends Vue { + isVisiblePopUp = false; + 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: '��瑼Z�撌梁������蝚血����靘�◢�蝘餉��瘙��' + }, + { + title: '����', + content: '���������憸券�����鈭怒�����嚗���摰帘摰漲嚗��隞亙��澈��ˊ�靽���嚗�' + } + ]; + showDialog = false; + showAddress = false; - // @Prop() ilist + @Mutation + updateStrictQueryList!: (data: any) => void; - // remove() { + @Action + storeStrictQueryList!: (data: any) => Promise < number > ; - // } + @State + strictQueryList!: any; - // get agentList() { - // return - // } - selected() { - console.log(this.ratevalue); - } + @localStorage.State + recommendConsultantItem!: string; + + ////////////////////////////////////////////////////////////////////// + mounted() { + if (!!this.recommendConsultantItem) { + 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"> -.popOtherBtn{ + .pam-rec-consultant-page { + .rec-pop-container { + width: 310px; - margin-left: -190px; - margin-top: 45px; -} -.genderBtn{ - width:80px; - height:47px; - display: contents; -} -.qa-dialog{ - overflow-y:auto; - height: 500px; - margin-top: 20px; -} -.qaTextTitle{ - margin-top:30px -} -.qa-dialog-footer{ - display: flex; - justify-content: center; - margin-bottom: 81px; - color: #ED1B2E; -} -.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; - margin: -10px; -} -.other-PopBtn{ - width: 90px; - height: 47px; - margin-top: 10px; -} -.other-input{ - margin-top: 20px; - height: 50px; - width:316px; - border:1px solid #CCCCCC; - ; -} -.rec-ques-location{ - display:flex; - align-items: center; -} -.pop-tag{ - display: flex; - flex-wrap: wrap; - margin: -10px; + .rec-pop-options { + .el-checkbox-group { + display: flex; + flex-wrap: wrap; + flex-direction: row; -} -.rec-popular{ - display: flex; - align-items: baseline; - padding-top: 10px; - margin-bottom: 10px; -} + .el-checkbox { + width: 90px; + height: 50px; + padding: 0; -.rec-btn-type{ - padding-bottom: 10px; + .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-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; -} -.rate-consultant{ - - .el-rate__icon{ - font-size:35px - } -} -.el-progress__text{ - display: none; -} -.el-progress-bar{ - padding-right: 0; -} -.el-progress-bar__inner{ - background-color:#ED1B2E; -} + } -.required { - position: relative; - &::before { + } + + .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 { + color: #ED1B2E; + font-size: 25px; + align-self: center; + 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; + } } -} -.hint { - font-size: 16px; - color: #ED1B2E; - font-weight: bold; - .icon-information { - padding: 0 5px; + .area-txt { + display: flex; + align-items: center; + margin-left: 18px; } -} + @include desktop { -.area-txt{ - display: flex; - align-items: center; - margin-left: 18px; -} - -@include desktop { - .other-input{ - height: 50px; - width:316px; - border:1px solid #CCCCCC; - margin-left: 10px; -} - .desktopBtn{ + .desktopBtn { margin-right: 10px; - height:47px + 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; + } + } } - .popOtherBtn{ - margin-left:10px; - margin-top:-10px; -} -} -</style> + } +</style> -- Gitblit v1.8.0