| | |
| | | <template> |
| | | <div> |
| | | <div class="pam-rec-cosultant-page"> |
| | | <div class="pb-10 mdTxt">您的性別</div> |
| | | <SingleSelectBtn :singleSelected.sync="strictQueryDto.gender" :options="genderOptions"/> |
| | | <div class="pam-paragraph"> |
| | |
| | | <i class="icon-information text--bold" @click="showDialog = true"></i>可複選 |
| | | </span> |
| | | </div> |
| | | <MultiSelectBtn :mutiSelect.sync="strictQueryDto.requirements" :options="requirementOptions" /> |
| | | <MultiSelectBtn :mutiSelect.sync="strictQueryDto.requirements" :options="requirementOptions" class="rec-multi-select" /> |
| | | </div> |
| | | <div class="pam-paragraph pam-tags"> |
| | | <div class="pb-10 mdTxt">顧問年資</div> |
| | | <SingleSelectBtn :singleSelected.sync="strictQueryDto.seniority" :options="seniorityOptions"/> |
| | | <SingleSelectBtn :singleSelected.sync="strictQueryDto.seniority" :options="seniorityOptions"/> |
| | | </div> |
| | | <div class="rate-consultant pam-paragraph"> |
| | | <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" /> |
| | | :nameOfOtherOption="'#其他'" :otherSelect.sync="strictQueryDto.otherPopularTags" class="rec-pop-options"/> |
| | | </div> |
| | | </div> |
| | | <div class="rec-footer pam-paragraph"> |
| | | <el-button type="primary" |
| | |
| | | <script lang="ts"> |
| | | import { |
| | | Vue, |
| | | Component |
| | | } from 'vue-property-decorator'; |
| | | Component, |
| | | Mutation |
| | | } from 'nuxt-property-decorator'; |
| | | import {strictQuery} from '~/assets/ts/api/consultant'; |
| | | import * as _ from 'lodash'; |
| | | @Component |
| | |
| | | showAddress = false; |
| | | elRateColors = ['#ED1B2E', '#ED1B2E', '#ED1B2E']; |
| | | |
| | | @Mutation updateStrictQueryList!: (data: any) => void; |
| | | |
| | | makePair():void{ |
| | | strictQuery(this.strictQueryDto).then(res=>{ |
| | | console.log('resultData',res.data); |
| | | this.$router.push('/recommendConsultant/result'); |
| | | this.updateStrictQueryList(res.data); |
| | | this.$router.push('/recommendConsultant/result'); |
| | | }); |
| | | } |
| | | get notFinishByRequireRules():boolean{ |
| | |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | <style lang="scss" > |
| | | |
| | | .pam-rec-cosultant-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; |
| | |
| | | |
| | | .qa-dialog { |
| | | overflow-y: auto; |
| | | height: auto; |
| | | height: 500px; |
| | | margin-top: 20px; |
| | | } |
| | | |
| | |
| | | justify-content: center; |
| | | margin-bottom: 81px; |
| | | color: #ED1B2E; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .el-drawer__container ::-webkit-scrollbar { |
| | |
| | | position: absolute; |
| | | color: #FF0000; |
| | | transform: translate(-12px, 0); |
| | | z-index: 5; |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | .icon-information { |
| | | padding: 0 5px; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | |
| | |
| | | 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> |