Skip to content

S
snow-guizhou-web-frontend
提交 812f3b05 作者: 郁骅焌
操作

满减券编辑

上级 46d4cae0
正在显示 包含 343 行增加 和 2 行删除
src/api/coupon/list.js
...@@ -17,3 +17,20 @@ export function editStatus(data) { ...@@ -17,3 +17,20 @@ export function editStatus(data) {
data: data data: data
}) })
} }
// 查询详细
export function couponDetail(id) {
return request({
url: '/xh/coupon/coupon/xh/' + id,
method: 'get'
})
}
// 修改
export function editCoupon(data) {
return request({
url: '/xh/coupon/coupon/edit',
method: 'post',
data: data
})
}
src/assets/styles/index.scss
...@@ -259,3 +259,27 @@ aside { ...@@ -259,3 +259,27 @@ aside {
position: relative; position: relative;
} }
} }
$form-input-width: 688px;
.form-common-input {
.el-input,
.el-textarea,
.vue-treeselect {
width: $form-input-width;
}
.el-input__inner {
width: $form-input-width;
}
.el-tag--medium {
color: #3370ff;
background-color: #fff;
border-radius: 2px;
border: 1px solid #3370ff;
.el-tag__close:hover {
color: #aeb1c1;
background-color: #fff;
}
}
}
src/views/coupon/list/edit.vue 0 → 100644
<template>
<div class="app-container">
<el-form ref="formRef" :model="formData" :rules="rules" size="small" label-width="auto">
<el-form-item label="优惠券标题" prop="couponTitle" class="form-common-input" required>
<el-input v-model="formData.couponTitle" placeholder="请输入优惠券标题" disabled />
</el-form-item>
<el-form-item label="优惠券类型" prop="couponType" class="form-common-input" required>
<el-select v-model="formData.couponType" placeholder="请选择优惠券类型" disabled>
<el-option v-for="(item, index) in dict.type.coupon_type2" :key="index" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="优惠券分类" prop="categoryName" class="form-common-input" required>
<el-input v-model="formData.categoryName" placeholder="请输入优惠券分类" disabled />
</el-form-item>
<el-form-item label="有效期" style="margin-bottom: 0;">
<el-row style="width: 688px;">
<el-col :span="4">
<el-form-item prop="validityType">
<el-radio v-model="formData.validityType" label="1">固定日期</el-radio>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="validityDate" :rules="{
required: formData.validityType === '1', message: '请选择日期', trigger: ['change', 'blur']
}">
<el-date-picker v-model="formData.validityDate" type="daterange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" style="width: 400px;" value-format="yyyy-MM-dd"
:disabled="formData.validityType === '2'">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row style="width: 688px;">
<el-col :span="5">
<el-form-item props="validityType">
<el-radio v-model="formData.validityType" label="2">领取后当天生效</el-radio>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="validityNum" :rules="{
required: formData.validityType === '2', message: '请输入天数', trigger: ['change', 'blur']
}">
有效期
<el-input type="number" v-model.number="formData.validityNum" placeholder="请输入天数" style="width: 200px;"
:disabled="formData.validityType === '1'" />
天
</el-form-item>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="库存" prop="issued" class="form-common-input" :rules="{
required: true, message: '请输入库存数', trigger: ['change', 'blur']
}">
<el-input type="number" v-model.number="formData.issued" placeholder="请输入库存数" />
</el-form-item>
<el-form-item label="领券限制" style="margin-bottom: 0;">
<el-row style="width: 688px;">
<el-col :span="12">
<el-form-item prop="receiveTotalNum" :rules="{
required: !receiveTotalChecked, message: '请输入', trigger: ['change', 'blur']
}">
总共可领取
<el-input type="number" v-model.number="formData.receiveTotalNum" placeholder="请输入" style="width: 200px;"
:disabled="receiveTotalChecked" />
张
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<el-checkbox v-model="receiveTotalChecked">不限制</el-checkbox>
</el-form-item>
</el-col>
</el-row>
<el-row style="width: 688px;">
<el-col :span="12">
<el-form-item prop="receiveDayNum" :rules="{
required: !receiveDayChecked, message: '请输入', trigger: ['change', 'blur']
}">
每日可领取
<el-input type="number" v-model.number="formData.receiveDayNum" placeholder="请输入" style="width: 200px;"
:disabled="receiveDayChecked" />
张
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<el-checkbox v-model="receiveDayChecked">不限制</el-checkbox>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="适用门店">
{{ formData.storeName }}
</el-form-item>
<el-form-item label="优惠券图片" class="image-url">
<el-radio-group v-model="formData.url">
<el-radio
label="https://scrm-kp-event.crb.cn/links-software-web-file/integralMall/snow-guizhou/1_couponStyle-1.png">
<ImagePreview
src="https://scrm-kp-event.crb.cn/links-software-web-file/integralMall/snow-guizhou/1_couponStyle-1.png"
:src-list="['https://scrm-kp-event.crb.cn/links-software-web-file/integralMall/snow-guizhou/1_couponStyle-1.png']" />
</el-radio>
<el-radio
label="https://scrm-kp-event.crb.cn/links-software-web-file/integralMall/snow-guizhou/1_couponStyle-2.png">
<ImagePreview
src="https://scrm-kp-event.crb.cn/links-software-web-file/integralMall/snow-guizhou/1_couponStyle-2.png"
:src-list="['https://scrm-kp-event.crb.cn/links-software-web-file/integralMall/snow-guizhou/1_couponStyle-2.png']" />
</el-radio>
<el-radio
label="https://scrm-kp-event.crb.cn/links-software-web-file/integralMall/snow-guizhou/1_couponStyle-3.png">
<ImagePreview
src="https://scrm-kp-event.crb.cn/links-software-web-file/integralMall/snow-guizhou/1_couponStyle-3.png"
:src-list="['https://scrm-kp-event.crb.cn/links-software-web-file/integralMall/snow-guizhou/1_couponStyle-3.png']" />
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="使用须知" prop="remarks" class="form-common-input" :rules="{
required: true, message: '请输入', trigger: ['change', 'blur']
}">
<el-input type="textarea" rows="6" v-model="formData.remarks" placeholder="请输入" />
</el-form-item>
<el-form-item label="每日发放限制">
<el-row style="width: 688px;">
<el-col :span="8">
<el-form-item prop="grantNum" :rules="{
required: !grantChecked, message: '请输入', trigger: ['change', 'blur']
}">
<el-input type="number" v-model.number="formData.grantNum" placeholder="请输入" style="width: 200px;"
:disabled="grantChecked" />
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item>
<el-checkbox v-model="grantChecked">不限制</el-checkbox>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="状态" prop="couponStatus">
<el-radio-group v-model="formData.couponStatus">
<el-radio :label="'0'">正常</el-radio>
<el-radio :label="'1'">禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item size="medium">
<el-button type="primary" @click="onSubmit">确认</el-button>
<el-button @click="cancel">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { couponDetail, editCoupon } from '@/api/coupon/list.js'
import { deepClone } from '@/utils';
export default {
name: "CouponEdit",
dicts: ["coupon_type2"],
data() {
return {
receiveTotalChecked: false,
receiveDayChecked: false,
grantChecked: false,
formData: {},
rules: {}
};
},
mounted() {
this.getDetail();
},
watch: {
"formData.validityType": {
handler(o, v) {
// if (v === '1') {
// this.formData.validityDate = []
// } else {
// this.formData.validityNum = undefined
// }
}
}
},
methods: {
getDetail() {
couponDetail(this.$route.query.id).then(res => {
const formData = Object.assign({}, res.data);
if (formData.validityType === "1") {
formData.validityDate = [
formData.validityStartDate,
formData.validityEndDate
];
}
else {
formData.validityDate = [];
}
// 总共可领取
if (formData.receiveTotal === -1) {
this.receiveTotalChecked = true;
}
else {
this.receiveTotalChecked = false;
formData.receiveTotalNum = formData.receiveTotal;
}
// 每日可领取
if (formData.receiveDay === -1) {
this.receiveDayChecked = true;
}
else {
this.receiveDayChecked = false;
formData.receiveDayNum = formData.receiveDay;
}
// 每日发放
if (formData.grant === -1) {
this.grantChecked = true;
}
else {
this.grantChecked = false;
formData.grantNum = formData.grant;
}
this.formData = formData;
});
},
onSubmit() {
this.$refs.formRef.validate((valid) => {
if (valid) {
const pp = deepClone(this.formData)
if (pp.validityType === "1") {
pp.validityStartDate = pp.validityDate[0]
pp.validityEndDate = pp.validityDate[1]
}
if (this.receiveTotalChecked) {
pp.receiveTotal = -1
} else {
pp.receiveTotal = pp.receiveTotalNum
}
if (this.receiveDayChecked) {
pp.receiveDay = -1
} else {
pp.receiveDay = pp.receiveDayNum
}
if (this.grantChecked) {
pp.grant = -1
} else {
pp.grant = pp.grantNum
}
editCoupon(pp).then(res => {
this.$modal.msgSuccess('优惠券编辑成功')
this.$tab.closeOpenPage()
this.$router.push({
name: 'CouponList',
params: {
refreshTable: true
}
})
})
}
});
},
cancel() {
this.$tab.closeOpenPage();
this.$router.push({ name: "CouponList" });
}
}
}
</script>
<style lang="scss" scoped>
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
::v-deep input[type="number"] {
-moz-appearance: textfield !important;
}
.image-url {
::v-deep .el-radio__input {
vertical-align: top;
}
}
</style>
src/views/coupon/list/index.vue
...@@ -143,7 +143,7 @@ export default { ...@@ -143,7 +143,7 @@ export default {
columns: [ columns: [
{ prop: 'couponName', label: '优惠券标题' }, { prop: 'couponName', label: '优惠券标题' },
{ prop: 'couponType', label: '优惠券类型', slotName: 'couponType' }, { prop: 'couponType', label: '优惠券类型', slotName: 'couponType' },
{ prop: 'categoryName', label: '优惠券分类' }, { prop: 'categoryNames', label: '优惠券分类' },
{ prop: 'expiryType', label: '有效期', slotName: 'expiryType', minWidth: 200}, { prop: 'expiryType', label: '有效期', slotName: 'expiryType', minWidth: 200},
{ prop: 'total', label: '总库存' }, { prop: 'total', label: '总库存' },
{ label: '剩余库存', slotName: 'left' }, { label: '剩余库存', slotName: 'left' },
...@@ -155,6 +155,12 @@ export default { ...@@ -155,6 +155,12 @@ export default {
mounted() { mounted() {
this.initOptions() this.initOptions()
}, },
// 页面被触发
activated() {
if (this.$route.params && this.$route.params.refreshTable) {
this.getList()
}
},
methods: { methods: {
initOptions() { initOptions() {
this.table.searchForm.listOptions.couponTypeOptions = this.dict.type.coupon_type2 this.table.searchForm.listOptions.couponTypeOptions = this.dict.type.coupon_type2
...@@ -169,7 +175,10 @@ export default { ...@@ -169,7 +175,10 @@ export default {
}, },
/** 编辑按钮操作 */ /** 编辑按钮操作 */
handleEdit(row) { handleEdit(row) {
this.$tab.closePage({ name: 'CouponEdit' })
this.$nextTick(() => {
this.$router.push({ name: 'CouponEdit', query: { id: row.couponInfoId }})
})
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
async handleDelete(row) { async handleDelete(row) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论