| | |
| | | </el-button> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import { Vue, Component, Emit, Prop} from 'vue-property-decorator'; |
| | | |
| | | import { consultantQuestions } from '~/shared/const/consult-questions'; |
| | | |
| | | @Component |
| | | export default class ConsultantQues extends Vue{ |
| | | |
| | | showDialog = false; |
| | | other = ''; |
| | | otherQuestion = ''; |
| | | @Prop({ default: () => []}) |
| | | selectedQuestions!: string[]; |
| | | |
| | | @Prop({ default: () => []}) selectedQuestions!: string[]; |
| | | other : string = ''; |
| | | otherQuestion : string = ''; |
| | | |
| | | get questionList(): any[] { |
| | | return this.defaultQuestionList.map((question) => { |
| | | const isSeleted = (quesName: string): boolean => this.selectedQuestions.some((question) => question === quesName); |
| | | if (isSeleted(question.name)) { |
| | | question.selected = true; |
| | | questionList: ConsultQuestionWithSelect[] = []; |
| | | |
| | | ////////////////////////////////////////////////////////////////////// |
| | | |
| | | mounted() { |
| | | const isSelected = (quesName: string): boolean => this.selectedQuestions.some((question) => question === quesName); |
| | | this.questionList = consultantQuestions.map((consultQuestion) => { |
| | | return { |
| | | name: consultQuestion, |
| | | selected: isSelected(consultQuestion) |
| | | } |
| | | return question; |
| | | } |
| | | ); |
| | | }) |
| | | } |
| | | |
| | | defaultQuestionList = [ |
| | | { |
| | | name:'健康與保障', |
| | | selected:false |
| | | }, |
| | | { |
| | | name:'子女教育', |
| | | selected:false |
| | | }, |
| | | { |
| | | name:'資產規劃', |
| | | selected:false |
| | | }, |
| | | { |
| | | name:'樂活退休', |
| | | selected:false |
| | | }, |
| | | { |
| | | name:'保單健檢/規劃', |
| | | selected:false |
| | | }, |
| | | { |
| | | name:'分紅保單', |
| | | selected:false |
| | | } |
| | | ]; |
| | | ////////////////////////////////////////////////////////////////////// |
| | | |
| | | @Emit('change') |
| | | selectQuestion(questionIndex: number): any[] { |
| | |
| | | return this.questionList; |
| | | } |
| | | |
| | | } |
| | | |
| | | interface ConsultQuestionWithSelect { |
| | | name : string; |
| | | selected: boolean; |
| | | } |
| | | </script> |
| | | <style lang="scss"> |
| | |
| | | .pam-tags{ |
| | | display:flex; |
| | | flex-wrap:wrap; |
| | | |
| | | } |
| | | .tags{ |
| | | margin-right: 10px; |