保誠-保戶業務員媒合平台
wayne
2021-11-19 e05f762bc8bd7e93db954a748bf15dd2dcb4b0d9
PAMapp/components/Consultant-ques.vue
@@ -2,48 +2,64 @@
    <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')
@@ -57,22 +73,22 @@
<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;
@@ -110,14 +126,14 @@
@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>