<template>
|
<div class="proActivityForm inner-bg-style">
|
<h5 class="titleStyle">{{title}}</h5>
|
<el-row>
|
<el-col class="formBox" :span="16">
|
<el-form ref="form" size="mini" label-width="120px" :model="form" :rules="formRules">
|
<el-form-item label="活动名称：" prop="promotionName">
|
<el-input v-model="form.promotionName" class="custom-input-style" placeholder="请输入活动名称"
|
clearable></el-input>
|
</el-form-item>
|
<el-form-item label="开始时间：" prop="promotionStartTime">
|
<el-date-picker v-model="form.promotionStartTime" type="datetime" @change="changeData"
|
value-format="yyyy-MM-dd HH:mm:ss" class="custom-datePicker-style"
|
:picker-options="{disabledDate:time => (time.getTime() <= Date.now() - 86400000 ) || form.promotionEndTime && time.getTime() >= new Date(form.promotionEndTime).getTime()}"
|
placeholder="选择开始时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="结束时间：" prop="promotionEndTime">
|
<el-date-picker v-model="form.promotionEndTime" type="datetime" @change="changeData"
|
value-format="yyyy-MM-dd HH:mm:ss" class="custom-datePicker-style"
|
:picker-options="{disabledDate:time => (time.getTime() <= Date.now() - 86400000 ) || form.promotionStartTime && time.getTime() <= (new Date(form.promotionStartTime).getTime() - 86400000) }"
|
placeholder="选择结束时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="活动banner：" prop="fileList">
|
<custom-upload-img :limitNumber="5" @handle-success="handleSuccess"
|
@handle-remove="handleRemove" @handle-file-data="handleFileData"
|
:draggable="true" :fileList="form.fileList"></custom-upload-img>
|
</el-form-item>
|
<el-form-item label="活动规则：" prop="promotionRuleType">
|
<el-select class="custom-selet-style" @change="changeRuledecType"
|
v-model="form.promotionRuleType" clearable>
|
<el-option label="文字" value="1"></el-option>
|
<el-option label="图片" value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="form.promotionRuleType === '1'" prop="promotionRuledesc">
|
<el-input class="custom-input-style" v-model="form.promotionRuledesc" type="textarea"
|
:autosize="{minRows:4,maxRows:6}" placeholder="请输入活动规则" clearable></el-input>
|
</el-form-item>
|
<el-form-item v-if="form.promotionRuleType === '2'" prop="promotionRuleFile">
|
<custom-upload-img :limitNumber="3" @handle-success="handleRuleFileSuccess"
|
@handle-remove="handleRuleFileRemove"
|
@handle-file-data="handleRuleFileFileData" :draggable="true"
|
:fileList="form.promotionRuleFile"></custom-upload-img>
|
</el-form-item>
|
<!-- <el-form-item label="活动类型：" prop="promotionType">
|
<el-radio-group
|
v-model="form.promotionType"
|
@change="changePromotionType"
|
:disabled="form.promotionId ? true : false"
|
>
|
<el-radio label="1">满减活动</el-radio>
|
<el-radio label="2">满赠活动</el-radio>
|
</el-radio-group>
|
</el-form-item> -->
|
<el-form-item label="活动商品：" prop="isallcategory">
|
<el-radio-group v-model="form.isallcategory">
|
<el-radio v-for="item in applicableArr" :key="item.id" :label="item.id">{{item.name}}
|
</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item v-if="form.isallcategory === '1'" prop="promotionProducts">
|
<coupon-product ref="table" :productData.sync="form.promotionProducts"
|
@hand-selected="handSelected" :formRules="formRules"
|
:isShowSpuStorage="isShowSpuStorage" :isShowSpuId="isShowSpuId">
|
</coupon-product>
|
</el-form-item>
|
<el-form-item :label="avtivityTypeText+'方式：'" prop="preferentialWay"
|
:rules="{ required: true, message: `请选择${this.avtivityTypeText}方式` }">
|
<el-radio-group v-model="form.preferentialWay" @change="changePreferentialWay">
|
<el-radio label="1">阶梯{{avtivityTypeText}}</el-radio>
|
<el-radio label="2">循环{{avtivityTypeText}}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<activity-range v-if="form.preferentialWay" ref="activityRange"
|
@hand-gift-selected="handGiftSelected" :form="form" :formRules="formRules"
|
:isShowSpuStorage="isShowSpuStorage"></activity-range>
|
</el-form>
|
<el-row class="buttonPosition">
|
<el-button type="primary" size="mini" :loading="loading" @click="submit">
|
{{$route.query.id && form.promotionStatus === '08' && !isCopy?"保存并开启":"保存"}}</el-button>
|
<el-button type="success" size="mini" v-show="!$route.query.id" @click="preView">预览
|
</el-button>
|
<el-button size="mini" @click="cancel">取消</el-button>
|
</el-row>
|
</el-col>
|
</el-row>
|
<el-dialog :visible.sync="dialogPrevVisible" v-if="dialogPrevVisible" title="活动详情"
|
class="proActivityInfo" :close-on-click-modal="false" :modal-append-to-body="false"
|
width="433px">
|
<preview-activity :form="previewform"></preview-activity>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="dialogPrevVisible=false">关闭</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import couponProduct from '@/views/couponMgt/components/couponProduct.vue'
|
import { limiInputType } from '@/utils/limiInputType'
|
import proActivityApi from '@/api/promotion/proActivity'
|
import activityRange from '@/views/proActivity/components/activityRange.vue'
|
import previewActivity from '@/views/proActivity/components/previewActivity.vue'
|
import productListApi from '@/api/productmanagement/productList'
|
import { validatePrice } from '@/utils/validator'
|
import { setCurrentTimeAddMin } from '@/utils/setTime'
|
|
export default {
|
components: { couponProduct, activityRange, previewActivity },
|
props: ['proActivityList', 'promotionType', 'isShowSpuStorage', 'isShowSpuId'],
|
data() {
|
const preferenInputValid = (rule, value, callback) => {
|
const reg = /^(?!0+$)(?!0*\.0*$)\d{1,9}(\.\d{1,2})?$/ // 最多输入两位小数
|
if (this.form.promotionType === '1' && !value) {
|
callback(new Error('请输入大于 0 的数'))
|
} else if (this.form.promotionType === '1' && value && value > 999999999) {
|
callback(new Error('最大金额不能超过999999999元'))
|
} else if (this.form.promotionType === '1' && !reg.test(value)) {
|
callback(new Error('最多输入两位小数'))
|
} else {
|
callback()
|
}
|
}
|
const inputNumberValid = (rule, value, callback) => {
|
const reg = /^[0-9]*$/ // 只能输入正整数
|
const arr = rule.fullField.split('.')
|
const row = this.form.preferentialInfo[Number(arr[1])].products[Number(arr[3])]
|
if (!value || !reg.test(value)) {
|
callback(new Error('请输入大于0的整数'))
|
} else if (arr[4] === 'ensalequantity' && row.maxbuyquantity && row.ensalequantity > row.maxbuyquantity) {
|
callback(new Error('赠品数量应小于等于限制总数'))
|
} else {
|
callback()
|
}
|
}
|
const maxNumberValid = (rule, value, callback) => {
|
const arr = rule.fullField.split('.')
|
const row = this.form.preferentialInfo[Number(arr[1])].products[Number(arr[3])]
|
if (row.ensalequantity && row.ensalequantity > row.maxbuyquantity) {
|
callback(new Error('限制总数应大于等于赠品数量'))
|
} else {
|
callback()
|
}
|
}
|
const preferentialContent = (rule, value, callback) => {
|
if (!value && this.form.promotionType === '1') {
|
callback(new Error('请输入优惠内容'))
|
} else if (value && this.form.promotionType === '1') {
|
const arr = rule.fullField.split('.')
|
const index = Number(arr[1])
|
const row = this.form.preferentialInfo[index]
|
this.judgeMoneySize(row, index, 2, '优惠', callback)
|
if (row.preferentialAmount && row.preferentialMaxAmount <= row.preferentialAmount) {
|
callback(new Error('优惠金额不能大于等于优惠门槛'))
|
} else {
|
callback()
|
}
|
} else {
|
callback()
|
}
|
}
|
const maxAmountvalidator = (rule, value, callback) => {
|
const arr = rule.fullField.split('.')
|
const index = Number(arr[1])
|
const row = this.form.preferentialInfo[index]
|
this.judgeMoneySize(row, index, 1, '优惠门槛', callback)
|
if (row.preferentialAmount && row.preferentialMaxAmount <= row.preferentialAmount) {
|
callback(new Error('优惠门槛不能小于等于优惠金额'))
|
} else {
|
callback()
|
}
|
}
|
const startAndEndTimeValidator = (rule, val, callback) => {
|
const startTime = this.form.promotionStartTime
|
const endTime = this.form.promotionEndTime
|
var oDate1 = new Date(startTime)
|
var oDate2 = new Date(endTime)
|
if (val === startTime && oDate1.getTime() < Date.now()) {
|
callback(new Error('开始时间不能小于当前时间'))
|
} else if (startTime === endTime) {
|
callback(new Error('开始时间与结束时间不能相同'))
|
} else if (startTime && endTime && oDate1.getTime() > oDate2.getTime()) {
|
callback(new Error('开始时间不能大于结束时间'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
loading: false,
|
title: '新增活动',
|
form: {
|
promotionRuledesc: null,
|
promotionName: null,
|
promotionStartTime: null,
|
promotionEndTime: null,
|
preferentialWay: null,
|
promotionType: null,
|
isallcategory: null,
|
preferentialInfo: [],
|
promoPic: null,
|
promotionProds: [],
|
promotionProducts: [],
|
fileList: [],
|
promotionRuleFile: [],
|
promotionRuleType: null
|
},
|
formRules: {
|
promotionName: [{ required: true, message: '请输入活动名称' }],
|
promotionStartTime: [
|
{ required: true, message: '请选择开始时间' },
|
{ validator: startAndEndTimeValidator }
|
|
],
|
promotionEndTime: [
|
{ required: true, message: '请选择结束时间' },
|
{ validator: startAndEndTimeValidator }
|
],
|
fileList: [{ type: 'array', required: true, message: '请选择活动banner' }],
|
promotionRuleFile: [{ type: 'array', required: true, message: '请上传活动规则图片' }],
|
promotionRuledesc: [
|
{ required: true, message: '请输入活动规则' },
|
{ max: 500, message: '活动规则最多只能输入 500 字' }],
|
// promotionType: [{ required: true, message: '请选择活动类型' }],
|
isallcategory: [{ required: true, message: '请选择活动商品' }],
|
maxAmount: [
|
{ required: true, message: '请输入优惠门槛', trigger: 'change' },
|
{ validator: validatePrice },
|
{ validator: maxAmountvalidator }
|
],
|
preferentialAmount: [
|
{ required: true, validator: preferentialContent, trigger: 'change' },
|
{ validator: preferenInputValid, trigger: 'change' }
|
],
|
promotionProducts: [
|
{ type: 'array', required: true, message: '请选择指定商品', trigger: 'submit' }
|
],
|
memos: [
|
{ required: true, message: '请输入活动说明', trigger: 'submit' },
|
{ max: 200, message: '活动说明最多只能输入 200 字' }
|
],
|
ensalequantity: [
|
{ required: true, message: '请输入赠品数量' },
|
{ validator: inputNumberValid }
|
],
|
maxbuyquantity: [
|
{ required: true, message: '请输入限制总数' },
|
{ validator: inputNumberValid },
|
{ validator: maxNumberValid }
|
],
|
couponSkuId: [{ required: true, message: '请选择商品规格', trigger: 'change' }],
|
skuId: [{ required: true, message: '请选择赠品规格', trigger: 'change' }],
|
products: [
|
{
|
required: true,
|
validator: (rule, value, callback) => {
|
if (!value.length && this.form.promotionType === '2') {
|
callback(new Error('请选择赠品'))
|
} else {
|
callback()
|
}
|
}
|
}
|
]
|
},
|
applicableArr: [
|
{
|
id: '0',
|
name: '全部商品可用'
|
},
|
{
|
id: '1',
|
name: '指定商品可用'
|
}
|
],
|
totalDisable: false,
|
avtivityTypeText: null,
|
dialogPrevVisible: false, // 预览弹窗
|
previewform: {},
|
isCopy: null
|
}
|
},
|
created() {
|
this.form.promotionType = this.promotionType
|
if (this.$route.query.id) {
|
this.getDetails()
|
this.title = '编辑活动'
|
this.isCopy = this.$route.query.isCopy
|
} else {
|
this.form.promotionStartTime = setCurrentTimeAddMin(10)
|
this.form.promotionEndTime = setCurrentTimeAddMin(40)
|
}
|
this.changePromotionType(this.form.promotionType)
|
},
|
methods: {
|
/**
|
* 当改变时间时
|
*/
|
changeData() {
|
this.$nextTick(() => {
|
this.$refs.form.validateField('promotionStartTime')
|
this.$refs.form.validateField('promotionEndTime')
|
})
|
},
|
/**
|
* 判断输入金额的大小
|
*/
|
judgeMoneySize(row, index, tag, str, callback) {
|
let key = null
|
key = tag === 1 ? 'preferentialMaxAmount' : 'preferentialAmount'
|
if (index !== 0) {
|
if (row[key] <= this.form.preferentialInfo[index - 1][key]) {
|
callback(new Error(`${str}金额应大于上一级${str}金额`))
|
} else {
|
this.discountMoneyTip(row, tag, callback)
|
}
|
}
|
if (index !== this.form.preferentialInfo.length - 1) {
|
if (row[key] >= this.form.preferentialInfo[index + 1][key] && this.form.preferentialInfo[index + 1][key]) {
|
callback(new Error(`${str}金额应小于下一级${str}金额`))
|
} else {
|
this.discountMoneyTip(row, tag, callback)
|
}
|
}
|
},
|
/**
|
* 优惠金额提示
|
*/
|
discountMoneyTip(row, tag, callback) {
|
if (row.preferentialAmount && row.preferentialMaxAmount <= row.preferentialAmount) {
|
if (tag === 1) {
|
callback(new Error('优惠门槛不能小于等于优惠金额'))
|
} else {
|
callback(new Error('优惠金额不能大于等于优惠门槛'))
|
}
|
} else {
|
callback()
|
}
|
},
|
/**
|
* 查询商品列表
|
*/
|
queryList(pageInfo = { pageNum: 1, pageSize: 10 }) {
|
productListApi.getList({ spuStatus: '1', ...pageInfo }).then(res => {
|
this.previewform.productList = res.data.list
|
this.dialogPrevVisible = true
|
})
|
},
|
// 预览
|
preView() {
|
this.previewform.fileList = this.form.fileList
|
this.previewform.promotionRuleFile = this.form.promotionRuleFile
|
this.previewform.promotionRuledesc = this.form.promotionRuledesc
|
if (this.form.isallcategory === '0') {
|
this.queryList()
|
} else {
|
this.dialogPrevVisible = true
|
}
|
},
|
// 当活动规则改变时清空规则和图片
|
changeRuledecType() {
|
this.form.promotionRuledesc = null
|
this.form.promotionRuleFile = []
|
this.$refs.form.clearValidate('promotionRuleFile')
|
this.$refs.form.clearValidate('promotionRuledesc')
|
},
|
// 选择赠品时
|
handGiftSelected() {
|
this.$refs.form.clearValidate()
|
},
|
// 当选择商品时(并且获取勾选的商品)
|
handSelected(rows) {
|
this.previewform.productList = rows
|
this.$refs.form.clearValidate('promotionProducts')
|
},
|
// 数组更新时重新获取数据
|
handleFileData(arr) {
|
this.form.fileList = arr
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleSuccess(data) {
|
this.form.fileList.push({
|
url: data.url,
|
id: data.id
|
})
|
this.$refs.form.clearValidate('fileList')
|
},
|
/**
|
* 移除图片
|
*/
|
handleRemove(file) {
|
this.form.fileList = this.form.fileList.filter(v => {
|
return v.id !== file.id
|
})
|
},
|
// 活动规则图片数组更新时重新获取数据
|
handleRuleFileFileData(arr) {
|
this.form.promotionRuleFile = arr
|
},
|
/**
|
* 获取活动规则图片上传成功
|
*/
|
handleRuleFileSuccess(data) {
|
this.form.promotionRuleFile.push({
|
url: data.url,
|
id: data.id
|
})
|
this.$refs.form.clearValidate('promotionRuleFile')
|
},
|
/**
|
* 移除活动规则图片
|
*/
|
handleRuleFileRemove(file) {
|
this.form.promotionRuleFile = this.form.promotionRuleFile.filter(v => {
|
return v.id !== file.id
|
})
|
},
|
/**
|
* 选择满减方式时，清空优惠区间preferentialInfo
|
*/
|
changePreferentialWay() {
|
this.initArrayValidate() // 清除优惠区间表单验证
|
this.form.preferentialInfo = [{
|
memos: null,
|
preferentialAmount: null,
|
preferentialMaxAmount: null,
|
preferentialMinAmount: null,
|
preferentialWay: this.form.preferentialWay,
|
products: []
|
}]
|
},
|
/**
|
* 清除优惠区间表单验证
|
*/
|
initArrayValidate() {
|
this.$refs.form.clearValidate('preferentialWay')
|
for (let i = 0; i < this.form.preferentialInfo.length; i++) {
|
this.$refs.form.clearValidate(`preferentialInfo.${i}.preferentialMaxAmount`)
|
this.$refs.form.clearValidate(`preferentialInfo.${i}.preferentialAmount`)
|
this.$refs.form.clearValidate(`preferentialInfo.${i}.memos`)
|
this.$refs.form.clearValidate(`preferentialInfo.${i}.products`)
|
}
|
},
|
/**
|
* 改变活动类型时触发
|
*/
|
changePromotionType(val) {
|
// this.initArrayValidate() // 清除优惠区间表单验证
|
if (val === '1') {
|
this.avtivityTypeText = '满减'
|
} else {
|
this.avtivityTypeText = '满赠'
|
}
|
},
|
/**
|
* 限制不能输入数字
|
*/
|
limiInputType(e) {
|
limiInputType(e)
|
},
|
/**
|
* 获取详情
|
*/
|
getDetails() {
|
proActivityApi.detailsInfo({ promotionId: this.$route.query.id }).then(res => {
|
if (res.data) {
|
res.data.preferentialWay = null
|
res.data.fileList = []
|
res.data.promotionRuleFile = []
|
if (this.$route.query.isCopy) {
|
res.data.promotionStartTime = setCurrentTimeAddMin(10)
|
res.data.promotionEndTime = setCurrentTimeAddMin(40)
|
}
|
this.form = res.data
|
this.form.promotionProds = res.data.promotionProds ? res.data.promotionProds : []
|
this.form.promotionProducts = []
|
const tempArr = []
|
const arr = res.data.promotionProds
|
const afterArr = this.form.promotionProducts
|
this.setProductSkuIds(tempArr, arr, afterArr)
|
if (res.data.promoPic) {
|
this.form.fileList = JSON.parse(res.data.promoPic)
|
}
|
this.form.preferentialWay = res.data.preferentialInfo[0].preferentialWay
|
if (res.data.ruleFileUrl && res.data.ruleFileUrl.length) {
|
res.data.ruleFileUrl.forEach((item, index) => {
|
this.form.promotionRuleFile.push({
|
url: item,
|
id: res.data.ruleFileId.split(',')[index]
|
})
|
})
|
}
|
}
|
})
|
},
|
/**
|
* 查看详情时遍历返回的商品，把prodId相同的skuId组装在一起
|
*/
|
setProductSkuIds(tempArr, arr, afterArr) {
|
for (let i = 0; i < arr.length; i++) {
|
const skuReduceStorageArr = []
|
const prodSpecsArr = []
|
const skuIdArr = []
|
if (tempArr.indexOf(arr[i].prodId) === -1) {
|
prodSpecsArr.push(arr[i].prodSpecs)
|
skuIdArr.push(arr[i].skuId)
|
skuReduceStorageArr.push(arr[i].skuReduceStorage)
|
afterArr.push({
|
prodId: arr[i].prodId,
|
prodName: arr[i].prodName,
|
spuNum: arr[i].spuNum,
|
skuReduceStorageArr: skuReduceStorageArr,
|
prodSpecs: prodSpecsArr,
|
skuId: skuIdArr,
|
extparams: arr[i].extparams,
|
spuUnit: arr[i].spuUnit,
|
spuStorage: arr[i].spuStorage
|
})
|
tempArr.push(arr[i].prodId)
|
} else {
|
for (let j = 0; j < afterArr.length; j++) {
|
if (afterArr[j].prodId === arr[i].prodId) {
|
afterArr[j].skuId.push(arr[i].skuId)
|
afterArr[j].prodSpecs.push(arr[i].prodSpecs)
|
afterArr[j].skuReduceStorageArr.push(arr[i].skuReduceStorage)
|
break
|
}
|
}
|
}
|
}
|
},
|
/**
|
* 处理表单数据
|
*/
|
handFormData() {
|
this.form.promotionProds = this.$refs.table ? this.$refs.table.handTableData() : null
|
if (this.form.isallcategory !== '1') {
|
this.form.promotionProds = []
|
}
|
if (this.form.preferentialWay === '1') {
|
this.form.preferentialInfo.forEach((item, index, arr) => {
|
item.preferentialLevel = index + 1
|
if (index !== 0) {
|
item.preferentialMinAmount = arr[index - 1].preferentialMaxAmount
|
} else {
|
item.preferentialMinAmount = 0
|
}
|
if (this.form.promotionType === '2') {
|
item.preferentialAmount = null
|
} else {
|
item.products = []
|
}
|
})
|
}
|
if (this.form.promotionRuleType === '2') {
|
this.form.ruleFileId = this.form.promotionRuleFile.map(item => { return item.id }).join()
|
}
|
},
|
/**
|
* 提交
|
*/
|
submit() {
|
this.$refs.form.validate().then(res => {
|
this.loading = true
|
this.handFormData() // 处理表单数据
|
this.form.promoPic = JSON.stringify(this.form.fileList)
|
if (this.form.promotionId && !this.isCopy) {
|
this.editInfo() // 编辑活动
|
} else {
|
this.addInfo() // 增加活动
|
}
|
})
|
},
|
/**
|
* 增加活动
|
*/
|
addInfo() {
|
proActivityApi.addItem(this.form).then(res => {
|
if (res.data) {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.$router.push({ name: this.proActivityList })
|
this.loading = false
|
} else {
|
this.loading = false
|
}
|
}).catch(() => {
|
this.loading = false
|
})
|
},
|
/**
|
* 编辑活动
|
*/
|
editInfo() {
|
proActivityApi.editItem(this.form).then(res => {
|
if (res.data) {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.$router.push({ name: this.proActivityList })
|
this.loading = false
|
} else {
|
this.loading = false
|
}
|
}).catch(() => {
|
this.loading = false
|
})
|
},
|
/**
|
*取消
|
*/
|
cancel() {
|
this.$router.push({ name: this.proActivityList })
|
}
|
|
}
|
}
|
</script>
|
<style lang="scss">
|
.proActivityForm {
|
padding: 20px;
|
.formBox {
|
width: 1095px;
|
}
|
.titleStyle {
|
margin-bottom: 10px;
|
}
|
}
|
.el-picker-panel {
|
.el-picker-panel__footer .el-button--text.el-picker-panel__link-btn {
|
display: none !important;
|
}
|
}
|
.proActivityInfo {
|
.el-dialog__body {
|
padding: 15px 20px;
|
height: 800px;
|
position: relative;
|
overflow: hidden;
|
.proActivityPre {
|
position: absolute;
|
top: 0;
|
right: -17px;
|
bottom: 0;
|
overflow-y: scroll;
|
overflow-x: hidden;
|
padding: 0 10px;
|
}
|
}
|
}
|
</style>
|
