<template>
|
<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)">
|
{{ qaItem.name }}
|
</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{
|
|
@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;
|
}
|
}
|
|
.other-input{
|
height : 50px;
|
width : 316px;
|
border : 1px solid #CCCCCC;
|
margin-top: 10px;
|
}
|
|
.tags{
|
height: 47px;
|
}
|
|
.qa-dialog-footer{
|
display : flex;
|
justify-content: center;
|
font-size : 20px;
|
color : red;
|
}
|
|
.el-dialog__wrapper{
|
overflow: hidden;
|
}
|
|
.qa-dialog{
|
overflow : hidden;
|
height : 500px;
|
margin-top: 20px;
|
}
|
|
.qaTextTitle{
|
font-size : 20px;
|
font-family : bold;
|
display : flex;
|
justify-content: center;
|
align-items : center;
|
margin-top : -15px;
|
|
}
|
.qa-title{
|
font-size : 20px;
|
margin-bottom: 10px;
|
}
|
.qa-content{
|
font-size : 18px;
|
margin-bottom: 10px;
|
}
|
|
@include desktop
|
{
|
.pam-tags{
|
display : flex;
|
flex-wrap: wrap;
|
}
|
.tags{
|
margin-right: 10px;
|
height : 47px;
|
}
|
}
|
</style>
|
