138 lines
3.3 KiB
Vue
138 lines
3.3 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>
|