| | |
| | | <div> |
| | | <div class="pam-tags"> |
| | | <div class="pb-10" v-for="(qaItem,index) in questionList" :key="index"> |
| | | <el-button class="tags" :class="{'active': qaItem.selected}" |
| | | @click="selectQuestion(index)"> |
| | | <el-button class="tags" :class="{'active': qaItem.selected}" |
| | | @click="selectQuestion(index)"> |
| | | {{qaItem.name}} |
| | | </el-button> |
| | | </div> |
| | | </el-button> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import { Vue, Component, Emit} from 'vue-property-decorator'; |
| | | import { Vue, Component, Emit, Prop} from 'vue-property-decorator'; |
| | | |
| | | @Component |
| | | export default class ConsultantQues extends Vue{ |
| | | |
| | | showDialog = false; |
| | | other = ''; |
| | | otherQuestion = ''; |
| | | questionList=[ |
| | | { |
| | | name:'健康與保障', |
| | | selected:false |
| | | }, |
| | | { |
| | | name:'子女教育', |
| | | selected:false |
| | | }, |
| | | { |
| | | name:'資產規劃', |
| | | selected:false |
| | | }, |
| | | { |
| | | name:'樂活退休', |
| | | selected:false |
| | | }, |
| | | { |
| | | name:'保單健檢/規劃', |
| | | selected:false |
| | | }, |
| | | { |
| | | name:'防疫保單相關', |
| | | selected:false |
| | | } |
| | | |
| | | @Prop({ default: () => []}) selectedQuestions!: 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; |
| | | } |
| | | return question; |
| | | } |
| | | ); |
| | | } |
| | | |
| | | defaultQuestionList = [ |
| | | { |
| | | name:'健康與保障', |
| | | selected:false |
| | | }, |
| | | { |
| | | name:'子女教育', |
| | | selected:false |
| | | }, |
| | | { |
| | | name:'資產規劃', |
| | | selected:false |
| | | }, |
| | | { |
| | | name:'樂活退休', |
| | | selected:false |
| | | }, |
| | | { |
| | | name:'保單健檢/規劃', |
| | | selected:false |
| | | }, |
| | | { |
| | | name:'防疫保單相關', |
| | | selected:false |
| | | } |
| | | ]; |
| | | |
| | | @Emit('change') |
| | |
| | | <style lang="scss"> |
| | | .con-input{ |
| | | input:focus,textarea:focus { |
| | | |
| | | outline: none; |
| | | |
| | | border: 1px solid #ED1B2E; |
| | | } |
| | | } |
| | | |
| | | } |
| | | } |
| | | .other-input{ |
| | | height: 50px; |
| | | width:316px; |
| | | border:1px solid #CCCCCC; |
| | | margin-top: 10px; |
| | | } |
| | | |
| | | .tags{ |
| | | height: 47px; |
| | | } |
| | | |
| | | .qa-dialog-footer{ |
| | | display: flex; |
| | | justify-content: center; |
| | |
| | | |
| | | @include desktop |
| | | { |
| | | .pam-tags{ |
| | | display:flex; |
| | | flex-wrap:wrap; |
| | | |
| | | } |
| | | .tags{ |
| | | margin-right: 10px; |
| | | height: 47px; |
| | | } |
| | | .pam-tags{ |
| | | display:flex; |
| | | flex-wrap:wrap; |
| | | |
| | | } |
| | | .tags{ |
| | | margin-right: 10px; |
| | | height: 47px; |
| | | } |
| | | } |
| | | </style> |
| | | </style> |