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/components/QuickFilter/QuickFilterSelector.vue | 191 +++++++++++++++++++++++++++++++++-------------- 1 files changed, 134 insertions(+), 57 deletions(-) diff --git a/PAMapp/components/QuickFilter/QuickFilterSelector.vue b/PAMapp/components/QuickFilter/QuickFilterSelector.vue index 9ed3f66..5baa545 100644 --- a/PAMapp/components/QuickFilter/QuickFilterSelector.vue +++ b/PAMapp/components/QuickFilter/QuickFilterSelector.vue @@ -2,32 +2,63 @@ <div> <div class="mb-10" v-if="questionOption.title !== '憿批��批'"> <span class="mdTxt" - >{{questionOption.title === '憿批�遛��漲' ? '靽憿批�遛��漲' : questionOption.title}} + >{{questionOption.title}} </span> <span class="smTxt_bold text--primary" v-if="questionOption.name === 'communicationStyles'" - >�銴</span> + >(��憭��蝔�)</span> <span class="smTxt_bold text--primary" v-if="questionOption.name === 'avgScore'" >������</span> </div> - <div class="quickBtnBlock" v-if="questionOption.name === 'communicationStyles'"> - <el-checkbox-group class="pam-quickFilter-checkbox" v-model="pickedItem.communicationStyles"> + <!-------------------- 皞�◢� --------------------> + <div class="quickBtnBlock" + v-if="questionOption.name === 'communicationStyles'" + > + <el-checkbox-group + class="pam-quickFilter-checkbox" + v-model="pickedItem.communicationStyles" + > <el-checkbox v-for="(i, index) in questionOption.detail" :key="index" :label="i.value" :name="i.value" :class="i.className" + @change="selectedCommunicationStyles" ></el-checkbox> </el-checkbox-group> </div> - - <div class="quickBtnBlock" v-else-if="questionOption.name === 'gender'"> - <el-radio-group class="pam-quickFilter-radio" v-model="pickedItem.gender"> + <!-------------------- 撟渲�� --------------------> + <div class="quickBtnBlock" + v-else-if="questionOption.name === 'seniority'" + > + <el-radio-group + class="pam-quickFilter-radio pam-radio-group" + v-model="pickedItem.seniority" + > + <el-radio + v-for="(i, index) in questionOption.detail" + :key="index" + :label="i.value" + :class="i.className" + > + <div>{{i.name}}</div> + <div class="subtitle">{{i.subTitle}}</div> + </el-radio> + </el-radio-group> + </div> + <!-------------------- �批 --------------------> + <div class="quickBtnBlock" + v-else-if="questionOption.name === 'gender'" + > + <el-radio-group + class="pam-quickFilter-radio" + v-model="pickedItem.gender" + > <el-radio v-for="(i, index) in questionOption.detail" :key="index" @@ -36,53 +67,115 @@ >{{i.name}}</el-radio> </el-radio-group> </div> - - <div class="quickBtnBlock" v-else-if="questionOption.name === 'status'"> - <el-radio-group class="pam-quickFilter-radio" v-model="pickedItem.status"> - <el-radio - v-for="(i, index) in QuestionOption.detail" - :key="index" - :label="i.value" - :class="i.className" - ></el-radio> - </el-radio-group> - </div> - + <!-------------------- 皛踵�漲 --------------------> <div v-else> - <el-rate class="pam-quickFilter-rate" v-model="pickedItem.avgScore"></el-rate> + <el-rate + v-if="!hideReviews" + class="pam-rate mt-30" + v-model="pickedItem.avgScore" + ></el-rate> </div> + + <div class="text--center mt-30"> + <el-button + class="pam-select-confirm" + type="primary" + @click="confirm" + :disabled="isDisabled" + >蝣箄��</el-button> + </div> + </div> </template> <script lang="ts"> -import { Vue, Component, PropSync, Prop, Watch } from 'nuxt-property-decorator'; -import { FastQueryParams } from '~/assets/ts/api/consultant'; -import { QuestionOption } from '~/pages/quickFilter/index.vue'; - +import { Vue, Component, Prop, Watch, Emit } from 'nuxt-property-decorator'; +import { hideReviews } from '~/shared/const/hide-reviews'; +import { FastQueryParams, QuestionOption, Selected } from '~/shared/models/quick-filter.model'; @Component export default class QuickFilterDrawer extends Vue { + @Prop() + questionOption!: QuestionOption; + + @Prop() + isOpenQuestionPopUp!: boolean; + + @Prop() + confirmItem!: Selected[]; pickedItem: FastQueryParams = { communicationStyles: [], status: '', gender: '', - avgScore: 0 + avgScore: 0, + seniority: '' } + hideReviews = hideReviews ; - mounted() { - console.log(this.questionOption, 'questionOption') - } + ////////////////////////////////////////////////////////////////// - @PropSync('drawerVisible') isVisible!: boolean; - @Prop() selectedItem!: FastQueryParams; - @Prop() questionOption!: QuestionOption; - - @Watch('selectedItem', {deep: true, immediate: true}) watchSelected(newValue: FastQueryParams) { - if (newValue) { - this.pickedItem = JSON.parse(JSON.stringify(this.selectedItem)) + @Watch('isOpenQuestionPopUp', {immediate: true}) + onPopUpChange() { + this.pickedItem = { + communicationStyles: this.getCommunicationStyles(), + status: '', + gender: this.getGender(), + avgScore: this.getAvgScore(), + seniority: this.getSeniority() } } + @Emit('confirm') + confirm() { + const name = this.questionOption.name; + return { + option: name, + value: this.pickedItem[name] + } + } + + ////////////////////////////////////////////////////////////////// + + get isDisabled() { + const name = this.questionOption.name; + return name === 'gender' && !this.pickedItem[name] + || name === 'avgScore' && !this.pickedItem[name] + || name === 'communicationStyles' && !this.pickedItem[name].length + || name === 'seniority' && !this.pickedItem[name] + } + + selectedCommunicationStyles() { + if (this.pickedItem.communicationStyles.length > 2) { + this.pickedItem.communicationStyles.shift(); + } + } + + ////////////////////////////////////////////////////////////////// + + private getGender(): string { + return this.filterSingleSelected('gender'); + } + + private getAvgScore(): number { + return this.filterSingleSelected('avgScore'); + } + + private getCommunicationStyles(): string[] { + return this.confirmItem + .filter(item => item.option === 'communicationStyles') + .map(item => item.value); + } + + private getSeniority(): string { + return this.filterSingleSelected('seniority'); + } + + private filterSingleSelected(name: string) { + const filter = this.confirmItem.filter(item => item.option === name); + return filter.length > 0 + ? filter[0].value + : (name === 'avgScore' ? 0 : ''); + } } </script> @@ -91,28 +184,12 @@ .quickBtnBlock { display: flex; justify-content: space-between; - align-content: space-between; flex-wrap: wrap; - - .quickBtn { - width: 48%; - height: 110px; - text-align: center; - box-shadow: 0 0 6px #22222229; - padding: auto 0 auto 0; - border-radius: 10px; - color: $PRIMARY_BLACK; - - &:hover,&:focus { - color: $PRIMARY_BLACK; - border-color: $PRIMARY_WHITE; - background-color: $PRIMARY_WHITE; - } - } - - .quickBtn+.quickBtn { - margin-left: 0; - } } -</style> \ No newline at end of file + .pam-radio-group { + height: 240px; + flex-wrap: wrap; + } + +</style> -- Gitblit v1.8.0