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

feat 添加优惠券管理

Browse Source
This commit is contained in:
lwh 2023-07-29 20:10:04 +08:00
parent ad2e099b1d
commit 4a77470025
5 changed files with 160 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -222,7 +222,8 @@ const formData = reactive({
couponSort: 100, couponSort: 100,
couponSendNumber: -1, couponSendNumber: -1,
couponApplicableScopeConfig: [], couponApplicableScopeConfig: [],
couponGoodsIds: [] couponGoodsIds: [],
couponFixedTime: []
}); });
const props = defineProps({ const props = defineProps({
modelValue: Boolean, modelValue: Boolean,
@ -261,6 +262,10 @@ const handleAddClick = async (formEl) => {
if (formData.couponApplicableScopeConfig) { if (formData.couponApplicableScopeConfig) {
formData.couponApplicableScopeConfig = JSON.stringify(formData.couponApplicableScopeConfig) formData.couponApplicableScopeConfig = JSON.stringify(formData.couponApplicableScopeConfig)
} }
if(formData.couponFixedTime.length != 0){
formData.couponFixedStartTime = formData.couponFixedTime[0]
formData.couponFixedEndTime = formData.couponFixedTime[1]
}
const { code } = await addOrUpdateCoupon(formData); const { code } = await addOrUpdateCoupon(formData);
if (code == 200) { if (code == 200) {

138
src/views/business/Marketing/CouponManage/Coupons/components/DetailDialog.vue
View File

@ -8,117 +8,123 @@
--> -->
<template> <template>
<el-dialog v-model="props.modelValue" title="优惠券信息详情" width="900px" @closed="closeDialog" @open="openDialog"> <el-dialog v-model="props.modelValue" title="优惠券信息详情" width="900px" @closed="closeDialog" @open="openDialog">
<el-form ref="formRef" :model="formData" :disabled="true"> <el-form ref="formRef" :model="formData" :rules="rules" disabled>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :lg="12"> <el-col :lg="12">
<el-form-item :label-width="labelWidth" label="优惠劵名称" > <el-form-item :label-width="labelWidth" label="优惠劵名称" prop="couponName">
<el-input v-model="formData.couponName" /> <el-input v-model="formData.couponName" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="12"> </el-row>
<el-form-item :label-width="labelWidth" label="优惠劵类型" >
<el-row>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="优惠劵类型" prop="couponType">
<el-radio-group v-model="formData.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 v-for="item in coupon_type " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
item.dictLabel }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="12" v-if="formData.couponType == 1">
<el-col :lg="12"> <el-form-item :label-width="labelWidth" label="减免金额" prop="couponDeductionMoney">
<el-form-item :label-width="labelWidth" label="减免金额" > <el-input-number v-model.number="formData.couponDeductionMoney" controls-position="right" :min="0"
<el-input-number v-model.number="formData.couponDeductionMoney" controls-position="right" :precision="2" /> precision="2" />
<span class="number-unit">元</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="12" v-if="formData.couponType == 2">
<el-col :lg="12"> <el-form-item :label-width="labelWidth" label="折扣率" prop="couponDiscountRate">
<el-form-item :label-width="labelWidth" label="折扣率" > <el-input-number v-model.number="formData.couponDiscountRate" controls-position="right" :min="0"
<el-input-number v-model.number="formData.couponDiscountRate" controls-position="right" :precision="2" /> precision="2" />
<span class="number-unit">%</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="12"> <el-col :lg="12">
<el-form-item :label-width="labelWidth" label="最低消费金额" > <el-form-item :label-width="labelWidth" label="最低消费金额" prop="couponMinConsumeMoney">
<el-input-number v-model.number="formData.couponMinConsumeMoney" controls-position="right" :precision="2" /> <el-input-number v-model.number="formData.couponMinConsumeMoney" controls-position="right" :min="0"
precision="2" />
<span class="number-unit">元</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="24">
<el-col :lg="12"> <el-form-item :label-width="labelWidth" label="到期类型" prop="couponExpireType">
<el-form-item :label-width="labelWidth" label="到期类型" >
<el-radio-group v-model="formData.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 v-for="item in coupon_expire_type " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
item.dictLabel }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="12" v-if="formData.couponExpireType == 1">
<el-col :lg="12"> <el-form-item :label-width="labelWidth" label="有效天数" prop="couponEffectiveDays">
<el-form-item :label-width="labelWidth" label="有效天数" > <el-input-number v-model.number="formData.couponEffectiveDays" controls-position="right" :min="0" />
<el-input-number v-model.number="formData.couponEffectiveDays" controls-position="right" :precision="2" /> <span class="number-unit">天</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="12" v-if="formData.couponExpireType == 2">
<el-col :lg="12"> <el-form-item :label-width="labelWidth" label="" prop="couponFixedStartTime">
<el-form-item :label-width="labelWidth" label="固定时间-开始时间" > <!-- <el-date-picker v-model="formData.couponFixedStartTime" type="datetime" :teleported="false"
<el-date-picker v-model="formData.couponFixedStartTime" type="datetime" :teleported="false" isabledStr}></el-date-picker> ></el-date-picker> -->
<el-date-picker v-model="formData.couponFixedTime" type="daterange" range-separator="-"
start end />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="24">
<el-col :lg="12"> <el-form-item :label-width="labelWidth" label="适用范围" prop="couponApplicableScope">
<el-form-item :label-width="labelWidth" label="固定时间-结束时间" >
<el-date-picker v-model="formData.couponFixedEndTime" type="datetime" :teleported="false" isabledStr}></el-date-picker>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="适用范围" >
<el-radio-group v-model="formData.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 v-for="item in applicable_scope " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
item.dictLabel }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </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-col :lg="12"> <el-table v-if="formData.couponApplicableScopeConfig.length != 0" v-loading="loading"
<el-form-item :label-width="labelWidth" label="适用范围配置(json)" > :data="formData.couponApplicableScopeConfig" ref="tableRef" border highlight-current-row>
<el-input v-model="formData.couponApplicableScopeConfig" :disabled="true"/> <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-form-item>
</el-col> </el-col>
<el-col :lg="24">
<el-col :lg="12"> <el-form-item :label-width="labelWidth" label="发送数量" prop="couponSendNumber">
<el-form-item :label-width="labelWidth" label="发送数量(-1不限制)" > <div style="display: block;">
<el-input-number v-model.number="formData.couponSendNumber" controls-position="right" :precision="2" /> <el-input-number v-model.number="formData.couponSendNumber" controls-position="right" :min="-1" />
<div class="input-intro">(-1不限制)</div>
</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="12"> <el-col :lg="12">
<el-form-item :label-width="labelWidth" label="已领取数量" > <el-form-item :label-width="labelWidth" label="显示状态" prop="couponDisplayStatus">
<el-input-number v-model.number="formData.couponGetNumber" controls-position="right" :precision="2" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="显示状态" >
<el-radio-group v-model="formData.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 v-for="item in display_status " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
item.dictLabel }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="12"> <el-col :lg="12">
<el-form-item :label-width="labelWidth" label="排序" > <el-form-item :label-width="labelWidth" label="排序" prop="couponSort">
<el-input-number v-model.number="formData.couponSort" controls-position="right" :precision="2" /> <el-input-number v-model.number="formData.couponSort" controls-position="right" :min="0" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-dialog> </el-dialog>

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

@ -84,12 +84,9 @@
<el-col :lg="24" v-if="formData.couponApplicableScope == 2"> <el-col :lg="24" v-if="formData.couponApplicableScope == 2">
<el-form-item :label-width="labelWidth" label="" prop=""> <el-form-item :label-width="labelWidth" label="" prop="">
<el-button type="primary" plain @click="handleChooseGoods">+ 指定商品</el-button> <el-button type="primary" plain @click="handleChooseGoods">+ 指定商品</el-button>
</el-form-item>
</el-col> <el-table v-if="formData.couponApplicableScopeConfig.length != 0" v-loading="loading"
<el-col :lg="24" v-if="formData.couponApplicableScopeConfig.length != 0"> :data="formData.couponApplicableScopeConfig" ref="tableRef" border highlight-current-row>
<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"> <el-table-column prop="goodsPicture" width="150" label="图片" align="center">
<template #default="scope"> <template #default="scope">
<el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain" <el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
@ -211,7 +208,7 @@ async function getdisplay_status() {
// 打开选择商品弹窗 // 打开选择商品弹窗
const handleChooseGoods = () => { const handleChooseGoods = () => {
ChooseGoodsDialogVisible.value = true ChooseGoodsDialogVisible.value = true
ChooseGoodsDialogRow.value = formData ChooseGoodsDialogRow.value = formData.value
} }
@ -260,6 +257,10 @@ const handleEditClick = async (formEl) => {
if (formData.value.couponApplicableScopeConfig) { if (formData.value.couponApplicableScopeConfig) {
formData.value.couponApplicableScopeConfig = JSON.stringify(formData.value.couponApplicableScopeConfig) formData.value.couponApplicableScopeConfig = JSON.stringify(formData.value.couponApplicableScopeConfig)
} }
if(formData.value.couponFixedTime.length != 0){
formData.value.couponFixedStartTime = formData.value.couponFixedTime[0]
formData.value.couponFixedEndTime = formData.value.couponFixedTime[1]
}
const { code } = await addOrUpdateCoupon(formData.value); const { code } = await addOrUpdateCoupon(formData.value);
if (code == 200) { if (code == 200) {

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

@ -48,7 +48,7 @@
{{ $t('btn.delete') }} {{ $t('btn.delete') }}
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5"> <!-- <el-col :span="1.5">
<el-button type="primary" plain icon="Upload" @click="UploadDialogVisible = true" <el-button type="primary" plain icon="Upload" @click="UploadDialogVisible = true"
v-hasPermi="['business:coupon:import']">导入</el-button> v-hasPermi="['business:coupon:import']">导入</el-button>
</el-col> </el-col>
@ -56,7 +56,7 @@
<el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['business:coupon:export']"> <el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['business:coupon:export']">
{{ $t('btn.export') }} {{ $t('btn.export') }}
</el-button> </el-button>
</el-col> </el-col> -->
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
@ -200,11 +200,20 @@ function getList() {
dataList.value = res.data.result; dataList.value = res.data.result;
total.value = res.data.totalNum; total.value = res.data.totalNum;
dataList.forEach(item => { dataList.value.forEach(item => {
item.couponGoodsIds = item.couponGoodsIds.split(',') if(item.couponGoodsIdsArr.length !=- 0){
item.couponGoodsIds = item.couponGoodsIdsArr.split(',')
}
if(item.couponApplicableScopeConfig){
item.couponApplicableScopeConfig = JSON.parse(item.couponApplicableScopeConfig) item.couponApplicableScopeConfig = JSON.parse(item.couponApplicableScopeConfig)
}
if(item.couponFixedStartTime && item.couponFixedEndTime){
item.couponFixedTime = []
item.couponFixedTime.push(item.couponFixedStartTime)
item.couponFixedTime.push(item.couponFixedEndTime)
// console.log(item.couponFixedTime,'列表的捏');
}
}); });
console.log(dataList.value,'列表的捏');
} }
}); });
} }

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

@ -14,7 +14,7 @@
<!-- 表格渲染 prop="对应的字段"--> <!-- 表格渲染 prop="对应的字段"-->
<el-table v-loading="loading" :data="goodssList" ref="tableRef" border highlight-current-row <el-table v-loading="loading" :data="goodssList" ref="tableRef" border highlight-current-row
@row-click="handleRowClick" @selection-change="handleSelectionChange"> @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" /> <el-table-column type="selection" width="50" align="center" />
<el-table-column prop="goodsPicture" width="150" label="图片" align="center"> <el-table-column prop="goodsPicture" width="150" label="图片" align="center">
<template #default="scope"> <template #default="scope">
@ -77,8 +77,6 @@ const formData = ref({
const goodssList = ref([]); const goodssList = ref([]);
// 打开窗口时运行 // 打开窗口时运行
const openDialog = async () => { const openDialog = async () => {
await getgoodsListFun() await getgoodsListFun()
} }
@ -93,8 +91,18 @@ const getgoodsListFun = async () => {
if (res.code == 200) { if (res.code == 200) {
goodssList.value = res.data goodssList.value = res.data
loading.value = false loading.value = false
} }
}) })
// 勾选已选中的
goodssList.value.forEach(item => {
props.data.couponApplicableScopeConfig.forEach(e => {
if (item.goodsId === e.goodsId) {
tableRef.value.toggleRowSelection(item);
}
});
});
} }
watch(props, (v) => { watch(props, (v) => {
@ -111,8 +119,8 @@ function handleSelectionChange(selection) {
ids.value = selection.map((item) => item.goodsId) ids.value = selection.map((item) => item.goodsId)
goodsTableData.value = selection.map((item) => item) goodsTableData.value = selection.map((item) => item)
console.log(ids.value,"商品的ids"); // console.log(ids.value,"商品的ids");
console.log(goodsTableData.value,"商品的表单列表"); // console.log(goodsTableData.value,"商品的表单列表");
} }
const closeDialog = () => { const closeDialog = () => {