parent
fbee04a56f
commit
b4541a9153
@ -1,152 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from "vue";
|
||||
|
||||
import { addBonus } from "@/api/bonus";
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:show','reload']);
|
||||
|
||||
const showDrawer = computed({
|
||||
get: () => props.show,
|
||||
set: (value) => {
|
||||
emit("update:show", value);
|
||||
},
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
const rules = reactive({
|
||||
type_name: [{ required: true, message: "請輸入優惠劵名稱", trigger: "blur" }],
|
||||
type_money: [{ required: true, message: "請輸入優惠劵金額", trigger: "blur" }],
|
||||
send_type: [{ required: true, message: "請選擇發放方式", trigger: "change" }],
|
||||
});
|
||||
|
||||
const form = reactive({
|
||||
type_name: '',
|
||||
type_money: 0,
|
||||
send_type: 4,
|
||||
min_amount: 0,
|
||||
send_type: null,
|
||||
user_bonus_max: 0,
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
const handleClose = () => {
|
||||
showDrawer.value = false;
|
||||
};
|
||||
|
||||
const handleSubmit = async (formEl) => {
|
||||
if (!formEl) return;
|
||||
|
||||
await formEl.validate(async (valid, fields) => {
|
||||
if (!valid) return;
|
||||
|
||||
let res = await addBonus(form)
|
||||
if(res.code === 200){
|
||||
// 關閉抽屜
|
||||
showDrawer.value = false;
|
||||
// 重置表單
|
||||
formRef.value.resetFields();
|
||||
|
||||
// emit reload event
|
||||
emit('reload');
|
||||
|
||||
// 顥示提示訊息
|
||||
return ElMessage.success('新增成功');
|
||||
}
|
||||
// 顯示錯誤提示訊息
|
||||
return ElMessage.error(res.msg);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-drawer v-model="showDrawer" size="50%" title="新增優惠劵">
|
||||
<template #header>
|
||||
<h4>新增優惠劵</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
<!-- <div v-loading="loading"> -->
|
||||
<el-form
|
||||
:model="form"
|
||||
ref="formRef"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-form-item label="優惠劵名稱" prop="type_name">
|
||||
<el-input v-model="form.type_name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="優惠劵金額" prop="type_money">
|
||||
<el-input v-model="form.type_money" />
|
||||
</el-form-item>
|
||||
<el-form-item label="最小訂單金額">
|
||||
<el-input v-model="form.min_amount" />
|
||||
</el-form-item>
|
||||
<el-form-item label="發放方式" prop="send_type">
|
||||
<el-radio-group v-model="form.send_type">
|
||||
<!-- <el-radio :label="1">會員發放</el-radio> -->
|
||||
<!-- <el-radio :label="2">商品發放</el-radio> -->
|
||||
<!-- <el-radio :label="3">訂單方式</el-radio> -->
|
||||
<el-radio :label="4">線下發放</el-radio>
|
||||
<!-- <el-radio :label="5">線上發放</el-radio> -->
|
||||
<!-- <el-radio :label="6">註冊發放</el-radio> -->
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="發放開始日">
|
||||
<el-date-picker
|
||||
v-model="form.send_start_date"
|
||||
type="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="請選擇日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="發放結束日">
|
||||
<el-date-picker
|
||||
v-model="form.send_end_date"
|
||||
type="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="請選擇日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用開始日" >
|
||||
<el-date-picker
|
||||
v-model="form.use_start_date"
|
||||
type="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="請選擇日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用結束日" >
|
||||
<el-date-picker
|
||||
v-model="form.use_end_date"
|
||||
type="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="請選擇日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
<template #footer>
|
||||
<div style="flex: auto">
|
||||
<el-button @click="handleClose">關閉</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(formRef)"
|
||||
>送出</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<style lang="less"></style>
|
||||
@ -0,0 +1,200 @@
|
||||
<script setup>
|
||||
import { ref, reactive, watch, computed } from "vue";
|
||||
|
||||
import { addBonus, getBonus, updateBonus } from "@/api/bonus";
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
edit_id: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:show", "update:edit_id", "reload"]);
|
||||
|
||||
const showDrawer = computed({
|
||||
get: () => props.show,
|
||||
set: (value) => {
|
||||
emit("update:show", value);
|
||||
},
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
const rules = reactive({
|
||||
type_name: [{ required: true, message: "請輸入優惠劵名稱", trigger: "blur" }],
|
||||
type_money: [
|
||||
{ required: true, message: "請輸入優惠劵金額", trigger: "blur" },
|
||||
],
|
||||
send_type: [{ required: true, message: "請選擇發放方式", trigger: "change" }],
|
||||
});
|
||||
|
||||
const form = ref({
|
||||
act: "insert",
|
||||
type_id: 0,
|
||||
type_name: "",
|
||||
type_money: 0,
|
||||
send_type: 4,
|
||||
min_amount: 0,
|
||||
user_bonus_max: 0,
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
watch(
|
||||
() => props.edit_id,
|
||||
async (newVal) => {
|
||||
console.log(newVal);
|
||||
if (newVal > 0) {
|
||||
let res = await getBonus(newVal);
|
||||
if (res.code === 200) {
|
||||
form.value = res.data;
|
||||
form.value.act = "update";
|
||||
}
|
||||
} else {
|
||||
form.value = {
|
||||
act: "insert",
|
||||
type_id: 0,
|
||||
type_name: "",
|
||||
type_money: 0,
|
||||
send_type: 4,
|
||||
min_amount: 0,
|
||||
user_bonus_max: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const handleClose = () => {
|
||||
emit("update:edit_id", 0);
|
||||
showDrawer.value = false;
|
||||
};
|
||||
|
||||
const handleSubmit = async (formEl) => {
|
||||
if (!formEl) return;
|
||||
|
||||
await formEl.validate(async (valid, fields) => {
|
||||
if (!valid) return;
|
||||
|
||||
let res;
|
||||
if (form.value.act === "update") {
|
||||
res = await updateBonus(form.value);
|
||||
} else {
|
||||
res = await addBonus(form.value);
|
||||
}
|
||||
|
||||
if (res.code === 200) {
|
||||
// 關閉抽屜
|
||||
showDrawer.value = false;
|
||||
// 重置表單
|
||||
formRef.value.resetFields();
|
||||
|
||||
// emit reload event
|
||||
emit("reload");
|
||||
|
||||
// 顥示提示訊息
|
||||
return ElMessage.success("操作成功");
|
||||
}
|
||||
// 顯示錯誤提示訊息
|
||||
return ElMessage.error(res.msg);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-drawer
|
||||
v-model="showDrawer"
|
||||
size="50%"
|
||||
title="新增優惠劵"
|
||||
@close="handleClose"
|
||||
>
|
||||
<template #header>
|
||||
<h4>新增優惠劵</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
<!-- <div v-loading="loading"> -->
|
||||
<el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
|
||||
<el-form-item label="優惠劵名稱" prop="type_name">
|
||||
<el-input v-model="form.type_name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="優惠劵金額" prop="type_money">
|
||||
<el-input v-model="form.type_money" />
|
||||
</el-form-item>
|
||||
<el-form-item label="最小訂單金額">
|
||||
<el-input v-model="form.min_amount" />
|
||||
</el-form-item>
|
||||
<el-form-item label="發放方式" prop="send_type">
|
||||
<el-radio-group v-model="form.send_type">
|
||||
<!-- <el-radio :label="1">會員發放</el-radio> -->
|
||||
<!-- <el-radio :label="2">商品發放</el-radio> -->
|
||||
<!-- <el-radio :label="3">訂單方式</el-radio> -->
|
||||
<el-radio :label="4">線下發放</el-radio>
|
||||
<!-- <el-radio :label="5">線上發放</el-radio> -->
|
||||
<!-- <el-radio :label="6">註冊發放</el-radio> -->
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="發放開始日" v-show="form.send_type != 4">
|
||||
<el-date-picker
|
||||
v-model="form.send_start_date"
|
||||
type="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="請選擇日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="發放結束日" v-show="form.send_type != 4">
|
||||
<el-date-picker
|
||||
v-model="form.send_end_date"
|
||||
type="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="請選擇日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-space fill>
|
||||
<el-alert type="info" show-icon :closable="true">
|
||||
<p>空白為立即可以使用</p>
|
||||
</el-alert>
|
||||
<el-form-item label="使用開始日">
|
||||
<el-date-picker
|
||||
v-model="form.use_start_date"
|
||||
type="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="請選擇日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-space>
|
||||
<el-space fill>
|
||||
<el-alert type="info" show-icon :closable="true">
|
||||
<p>空白為永久可以使用</p>
|
||||
</el-alert>
|
||||
<el-form-item label="使用結束日">
|
||||
<el-date-picker
|
||||
v-model="form.use_end_date"
|
||||
type="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="請選擇日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-space>
|
||||
</el-form>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
<template #footer>
|
||||
<div style="flex: auto">
|
||||
<el-button @click="handleClose">關閉</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(formRef)"
|
||||
>送出</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<style lang="less"></style>
|
||||
@ -1,151 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from "vue";
|
||||
|
||||
import { addBonus } from "@/api/bonus";
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:show','reload']);
|
||||
|
||||
const showDrawer = computed({
|
||||
get: () => props.show,
|
||||
set: (value) => {
|
||||
emit("update:show", value);
|
||||
},
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
const rules = reactive({
|
||||
type_name: [{ required: true, message: "請輸入優惠劵名稱", trigger: "blur" }],
|
||||
type_money: [{ required: true, message: "請輸入優惠劵金額", trigger: "blur" }],
|
||||
send_type: [{ required: true, message: "請選擇發放方式", trigger: "change" }],
|
||||
});
|
||||
|
||||
const form = reactive({
|
||||
type_name: '',
|
||||
type_money: 0,
|
||||
min_amount: 0,
|
||||
send_type: null,
|
||||
user_bonus_max: 0,
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
const handleClose = () => {
|
||||
showDrawer.value = false;
|
||||
};
|
||||
|
||||
const handleSubmit = async (formEl) => {
|
||||
if (!formEl) return;
|
||||
|
||||
await formEl.validate(async (valid, fields) => {
|
||||
if (!valid) return;
|
||||
|
||||
let res = await addBonus(form)
|
||||
if(res.code === 200){
|
||||
// 關閉抽屜
|
||||
showDrawer.value = false;
|
||||
// 重置表單
|
||||
formRef.value.resetFields();
|
||||
|
||||
// emit reload event
|
||||
emit('reload');
|
||||
|
||||
// 顥示提示訊息
|
||||
return ElMessage.success('新增成功');
|
||||
}
|
||||
// 顯示錯誤提示訊息
|
||||
return ElMessage.error(res.msg);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-drawer v-model="showDrawer" size="50%" title="新增優惠劵">
|
||||
<template #header>
|
||||
<h4>新增優惠劵</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
<!-- <div v-loading="loading"> -->
|
||||
<el-form
|
||||
:model="form"
|
||||
ref="formRef"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-form-item label="優惠劵名稱" prop="type_name">
|
||||
<el-input v-model="form.type_name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="優惠劵金額" prop="type_money">
|
||||
<el-input v-model="form.type_money" />
|
||||
</el-form-item>
|
||||
<el-form-item label="最小訂單金額">
|
||||
<el-input v-model="form.min_amount" />
|
||||
</el-form-item>
|
||||
<el-form-item label="發放方式" prop="send_type">
|
||||
<el-radio-group v-model="form.send_type">
|
||||
<!-- <el-radio :label="1">會員發放</el-radio> -->
|
||||
<!-- <el-radio :label="2">商品發放</el-radio> -->
|
||||
<!-- <el-radio :label="3">訂單方式</el-radio> -->
|
||||
<el-radio :label="4">線下發放</el-radio>
|
||||
<!-- <el-radio :label="5">線上發放</el-radio> -->
|
||||
<!-- <el-radio :label="6">註冊發放</el-radio> -->
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="發放開始日">
|
||||
<el-date-picker
|
||||
v-model="form.send_start_date"
|
||||
type="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="請選擇日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="發放結束日">
|
||||
<el-date-picker
|
||||
v-model="form.send_end_date"
|
||||
type="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="請選擇日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用開始日" >
|
||||
<el-date-picker
|
||||
v-model="form.use_start_date"
|
||||
type="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="請選擇日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用結束日" >
|
||||
<el-date-picker
|
||||
v-model="form.use_end_date"
|
||||
type="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="請選擇日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
<template #footer>
|
||||
<div style="flex: auto">
|
||||
<el-button @click="handleClose">關閉</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(formRef)"
|
||||
>送出</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<style lang="less"></style>
|
||||
Loading…
Reference in new issue