feat: 新增营销优惠券管理模块
This commit is contained in:
郝先瑞
parent
528a17fec4
commit
4f09599f46
|
|
@ -1,4 +1,6 @@
|
|||
import request from '@/utils/request';
|
||||
import { Option } from '@/types/common';
|
||||
import { AxiosPromise } from 'axios';
|
||||
|
||||
/**
|
||||
* 获取商品分类列表
|
||||
|
|
@ -9,7 +11,7 @@ export function listCategories(queryParams: object) {
|
|||
return request({
|
||||
url: '/mall-pms/api/v1/categories',
|
||||
method: 'get',
|
||||
params: queryParams,
|
||||
params: queryParams
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -18,11 +20,10 @@ export function listCategories(queryParams: object) {
|
|||
*
|
||||
* @param queryParams
|
||||
*/
|
||||
export function listCascadeCategories(queryParams?: object) {
|
||||
export function listCategoryOptions(): AxiosPromise<Option[]> {
|
||||
return request({
|
||||
url: '/mall-pms/api/v1/categories/cascade',
|
||||
method: 'get',
|
||||
params: queryParams,
|
||||
url: '/mall-pms/api/v1/categories/options',
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +35,7 @@ export function listCascadeCategories(queryParams?: object) {
|
|||
export function getCategoryDetail(id: number) {
|
||||
return request({
|
||||
url: '/mall-pms/api/v1/categories/' + id,
|
||||
method: 'get',
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -47,7 +48,7 @@ export function addCategory(data: object) {
|
|||
return request({
|
||||
url: '/mall-pms/api/v1/categories',
|
||||
method: 'post',
|
||||
data: data,
|
||||
data: data
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -61,7 +62,7 @@ export function updateCategory(id: number, data: object) {
|
|||
return request({
|
||||
url: '/mall-pms/api/v1/categories/' + id,
|
||||
method: 'put',
|
||||
data: data,
|
||||
data: data
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -73,7 +74,7 @@ export function updateCategory(id: number, data: object) {
|
|||
export function deleteCategories(ids: string) {
|
||||
return request({
|
||||
url: '/mall-pms/api/v1/categories/' + ids,
|
||||
method: 'delete',
|
||||
method: 'delete'
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -87,6 +88,6 @@ export function updateCategoryPart(id: number, data: object) {
|
|||
return request({
|
||||
url: '/mall-pms/api/v1/categories/' + id,
|
||||
method: 'patch',
|
||||
data: data,
|
||||
data: data
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@ import { AxiosPromise } from 'axios';
|
|||
*
|
||||
* @param queryParams
|
||||
*/
|
||||
export function lisCoupontPages(
|
||||
export function lisCouponPages(
|
||||
queryParams: CouponQueryParam
|
||||
): AxiosPromise<CouponPageResult> {
|
||||
return request({
|
||||
url: '/mall-sms/api/v1/coupons',
|
||||
url: '/mall-sms/api/v1/coupons/pages',
|
||||
method: 'get',
|
||||
params: queryParams
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { PageQueryParam, PageResult } from '../base';
|
||||
import { Option } from '@/types/common';
|
||||
|
||||
/**
|
||||
* 优惠券查询参数类型
|
||||
|
|
@ -51,6 +50,11 @@ export interface CouponFormData {
|
|||
* 优惠券类型(1:满减券;2:直减券;3:折扣券)
|
||||
*/
|
||||
type: number;
|
||||
|
||||
/**
|
||||
* 优惠券面值类型
|
||||
*/
|
||||
faceValueType: number;
|
||||
/**
|
||||
* 优惠券面值
|
||||
*/
|
||||
|
|
@ -60,9 +64,9 @@ export interface CouponFormData {
|
|||
*/
|
||||
discount: number;
|
||||
/**
|
||||
* 发放数量
|
||||
* 发行量
|
||||
*/
|
||||
issueCount: number;
|
||||
circulation: number;
|
||||
/**
|
||||
* 使用门槛(0:无门槛)
|
||||
*/
|
||||
|
|
@ -72,7 +76,7 @@ export interface CouponFormData {
|
|||
*/
|
||||
perLimit: number;
|
||||
/**
|
||||
* 有效期类型(1:自领取之日起有效天数;2:有效起止时间)
|
||||
* 有效期类型(1:日期范围;2:固定天数)
|
||||
*/
|
||||
validityPeriodType: number;
|
||||
/**
|
||||
|
|
@ -88,34 +92,22 @@ export interface CouponFormData {
|
|||
*/
|
||||
validityEndTime: string;
|
||||
/**
|
||||
* 使用类型(0:全场通用;1:指定商品分类;2:指定商品)
|
||||
* 应用范围(0:全场通用;1:指定商品分类;2:指定商品)
|
||||
*/
|
||||
useType: number;
|
||||
applicationScope: number;
|
||||
|
||||
/**
|
||||
* 使用类型：指定商品分类
|
||||
*/
|
||||
spuCategoryList: CouponSpuCategory[];
|
||||
spuCategoryIds: number[];
|
||||
|
||||
/**
|
||||
* 使用类型：指定商品
|
||||
*/
|
||||
spuList: CouponSpu[];
|
||||
spuIds: number[];
|
||||
|
||||
/**
|
||||
* 使用说明
|
||||
*/
|
||||
remark: string;
|
||||
}
|
||||
|
||||
export interface CouponSpuCategory {
|
||||
id: number;
|
||||
categoryId: number;
|
||||
categoryName: string;
|
||||
}
|
||||
|
||||
export interface CouponSpu {
|
||||
id: number;
|
||||
spuId: number;
|
||||
spuName: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,34 +41,35 @@ import { ElCascaderPanel, ElMessage } from 'element-plus';
|
|||
import { CaretRight } from '@element-plus/icons-vue';
|
||||
|
||||
// API 引用
|
||||
import { listCascadeCategories } from '@/api/pms/category';
|
||||
import { listCategoryOptions } from '@/api/pms/category';
|
||||
import { computed } from '@vue/reactivity';
|
||||
import { Option } from '@/types/common';
|
||||
|
||||
const emit = defineEmits(['next', 'update:modelValue']);
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
|
||||
const goodsInfo: any = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => {
|
||||
set: value => {
|
||||
emit('update:modelValue', value);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
categoryOptions: [],
|
||||
pathLabels: [],
|
||||
categoryOptions: [] as Option[],
|
||||
pathLabels: []
|
||||
});
|
||||
|
||||
const { categoryOptions, pathLabels } = toRefs(state);
|
||||
|
||||
function loadData() {
|
||||
listCascadeCategories().then((response) => {
|
||||
state.categoryOptions = response.data;
|
||||
listCategoryOptions().then(({ data }) => {
|
||||
state.categoryOptions = data;
|
||||
if (goodsInfo.value.id) {
|
||||
nextTick(() => {
|
||||
handleCategoryChange();
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'goods',
|
||||
name: 'goods'
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -16,12 +16,13 @@ import {
|
|||
Edit,
|
||||
Refresh,
|
||||
Delete,
|
||||
View,
|
||||
View
|
||||
} from '@element-plus/icons-vue';
|
||||
import { listSpuPages, deleteSpu } from '@/api/pms/goods';
|
||||
import { listCascadeCategories } from '@/api/pms/category';
|
||||
import { listCategoryOptions } from '@/api/pms/category';
|
||||
import { GoodsItem, GoodsQueryParam } from '@/types/api/pms/goods';
|
||||
import { moneyFormatter } from '@/utils/filter';
|
||||
import { Option } from '@/types/common';
|
||||
|
||||
const dataTableRef = ref(ElTable);
|
||||
const router = useRouter();
|
||||
|
|
@ -38,12 +39,12 @@ const state = reactive({
|
|||
total: 0,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
pageSize: 10
|
||||
} as GoodsQueryParam,
|
||||
goodsList: [] as GoodsItem[],
|
||||
categoryOptions: [],
|
||||
categoryOptions: [] as Option[],
|
||||
goodDetail: undefined,
|
||||
dialogVisible: false,
|
||||
dialogVisible: false
|
||||
});
|
||||
|
||||
const {
|
||||
|
|
@ -54,7 +55,7 @@ const {
|
|||
categoryOptions,
|
||||
goodDetail,
|
||||
total,
|
||||
dialogVisible,
|
||||
dialogVisible
|
||||
} = toRefs(state);
|
||||
|
||||
function handleQuery() {
|
||||
|
|
@ -71,7 +72,7 @@ function resetQuery() {
|
|||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: undefined,
|
||||
categoryId: undefined,
|
||||
categoryId: undefined
|
||||
};
|
||||
handleQuery();
|
||||
}
|
||||
|
|
@ -88,7 +89,7 @@ function handleAdd() {
|
|||
function handleUpdate(row: any) {
|
||||
router.push({
|
||||
path: 'goods-detail',
|
||||
query: { goodsId: row.id, categoryId: row.categoryId },
|
||||
query: { goodsId: row.id, categoryId: row.categoryId }
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -97,7 +98,7 @@ function handleDelete(row: any) {
|
|||
ElMessageBox.confirm('是否确认删除选中的数据项?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(function () {
|
||||
return deleteSpu(ids);
|
||||
|
|
@ -119,8 +120,8 @@ function handleSelectionChange(selection: any) {
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
listCascadeCategories({}).then((response) => {
|
||||
state.categoryOptions = ref(response.data);
|
||||
listCategoryOptions().then(({ data }) => {
|
||||
categoryOptions.value = data;
|
||||
});
|
||||
handleQuery();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!--优惠券管理-->
|
||||
<!--优惠券-->
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'coupon'
|
||||
|
|
@ -7,24 +7,29 @@ export default {
|
|||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, toRefs } from 'vue';
|
||||
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { ElForm, ElMessage, ElMessageBox, ElCascaderPanel } from 'element-plus';
|
||||
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
|
||||
import {
|
||||
lisCoupontPages,
|
||||
lisCouponPages,
|
||||
getCouponFormData,
|
||||
updateCoupon,
|
||||
addCoupon,
|
||||
deleteCoupons
|
||||
} from '@/api/sms/coupon';
|
||||
import { Dialog } from '@/types/common';
|
||||
|
||||
import { listCategoryOptions } from '@/api/pms/category';
|
||||
import { listSpuPages } from '@/api/pms/goods';
|
||||
import { Dialog, Option } from '@/types/common';
|
||||
import {
|
||||
CouponItem,
|
||||
CouponQueryParam,
|
||||
CouponFormData
|
||||
} from '@/types/api/sms/coupon';
|
||||
import { GoodsItem, GoodsQueryParam } from '@/types/api/pms/goods';
|
||||
|
||||
const queryFormRef = ref(ElForm);
|
||||
const dataFormRef = ref(ElForm);
|
||||
const spuCategoryRef = ref(ElCascaderPanel);
|
||||
|
||||
const state = reactive({
|
||||
loading: true,
|
||||
|
|
@ -35,7 +40,14 @@ const state = reactive({
|
|||
couponList: [] as CouponItem[],
|
||||
total: 0,
|
||||
dialog: {
|
||||
title: '',
|
||||
visible: false
|
||||
} as Dialog,
|
||||
//指定商品分类选择Dialog
|
||||
spuCategoryChooseDialog: {
|
||||
visible: false
|
||||
} as Dialog,
|
||||
// 指定商品选择ialog
|
||||
spuChooseDialog: {
|
||||
visible: false
|
||||
} as Dialog,
|
||||
formData: {
|
||||
|
|
@ -43,17 +55,23 @@ const state = reactive({
|
|||
platform: 0,
|
||||
validityPeriodType: 1,
|
||||
perLimit: 1,
|
||||
useType: 0 //使用类型(默认全场通用)
|
||||
applicationScope: 0
|
||||
} as CouponFormData,
|
||||
rules: {
|
||||
title: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' }],
|
||||
beginTime: [{ required: true, message: '请填写开始时间', trigger: 'blur' }],
|
||||
endTime: [{ required: true, message: '请填写结束时间', trigger: 'blur' }],
|
||||
picUrl: [{ required: true, message: '请上传优惠券图片', trigger: 'blur' }]
|
||||
type: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请选择优惠券类型', trigger: 'blur' }]
|
||||
},
|
||||
validityPeriod: '' as any,
|
||||
totalCountChecked: false,
|
||||
perLimitChecked: false
|
||||
perLimitChecked: false,
|
||||
spuCategoryOptions: [] as Option[],
|
||||
spuCategoryProps: {
|
||||
multiple: true,
|
||||
emitPath: false
|
||||
},
|
||||
spuList: [] as GoodsItem[],
|
||||
spuTotal: 0,
|
||||
spuQueryParams: { pageNum: 1, pageSize: 10 } as GoodsQueryParam,
|
||||
checkedSpuIds: []
|
||||
});
|
||||
|
||||
const {
|
||||
|
|
@ -66,8 +84,12 @@ const {
|
|||
formData,
|
||||
rules,
|
||||
validityPeriod,
|
||||
totalCountChecked,
|
||||
perLimitChecked
|
||||
perLimitChecked,
|
||||
spuCategoryOptions,
|
||||
spuCategoryProps,
|
||||
spuList,
|
||||
spuTotal,
|
||||
checkedSpuIds
|
||||
} = toRefs(state);
|
||||
|
||||
/**
|
||||
|
|
@ -75,7 +97,7 @@ const {
|
|||
*/
|
||||
function handleQuery() {
|
||||
state.loading = true;
|
||||
lisCoupontPages(queryParams.value).then(({ data }) => {
|
||||
lisCouponPages(queryParams.value).then(({ data }) => {
|
||||
couponList.value = data.list;
|
||||
total.value = data.total;
|
||||
loading.value = false;
|
||||
|
|
@ -95,44 +117,88 @@ function handleSelectionChange(selection: any) {
|
|||
state.multiple = !selection.length;
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
dialog.value = {
|
||||
title: '添加优惠券',
|
||||
visible: true
|
||||
};
|
||||
/**
|
||||
* 加载商品分类
|
||||
*/
|
||||
async function loadSpuCategoryOptions() {
|
||||
listCategoryOptions().then(({ data }) => {
|
||||
spuCategoryOptions.value = data;
|
||||
});
|
||||
}
|
||||
|
||||
function handleUpdate(row: any) {
|
||||
async function loadSpuList() {
|
||||
const queryParams = { pageNum: 1, pageSize: 10 } as GoodsQueryParam;
|
||||
listSpuPages(queryParams).then(({ data }) => {
|
||||
spuList.value = data.list;
|
||||
});
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
dialog.value = {
|
||||
title: '修改优惠券',
|
||||
title: '新增优惠券',
|
||||
visible: true
|
||||
};
|
||||
|
||||
loadSpuCategoryOptions();
|
||||
loadSpuList();
|
||||
}
|
||||
|
||||
async function handleUpdate(row: any) {
|
||||
dialog.value = {
|
||||
title: '编辑优惠券',
|
||||
visible: true
|
||||
};
|
||||
const id = row.id;
|
||||
|
||||
await loadSpuCategoryOptions();
|
||||
await loadSpuList();
|
||||
|
||||
getCouponFormData(id).then(({ data }) => {
|
||||
formData.value = data;
|
||||
perLimitChecked.value = data.perLimit == -1;
|
||||
totalCountChecked.value = data.issueCount == -1;
|
||||
// 有效期转换
|
||||
if (data.validityPeriodType == 2) {
|
||||
if (data.validityPeriodType == 1) {
|
||||
validityPeriod.value = [data.validityBeginTime, data.validityEndTime];
|
||||
}
|
||||
|
||||
// 金额转换分→元
|
||||
if (formData.value.faceValue) {
|
||||
formData.value.faceValue /= 100;
|
||||
}
|
||||
if (formData.value.minPoint) {
|
||||
formData.value.minPoint /= 100;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
console.log('validityPeriod', validityPeriod.value[0]);
|
||||
dataFormRef.value.validate((valid: any) => {
|
||||
if (valid) {
|
||||
const applicationScope = formData.value.applicationScope;
|
||||
console.log('applicationScope', applicationScope);
|
||||
if (applicationScope == 1) {
|
||||
// 指定商品分类
|
||||
formData.value.spuCategoryIds =
|
||||
spuCategoryRef.value.getCheckedNodes()[0].data.value;
|
||||
}
|
||||
|
||||
// 有效期转换
|
||||
if (formData.value.validityPeriodType == 2 && validityPeriod.value) {
|
||||
if (formData.value.validityPeriodType == 1 && validityPeriod.value) {
|
||||
formData.value.validityBeginTime = validityPeriod.value[0];
|
||||
formData.value.validityEndTime = validityPeriod.value[1];
|
||||
}
|
||||
// 金额转换元→分
|
||||
if (formData.value.faceValue) {
|
||||
formData.value.faceValue *= 100;
|
||||
}
|
||||
if (formData.value.faceValue) {
|
||||
formData.value.minPoint *= 100;
|
||||
}
|
||||
|
||||
const couponId = formData.value.id;
|
||||
if (couponId) {
|
||||
updateCoupon(couponId, formData.value).then(() => {
|
||||
ElMessage.success('修改优惠券成功');
|
||||
ElMessage.success('编辑优惠券成功');
|
||||
cancel();
|
||||
handleQuery();
|
||||
});
|
||||
|
|
@ -147,16 +213,8 @@ function submitForm() {
|
|||
});
|
||||
}
|
||||
|
||||
const handleTotalCountChange = (val: any) => {
|
||||
formData.value.issueCount = -1;
|
||||
};
|
||||
|
||||
const hanclePerLimitChange = (val: any) => {
|
||||
formData.value.perLimit = -1;
|
||||
};
|
||||
|
||||
/**
|
||||
* 表单取消
|
||||
* 取消
|
||||
*/
|
||||
function cancel() {
|
||||
state.formData.id = undefined;
|
||||
|
|
@ -183,6 +241,13 @@ function handleDelete(row: any) {
|
|||
.catch(() => ElMessage.info('已取消删除'));
|
||||
}
|
||||
|
||||
function handleSpuQuery() {
|
||||
listSpuPages(queryParams.value).then(({ data }) => {
|
||||
spuList.value = data.list;
|
||||
spuTotal.value = data.total;
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
handleQuery();
|
||||
});
|
||||
|
|
@ -231,24 +296,14 @@ onMounted(() => {
|
|||
<el-table-column type="index" label="序号" width="80" align="center" />
|
||||
<el-table-column prop="name" min-width="100" label="优惠券名称" />
|
||||
<el-table-column prop="code" min-width="100" label="优惠券码" />
|
||||
<el-table-column prop="platformLabel" min-width="100" label="使用平台" />
|
||||
<el-table-column prop="typeLabel" min-width="100" label="类型" />
|
||||
<el-table-column
|
||||
prop="faceValueLabel"
|
||||
min-width="100"
|
||||
label="面值/折扣"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="minPointLabel"
|
||||
min-width="100"
|
||||
label="使用门槛(元)"
|
||||
/>
|
||||
<el-table-column prop="typeLabel" min-width="100" label="优惠券类型" />
|
||||
<el-table-column prop="faceValueLabel" min-width="100" label="面值" />
|
||||
<el-table-column prop="minPointLabel" min-width="100" label="使用门槛" />
|
||||
<el-table-column
|
||||
prop="validityPeriodLabel"
|
||||
min-width="200"
|
||||
label="有效期"
|
||||
/>
|
||||
<el-table-column prop="remark" label="使用说明" />
|
||||
|
||||
<el-table-column label="操作" align="center" width="150">
|
||||
<template #default="scope">
|
||||
|
|
@ -270,7 +325,7 @@ onMounted(() => {
|
|||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页工具条 -->
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-if="total > 0"
|
||||
:total="total"
|
||||
|
|
@ -279,40 +334,19 @@ onMounted(() => {
|
|||
@pagination="handleQuery"
|
||||
/>
|
||||
|
||||
<!-- 表单弹窗 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="1000px">
|
||||
<!-- 表单Dialog -->
|
||||
<el-dialog
|
||||
:title="dialog.title"
|
||||
v-model="dialog.visible"
|
||||
width="1000px;"
|
||||
top="5vh"
|
||||
>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="150px"
|
||||
>
|
||||
<el-form-item label="优惠券名称" prop="name">
|
||||
<el-input v-model="formData.name" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="适用类型" prop="useType">
|
||||
<el-radio-group v-model="formData.useType">
|
||||
<el-radio :label="0">全场通用</el-radio>
|
||||
<el-radio :label="1">指定商品分类</el-radio>
|
||||
<el-radio :label="2">指定商品</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<!--指定商品分类-->
|
||||
<el-tag
|
||||
v-for="item in formData.spuCategoryList"
|
||||
:key="item.categoryId"
|
||||
closable
|
||||
>
|
||||
{{ item.categoryName }}
|
||||
</el-tag>
|
||||
|
||||
<!--指定商品列表-->
|
||||
<el-tag v-for="item in formData.spuList" :key="item.spuId" closable>
|
||||
{{ item.spuName }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="优惠券类型" prop="type">
|
||||
<el-radio-group v-model="formData.type">
|
||||
<el-radio :label="1">满减券</el-radio>
|
||||
|
|
@ -321,81 +355,158 @@ onMounted(() => {
|
|||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="优惠券面值(元)"
|
||||
v-if="formData.type == 2 || formData.type == 3"
|
||||
prop="faceValue"
|
||||
>
|
||||
<el-input v-model="formData.faceValue" />
|
||||
<el-form-item label="优惠券名称" prop="name">
|
||||
<el-input v-model="formData.name" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="优惠券折扣"
|
||||
v-if="formData.type == 3"
|
||||
prop="discount"
|
||||
>
|
||||
<el-input v-model="formData.discount" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="最低消费金额(元)" prop="minPoint">
|
||||
<el-input v-model="formData.minPoint" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="有效期类型" prop="validType">
|
||||
<el-radio-group v-model="formData.validityPeriodType">
|
||||
<el-radio :label="1">自领取之日起有效天数</el-radio>
|
||||
<el-radio :label="2">有效起止时间</el-radio>
|
||||
<el-form-item label="优惠券面值" prop="faceValueType">
|
||||
<el-radio-group
|
||||
v-model="formData.faceValueType"
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
"
|
||||
>
|
||||
<div>
|
||||
<el-radio :label="1">现金</el-radio>
|
||||
<el-input
|
||||
v-model="formData.faceValue"
|
||||
:disabled="formData.faceValueType !== 1"
|
||||
placeholder="0.5-1000的数字"
|
||||
style="width: 180px"
|
||||
>
|
||||
<template #append>元</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div>
|
||||
<el-radio :label="2">折扣</el-radio>
|
||||
<el-input
|
||||
v-model="formData.discount"
|
||||
:disabled="formData.faceValueType !== 2"
|
||||
placeholder="1-9.9的数字"
|
||||
style="width: 180px"
|
||||
>
|
||||
<template #append>折</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="有效天数"
|
||||
v-if="formData.validityPeriodType == 1"
|
||||
prop="validDays"
|
||||
>
|
||||
<el-input v-model="formData.validityDays" />
|
||||
</el-form-item>
|
||||
<el-form-item label="有效期" v-if="formData.validityPeriodType == 2">
|
||||
<el-date-picker
|
||||
v-model="validityPeriod"
|
||||
type="daterange"
|
||||
range-separator="~"
|
||||
start-placeholder="起始时间"
|
||||
end-placeholder="截止时间"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
<el-form-item label="使用门槛" prop="minPoint">
|
||||
<el-input
|
||||
v-model="formData.minPoint"
|
||||
placeholder="0为无限制"
|
||||
style="width: 300px"
|
||||
>
|
||||
<template #prepend>满</template>
|
||||
<template #append>元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="发放数量" prop="totalCount">
|
||||
<el-input v-model="formData.issueCount" />
|
||||
<el-checkbox
|
||||
v-model="totalCountChecked"
|
||||
label="无限制"
|
||||
@change="handleTotalCountChange"
|
||||
/>
|
||||
<el-form-item label="有效时间" prop="validType">
|
||||
<el-radio-group
|
||||
v-model="formData.validityPeriodType"
|
||||
style="display: flex; flex-direction: column"
|
||||
>
|
||||
<div>
|
||||
<el-radio :label="1">日期范围</el-radio>
|
||||
<el-date-picker
|
||||
v-model="validityPeriod"
|
||||
type="daterange"
|
||||
range-separator="~"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束时间"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled="formData.validityPeriodType !== 1"
|
||||
/>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<el-radio :label="2">固定天数</el-radio>
|
||||
<el-input
|
||||
v-model="formData.validityDays"
|
||||
style="width: 150px"
|
||||
:disabled="formData.validityPeriodType !== 2"
|
||||
>
|
||||
<template #append>天</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="发行量" prop="circulation">
|
||||
<el-input
|
||||
v-model="formData.circulation"
|
||||
placeholder="-1为无限制"
|
||||
style="width: 200px"
|
||||
>
|
||||
<template #prepend>共</template>
|
||||
<template #append>张</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="每人限领张数" prop="perLimit">
|
||||
<el-checkbox
|
||||
v-model="perLimitChecked"
|
||||
@change="hanclePerLimitChange"
|
||||
label="不限次数"
|
||||
/>
|
||||
<div style="width: 100%">
|
||||
<el-input
|
||||
v-model="formData.perLimit"
|
||||
:readonly="perLimitChecked"
|
||||
style="width: 200px"
|
||||
>
|
||||
<template #prepend>限</template>
|
||||
<template #append>次</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="formData.perLimit"
|
||||
style="width: 200px"
|
||||
placeholder="-1为不限制"
|
||||
>
|
||||
<template #prepend>限</template>
|
||||
<template #append>张</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="使用说明" prop="remark">
|
||||
<el-form-item label="备注信息" prop="remark">
|
||||
<el-input type="textarea" v-model="formData.remark" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="商品范围" prop="useType">
|
||||
<el-radio-group
|
||||
v-model="formData.applicationScope"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-radio :label="0">全场通用</el-radio>
|
||||
<el-radio :label="1">指定商品分类</el-radio>
|
||||
<el-radio :label="2">指定商品</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<div class="application-container">
|
||||
<!-- 指定商品分类 -->
|
||||
<el-cascader
|
||||
ref="spuCategoryRef"
|
||||
v-if="formData.applicationScope == 1"
|
||||
v-model="formData.spuCategoryIds"
|
||||
:options="spuCategoryOptions"
|
||||
:props="spuCategoryProps"
|
||||
:show-all-levels="true"
|
||||
style="width: 450px"
|
||||
/>
|
||||
|
||||
<el-transfer
|
||||
class="application-container__transfer"
|
||||
v-model="formData.spuIds"
|
||||
v-if="formData.applicationScope == 2"
|
||||
filterable
|
||||
filter-placeholder="商品名称/编码"
|
||||
:data="spuList"
|
||||
:titles="['商品列表', '已选择商品']"
|
||||
:props="{
|
||||
key: 'id',
|
||||
label: 'name'
|
||||
}"
|
||||
>
|
||||
<template #left-footer>
|
||||
<pagination
|
||||
:total="spuTotal"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="handleSpuQuery"
|
||||
layout="prev, pager, next,"
|
||||
/>
|
||||
</template>
|
||||
</el-transfer>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
|
|
@ -407,3 +518,15 @@ onMounted(() => {
|
|||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.application-container {
|
||||
margin-top: 20px;
|
||||
|
||||
&__transfer {
|
||||
.pagination-container {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue