<template>
|
<Ui-Drawer
|
:isVisible.sync="isVisible"
|
:size="questionOption.name === 'style' ? '50%' : '30%'"
|
@close="closeDrawer"
|
>
|
<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 === 'style'"
|
>可複選</span>
|
<span
|
class="smTxt_bold text--primary"
|
v-if="questionOption.name === 'satisfaction'"
|
>選取星星</span>
|
</div>
|
|
<div class="quickBtnBlock" v-if="questionOption.name === 'style'">
|
<el-checkbox-group class="pam-quickFilter-checkbox" v-model="style">
|
<el-checkbox
|
v-for="(i, index) in questionOption.detail"
|
:key="index"
|
:label="i"
|
:name="i"
|
></el-checkbox>
|
</el-checkbox-group>
|
</div>
|
|
<div class="quickBtnBlock" v-else-if="questionOption.name === 'gender'">
|
<el-radio-group class="pam-quickFilter-radio" v-model="gender">
|
<el-radio
|
v-for="(i, index) in questionOption.detail"
|
:key="index"
|
:label="i"></el-radio>
|
</el-radio-group>
|
</div>
|
|
<div class="quickBtnBlock" v-else-if="questionOption.name === 'loginState'">
|
<el-radio-group class="pam-quickFilter-radio" v-model="loginState">
|
<el-radio
|
v-for="(i, index) in QuestionOption.detail"
|
:key="index"
|
:label="i"></el-radio>
|
</el-radio-group>
|
</div>
|
|
<div v-else>
|
<el-rate class="pam-quickFilter-rate" v-model="satisfaction"></el-rate>
|
</div>
|
</Ui-Drawer>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, PropSync, Prop, Watch, Emit } from 'nuxt-property-decorator';
|
import { QuestionOption, selectedItem } from '~/pages/quickFilter/index.vue';
|
|
@Component
|
export default class QuickFilterDrawer extends Vue {
|
style: string[] = [];
|
loginState: string = '';
|
gender: string = '';
|
satisfaction: number = 0;
|
|
@PropSync('drawerVisible') isVisible!: boolean;
|
@Prop() selectedItem!: selectedItem;
|
@Prop() questionOption!: QuestionOption;
|
|
@Emit('selected') emitSelected() {
|
return ({
|
name: this.questionOption.name,
|
gender: this.gender,
|
style: this.style,
|
satisfaction: this.satisfaction,
|
loginState: this.loginState
|
});
|
}
|
|
closeDrawer() {
|
this.emitSelected()
|
}
|
|
@Watch('selectedItem', {deep: true, immediate: true}) watchSelected(newValue: selectedItem) {
|
if (newValue) {
|
this.gender = newValue.gender;
|
this.style = newValue.style;
|
this.satisfaction = newValue.satisfaction;
|
}
|
}
|
}
|
</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>
|
