<template>
|
<div>
|
<el-container class="bindBox inner-bg-style">
|
<el-main>
|
<h4>活动基本信息</h4>
|
<hr />
|
<el-form size="mini" ref="form" :disabled="$route.name === 'timeLimitBuyInfo'"
|
label-width="120px" :rules="formRules" :model="form">
|
<el-form-item label="活动名称：" prop="promotionName">
|
<el-input placeholder="请输入活动名称" class="timeLimitBuyInput"
|
v-model.trim="form.promotionName"></el-input>
|
</el-form-item>
|
<el-form-item label="活动时间：" prop="startAndEndTime">
|
<el-date-picker v-model="form.startAndEndTime" type="datetimerange" range-separator="至"
|
start-placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss"
|
@change="getStartAndEndTime"
|
:picker-options="{disabledDate:time => time.getTime() <= Date.now() - 86400000}"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="背景图片：" prop="ruleFileId">
|
<custom-upload-img :limitNumber="1"
|
@handle-success="(file)=>handleSuccess(bgfileList,file,'ruleFileId')"
|
@handle-remove="(file)=>handleRemove('bgfileList',file,'ruleFileId')"
|
:isHideDelete="$route.name !== 'timeLimitBuyInfo'"
|
:fileList="bgfileList" fileTip="建议尺寸750*1926像素，支持JPG、PNG、JPEG格式">
|
</custom-upload-img>
|
</el-form-item>
|
<el-form-item label="banner图："
|
v-show="$route.name !== 'timeLimitBuyInfo' || (bannerArr.length&&$route.name === 'timeLimitBuyInfo')"
|
prop="promoPic">
|
<custom-upload-img :limitNumber="3"
|
@handle-success="(file)=>handleSuccess(bannerArr,file,'promoPic','multiple')"
|
@handle-remove="(file)=>handleRemove('bannerArr',file,'promoPic','multiple')"
|
:isHideDelete="$route.name !== 'timeLimitBuyInfo'"
|
:fileList="bannerArr" fileTip="建议尺寸1125*2073像素，支持JPG、PNG、JPEG格式">
|
</custom-upload-img>
|
</el-form-item>
|
<el-form-item label="活动标签：" prop="promotionRule">
|
<el-input placeholder="请输入活动标签" class="timeLimitBuyInput"
|
v-model.trim="form.promotionRule"></el-input>
|
</el-form-item>
|
<el-form-item label="参与人员：" required prop="joinType">
|
<el-radio-group @change="changeType" v-model="form.joinType">
|
<el-radio label="1">所有人员均可参与</el-radio>
|
<el-radio label="2">部分人员可参与</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item v-show="form.joinType === '2'" required label="通过等级选择：">
|
<el-button @click="addUser" type="primary">选择会员等级</el-button>
|
<el-button @click="clearTableData">清空</el-button>
|
</el-form-item>
|
<el-form-item v-if="form.joinType === '2'" prop="tableData">
|
<table-pagination :tableData="form.tableData"
|
:showOperatBtn="$route.name !== 'timeLimitBuyInfo'">
|
<template>
|
<el-table-column label="会员账号" prop="memberName"></el-table-column>
|
<el-table-column label="会员昵称" prop="memberNickName">
|
<template slot-scope="scope">
|
{{ scope.row.memberNickName ? scope.row.memberNickName : '-' }}
|
</template>
|
</el-table-column>
|
<el-table-column label="会员等级" prop="memberLevelName">
|
<template slot-scope="scope">
|
{{ scope.row.memberLevelName ? scope.row.memberLevelName : '-' }}
|
</template>
|
</el-table-column>
|
</template>
|
</table-pagination>
|
</el-form-item>
|
<h4>活动商品</h4>
|
<hr />
|
<activity-prod ref="promotionProducts" :productData.sync="form.promotionProducts"
|
@hand-selected="handSelected" :formRules="formRules"
|
@hand-clear-validate="handClearValidate" :isShowSpuStorage="true">
|
</activity-prod>
|
<h4>价格展示</h4>
|
<hr />
|
<el-form-item label="展示秒杀价：" prop="isDisplaySeckillPrice">
|
<el-radio-group @change="changeIsDisplaySeckillPrice"
|
v-model="form.isDisplaySeckillPrice">
|
<el-radio label="1">是</el-radio>
|
<el-radio label="2">否
|
<el-input v-show="form.isDisplaySeckillPrice === '2'" size="mini"
|
v-model.trim="form.priceDesc" placeholder="请输入展示标识"></el-input>
|
</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
<div class="buttonPosition">
|
<el-button size="mini" @click="submit" v-show="$route.name !== 'timeLimitBuyInfo'"
|
:loading="loading" type="primary">保存</el-button>
|
<el-button size="mini" @click="cancel">取消</el-button>
|
</div>
|
</el-main>
|
</el-container>
|
<member-selected :show.sync="selectedDialog.show" :title="selectedDialog.title"
|
@hand-selected-row-data="handSelectedRowData" :appendToBody="true">
|
</member-selected>
|
|
</div>
|
</template>
|
|
<script>
|
import memberSelected from '@/views/memberMgt/memberInfoList/components/memberSelected.vue'
|
import timeLimitBuyApi from '@/api/promotion/timeLimitBuy'
|
import tablePagination from '../blindBoxActivity/components/tablePagination.vue'
|
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: { tablePagination, memberSelected, 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 curRow = this.form.promotionProducts[rule.index]
|
if (!value || !reg.test(value)) {
|
callback(new Error('请输入大于0的整数'))
|
} else {
|
callback()
|
}
|
// else if (value > curRow.spuStorage) {
|
// callback(new Error('秒杀库存不得高于剩余库存'))
|
// }
|
}
|
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.ensalequantity) {
|
callback(new Error('限购数量不得高于秒杀库存'))
|
} else {
|
callback()
|
}
|
}
|
const startAndEndTimeValidator = (rule, val, callback) => {
|
if (this.$route.name !== 'timeLimitBuyInfo') {
|
var oDate1 = new Date(val[0])
|
if (val[0] === val[1]) {
|
callback(new Error('开始时间与结束时间不能相同'))
|
} else if (oDate1.getTime() < Date.now()) {
|
callback(new Error('开始时间不能小于当前时间'))
|
} else {
|
callback()
|
}
|
} else {
|
callback()
|
}
|
}
|
const priceDescValid = (rule, val, callback) => {
|
if (val === '2' && !this.form.priceDesc) {
|
callback(new Error('请输入展示标识'))
|
} else if (val === '2' && this.form.priceDesc.length > 4) {
|
callback(new Error('展示标识最多只能输入 4 个字'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
selectedDialog: {
|
show: false,
|
title: '选择会员'
|
},
|
loading: false,
|
bgfileList: [],
|
bannerArr: [],
|
form: {
|
startAndEndTime: [],
|
promotionName: null,
|
tableData: [],
|
promotionProducts: [],
|
ruleFileId: null,
|
promotionRule: null,
|
joinType: '1',
|
promoPic: '',
|
promotionStartTime: null,
|
promotionEndTime: null,
|
promotionId: null,
|
isDisplaySeckillPrice: '1',
|
priceDesc: null // 价格展示标识
|
},
|
formRules: {
|
promotionName: [
|
{ required: true, message: '请输入活动名称' },
|
{ max: 15, message: '活动名称最多只能输入 15 个字' }
|
],
|
startAndEndTime: [
|
{ type: 'array', required: true, message: '请选择活动时间' },
|
{ validator: startAndEndTimeValidator }
|
],
|
tableData: [
|
{ type: 'array', required: true, message: '请选择参与人员' }
|
],
|
promotionProducts: [
|
{ type: 'array', required: true, message: '请选择活动商品' }
|
],
|
ruleFileId: [{ required: true, message: '请选择背景图片' }],
|
promotionRule: [
|
{ required: true, message: '请输入活动标签' },
|
{ min: 2, message: '活动标签最少只能输入 2 个字' },
|
{ max: 5, message: '活动标签最多只能输入 5 个字' }
|
],
|
skuId: [{ required: true, message: '请选择商品规格', trigger: 'change' }],
|
salePrice: [
|
{ validator: validatePrice },
|
{ validator: limitPrice }
|
],
|
ensalequantity: [{ validator: ensalequantityValidate }],
|
maxbuyquantity: [{ validator: maxbuyquantityValid }],
|
isDisplaySeckillPrice: [
|
{ required: true, message: '请选择是否展示秒杀价' },
|
{ validator: priceDescValid }
|
]
|
},
|
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.startAndEndTime = [startTime, endTIme]
|
this.form.promotionStartTime = startTime
|
this.form.promotionEndTime = endTIme
|
}
|
},
|
methods: {
|
/**
|
* 清空表格验证
|
*/
|
handClearValidate() {
|
this.$nextTick(() => {
|
this.$refs.form.clearValidate()
|
})
|
},
|
/**
|
* 当是否选择秒杀价改变时
|
*/
|
changeIsDisplaySeckillPrice() {
|
this.form.priceDesc = null
|
this.$refs.form.clearValidate('isDisplaySeckillPrice')
|
},
|
// 当改变参与人员类型时清空表格数据
|
changeType() {
|
this.form.tableData = []
|
},
|
/**
|
*当选择商品时
|
*/
|
handSelected() {
|
this.$refs.form.clearValidate('promotionProducts')
|
},
|
/**
|
* /**
|
* 获取弹出框返回的用户数据
|
*/
|
handSelectedRowData(rows) {
|
rows.forEach(rowItem => {
|
if (!this.form.tableData.find(item => {
|
return rowItem.memberId === item.memberId
|
})) {
|
this.form.tableData.push({
|
memberId: rowItem.memberId,
|
memberName: rowItem.memberName,
|
memberNickName: rowItem.memberNickName,
|
memberLevelName: rowItem.memberLevelName
|
})
|
}
|
})
|
this.$refs.form.clearValidate('tableData')
|
},
|
/*
|
* 添加用户
|
*/
|
addUser() {
|
this.selectedDialog.show = true
|
},
|
/**
|
*清空参与用户
|
*/
|
clearTableData() {
|
this.form.tableData = []
|
},
|
/**
|
* 获取详情
|
*/
|
async getDetails() {
|
try {
|
const res = await timeLimitBuyApi.detailsItem({ promotionId: this.$route.query.id })
|
if (res.code === '0' && res.data) {
|
objectCopy(res.data, this.form)
|
this.form.isDisplaySeckillPrice = this.form.priceDesc ? '2' : '1'
|
if (res.data.promotionStartTime) {
|
this.form.startAndEndTime = [res.data.promotionStartTime, res.data.promotionEndTime]
|
}
|
this.bgfileList = [{
|
url: res.data.ruleFileUrl,
|
id: res.data.ruleFileId
|
}]
|
if (res.data.promoPicUrlList) {
|
const urlArr = res.data.promoPic.split(',')
|
res.data.promoPicUrlList.forEach((item, index) => {
|
this.bannerArr.push({
|
url: item,
|
id: urlArr[index]
|
})
|
})
|
}
|
this.form.tableData = res.data.memberList ? res.data.memberList.map(item => {
|
item.memberLevelName = item.memberLevel
|
return item
|
}) : []
|
this.form.promotionProducts = res.data.prodList
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
* 取消
|
*/
|
cancel() {
|
this.$router.push({ name: 'timeLimitBuyList' })
|
},
|
/**
|
* 保存
|
*/
|
submit() {
|
this.$refs.form.validate().then((res) => {
|
this.loading = true
|
this.saveInfo()
|
})
|
},
|
handleFormData() {
|
const param = JSON.parse(JSON.stringify(this.form))
|
if (this.isCopy) {
|
delete param.promotionId
|
}
|
param.memberList = param.tableData.map(item => {
|
return {
|
memberId: item.memberId
|
}
|
})
|
param.prodList = this.$refs.promotionProducts.handTableData()
|
return param
|
},
|
// 新增
|
async saveInfo() {
|
try {
|
const res = await timeLimitBuyApi.saveInfo(this.handleFormData())
|
if (res.code === '0') {
|
this.$message({
|
message: '新增成功',
|
type: 'success'
|
})
|
this.loading = false
|
this.$router.push({ name: 'timeLimitBuyList' })
|
} else {
|
this.loading = false
|
}
|
} catch (error) {
|
this.loading = false
|
}
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleSuccess(arr, data, key, multiple) {
|
handleSuccess(this, this.form, 'form', arr, data, key, multiple)
|
},
|
/**
|
* 移除图片
|
*/
|
handleRemove(arrKey, data, key, multiple) {
|
this[arrKey] = handleRemove(this.form, this[arrKey], data, key, multiple)
|
},
|
/**
|
* 获取起止时间
|
*/
|
getStartAndEndTime(val) {
|
if (val && val.length) {
|
this.form.promotionStartTime = val[0]
|
this.form.promotionEndTime = val[1]
|
} else {
|
this.form.promotionStartTime = null
|
this.form.promotionEndTime = null
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.bindBox {
|
padding-top: 15px;
|
hr {
|
height: 1px;
|
border: none;
|
background-color: #ccc;
|
}
|
.timeLimitBuyInput {
|
width: 400px;
|
}
|
.el_aside {
|
width: 520px;
|
}
|
.diy-aside {
|
min-height: 740px;
|
scrollbar-width: none; /* firefox */
|
-ms-overflow-style: none; /* IE 10+ */
|
overflow-x: hidden;
|
overflow-y: auto;
|
&::-webkit-scrollbar {
|
display: none; /* Chrome Safari */
|
}
|
img {
|
width: 100%;
|
}
|
}
|
}
|
</style>
|
