net/micro_mall_back
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed 完善后台优惠券接口 50%

Browse Source
This commit is contained in:
lwh 2023-07-25 12:52:11 +08:00
parent 01d7cf332f
commit ad2e099b1d
4 changed files with 223 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/views/business/Marketing/CouponManage/Coupons/components/AddDialog.vue
View File

@ -69,13 +69,8 @@
<el-form-item :label-width="labelWidth" label="" prop="couponFixedStartTime">
<!-- <el-date-picker v-model="formData.couponFixedStartTime" type="datetime" :teleported="false"
placeholder="选择日期时间"></el-date-picker> -->
<el-date-picker
v-model="formData.couponFixedTime"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<el-date-picker v-model="formData.couponFixedTime" type="daterange" range-separator="-"
start-placeholder="开始日期" end-placeholder="结束日期" />
</el-form-item>
</el-col>
<el-col :lg="24">
@ -91,10 +86,29 @@
<el-button type="primary" plain @click="handleChooseGoods">+ 指定商品</el-button>
</el-form-item>
</el-col>
<el-col :lg="24" v-if="formData.couponApplicableScopeConfig.length != 0">
<el-form-item :label-width="labelWidth" label="" prop="">
<el-table v-loading="loading" :data="formData.couponApplicableScopeConfig" ref="tableRef" border highlight-current-row>
<el-table-column prop="goodsPicture" width="150" label="图片" align="center">
<template #default="scope">
<el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
:src="scope.row.goodsPicture?.split(',')[0]" :preview-src-list="scope.row.goodsPicture?.split(',')">
<div><el-icon :size="15">
<document />
</el-icon></div>
</el-image>
</template>
</el-table-column>
<el-table-column prop="goodsName" width="400" label="商品名称" align="left" :show-overflow-tooltip="true" />
<el-table-column prop="goodsPriceLowest" label="价格" align="center" />
<el-table-column prop="goodsTotalInventory" label="库存总量" align="center" />
</el-table>
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="发送数量" prop="couponSendNumber">
<div style="display: block;">
<el-input-number v-model.number="formData.couponSendNumber" controls-position="right" :min="0" />
<el-input-number v-model.number="formData.couponSendNumber" controls-position="right" :min="-1" />
<div class="input-intro">(-1不限制)</div>
</div>
</el-form-item>
@ -124,8 +138,8 @@
</template>
</el-dialog>
<!-- 选择商品 -->
<ChooseMultipleGoodsDialog v-model="ChooseGoodsDialogVisible" :data="ChooseGoodsDialogRow">
<!-- 选择商品 -->
<ChooseMultipleGoodsDialog v-model="ChooseGoodsDialogVisible" :data="ChooseGoodsDialogRow">
</ChooseMultipleGoodsDialog>
</template>
@ -161,12 +175,6 @@ const display_status = ref([]);
const ChooseGoodsDialogVisible = ref(false);
const ChooseGoodsDialogRow = ref({});
// 打开选择商品弹窗
const handleChooseGoods = () => {
ChooseGoodsDialogVisible.value = true
ChooseGoodsDialogRow.value = formData
}
// -业务方法
// 字典获取
@ -194,7 +202,11 @@ async function getdisplay_status() {
})
}
// 打开选择商品弹窗
const handleChooseGoods = () => {
ChooseGoodsDialogVisible.value = true
ChooseGoodsDialogRow.value = formData
}
// -基础参数
const loadingStatus = ref(false)
@ -207,7 +219,10 @@ const formData = reactive({
couponExpireType: 1,
couponApplicableScope: 1,
couponDisplayStatus: 1,
couponSort: 100
couponSort: 100,
couponSendNumber: -1,
couponApplicableScopeConfig: [],
couponGoodsIds: []
});
const props = defineProps({
modelValue: Boolean,
@ -240,6 +255,12 @@ const handleAddClick = async (formEl) => {
}
loadingStatus.value = true
if (formData.couponGoodsIds.length != 0) {
formData.couponGoodsIds = formData.couponGoodsIds.join(',')
}
if (formData.couponApplicableScopeConfig) {
formData.couponApplicableScopeConfig = JSON.stringify(formData.couponApplicableScopeConfig)
}
const { code } = await addOrUpdateCoupon(formData);
if (code == 200) {
@ -250,6 +271,7 @@ const handleAddClick = async (formEl) => {
});
};
const closeDialog = () => {
formData.couponApplicableScopeConfig = []
handleResetClick(formRef.value);
props.done();
emits("update:modelValue", false);
@ -265,9 +287,9 @@ const handleResetClick = async (formEl) => {
.number-unit {
margin-left: 10px;
}
.input-intro {
color: #8c8c8c;
font-size: 12px;
}
</style>

266
src/views/business/Marketing/CouponManage/Coupons/components/EditDialog.vue
View File

@ -4,119 +4,129 @@
* @Author: (lwh)
* @Date: (2023-07-24)
* @LastEditors: (lwh)
* @LastEditTime: (2023-07-24)
* @LastEditTime: (2023-07-25)
-->
<template>
<el-dialog v-model="props.modelValue" title="修改优惠券信息" width="900px" @closed="closeDialog" @open="openDialog">
<el-form ref="formRef" :model="formData" :rules="rules">
<el-row :gutter="20">
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="优惠劵名称" prop="couponName">
<el-input v-model="formData.couponName" placeholder="请输入优惠劵名称" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="优惠劵类型" prop="couponType">
<el-radio-group v-model="formData.couponType">
<el-radio v-for="item in coupon_type " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="减免金额" prop="couponDeductionMoney">
<el-input-number v-model.number="formData.couponDeductionMoney" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="折扣率" prop="couponDiscountRate">
<el-input-number v-model.number="formData.couponDiscountRate" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="最低消费金额" prop="couponMinConsumeMoney">
<el-input-number v-model.number="formData.couponMinConsumeMoney" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="到期类型" prop="couponExpireType">
<el-radio-group v-model="formData.couponExpireType">
<el-radio v-for="item in coupon_expire_type " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="有效天数" prop="couponEffectiveDays">
<el-input-number v-model.number="formData.couponEffectiveDays" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="固定时间-开始时间" prop="couponFixedStartTime">
<el-date-picker v-model="formData.couponFixedStartTime" type="datetime" :teleported="false" placeholder="选择日期时间"></el-date-picker>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="固定时间-结束时间" prop="couponFixedEndTime">
<el-date-picker v-model="formData.couponFixedEndTime" type="datetime" :teleported="false" placeholder="选择日期时间"></el-date-picker>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="适用范围" prop="couponApplicableScope">
<el-radio-group v-model="formData.couponApplicableScope">
<el-radio v-for="item in applicable_scope " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="适用范围配置(json)" prop="couponApplicableScopeConfig">
<el-input v-model="formData.couponApplicableScopeConfig" placeholder="请输入适用范围配置(json)" :disabled="true"/>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="发送数量(-1不限制)" prop="couponSendNumber">
<el-input-number v-model.number="formData.couponSendNumber" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="已领取数量" prop="couponGetNumber">
<el-input-number v-model.number="formData.couponGetNumber" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="显示状态" prop="couponDisplayStatus">
<el-radio-group v-model="formData.couponDisplayStatus">
<el-radio v-for="item in display_status " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="排序" prop="couponSort">
<el-input-number v-model.number="formData.couponSort" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="优惠劵名称" prop="couponName">
<el-input v-model="formData.couponName" placeholder="请输入优惠劵名称" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="优惠劵类型" prop="couponType">
<el-radio-group v-model="formData.couponType">
<el-radio v-for="item in coupon_type " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
item.dictLabel }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12" v-if="formData.couponType == 1">
<el-form-item :label-width="labelWidth" label="减免金额" prop="couponDeductionMoney">
<el-input-number v-model.number="formData.couponDeductionMoney" controls-position="right" :min="0"
precision="2" />
<span class="number-unit">元</span>
</el-form-item>
</el-col>
<el-col :lg="12" v-if="formData.couponType == 2">
<el-form-item :label-width="labelWidth" label="折扣率" prop="couponDiscountRate">
<el-input-number v-model.number="formData.couponDiscountRate" controls-position="right" :min="0"
precision="2" />
<span class="number-unit">%</span>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="最低消费金额" prop="couponMinConsumeMoney">
<el-input-number v-model.number="formData.couponMinConsumeMoney" controls-position="right" :min="0"
precision="2" />
<span class="number-unit">元</span>
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="到期类型" prop="couponExpireType">
<el-radio-group v-model="formData.couponExpireType">
<el-radio v-for="item in coupon_expire_type " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
item.dictLabel }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12" v-if="formData.couponExpireType == 1">
<el-form-item :label-width="labelWidth" label="有效天数" prop="couponEffectiveDays">
<el-input-number v-model.number="formData.couponEffectiveDays" controls-position="right" :min="0" />
<span class="number-unit">天</span>
</el-form-item>
</el-col>
<el-col :lg="12" v-if="formData.couponExpireType == 2">
<el-form-item :label-width="labelWidth" label="" prop="couponFixedStartTime">
<!-- <el-date-picker v-model="formData.couponFixedStartTime" type="datetime" :teleported="false"
placeholder="选择日期时间"></el-date-picker> -->
<el-date-picker v-model="formData.couponFixedTime" type="daterange" range-separator="-"
start-placeholder="开始日期" end-placeholder="结束日期" />
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="适用范围" prop="couponApplicableScope">
<el-radio-group v-model="formData.couponApplicableScope">
<el-radio v-for="item in applicable_scope " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
item.dictLabel }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="24" v-if="formData.couponApplicableScope == 2">
<el-form-item :label-width="labelWidth" label="" prop="">
<el-button type="primary" plain @click="handleChooseGoods">+ 指定商品</el-button>
</el-form-item>
</el-col>
<el-col :lg="24" v-if="formData.couponApplicableScopeConfig.length != 0">
<el-form-item :label-width="labelWidth" label="" prop="">
<el-table v-loading="loading" :data="formData.couponApplicableScopeConfig" ref="tableRef" border
highlight-current-row>
<el-table-column prop="goodsPicture" width="150" label="图片" align="center">
<template #default="scope">
<el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
:src="scope.row.goodsPicture?.split(',')[0]" :preview-src-list="scope.row.goodsPicture?.split(',')">
<div><el-icon :size="15">
<document />
</el-icon></div>
</el-image>
</template>
</el-table-column>
<el-table-column prop="goodsName" width="400" label="商品名称" align="left" :show-overflow-tooltip="true" />
<el-table-column prop="goodsPriceLowest" label="价格" align="center" />
<el-table-column prop="goodsTotalInventory" label="库存总量" align="center" />
</el-table>
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="发送数量" prop="couponSendNumber">
<div style="display: block;">
<el-input-number v-model.number="formData.couponSendNumber" controls-position="right" :min="-1" />
<div class="input-intro">(-1不限制)</div>
</div>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="显示状态" prop="couponDisplayStatus">
<el-radio-group v-model="formData.couponDisplayStatus">
<el-radio v-for="item in display_status " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
item.dictLabel }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="排序" prop="couponSort">
<el-input-number v-model.number="formData.couponSort" controls-position="right" :min="0" />
</el-form-item>
</el-col>
</el-row>
</el-form>
@ -127,22 +137,27 @@
<el-button @click="handleResetClick(formRef)">重置</el-button>
</div>
</template>
</el-dialog>
</el-dialog>
<!-- 选择商品 -->
<ChooseMultipleGoodsDialog v-model="ChooseGoodsDialogVisible" :data="ChooseGoodsDialogRow">
</ChooseMultipleGoodsDialog>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import modal from '@/plugins/modal.js'
import { reactive, ref, watch } from "vue";
import { addOrUpdateCoupon } from "@/api/business/Marketing/CouponManage/Coupons/coupon.js";
import { addOrUpdateCoupon } from "@/api/business/Marketing/CouponManage/Coupons/coupon.js";
import ChooseMultipleGoodsDialog from '@/views/business/components/ChooseMultipleGoodsDialog.vue';
// 打开弹窗时回调
const openDialog = async () => {
await getcoupon_type()
await getcoupon_expire_type()
await getapplicable_scope()
await getdisplay_status()
await getcoupon_type()
await getcoupon_expire_type()
await getapplicable_scope()
await getdisplay_status()
}
@ -163,6 +178,9 @@ const coupon_expire_type = ref([]);
const applicable_scope = ref([]);
// 显示状态字典选项列表
const display_status = ref([]);
// 选择商品弹窗参数
const ChooseGoodsDialogVisible = ref(false);
const ChooseGoodsDialogRow = ref({});
// -业务方法
//字典获取
@ -190,6 +208,12 @@ async function getdisplay_status() {
})
}
// 打开选择商品弹窗
const handleChooseGoods = () => {
ChooseGoodsDialogVisible.value = true
ChooseGoodsDialogRow.value = formData
}
// -基础参数
@ -210,14 +234,14 @@ const imgData = ref({
// 验证
const rules = reactive({
couponGuid: [{ required: true, message: "不能为空", trigger: "blur", type: "number" }],
couponName: [{ required: true, message: "优惠劵名称不能为空", trigger: "blur" }],
couponType: [{ required: true, message: "优惠劵类型不能为空", trigger: "blur", type: "number" }],
couponMinConsumeMoney: [{ required: true, message: "最低消费金额不能为空", trigger: "blur" }],
couponExpireType: [{ required: true, message: "到期类型不能为空", trigger: "blur", type: "number" }],
couponSendNumber: [{ required: true, message: "发送数量(-1不限制)不能为空", trigger: "blur", type: "number" }],
couponDisplayStatus: [{ required: true, message: "显示状态不能为空", trigger: "blur", type: "number" }],
couponSort: [{ required: true, message: "排序不能为空", trigger: "blur", type: "number" }],
couponGuid: [{ required: true, message: "不能为空", trigger: "blur", type: "number" }],
couponName: [{ required: true, message: "优惠劵名称不能为空", trigger: "blur" }],
couponType: [{ required: true, message: "优惠劵类型不能为空", trigger: "blur", type: "number" }],
couponMinConsumeMoney: [{ required: true, message: "最低消费金额不能为空", trigger: "blur" }],
couponExpireType: [{ required: true, message: "到期类型不能为空", trigger: "blur", type: "number" }],
couponSendNumber: [{ required: true, message: "发送数量(-1不限制)不能为空", trigger: "blur", type: "number" }],
couponDisplayStatus: [{ required: true, message: "显示状态不能为空", trigger: "blur", type: "number" }],
couponSort: [{ required: true, message: "排序不能为空", trigger: "blur", type: "number" }],
});
// -基础方法
@ -230,6 +254,12 @@ const handleEditClick = async (formEl) => {
}
loadingStatus.value = true
if (formData.value.couponGoodsIds.length != 0) {
formData.value.couponGoodsIds = formData.value.couponGoodsIds.join(',')
}
if (formData.value.couponApplicableScopeConfig) {
formData.value.couponApplicableScopeConfig = JSON.stringify(formData.value.couponApplicableScopeConfig)
}
const { code } = await addOrUpdateCoupon(formData.value);
if (code == 200) {

29
src/views/business/Marketing/CouponManage/Coupons/index.vue
View File

@ -65,29 +65,14 @@
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="couponName" label="优惠劵名称" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="couponName" width="350" label="优惠劵名称" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="couponType" label="优惠劵类型" align="center">
<template #default="scope">
<dict-tag :options="coupon_type" :value="scope.row.couponType" />
</template>
</el-table-column>
<el-table-column prop="couponDeductionMoney" label="减免金额" align="center" />
<el-table-column prop="couponDiscountRate" label="折扣率" align="center" />
<el-table-column prop="couponMinConsumeMoney" label="最低消费金额" align="center" />
<el-table-column prop="couponExpireType" label="到期类型" align="center">
<template #default="scope">
<dict-tag :options="coupon_expire_type" :value="scope.row.couponExpireType" />
</template>
</el-table-column>
<el-table-column prop="couponEffectiveDays" label="有效天数" align="center" />
<el-table-column prop="couponFixedStartTime" label="固定时间-开始时间" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="couponFixedEndTime" label="固定时间-结束时间" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="couponApplicableScope" label="适用范围" align="center">
<template #default="scope">
<dict-tag :options="applicable_scope" :value="scope.row.couponApplicableScope" />
</template>
</el-table-column>
<el-table-column prop="couponSendNumber" label="发送数量(-1不限制)" align="center" />
<el-table-column prop="couponSendNumber" label="发送数量" align="center" />
<el-table-column prop="couponDisplayStatus" label="显示状态" align="center">
<template #default="scope">
<dict-tag :options="display_status" :value="scope.row.couponDisplayStatus" />
@ -181,7 +166,7 @@ async function getcoupon_expire_type() {
coupon_expire_type.value = res.data
})
}
getcoupon_expire_type()
// getcoupon_expire_type()
// 字典获取
const applicable_scope = ref([]);
async function getapplicable_scope() {
@ -189,7 +174,7 @@ async function getapplicable_scope() {
applicable_scope.value = res.data
})
}
getapplicable_scope()
// getapplicable_scope()
// 字典获取
const display_status = ref([]);
async function getdisplay_status() {
@ -214,6 +199,12 @@ function getList() {
loading.value = false;
dataList.value = res.data.result;
total.value = res.data.totalNum;
dataList.forEach(item => {
item.couponGoodsIds = item.couponGoodsIds.split(',')
item.couponApplicableScopeConfig = JSON.parse(item.couponApplicableScopeConfig)
});
console.log(dataList.value,'列表的捏');
}
});
}

37
src/views/business/components/ChooseMultipleGoodsDialog.vue
View File

@ -14,7 +14,7 @@
<!-- 表格渲染 prop="对应的字段"-->
<el-table v-loading="loading" :data="goodssList" ref="tableRef" border highlight-current-row
@row-click="handleRowClick">
@row-click="handleRowClick" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="goodsPicture" width="150" label="图片" align="center">
<template #default="scope">
@ -48,8 +48,16 @@ import { allGoodsList } from '@/api/business/GoodsManager/Goodss/goods.js'
// 业务参数
const loading = ref(false)
// 商品表单列表
const goodsTableData = ref([])
// 选中Id数组
const ids = ref([])
// 基础参数
const tableRef = ref(null);
// 查询参数
const queryParams = reactive({
@ -64,7 +72,7 @@ const props = defineProps({
});
const formData = ref({
...props.data
});
});
const goodssList = ref([]);
// 打开窗口时运行
@ -94,31 +102,34 @@ watch(props, (v) => {
});
// -业务方法
let goodsName = ref("");
let goodsGuid = ref("");
// -基础方法
// 点击行
const handleRowClick = (row) => {
goodsName.value = row.goodsName
goodsGuid.value = row.goodsGuid
// 多选框选中数据
function handleSelectionChange(selection) {
ids.value = selection.map((item) => item.goodsId)
goodsTableData.value = selection.map((item) => item)
console.log(ids.value,"商品的ids");
console.log(goodsTableData.value,"商品的表单列表");
}
const closeDialog = () => {
queryParams.goodsName = ""
goodsName.value = ""
ids.value = ""
goodsTableData.value = []
emits('update:modelValue', false);
};
// 提交
const handleEditClick = async () => {
if (goodsName.value !== "") {
if (goodsTableData.value.length !== 0) {
formData.value.goodsName = goodsName.value
formData.value.goodsGuid = goodsGuid.value
if (formData.value.goodsName != null) {
formData.value.couponApplicableScopeConfig = goodsTableData.value
formData.value.couponGoodsIds = ids.value
console.log(formData.value,'外面的表单');
if (formData.value.couponApplicableScopeConfig.length != 0) {
// props.done();
closeDialog();
}