From e02d6534d2dba4b8adcbb80e37cc77bf8bddd26c Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 09 三月 2022 16:50:48 +0800
Subject: [PATCH] update#136137: [諮詢度表現] 顧問詳細資訊API 前端調整串接
---
PAMapp/components/Consultant-ques.vue | 141 +++++++++++++++++++++++-----------------------
1 files changed, 70 insertions(+), 71 deletions(-)
diff --git a/PAMapp/components/Consultant-ques.vue b/PAMapp/components/Consultant-ques.vue
index 084fbfa..4d89bb5 100644
--- a/PAMapp/components/Consultant-ques.vue
+++ b/PAMapp/components/Consultant-ques.vue
@@ -2,82 +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="selectQuestion(index)">
- {{qaItem.name}}
- </el-button>
- </div>
+ <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} from 'vue-property-decorator';
+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[];
- @Emit('change')
- selectQuestion(questionIndex: number): any[] {
- this.questionList[questionIndex].selected = !this.questionList[questionIndex].selected;
- return this.questionList;
- }
+ 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{
@@ -85,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>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0