<template>
|
<div>
|
<custom-steps :stepArr="stepArr" :activeIndex="activeIndex"></custom-steps>
|
<div class="separate"></div>
|
<el-container class="bindBox">
|
<el-main class="inner-bg-style">
|
<div ref="mainBox">
|
<basic-config-form ref="basicConfigForm" v-show="activeName==='basicConfigForm'"
|
:promotionStatus="promotionStatus"
|
:isCopy="isCopy"></basic-config-form>
|
<prize-config-form ref="prizeConfigForm" v-show="activeName==='prizeConfigForm'"
|
:promotionStatus="promotionStatus" :isShowSpuStorage="true"
|
:isCopy="isCopy">
|
</prize-config-form>
|
<page-display-form ref="pageDisplayForm" v-show="activeName==='pageDisplayForm'">
|
</page-display-form>
|
</div>
|
<div class="buttonPosition">
|
<el-button size="mini" @click="handlestep('pre')" v-show="activeIndex!==1">上一步</el-button>
|
<el-button size="mini" @click="submit" :loading="loading"
|
v-show="activeIndex===3&&$route.name!=='blindBoxActInfo'" type="primary">
|
{{$route.query.id && promotionStatus === '08' && !isCopy?"保存并开启":"保存"}}
|
</el-button>
|
<el-button size="mini" @click="cancel" v-show="activeIndex!==2">取消</el-button>
|
<el-button size="mini" @click="handlestep('next')" v-show="activeIndex!==3"
|
type="primary">下一步</el-button>
|
</div>
|
</el-main>
|
</el-container>
|
</div>
|
</template>
|
|
<script>
|
import basicConfigForm from '@/views/blindBoxActivity/components/basicConfigForm.vue'
|
import prizeConfigForm from '@/views/blindBoxActivity/components/prizeConfigForm.vue'
|
import pageDisplayForm from '@/views/blindBoxActivity/components/pageDisplayForm.vue'
|
import blindBoxActivityApi from '@/api/promotion/blindBoxActivity'
|
import eventBus from './eventBus'
|
import { setCurrentTimeAddMin } from '@/utils/setTime'
|
// 自定义步骤条
|
import customSteps from '@/components/formTemplate/customSteps.vue'
|
export default {
|
components: { basicConfigForm, prizeConfigForm, pageDisplayForm, customSteps },
|
data() {
|
return {
|
stepArr: [
|
{ id: 1, name: '添加活动' },
|
{ id: 2, name: '奖项设置' },
|
{ id: 3, name: '页面展示' }
|
],
|
activeName: 'basicConfigForm',
|
activeIndex: 1,
|
loading: false,
|
promotionStatus: '00', // 活动状态
|
noLeaveprompt: false, // 表单提交后，设置为true，据此判断提交不再弹出离开提示
|
isCopy: null
|
}
|
},
|
created() {
|
if (this.$route.query.id) {
|
this.getDetails()
|
this.isCopy = this.$route.query.isCopy
|
} else {
|
this.setTime();
|
}
|
},
|
/**
|
* 离开当前路由时会先触发
|
*/
|
beforeRouteLeave(to, from, next) {
|
next(false)
|
if ((from.name === 'blindBoxActAdd' || from.name === 'blindBoxActEdit') && !this.noLeaveprompt) {
|
setTimeout(() => {
|
this.$confirm('取消后当前已填写的内容不保存，确认要删除吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
next()
|
}).catch(() => {
|
next(false)
|
})
|
}, 200)
|
} else {
|
next()
|
}
|
},
|
methods: {
|
setTime() {
|
this.$nextTick(() => {
|
const basicConfigForm = this.$refs.basicConfigForm.basicConfigForm
|
const startTime = setCurrentTimeAddMin(10)
|
const endTIme = setCurrentTimeAddMin(40)
|
basicConfigForm.startAndEndTime = [startTime, endTIme]
|
basicConfigForm.promotionStartTime = startTime
|
basicConfigForm.promotionEndTime = endTIme
|
})
|
},
|
/**
|
* 获取详情
|
*/
|
async getDetails() {
|
try {
|
const res = await blindBoxActivityApi.detailsItem({ promotionId: this.$route.query.id })
|
if (res.code === '0' && res.data) {
|
const npPromotion = res.data.npPromotion
|
const memberInfoList = res.data.memberInfoList
|
const npPromotionDetail = res.data.npPromotionDetail
|
const npPromotionPrizeList = res.data.npPromotionPrizeList
|
|
this.promotionStatus = res.data.npPromotion.promotionStatus // 获取活动状态
|
|
const basicConfigForm = this.$refs.basicConfigForm.basicConfigForm
|
const prizeConfigForm = this.$refs.prizeConfigForm.prizeConfigForm
|
const pageDisplayForm = this.$refs.pageDisplayForm.pageDisplayForm
|
|
basicConfigForm.promotionName = npPromotion.promotionName
|
if (this.$route.query.isCopy) {
|
this.setTime();
|
} else {
|
basicConfigForm.startAndEndTime = [npPromotion.promotionStartTime, npPromotion.promotionEndTime]
|
basicConfigForm.promotionStartTime = npPromotion.promotionStartTime
|
basicConfigForm.promotionEndTime = npPromotion.promotionEndTime
|
}
|
eventBus.$emit('getActivity', { startTime: basicConfigForm.promotionStartTime, endTime: basicConfigForm.promotionEndTime })
|
|
basicConfigForm.tableData = memberInfoList ? memberInfoList.map(item => {
|
item.memberLevelName = item.memberLevel
|
return item
|
}) : []
|
basicConfigForm.personnelType = npPromotionDetail.personnelType
|
basicConfigForm.partakeType = npPromotionDetail.partakeType
|
basicConfigForm.toplimitNum = npPromotionDetail.toplimitNum
|
basicConfigForm.freeNum = npPromotionDetail.freeNum
|
basicConfigForm.additionalNum = npPromotionDetail.additionalNum
|
basicConfigForm.invitationType = npPromotionDetail.invitationType === '1'
|
basicConfigForm.placeOrderType = npPromotionDetail.placeOrderType === '1'
|
basicConfigForm.invitationNum = npPromotionDetail.invitationNum
|
basicConfigForm.orderSatisfyAmount = npPromotionDetail.orderSatisfyAmount
|
basicConfigForm.placeOrderNum = npPromotionDetail.placeOrderNum
|
|
prizeConfigForm.prompt = npPromotionDetail.prompt
|
prizeConfigForm.sendPointsType = npPromotionDetail.sendPointsType
|
prizeConfigForm.integral = npPromotionDetail.integral
|
prizeConfigForm.giveType = npPromotionDetail.giveType === '1'
|
let probabilityTotal = 0
|
prizeConfigForm.tableData = npPromotionPrizeList.map(item => {
|
item.fileList = []
|
item.tableData = []
|
item.startAndEndTime = []
|
probabilityTotal += item.probability
|
if (item.effectiveStartTime) {
|
item.startAndEndTime = [item.effectiveStartTime, item.effectiveEndTime]
|
}
|
const prizeInfo = item.prizeInfo && item.prizeInfo[0]
|
if (item.prizeType === '1') {
|
item.tableData.push({
|
commonId: prizeInfo.couponInfoId,
|
couponName: prizeInfo.couponName,
|
totalAmountIssued: prizeInfo.totalAmountIssued,
|
couponTimeType: prizeInfo.couponTimeType,
|
effectiveStartDate: prizeInfo.effectiveStartDate ? prizeInfo.effectiveStartDate : null,
|
effectiveEndDate: prizeInfo.effectiveEndDate ? prizeInfo.effectiveEndDate : null,
|
effectiveDays: prizeInfo.effectiveDays,
|
recordType: prizeInfo.recordType
|
})
|
}
|
if (item.prizeType === '3') {
|
item.tableData.push({
|
spuStorage: item.spuStorage,
|
commonId: prizeInfo.spuBase.shopSpuId,
|
prodName: prizeInfo.spuBase.spuName,
|
spuNum: prizeInfo.spuBase.spuNum,
|
imageUrl: prizeInfo.images[0].imgUrl,
|
skuInfos: prizeInfo.skuInfos,
|
skuId: JSON.parse(item.expInfo).skuId,
|
shopId: prizeInfo.spuBase.shopId,
|
quantity: 1,
|
spuUnit: '瓶'
|
})
|
}
|
this.getFileList(item.fileList, item, 'prizeFileUrl', 'prizeFileId', item)
|
return item
|
})
|
prizeConfigForm.notWinning = 100 - probabilityTotal
|
this.getFileList(this.$refs.prizeConfigForm.notWinningFileList, npPromotionDetail, 'promptFileUrl', 'promptFileId', prizeConfigForm)
|
|
pageDisplayForm.promotionRuledesc = npPromotion.promotionRuledesc
|
pageDisplayForm.showType = npPromotionDetail.showType
|
pageDisplayForm.blindBoxNum = npPromotionDetail.blindBoxNum
|
pageDisplayForm.broadcast = npPromotionDetail.broadcast
|
pageDisplayForm.bgColor = npPromotionDetail.bgColor
|
pageDisplayForm.promotionRuleStyle = JSON.parse(npPromotionDetail.promotionRuleStyle)
|
this.getFileList(this.$refs.pageDisplayForm.bgfileList, npPromotionDetail, 'backgroundFileUrl', 'backgroundFileId', pageDisplayForm)
|
this.getFileList(this.$refs.pageDisplayForm.blindBoxFileList, npPromotionDetail, 'blindBoxFileUrl', 'blindBoxFileId', pageDisplayForm)
|
this.getFileList(this.$refs.pageDisplayForm.blindBoxGifFileList, npPromotionDetail, 'blindBoxGifFileUrl', 'blindBoxGifFileId', pageDisplayForm)
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
* 设置文件数据
|
*/
|
getFileList(arr, data, key1, key2, form) {
|
arr.push({
|
url: data[key1],
|
id: data[key2]
|
})
|
form[key2] = data[key2]
|
},
|
/**
|
* 取消
|
*/
|
cancel() {
|
this.$router.push({ name: 'blindBoxActList' })
|
},
|
/**
|
*表单数据处理
|
*/
|
handleFormData() {
|
let basicConfigForm = {}
|
let prizeConfigForm = {}
|
let pageDisplayForm = {}
|
basicConfigForm = JSON.parse(JSON.stringify(this.$refs.basicConfigForm.basicConfigForm))
|
if (basicConfigForm.personnelType === '2') {
|
basicConfigForm.memberIds = basicConfigForm.tableData.map(item => item.memberId)
|
}
|
basicConfigForm.invitationType = basicConfigForm.invitationType ? '1' : null
|
basicConfigForm.placeOrderType = basicConfigForm.placeOrderType ? '1' : null
|
prizeConfigForm = JSON.parse(JSON.stringify(this.$refs.prizeConfigForm.prizeConfigForm))
|
prizeConfigForm.promotionPrizes = prizeConfigForm.tableData.map(item => {
|
if (item.prizeType === '3') {
|
item.expInfo = JSON.stringify({
|
skuId: item.tableData[0].skuId,
|
shopId: item.tableData[0].shopId,
|
quantity: 1,
|
spuUnit: '瓶'
|
})
|
return item
|
} else {
|
return item
|
}
|
})
|
prizeConfigForm.integral = prizeConfigForm.integral ? prizeConfigForm.integral : null
|
prizeConfigForm.giveType = prizeConfigForm.giveType ? '1' : '2'
|
|
pageDisplayForm = JSON.parse(JSON.stringify(this.$refs.pageDisplayForm.pageDisplayForm))
|
pageDisplayForm.promotionRuleStyle = JSON.stringify(pageDisplayForm.promotionRuleStyle)
|
const formData = { ...basicConfigForm, ...prizeConfigForm, ...pageDisplayForm }
|
return formData
|
},
|
/**
|
* 保存
|
*/
|
submit() {
|
const _this = this
|
this.$refs[this.activeName].$refs[this.activeName].validate().then((res) => {
|
this.loading = true
|
const formData = _this.handleFormData()
|
if (this.$route.query.id && !this.isCopy) {
|
this.editInfo(formData)
|
} else {
|
this.addInfo(formData)
|
}
|
})
|
},
|
// 编辑
|
async editInfo(formData) {
|
try {
|
formData.promotionId = this.$route.query.id
|
formData.promotionType = '3'
|
const res = await blindBoxActivityApi.updateInfo(formData)
|
if (res.code === '0') {
|
this.$message({
|
message: '编辑成功',
|
type: 'success'
|
})
|
this.loading = false
|
this.noLeaveprompt = true
|
this.$router.push({ name: 'blindBoxActList' })
|
} else {
|
this.loading = false
|
}
|
} catch (error) {
|
this.loading = false
|
}
|
},
|
// 新增
|
async addInfo(formData) {
|
try {
|
const res = await blindBoxActivityApi.addInfo(formData)
|
if (res.code === '0') {
|
this.$message({
|
message: '新增成功',
|
type: 'success'
|
})
|
this.loading = false
|
this.noLeaveprompt = true
|
this.$router.push({ name: 'blindBoxActList' })
|
} else {
|
this.loading = false
|
}
|
} catch (error) {
|
this.loading = false
|
}
|
},
|
/**
|
* 上一步下一步事件处理
|
*/
|
handlestep(val) {
|
if (val === 'pre') {
|
--this.activeIndex
|
this.setJumpPage()
|
} else {
|
this.$refs[this.activeName].$refs[this.activeName].validate().then((res) => {
|
++this.activeIndex
|
this.setJumpPage()
|
})
|
}
|
},
|
/**
|
* 设置跳转页面
|
*/
|
setJumpPage() {
|
if (this.activeIndex === 1) {
|
this.activeName = 'basicConfigForm'
|
} else if (this.activeIndex === 2) {
|
this.activeName = 'prizeConfigForm'
|
} else {
|
this.activeName = 'pageDisplayForm'
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.bindBox {
|
padding-top: 15px;
|
.blindBoxActivityInput {
|
width: 400px;
|
}
|
}
|
.separate {
|
height: 10px;
|
background-color: #f2f2f2;
|
}
|
</style>
|
