<template>
|
<div>
|
<div class="mb-10" v-if="questionOption.title !== '顧問性別'">
|
<span class="mdTxt"
|
>{{questionOption.title === '顧問滿意度' ? '保險顧問滿意度' : questionOption.title}}
|
</span>
|
<span
|
class="smTxt_bold text--primary"
|
v-if="questionOption.name === 'communicationStyles'"
|
>可複選</span>
|
<span
|
class="smTxt_bold text--primary"
|
v-if="questionOption.name === 'avgScore'"
|
>選取星星</span>
|
</div>
|
|
<div class="quickBtnBlock" v-if="questionOption.name === 'communicationStyles'">
|
<el-checkbox-group class="pam-quickFilter-checkbox" v-model="pickedItem.communicationStyles">
|
<el-checkbox
|
v-for="(i, index) in questionOption.detail"
|
:key="index"
|
:label="i.value"
|
:name="i.value"
|
:class="i.className"
|
></el-checkbox>
|
</el-checkbox-group>
|
</div>
|
|
<div class="quickBtnBlock" v-else-if="questionOption.name === 'gender'">
|
<el-radio-group class="pam-quickFilter-radio" v-model="pickedItem.gender">
|
<el-radio
|
v-for="(i, index) in questionOption.detail"
|
:key="index"
|
:label="i.value"
|
:class="i.className"
|
>{{i.name}}</el-radio>
|
</el-radio-group>
|
</div>
|
|
<div class="quickBtnBlock" v-else-if="questionOption.name === 'status'">
|
<el-radio-group class="pam-quickFilter-radio" v-model="pickedItem.status">
|
<el-radio
|
v-for="(i, index) in QuestionOption.detail"
|
:key="index"
|
:label="i.value"
|
:class="i.className"
|
></el-radio>
|
</el-radio-group>
|
</div>
|
|
<div v-else>
|
<el-rate class="pam-quickFilter-rate" v-model="pickedItem.avgScore"></el-rate>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, PropSync, Prop, Watch } from 'nuxt-property-decorator';
|
import { FastQueryParams } from '~/assets/ts/api/consultant';
|
import { QuestionOption } from '~/pages/quickFilter/index.vue';
|
|
@Component
|
export default class QuickFilterDrawer extends Vue {
|
|
pickedItem: FastQueryParams = {
|
communicationStyles: [],
|
status: '',
|
gender: '',
|
avgScore: 0
|
}
|
|
mounted() {
|
console.log(this.questionOption, 'questionOption')
|
}
|
|
@PropSync('drawerVisible') isVisible!: boolean;
|
@Prop() selectedItem!: FastQueryParams;
|
@Prop() questionOption!: QuestionOption;
|
|
@Watch('selectedItem', {deep: true, immediate: true}) watchSelected(newValue: FastQueryParams) {
|
if (newValue) {
|
this.pickedItem = JSON.parse(JSON.stringify(this.selectedItem))
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
.quickBtnBlock {
|
display: flex;
|
justify-content: space-between;
|
align-content: space-between;
|
flex-wrap: wrap;
|
|
.quickBtn {
|
width: 48%;
|
height: 110px;
|
text-align: center;
|
box-shadow: 0 0 6px #22222229;
|
padding: auto 0 auto 0;
|
border-radius: 10px;
|
color: $PRIMARY_BLACK;
|
|
&:hover,&:focus {
|
color: $PRIMARY_BLACK;
|
border-color: $PRIMARY_WHITE;
|
background-color: $PRIMARY_WHITE;
|
}
|
}
|
|
.quickBtn+.quickBtn {
|
margin-left: 0;
|
}
|
}
|
|
</style>
|
