<template>
|
<div class="activityRange">
|
<div v-for="(item,index) in form.preferentialInfo" :key="index">
|
<el-form-item v-show="form.preferentialWay === '1'">
|
<p>
|
{{index+1}} 级优惠
|
<span class="buttonStyle">
|
<el-button type="primary"
|
v-show="index <= 1 && index === form.preferentialInfo.length-1"
|
@click="addItem(item,index)">新增</el-button>
|
<el-button type="danger" v-show="form.preferentialInfo.length !== 1"
|
@click="deleteItem(item,index)">删除</el-button>
|
</span>
|
</p>
|
</el-form-item>
|
<el-form-item label="优惠门槛：" :prop="'preferentialInfo.' + index + '.preferentialMaxAmount'"
|
:rules="formRules.maxAmount">
|
<span>订单每满金额 </span>
|
<el-input-number @keydown.native="limiInputType" :min="0"
|
v-model="item.preferentialMaxAmount"
|
@change="changeDiscountMoney(item,index)"></el-input-number>
|
元
|
</el-form-item>
|
<el-form-item label="优惠内容：" :prop="'preferentialInfo.' + index + '.preferentialAmount'"
|
:rules="formRules.preferentialAmount">
|
<div v-if="form.promotionType === '1'">
|
<span>减 </span>
|
<el-input-number @keydown.native="limiInputType" :min="0"
|
v-model="item.preferentialAmount"
|
@change="changeDiscountMoney(item,index)"></el-input-number>
|
元
|
</div>
|
<div v-else>赠品</div>
|
</el-form-item>
|
<el-form-item v-show="form.promotionType === '2'"
|
:prop="'preferentialInfo.' + index + '.products'" :rules="formRules.products">
|
<gift-component ref="table" :productData.sync="item.products" :form="form"
|
:formRules="formRules" @hand-selected="handSelected"
|
:preferentialIndex="index" :tableValidate='tableValidate'
|
:isShowSpuStorage="isShowSpuStorage">
|
<template slot="productTableRow">
|
<el-table-column label="限制总数" width="180px">
|
<template slot-scope="scope">
|
<el-form-item :prop="'preferentialInfo.' + index +'.products.' + scope.$index + '.maxbuyquantity'"
|
:rules="formRules.maxbuyquantity">
|
<el-input-number :min="0" @keydown.native="limiInputType"
|
v-model="scope.row.maxbuyquantity"
|
@change="changeMaxbuyquantity(scope.row, scope.$index, index)">
|
</el-input-number>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
</template>
|
</gift-component>
|
</el-form-item>
|
<el-form-item label="活动说明：" :prop="'preferentialInfo.' + index + '.memos'"
|
:rules="formRules.memos">
|
<el-input placeholder="请输入活动说明" v-model="item.memos"></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
</template>
|
<script>
|
import giftComponent from '@/views/proActivity/components/giftComponent.vue'
|
import { limiInputType } from '@/utils/limiInputType'
|
export default {
|
components: { giftComponent },
|
props: ['form', 'formRules', 'isShowSpuStorage'],
|
data() {
|
return {
|
// 表格内部表单验证prop
|
tableValidate: {
|
skuId(preferentialIndex, index) {
|
return `preferentialInfo.${preferentialIndex}.products.${index}.skuId`
|
},
|
ensalequantity(preferentialIndex, index) {
|
return `preferentialInfo.${preferentialIndex}.products.${index}.ensalequantity`
|
}
|
}
|
}
|
},
|
methods: {
|
/**
|
* 当限制数量改变时判断与赠品数量的大小
|
*/
|
changeMaxbuyquantity(row, index, parentIndex) {
|
if (row.ensalequantity) {
|
this.$parent.validateField(`preferentialInfo.${parentIndex}.products.${index}.ensalequantity`)
|
}
|
},
|
// 当选择商品时
|
handSelected() {
|
this.$emit('hand-gift-selected')
|
},
|
/**
|
* 当优惠门槛改变时触发设置优惠门槛金额
|
*/
|
changeDiscountMoney(row, index) {
|
if (row.preferentialMaxAmount && row.preferentialAmount) {
|
console.log(this.$parent)
|
|
this.$parent.validateField(`preferentialInfo.${index}.preferentialMaxAmount`)
|
this.$parent.validateField(`preferentialInfo.${index}.preferentialAmount`)
|
}
|
},
|
|
/**
|
* 限制不能输入数字
|
*/
|
limiInputType(e) {
|
limiInputType(e)
|
},
|
/*
|
* 新增
|
*/
|
addItem(row, index) {
|
this.form.preferentialInfo.push({
|
memos: null,
|
preferentialAmount: null,
|
preferentialMaxAmount: null,
|
preferentialMinAmount: null,
|
preferentialWay: this.form.preferentialWay,
|
products: []
|
})
|
},
|
/*
|
*删除
|
*/
|
deleteItem(row, index) {
|
this.form.preferentialInfo.splice(index, 1)
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.activityRange {
|
p {
|
background: #f2f3f6;
|
padding-left: 10px;
|
font-weight: 400;
|
border-radius: 5px;
|
position: relative;
|
}
|
.buttonStyle {
|
position: absolute;
|
right: 0;
|
}
|
}
|
</style>
|
