HAM!DREZA
146 lines
4.0 KiB
Vue
146 lines
4.0 KiB
Vue
<template>
|
|
<section class="flex flex-col gap-4">
|
|
<Panel :header="$t('ایجاد تخفیف جدید')">
|
|
<div class="grid grid-cols-3 gap-7">
|
|
<div class="flex flex-col gap-1">
|
|
<FloatLabel>
|
|
<InputText class="w-full custom-input" v-model="coupon.startDate" />
|
|
<label>{{ $t("تاریخ شروع") }}</label>
|
|
</FloatLabel>
|
|
<date-picker
|
|
type="datetime"
|
|
format="YYYY-MM-DD HH:mm"
|
|
display-format="jYYYY-jMM-jDD HH:mm"
|
|
:timezone="true"
|
|
color="dimgray"
|
|
v-model="coupon.startDate"
|
|
simple
|
|
custom-input=".custom-input"
|
|
></date-picker>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1">
|
|
<FloatLabel>
|
|
<InputText class="w-full custom-input2" v-model="coupon.endDate" />
|
|
<label>{{ $t("تاریخ پایان") }}</label>
|
|
</FloatLabel>
|
|
<date-picker
|
|
type="datetime"
|
|
format="YYYY-MM-DD HH:mm"
|
|
display-format="jYYYY-jMM-jDD HH:mm"
|
|
:timezone="true"
|
|
color="dimgray"
|
|
v-model="coupon.endDate"
|
|
simple
|
|
custom-input=".custom-input2"
|
|
></date-picker>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<FloatLabel>
|
|
<InputText class="w-full" v-model="coupon.code" />
|
|
<label>{{ $t("کد تخفیف") }}</label>
|
|
</FloatLabel>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1">
|
|
<FloatLabel>
|
|
<Dropdown
|
|
v-model="type"
|
|
@change="setType"
|
|
:options="['مبلغ', 'درصد']"
|
|
:optionLabel="levels"
|
|
:optionValue="levels"
|
|
class="w-full"
|
|
/>
|
|
<label>{{ $t("نوع تخفیف") }}</label>
|
|
</FloatLabel>
|
|
</div>
|
|
<div v-if="type === 'مبلغ'" class="flex flex-col gap-1">
|
|
<FloatLabel>
|
|
<InputText class="w-full" v-model="coupon.price" />
|
|
<label>{{ $t("مبلغ تخفیف") }}</label>
|
|
</FloatLabel>
|
|
</div>
|
|
|
|
<div v-if="type === 'درصد'" class="flex flex-col gap-1">
|
|
<FloatLabel>
|
|
<InputText class="w-full" v-model="coupon.percent" />
|
|
<label>{{ $t("درصد تخفیف") }}</label>
|
|
</FloatLabel>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="flex pt-4 justify-end">
|
|
<Button
|
|
:label="$t('save')"
|
|
icon="pi pi-save"
|
|
severity="success"
|
|
:loading="saving"
|
|
@click="create(coupon)"
|
|
/>
|
|
</div>
|
|
</Panel>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useProductsStore } from "@/stores/products";
|
|
import { useDiscountStore } from "@/stores/discounts";
|
|
import { ref, reactive, inject } from "vue";
|
|
|
|
import { useRouter } from "vue-router";
|
|
const { toast, t } = inject("service");
|
|
const discount = useDiscountStore();
|
|
const type = ref(null);
|
|
const router = useRouter()
|
|
const setType = (val) => {
|
|
if (val.value === "درصد") {
|
|
coupon.discountType = "percent";
|
|
} else {
|
|
coupon.discountType = "price";
|
|
}
|
|
};
|
|
|
|
const coupon = reactive({
|
|
startDate: "",
|
|
endDate: "",
|
|
code: "",
|
|
discountType: type.value,
|
|
price: "",
|
|
percent: null,
|
|
allUsers: true,
|
|
});
|
|
const saving = ref(false);
|
|
const create = async (coupon) => {
|
|
saving.value = true
|
|
const datas = await discount.add(coupon);
|
|
saving.value = false;
|
|
if (datas === true) {
|
|
toast.add({
|
|
life: 2000,
|
|
severity: "success",
|
|
summary: t("successful"),
|
|
detail: t("کد تخفیف ایجاد شد"),
|
|
});
|
|
router.push('/Coupons')
|
|
} else{
|
|
return toast.add({
|
|
life: 2000,
|
|
severity: "error",
|
|
summary: t("error"),
|
|
detail: "خطا رخ داد، مجدد تلاش کنید",
|
|
});
|
|
}
|
|
|
|
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dp {
|
|
height: 15px;
|
|
border-radius: 10px !important;
|
|
}
|
|
</style> |