update: package-lock.json

Tomas

2024-04-30 b4d6944076f1df6eedaae35c4c2a7072fe988e8a

 PAMapp/components/Consultant-ques.vue

@@ -2,80 +2,82 @@
    <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="qaItem.selected = !qaItem.selected">                    
                {{qaItem.name}}
                </el-button>              
            </div>    
            <el-button class="tags" @click="other = !other" :class="{'active':other=other}">其他</el-button>
                <el-button  class="tags" :class="{ 'active': qaItem.selected }"
                @click="selectQuestion(index)">
                {{ qaItem.name }}
                </el-button>
            </div>
        </div>
        <div class="pb-10 pam-tags con-input"> 
            <input v-if="other" class="other-input" placeholder="請輸入,限X字" v-model="otherQuestion">      
        </div>

    </div>
</template>
<script>
import { Vue, Component} from 'vue-property-decorator';

<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 = '';
        questionList=[
            {
                name:'健康與保障',
                selected:false
                },
            {
                name:'子女教育',
                selected:false
                },
            {
                name:'資產規劃',
                selected:false
                },
            {
                name:'樂活退休',
                selected:false
                },
            {
                name:'保單健檢/規劃',
                selected:false
                },
            {
                name:'防疫保單相關',
                selected:false
                }       
        ];
        
      @Prop({ default: () => []})
      selectedQuestions!: string[];

      other         : string = '';
      otherQuestion : string = '';

      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)
          }
        })
      }

      //////////////////////////////////////////////////////////////////////

      @Emit('change')
      selectQuestion(questionIndex: number): any[] {
          this.questionList[questionIndex].selected = !this.questionList[questionIndex].selected;
          return this.questionList;
      }

    }

    interface ConsultQuestionWithSelect {
      name    : string;
      selected: boolean;
    }
</script>
<style lang="scss">
.con-input{
    input:focus,textarea:focus {

    outline: none;

    border: 1px solid #ED1B2E;

    border : 1px solid #ED1B2E;
  }
}
}

.other-input{
    height: 50px;
    width:316px;
    border:1px solid #CCCCCC;
    height    : 50px;
    width     : 316px;
    border    : 1px solid #CCCCCC;
    margin-top: 10px;
}

.tags{
    height: 47px;
}

.qa-dialog-footer{
    display: flex;
    display        : flex;
    justify-content: center;
    font-size: 20px;
    color: red;
    font-size      : 20px;
    color          : red;
}

.el-dialog__wrapper{
@@ -83,39 +85,38 @@
}

.qa-dialog{
    overflow:hidden;
    height: 500px;
    overflow  : hidden;
    height    : 500px;
    margin-top: 20px;
}

.qaTextTitle{
    font-size: 20px;
    font-family: bold;
    display: flex;
    font-size      : 20px;
    font-family    : bold;
    display        : flex;
    justify-content: center;
    align-items: center;
    margin-top: -15px;
    align-items    : center;
    margin-top     : -15px;

}
.qa-title{
    font-size: 20px;
    font-size    : 20px;
    margin-bottom: 10px;
}
.qa-content{
    font-size: 18px;
    font-size    : 18px;
    margin-bottom: 10px;
}

@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>