<template>
|
<div class="inner-bg-style">
|
<el-container class="bindBox inner-bg-style">
|
<el-main>
|
<h4>活动信息</h4>
|
<hr/>
|
<el-form size="mini" ref="form" :disabled="$route.name === 'groupActInfo'" label-width="120px" :rules="formRules" :model="form">
|
<el-form-item label="活动名称：" prop="npPromotion.promotionName">
|
<el-input class="groupActivityName" placeholder="请输入活动名称" v-model.trim="form.npPromotion.promotionName"></el-input>
|
</el-form-item>
|
<el-form-item label="活动开始时间：" prop="npPromotion.promotionStartTime">
|
<el-date-picker
|
v-model="form.npPromotion.promotionStartTime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
class="custom-datePicker-style"
|
:picker-options="{
|
disabledDate:time => (time.getTime() <= Date.now() - 86400000 ) || form.npPromotion.promotionEndTime && time.getTime() >= new Date(form.npPromotion.promotionEndTime).getTime(),
|
}"
|
@change="changeData"
|
:disabled="form.npPromotion.promotionStatus === '08'&&!isCopy"
|
placeholder="选择活动开始时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="活动结束时间：" prop="npPromotion.promotionEndTime">
|
<el-date-picker
|
v-model="form.npPromotion.promotionEndTime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
class="custom-datePicker-style"
|
:picker-options="{
|
disabledDate:time => (time.getTime() <= Date.now() - 86400000 ) || form.npPromotion.promotionStartTime && time.getTime() <= (new Date(form.npPromotion.promotionStartTime).getTime() - 86400000),
|
}"
|
@change="changeData"
|
placeholder="选择活动结束时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item required label="拼团商品：">
|
<activity-prod
|
ref="promotionProducts"
|
:productData.sync="form.promotionProducts"
|
@hand-selected="handSelected"
|
@hand-clear-validate="handClearValidate"
|
:isShowSpuStorage="true"
|
:formRules="formRules"
|
:isHide="$route.name === 'groupActInfo' || (form.npPromotion.promotionStatus === '08'&&!isCopy)"
|
></activity-prod>
|
</el-form-item>
|
<el-form-item label="拼团有效期：" prop="effectiveTime">
|
<el-time-picker
|
v-model="form.effectiveTime"
|
value-format="HH:mm:ss"
|
class="custom-timePicker-style"
|
placeholder="请选择时/分/秒">
|
</el-time-picker>
|
<div class="itemTip">提示：若设置1日，用户开团后，需要在1日内成团，超时则拼团失败</div>
|
</el-form-item>
|
<el-form-item label="参团人数：" prop="promotionAgglomerate.agglomerateNum">
|
<el-select class="custom-selet-style" :disabled="form.npPromotion.promotionStatus === '08'&&!isCopy" v-model="form.promotionAgglomerate.agglomerateNum" placeholder="请选择参团人数">
|
<el-option label="2人" :value="2"></el-option>
|
<el-option label="3人" :value="3"></el-option>
|
<el-option label="4人" :value="4"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="优惠叠加：" prop="promotionAgglomerate.isSuperposition">
|
<el-radio-group
|
:disabled="form.npPromotion.promotionStatus === '08'&&!isCopy"
|
v-model="form.promotionAgglomerate.isSuperposition"
|
>
|
<el-radio :label="1">不叠加其他活动</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="背景图片：" prop="promotionAgglomerate.backgroundUrl">
|
<custom-upload-img
|
:limitNumber="1"
|
@handle-success="(file)=>handleSuccess(bgfileList,file,'backgroundUrl')"
|
@handle-remove="(file)=>handleRemove('bgfileList',file,'backgroundUrl')"
|
:isHideDelete="$route.name !== 'groupActInfo'"
|
:fileList="bgfileList"
|
fileTip="建议尺寸750*1926像素，支持JPG、PNG、JPEG格式"
|
></custom-upload-img>
|
</el-form-item>
|
<el-form-item label="banner图：" v-show="$route.name !== 'groupActInfo' || (bannerArr.length&&$route.name === 'groupActInfo')" prop="promotionAgglomerate.bannerUrl">
|
<custom-upload-img
|
:limitNumber="3"
|
@handle-success="(file)=>handleSuccess(bannerArr,file,'bannerUrl','multiple')"
|
@handle-remove="(file)=>handleRemove('bannerArr',file,'bannerUrl','multiple')"
|
:isHideDelete="$route.name !== 'groupActInfo'"
|
:fileList="bannerArr"
|
fileTip="建议尺寸1125*2073像素，支持JPG、PNG、JPEG格式"
|
></custom-upload-img>
|
</el-form-item>
|
<el-form-item label="规则说明：" prop="npPromotion.promotionRuledesc">
|
<el-input
|
class="groupActivityName"
|
placeholder="请输入规则说明"
|
v-model="form.npPromotion.promotionRuledesc"
|
type="textarea"
|
:autosize="{ minRows: 5, maxRows: 6}"
|
maxlength="100"
|
show-word-limit
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<div class="buttonPosition">
|
<el-button
|
size="mini"
|
@click="submit"
|
v-show="$route.name !== 'groupActInfo'"
|
:loading="loading"
|
type="primary"
|
>{{form.npPromotion.promotionStatus === "08" && !this.isCopy?"保存并开启":"保存"}}</el-button>
|
<el-button size="mini" @click="cancel">取消</el-button>
|
</div>
|
</el-main>
|
</el-container>
|
</div>
|
</template>
|
|
<script>
|
import groupActivityApi from '@/api/promotion/groupActivity'
|
import activityProd from './components/activityProd.vue'
|
import { handleSuccess, handleRemove } from '../blindBoxActivity/index'
|
import { objectCopy } from '@/utils/objectCopyHelper'
|
import { validatePrice } from '@/utils/validator'
|
import { setCurrentTimeAddMin } from '@/utils/setTime'
|
|
export default {
|
components: { activityProd },
|
data () {
|
const limitPrice = (rule, value, callback) => {
|
const arr = rule.fullField.split('.')
|
const row = this.form.promotionProducts[Number(arr[1])]
|
if (value >= row.prodPrice) {
|
callback(new Error('拼团价格不得{高于/等于}商品价格'))
|
} else {
|
callback()
|
}
|
}
|
const ensalequantityValidate = (rule, value, callback) => {
|
const reg = /^[0-9]*$/ // 只能输入正整数
|
const arr = rule.fullField.split('.')
|
let oldReservestock = null
|
if (this.oldPromotionProducts.length && this.oldPromotionProducts[Number(arr[1])]) {
|
oldReservestock = this.oldPromotionProducts[Number(arr[1])].reservestock
|
}
|
const promotionStatus = this.form.npPromotion.promotionStatus
|
if (!value || !reg.test(value)) {
|
callback(new Error('请输入大于0的整数'))
|
} else if (promotionStatus === '08' && !this.isCopy && value < oldReservestock) {
|
callback(new Error('修改库存不得小于原始活动库存'))
|
} else {
|
callback()
|
}
|
}
|
const maxbuyquantityValid = (rule, value, callback) => {
|
const arr = rule.fullField.split('.')
|
const row = this.form.promotionProducts[Number(arr[1])]
|
const reg = /^[0-9]*$/ // 只能输入正整数
|
|
if (value && !reg.test(value)) {
|
callback(new Error('限购数量应为整数'))
|
} else if (value > row.reservestock) {
|
callback(new Error('限购数量不得高于拼团库存'))
|
} else {
|
callback()
|
}
|
}
|
const startAndEndTimeValidator = (rule, val, callback) => {
|
const startTime = this.form.npPromotion.promotionStartTime
|
const endTime = this.form.npPromotion.promotionEndTime
|
if (this.$route.name !== 'groupActInfo') {
|
var oDate1 = new Date(startTime)
|
var oDate2 = new Date(endTime)
|
if (val === startTime && oDate1.getTime() < Date.now() && (this.isCopy || this.form.npPromotion.promotionStatus !== '08')) {
|
callback(new Error('活动开始时间不能小于当前时间'))
|
} else if (startTime === endTime) {
|
callback(new Error('活动开始时间与活动结束时间不能相同'))
|
} else if (startTime && endTime && oDate1.getTime() > oDate2.getTime()) {
|
callback(new Error('活动开始时间不能大于活动结束时间'))
|
} else {
|
callback()
|
}
|
} else {
|
callback()
|
}
|
}
|
const effectiveTimeValid = (rule, val, callback) => {
|
let difference = null
|
const startTime = new Date(this.form.npPromotion.promotionStartTime).getTime()
|
const endTime = new Date(this.form.npPromotion.promotionEndTime).getTime()
|
if (startTime && endTime && val) {
|
const sT = new Date(this.form.npPromotion.promotionStartTime).getTime()
|
const eT = new Date(this.form.npPromotion.promotionEndTime).getTime()
|
difference = eT - sT
|
const value = this.form.effectiveTime.split(':')
|
const time = Number(value[0]) * 60 * 60 * 1000 + Number(value[1]) * 60 * 1000 + Number(value[2]) * 1000
|
if (time > difference) {
|
callback(new Error('拼团有效期不能大于活动时间段'))
|
} else {
|
callback()
|
}
|
} else {
|
callback()
|
}
|
}
|
return {
|
selectedDialog: {
|
show: false,
|
title: '选择会员'
|
},
|
loading: false,
|
bgfileList: [],
|
bannerArr: [],
|
form: {
|
npPromotion: {
|
promotionName: null,
|
promotionStartTime: null,
|
promotionEndTime: null,
|
promotionId: null,
|
promotionRuledesc: '1.开团/凑团--邀请好友--成团发货（不成团退款）\n2.待成团订单团长、团员均不可退款'
|
},
|
promotionAgglomerate: {
|
agglomerateNum: null,
|
isSuperposition: 1,
|
backgroundUrl: null,
|
bannerUrl: null
|
},
|
promotionProducts: [],
|
effectiveTime: null
|
},
|
formRules: {
|
'npPromotion.promotionName': [
|
{ required: true, message: '请输入活动名称' },
|
{ max: 15, message: '活动名称最多只能输入 15 个字' }
|
],
|
'npPromotion.promotionStartTime': [
|
{ required: true, message: '请选择活动开始时间' },
|
{ validator: startAndEndTimeValidator }
|
],
|
'npPromotion.promotionEndTime': [
|
{ required: true, message: '请选择活动结束时间' },
|
{ validator: startAndEndTimeValidator }
|
],
|
promotionProducts: [
|
{ type: 'array', required: true, message: '请选择活动商品' }
|
],
|
'promotionAgglomerate.backgroundUrl': [{ required: true, message: '请选择背景图片' }],
|
skuId: [{ required: true, message: '请选择商品规格', trigger: 'change' }],
|
salePrice: [
|
{ validator: validatePrice },
|
{ validator: limitPrice }
|
],
|
ensalequantity: [{ validator: ensalequantityValidate }],
|
maxbuyquantity: [{ validator: maxbuyquantityValid }],
|
effectiveTime: [
|
{ required: true, message: '请选择拼团有效期', trigger: 'change' },
|
{ validator: effectiveTimeValid, trigger: 'change' }
|
],
|
'promotionAgglomerate.isSuperposition': [{ required: true, message: '请选择优惠叠加' }],
|
'promotionAgglomerate.agglomerateNum': [{ required: true, message: '请选择参团人数' }],
|
'npPromotion.promotionRuledesc': [{ required: true, message: '请输入规则说明' }]
|
},
|
boxHeight: null, // 获取内容区域高度给图片设置动态高度
|
oldPromotionProducts: [], // 存一份旧的商品信息，当为暂停时判断拼团库存不能小于原始库存
|
isCopy: null
|
}
|
},
|
created () {
|
if (this.$route.query.id) {
|
this.getDetails()
|
this.isCopy = this.$route.query.isCopy
|
} else {
|
const startTime = setCurrentTimeAddMin(10)
|
const endTIme = setCurrentTimeAddMin(40)
|
this.form.npPromotion.promotionStartTime = startTime
|
this.form.npPromotion.promotionEndTime = endTIme
|
}
|
},
|
methods: {
|
/**
|
* 当改变时间时
|
*/
|
changeData () {
|
this.$nextTick(() => {
|
this.$refs.form.validateField('npPromotion.promotionStartTime')
|
this.$refs.form.validateField('npPromotion.promotionEndTime')
|
})
|
},
|
/**
|
* 清空表格验证
|
*/
|
handClearValidate () {
|
this.$nextTick(() => {
|
this.$refs.form.clearValidate()
|
})
|
},
|
/**
|
*当选择商品时
|
*/
|
handSelected () {
|
this.$refs.form.clearValidate('promotionProducts')
|
},
|
/**
|
* 获取详情
|
*/
|
async getDetails () {
|
try {
|
const res = await groupActivityApi.detailsItem(this.$route.query.id)
|
if (res.code === '0' && res.data) {
|
const resData = res.data
|
objectCopy(res.data, this.form)
|
this.form.effectiveTime = `${resData.hour}:${resData.minute}:${resData.second}`
|
const promotionAgglomerate = res.data.promotionAgglomerate
|
this.bgfileList = [{
|
url: promotionAgglomerate.backgroundUrl,
|
id: promotionAgglomerate.backgroundId
|
}]
|
this.form.promotionAgglomerate.backgroundUrl = promotionAgglomerate.backgroundId
|
if (promotionAgglomerate.bannerId) {
|
const urlArr = promotionAgglomerate.bannerId.split(',')
|
promotionAgglomerate.bannerUrl.split(',').forEach((item, index) => {
|
this.bannerArr.push({
|
url: item,
|
id: urlArr[index]
|
})
|
})
|
this.form.promotionAgglomerate.bannerUrl = promotionAgglomerate.bannerId
|
}
|
this.form.promotionProducts = res.data.npPromotionProd
|
if (this.form.npPromotion.promotionStatus === '08' && !this.isCopy) {
|
this.form.promotionProducts = this.form.promotionProducts.map(item => {
|
item.isShow = true
|
item.disabled = true
|
return item
|
})
|
}
|
this.oldPromotionProducts = objectCopy(res.data.npPromotionProd)
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
* 取消
|
*/
|
cancel () {
|
this.$router.push({ name: 'groupActList' })
|
},
|
/**
|
* 保存
|
*/
|
submit () {
|
this.$refs.form.validate().then((res) => {
|
this.loading = true
|
if (this.$route.query.id && !this.isCopy) {
|
this.editInfo()
|
} else {
|
this.addInfo()
|
}
|
})
|
},
|
handleFormData () {
|
const param = JSON.parse(JSON.stringify(this.form))
|
const effectiveTime = this.form.effectiveTime.split(':')
|
param.hour = effectiveTime[0]
|
param.minute = effectiveTime[1]
|
param.second = effectiveTime[2]
|
param.npPromotionProd = this.$refs.promotionProducts.handTableData()
|
return param
|
},
|
// 新增
|
async addInfo () {
|
try {
|
const param = this.handleFormData()
|
delete param.npPromotion.promotionId
|
const res = await groupActivityApi.addInfo(param)
|
if (res.code === '0') {
|
this.$message({
|
message: '新增成功',
|
type: 'success'
|
})
|
this.loading = false
|
this.$router.push({ name: 'groupActList' })
|
} else {
|
this.loading = false
|
}
|
} catch (error) {
|
this.loading = false
|
}
|
},
|
// 编辑
|
async editInfo (formData) {
|
try {
|
const res = await groupActivityApi.updateInfo(this.handleFormData())
|
if (res.code === '0') {
|
this.$message({
|
message: '编辑成功',
|
type: 'success'
|
})
|
this.loading = false
|
this.$router.push({ name: 'groupActList' })
|
} else {
|
this.loading = false
|
}
|
} catch (error) {
|
this.loading = false
|
}
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleSuccess (arr, data, key, multiple) {
|
handleSuccess(this, this.form.promotionAgglomerate, 'form', arr, data, key, multiple)
|
this.$refs.form.clearValidate()
|
},
|
/**
|
* 移除图片
|
*/
|
handleRemove (arrKey, data, key, multiple) {
|
this[arrKey] = handleRemove(this.form.promotionAgglomerate, this[arrKey], data, key, multiple)
|
},
|
/**
|
* 获取起止时间
|
*/
|
getStartAndEndTime (val) {
|
if (val && val.length) {
|
this.form.npPromotion.promotionStartTime = val[0]
|
this.form.npPromotion.promotionEndTime = val[1]
|
if (this.form.effectiveTime) {
|
this.$refs.form.validateField('effectiveTime')
|
}
|
} else {
|
this.form.npPromotion.promotionStartTime = null
|
this.form.npPromotion.promotionEndTime = null
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.bindBox{
|
padding-top: 15px;
|
.groupActivityName{
|
width: 400px;
|
}
|
}
|
|
</style>
|
