91 lines
2.7 KiB
Vue
91 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<div class="mb-5">
|
|
<label
|
|
v-for="item in filteredPhases"
|
|
:key="item.id"
|
|
class="py-3 is-clickable is-block"
|
|
:class="{ 'has-background-success-light': selectedPhaseId === item.id }"
|
|
style="border-bottom: 1px solid #dbdbdb;"
|
|
>
|
|
<div class="columns px-3 is-mobile is-vcentered is-gapless mb-0">
|
|
<div class="column">
|
|
<span class="is-size-6">{{ item.name }}</span>
|
|
</div>
|
|
<div class="column is-narrow">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10" :stroke="selectedPhaseId === item.id ? '#48c78e' : '#dbdbdb'" stroke-width="2"/>
|
|
<circle v-if="selectedPhaseId === item.id" cx="12" cy="12" r="6" fill="#48c78e"/>
|
|
</svg>
|
|
<input
|
|
type="radio"
|
|
:value="item.id"
|
|
v-model="selectedPhaseId"
|
|
style="display: none;"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="control">
|
|
<button
|
|
class="button is-success has-text-white is-fullwidth"
|
|
@click="submit"
|
|
:disabled="!selectedPhaseId"
|
|
>
|
|
{{ isVietnamese ? 'Xác nhận' : 'Confirm' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { useStore } from "@/stores/index";
|
|
export default {
|
|
setup() {
|
|
const store = useStore();
|
|
return { store };
|
|
},
|
|
emits: ['modalevent', 'close'],
|
|
props: {
|
|
filterPhases: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
selectedPhaseId: null,
|
|
phases: [
|
|
{ id: 'p1', name: 'Giữ chỗ', code: 'reserved', phase: 1, status: 3,transstatus :1 },
|
|
{ id: 'p2a', name: 'Thỏa thuận thực hiện nguyện vọng', code: 'fulfillwish', phase: 4, status: 5,transstatus :1 },
|
|
{ id: 'p2b', name: 'Đặt cọc', code: 'deposit', phase: 2, status: 4,transstatus :1 },
|
|
{ id: 'p3', name: 'Mua bán', code: 'pertrade', phase: 3, status: 6,transstatus :1 }
|
|
]
|
|
};
|
|
},
|
|
computed: {
|
|
isVietnamese() {
|
|
return this.store.lang === 'vi';
|
|
},
|
|
filteredPhases() {
|
|
if (this.filterPhases.length === 0) {
|
|
return this.phases; // If no filter is provided, show all phases
|
|
}
|
|
return this.phases.filter(phase => this.filterPhases.includes(phase.code));
|
|
}
|
|
},
|
|
methods: {
|
|
submit() {
|
|
if (this.selectedPhaseId) {
|
|
const selected = this.phases.find(p => p.id === this.selectedPhaseId);
|
|
this.$emit('modalevent', { name: 'phaseSelected', data: selected });
|
|
this.$emit('close');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script> |