|
|
|
@ -2,50 +2,62 @@ |
|
|
|
<div class="addCoupon"> |
|
|
|
<!-- 新增用户 --> |
|
|
|
<div class="addCouponBox"> |
|
|
|
<el-form ref="ruleForm" class="formBox" :model="addForm" label-width="150px" :rules="couponRules"> |
|
|
|
<el-form ref="ruleForm" class="formBox" :model="addForm" label-width="150px" :rules="couponRules" :disabled="visitDetail"> |
|
|
|
<el-form-item label="优惠券类型"> |
|
|
|
<el-radio v-model="addForm.couponType" label="1">满减券</el-radio> |
|
|
|
<el-radio v-model="addForm.couponType" label="2">折扣券</el-radio> |
|
|
|
<el-radio v-model="addForm.couponType" :label="1">满减券</el-radio> |
|
|
|
<el-radio v-model="addForm.couponType" :label="2">折扣券</el-radio> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="优惠券名称" prop="couponName"> |
|
|
|
<el-input v-model="addForm.couponName" placeholder="请输入优惠券名称" onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')" /> |
|
|
|
<el-input v-model="addForm.couponName" maxlength="20" placeholder="请输入优惠券名称" onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="备注"> |
|
|
|
<el-input v-model="addForm.remark" placeholder="请输入备注" /> |
|
|
|
<el-input v-model="addForm.remark" maxlength="200" placeholder="请输入备注" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item class="applyType" label="适用商品" prop="applyType"> |
|
|
|
<el-radio v-model="addForm.applyType" label="1">全部商品</el-radio> |
|
|
|
<el-radio v-model="addForm.applyType" :label="1">全部商品</el-radio> |
|
|
|
<el-radio |
|
|
|
v-model="addForm.applyType" |
|
|
|
label="2" |
|
|
|
@change="chooseProduct(type = '2')" |
|
|
|
:label="2" |
|
|
|
@change="chooseProduct(type = 2)" |
|
|
|
>指定商品可用</el-radio> |
|
|
|
<span class="selectBtn" @click="chooseProduct(type = '2')"> |
|
|
|
<span v-if="!visitDetail" class="selectBtn" @click="chooseProduct(type = 2)"> |
|
|
|
请选择 |
|
|
|
<i v-if="addForm.applyType === '2' && idList.length !== 0" class="selectNum"> |
|
|
|
<i v-if="addForm.applyType === 2 && idList.length !== 0" class="selectNum"> |
|
|
|
{{ idList.length }} |
|
|
|
</i> |
|
|
|
</span> |
|
|
|
<span v-if="visitDetail && addForm.applyType === 2" class="selectBtn" @click="chooseProduct(type = 2)"> |
|
|
|
查看商品 |
|
|
|
<i v-if="addForm.applyType === 2 && idList.length !== 0" class="selectNum"> |
|
|
|
{{ idList.length }} |
|
|
|
</i> |
|
|
|
</span> |
|
|
|
<el-radio |
|
|
|
v-model="addForm.applyType" |
|
|
|
label="3" |
|
|
|
@change="chooseProduct(type = '3')" |
|
|
|
:label="3" |
|
|
|
@change="chooseProduct(type = 3)" |
|
|
|
>指定商品不可用</el-radio> |
|
|
|
<span class="selectBtn" @click="chooseProduct(type = '3')"> |
|
|
|
<span v-if="!visitDetail" class="selectBtn" @click="chooseProduct(type = 3)"> |
|
|
|
请选择 |
|
|
|
<i v-if="addForm.applyType === '3' && idList.length !== 0" class="selectNum"> |
|
|
|
<i v-if="addForm.applyType === 3 && idList.length !== 0" class="selectNum"> |
|
|
|
{{ idList.length }} |
|
|
|
</i> |
|
|
|
</span> |
|
|
|
<span v-if="visitDetail && addForm.applyType === 3" class="selectBtn" @click="chooseProduct(type = 3)"> |
|
|
|
查看商品 |
|
|
|
<i v-if="addForm.applyType === 3 && idList.length !== 0" class="selectNum"> |
|
|
|
{{ idList.length }} |
|
|
|
</i> |
|
|
|
</span> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item class="inputW" label="使用门槛" prop="threshold"> |
|
|
|
<!-- 订单满<el-input v-model="addForm.threshold" :disabled="isThreshold" type="number" oninput="value=value.replace(/-/, '')" />元 --> |
|
|
|
订单满 <el-input-number v-model="addForm.threshold" :disabled="isThreshold" :controls="false" :min="0" :precision="2" :step="0.01" /> 元 |
|
|
|
订单满 <el-input-number v-model="addForm.threshold" :disabled="isThreshold" :controls="false" :max="999999999" :min="0" :precision="2" :step="0.01" /> 元 |
|
|
|
<el-checkbox v-model="isThreshold" @change="changeThreshold">无门槛</el-checkbox> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item v-if="addForm.couponType === '1'" class="inputW" label="优惠内容" prop="couponContent"> |
|
|
|
<el-form-item v-if="addForm.couponType === 1" class="inputW" label="优惠内容" prop="couponContent"> |
|
|
|
<!-- 减<el-input v-model="addForm.couponContent" type="number" />元 --> |
|
|
|
减 <el-input-number v-model="addForm.couponContent" :controls="false" :min="0" :precision="2" :step="0.01" /> 元 |
|
|
|
减 <el-input-number v-model="addForm.couponContent" :controls="false" :max="999999999" :min="0" :precision="2" :step="0.01" /> 元 |
|
|
|
</el-form-item> |
|
|
|
<el-form-item v-else class="inputW discount" label="优惠内容" prop="couponContent"> |
|
|
|
<!-- 打<el-input v-model="addForm.couponContent" type="number" />折 --> |
|
|
|
@ -53,12 +65,12 @@ |
|
|
|
<label>输入值要大于0 小于10，可保留一位小数</label> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item class="timeDataBox" label="用券时间"> |
|
|
|
<el-radio v-model="addForm.timeType" label="1">固定时间</el-radio> |
|
|
|
<el-radio v-model="addForm.timeType" :label="1">固定时间</el-radio> |
|
|
|
<div class="dateBox"> |
|
|
|
<el-form-item> |
|
|
|
<el-date-picker |
|
|
|
v-model="dateInfo" |
|
|
|
:disabled="addForm.timeType === '2'" |
|
|
|
:disabled="addForm.timeType === 2" |
|
|
|
type="datetimerange" |
|
|
|
range-separator="至" |
|
|
|
start-placeholder="开始日期" |
|
|
|
@ -69,32 +81,33 @@ |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item class="boxWidth"> |
|
|
|
<el-radio v-model="addForm.timeType" label="2">领券当日起</el-radio> |
|
|
|
<el-input v-model="addForm.effectiveDay" :disabled="addForm.timeType !== '2'" oninput="value=value.replace(/[^\d]/g,'')" type="number" />天内可用 |
|
|
|
<el-radio v-model="addForm.timeType" :label="2">领券当日起</el-radio> |
|
|
|
<el-input v-model="addForm.effectiveDay" maxlength="9" :disabled="addForm.timeType !== 2" oninput="value=value.replace(/[^\d]/g,'')" />天内可用 |
|
|
|
</el-form-item> |
|
|
|
<el-form-item class="boxWidth" label="发放数量" prop="number"> |
|
|
|
<el-input v-model="addForm.number" type="number" oninput="value=value.replace(/[^\d]/g,'')" />张 |
|
|
|
<el-input v-model="addForm.number" maxlength="9" oninput="value=value.replace(/[^\d]/g,'')" />张 |
|
|
|
</el-form-item> |
|
|
|
<el-form-item class="boxWidth" label="每人限领次数"> |
|
|
|
<el-radio v-model="addForm.receiveType" label="1">无限制</el-radio> |
|
|
|
<el-radio v-model="addForm.receiveType" label="2">限制</el-radio> |
|
|
|
<el-input v-model="addForm.frequency" :disabled="addForm.receiveType === '1'" oninput="value=value.replace(/[^\d]/g,'')" type="number" />次 |
|
|
|
<el-radio v-model="addForm.receiveType" :label="1">无限制</el-radio> |
|
|
|
<el-radio v-model="addForm.receiveType" :label="2">限制</el-radio> |
|
|
|
<el-input v-model="addForm.frequency" maxlength="9" :disabled="addForm.receiveType === 1" oninput="value=value.replace(/[^\d]/g,'')" />次 |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="叠加平台优惠"> |
|
|
|
<el-radio-group v-model="addForm.ifAdd"> |
|
|
|
<el-radio label="0">不叠加</el-radio> |
|
|
|
<el-radio label="1">叠加</el-radio> |
|
|
|
<el-radio :label="0">不叠加</el-radio> |
|
|
|
<el-radio :label="1">叠加</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" @click="addCouponFn('ruleForm')">保 存</el-button> |
|
|
|
<el-button @click="goToCoupon">取 消</el-button> |
|
|
|
<el-button v-show="!visitDetail" type="primary" @click="addCouponFn('ruleForm')">保 存</el-button> |
|
|
|
<el-button v-if="visitDetail" type="primary" @click="goToCoupon">取 消</el-button> |
|
|
|
<el-button v-else @click="goToCoupon">取 消</el-button> |
|
|
|
</span> |
|
|
|
<!-- 新建分组弹框 --> |
|
|
|
<el-dialog |
|
|
|
title="选择商品" |
|
|
|
:title="visitDetail ? '查看商品' : '选择商品'" |
|
|
|
:visible.sync="isVisible" |
|
|
|
width="70%" |
|
|
|
top="50px" |
|
|
|
@ -117,13 +130,14 @@ |
|
|
|
@selection-change="handleSelectionChange" |
|
|
|
> |
|
|
|
<el-table-column |
|
|
|
v-if="!visitDetail" |
|
|
|
type="selection" |
|
|
|
:reserve-selection="true" |
|
|
|
width="55" |
|
|
|
/> |
|
|
|
<el-table-column label="产品主图" width="220" align="center"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<img height="80" width="80" :src="scope.row.image " alt srcset> |
|
|
|
<img height="80" width="80" :src="scope.row.image" alt srcset> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="productName" label="产品名称" width="220" /> |
|
|
|
@ -146,7 +160,7 @@ |
|
|
|
</div> |
|
|
|
<div class="footBtnBox"> |
|
|
|
<span slot="footer"> |
|
|
|
<el-button type="primary" @click="saveIdList">确 定</el-button> |
|
|
|
<el-button v-if="!visitDetail" type="primary" @click="saveIdList">确 定</el-button> |
|
|
|
<el-button @click="closeSelect">取 消</el-button> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
@ -160,22 +174,23 @@ import { addCoupon, getProducts, couponDetail, updateCoupon } from '@/api/market |
|
|
|
|
|
|
|
function InitCouponForm() { |
|
|
|
this.type = 1 |
|
|
|
this.applyType = '1' // 适用商品 1-全部商品 2-指定商品可用 3-指定商品不可用 |
|
|
|
this.applyType = 1 // 适用商品 1-全部商品 2-指定商品可用 3-指定商品不可用 |
|
|
|
this.couponContent = null // 优惠内容减多少元 |
|
|
|
this.couponName = '' // 优惠券名称 |
|
|
|
this.couponType = '1' // 优惠券类型 1-满减券 2-折扣券 |
|
|
|
this.couponType = 1 // 优惠券类型 1-满减券 2-折扣券 |
|
|
|
this.effectiveDay = null // 领券当日几天内（天数） |
|
|
|
this.effectiveStart = '' // 用券开始时间 |
|
|
|
this.effectiveEnd = '' // 用券结束时间 |
|
|
|
this.frequency = null // 限制次数 |
|
|
|
this.ids = [] // 选中的商品id数组 |
|
|
|
this.ifAdd = '0' // 是否叠加平台优惠 1-是 0-否 |
|
|
|
this.excludeIds = [] // 排除的商品id数组 |
|
|
|
this.ifAdd = 0 // 是否叠加平台优惠 1-是 0-否 |
|
|
|
this.number = null // 发放数量 |
|
|
|
this.receiveType = '1' // 每人限领次数 1-无限次 2-限制几次 |
|
|
|
this.receiveType = 1 // 每人限领次数 1-无限次 2-限制几次 |
|
|
|
this.remark = '' // 备注 |
|
|
|
this.shopCouponId = null // 店铺优惠券id |
|
|
|
this.threshold = '0' // 使用门槛满多少元，无门槛为0 |
|
|
|
this.timeType = '1' // 用券时间 1-固定时间 2-领券当日起几天内可用 |
|
|
|
this.threshold = 0 // 使用门槛满多少元，无门槛为0 |
|
|
|
this.timeType = 1 // 用券时间 1-固定时间 2-领券当日起几天内可用 |
|
|
|
} |
|
|
|
export default { |
|
|
|
name: 'AddCoupon', |
|
|
|
@ -183,6 +198,10 @@ export default { |
|
|
|
couponId: { |
|
|
|
type: Number, |
|
|
|
default: 0 |
|
|
|
}, |
|
|
|
visitDetail: { |
|
|
|
type: Boolean, |
|
|
|
default: false |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
@ -201,7 +220,7 @@ export default { |
|
|
|
isThreshold: true, |
|
|
|
total: 0, |
|
|
|
tableData: [], |
|
|
|
currentType: '1', |
|
|
|
currentType: 1, |
|
|
|
shopCouponId: '', // 优惠券ID |
|
|
|
couponRules: { |
|
|
|
couponName: [ |
|
|
|
@ -264,28 +283,28 @@ export default { |
|
|
|
addCouponFn(ruleForm) { |
|
|
|
this.$refs[ruleForm].validate(valid => { |
|
|
|
if (valid) { |
|
|
|
if (this.addForm.timeType === '1' && this.dateInfo.length === 0) { |
|
|
|
if (this.addForm.timeType === 1 && this.dateInfo.length === 0) { |
|
|
|
this.$message({ |
|
|
|
message: '请选择用券时间开始和结束日期', |
|
|
|
type: 'warning' |
|
|
|
}) |
|
|
|
return false |
|
|
|
} |
|
|
|
if (this.addForm.timeType === '2' && this.addForm.effectiveDay === null) { |
|
|
|
if (this.addForm.timeType === 2 && this.addForm.effectiveDay === null) { |
|
|
|
this.$message({ |
|
|
|
message: '请填写领券多久内可以使用时间', |
|
|
|
type: 'warning' |
|
|
|
}) |
|
|
|
return false |
|
|
|
} |
|
|
|
if (this.addForm.receiveType === ' 2' && this.addForm.frequency === null) { |
|
|
|
if (this.addForm.receiveType === 2 && this.addForm.frequency === null) { |
|
|
|
this.$message({ |
|
|
|
message: '请填写每人限领次数', |
|
|
|
type: 'warning' |
|
|
|
}) |
|
|
|
return false |
|
|
|
} |
|
|
|
if (this.addForm.couponType === '2') { |
|
|
|
if (this.addForm.couponType === 2) { |
|
|
|
var regExp = /^([1-9]{1})(.\d{1})?$/ |
|
|
|
if (!regExp.test(this.addForm.couponContent)) { |
|
|
|
this.$message({ |
|
|
|
@ -351,6 +370,13 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
this.currentType = type |
|
|
|
if (this.visitDetail) { |
|
|
|
this.proOption.activityId = this.shopCouponId |
|
|
|
this.proOption.queryType = this.addForm.applyType |
|
|
|
} else { |
|
|
|
this.proOption.activityId = null |
|
|
|
this.proOption.queryType = null |
|
|
|
} |
|
|
|
this.getProList() |
|
|
|
}, |
|
|
|
getProList() { |
|
|
|
@ -380,7 +406,7 @@ export default { |
|
|
|
idList.push(i.productId) |
|
|
|
}) |
|
|
|
this.idList = idList |
|
|
|
console.log('idList.length', idList.length) |
|
|
|
// console.log('idList.length', idList.length) |
|
|
|
this.addForm.ids = idList |
|
|
|
this.addForm.applyType = this.currentType |
|
|
|
this.isVisible = false |
|
|
|
@ -395,11 +421,14 @@ export default { |
|
|
|
}, |
|
|
|
async getCouponInfo() { |
|
|
|
const res = await couponDetail({ shopCouponId: this.shopCouponId }) |
|
|
|
this.addForm = res.data |
|
|
|
this.addForm.applyType = res.data.applyType.toString() |
|
|
|
this.addForm = Object.assign(this.addForm, res.data) |
|
|
|
// console.log('--') |
|
|
|
console.dir(res.data) |
|
|
|
/* |
|
|
|
this.addForm.applyType = res.data.applyType |
|
|
|
this.addForm.couponContent = res.data.couponContent |
|
|
|
this.addForm.couponName = res.data.couponName |
|
|
|
this.addForm.couponType = res.data.couponType.toString() |
|
|
|
this.addForm.couponType = res.data.couponType |
|
|
|
this.addForm.effectiveDay = res.data.effectiveDay |
|
|
|
this.addForm.effectiveStart = res.data.effectiveStart |
|
|
|
this.addForm.effectiveEnd = res.data.effectiveEnd |
|
|
|
@ -412,19 +441,20 @@ export default { |
|
|
|
this.addForm.shopCouponId = res.data.shopCouponId |
|
|
|
this.addForm.threshold = res.data.threshold.toString() |
|
|
|
this.addForm.timeType = res.data.timeType.toString() |
|
|
|
*/ |
|
|
|
this.dateInfo = [this.addForm.effectiveStart, this.addForm.effectiveEnd] |
|
|
|
if (this.addForm.applyType === '2') { |
|
|
|
if (this.addForm.applyType === 2) { |
|
|
|
this.addForm.products.forEach(item => { |
|
|
|
this.idList.push(item.productId) |
|
|
|
}) |
|
|
|
} else if (this.addForm.applyType === '3') { |
|
|
|
} else if (this.addForm.applyType === 3) { |
|
|
|
this.addForm.excludeIds.forEach(item => { |
|
|
|
this.idList.push(item) |
|
|
|
}) |
|
|
|
} else { |
|
|
|
this.idList = [] |
|
|
|
} |
|
|
|
this.currentType = res.data.applyType.toString() |
|
|
|
this.currentType = res.data.applyType |
|
|
|
}, |
|
|
|
changeThreshold(val) { // 输入框值改变 |
|
|
|
if (val) { |
|
|
|
@ -440,7 +470,11 @@ export default { |
|
|
|
.addCoupon { |
|
|
|
background: #FFFFFF; |
|
|
|
.dialog-footer { |
|
|
|
margin-left: 300px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
.el-button { |
|
|
|
margin: 0px 16px; |
|
|
|
} |
|
|
|
} |
|
|
|
.formBox { |
|
|
|
.flexBox { |
|
|
|
|
xh-pan1
2 years ago