|
@@ -7,101 +7,104 @@
|
|
|
title="详情"
|
|
|
v-model="isShow"
|
|
|
@cancel="isShow=false"
|
|
|
- width="80%">
|
|
|
+ width="70%">
|
|
|
<a-spin :spinning="spinning" tip="Loading...">
|
|
|
- <a-form-model
|
|
|
- id="promotion-basicInfo-form"
|
|
|
- ref="ruleForm"
|
|
|
- :model="form"
|
|
|
- :label-col="formItemLayout.labelCol"
|
|
|
- :wrapper-col="formItemLayout.wrapperCol" >
|
|
|
- <a-form-model-item label="标题">
|
|
|
- {{ form.title }}
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="排序">
|
|
|
- {{ form.sort }}
|
|
|
- </a-form-model-item>
|
|
|
- <!-- 买产品送产品 -->
|
|
|
- <a-form-model-item label="封面图片" prop="regularSameFlag" v-if="form.promotionRuleType ==='BUY_PROD_GIVE_PROD'">
|
|
|
- <img
|
|
|
- :src="con"
|
|
|
- alt="图片走丢了"
|
|
|
- width="80"
|
|
|
- height="80"
|
|
|
- v-for="(con,i) in form.imageSet"
|
|
|
- style="margin-right:10px;"
|
|
|
- :key="i"/>
|
|
|
- <div class="upload-desc">说明:单张大小小于10Mb,最多10张;建议尺寸:宽(420px)*高(230px)</div>
|
|
|
- </a-form-model-item>
|
|
|
- <!-- 买产品送采购额 -->
|
|
|
- <a-form-model-item label="内容类型" prop="regularSameFlag" v-if="form.promotionRuleType ==='BUY_PROD_GIVE_MONEY'">
|
|
|
- {{ form.contentType }}
|
|
|
- </a-form-model-item>
|
|
|
- <!-- 特价产品 -->
|
|
|
- <a-form-model-item label="基本规则" prop="regularSameFlag" v-if="form.promotionRuleType ==='PROMO_PROD'">
|
|
|
- {{ form.promoRule&&form.promoRule.ruleType?form.promoRule.ruleType==='ticket'?'指定产品返代金券':'--':'--' }}
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="券名称" prop="accrualFlag" v-if="form.promotionRuleType ==='BUY_PROD_GIVE_PROD'&&form.accrualFlag">
|
|
|
- {{ form.promoRule&&form.promoRule.ruleName?form.promoRule.ruleName:'--' }}
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="券副标题" prop="regularPromotionSameFlag">
|
|
|
- {{ form.promoRule&&form.promoRule.ruleTitle?form.promoRule.ruleTitle:'--' }}
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="生成方式" prop="regularPromotionSameFlag">
|
|
|
- {{ form.promoRule&&form.promoRule.ruleBaseType?form.promoRule.ruleBaseType==='bill'?'按订单生成券':'按订单产品款数生成券':'--' }}
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="券有效期" prop="scopeFlag" >
|
|
|
- <span>
|
|
|
- {{ form.promoRule&&form.promoRule.validType?form.promoRule.validType==='FIXED'?'固定日期':'期限时间':'--' }}
|
|
|
- </span>
|
|
|
- <span class="timeBox" v-if="form.promoRule.validType==='FIXED'">{{ form.promoRule.validStartDate }}~{{ form.promoRule.validEndDate }}</span>
|
|
|
- <span class="timeBox" v-else>领取后,立即生效,有效期{{ form.promoRule.validDays }}天</span>
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="券适用范围" prop="scopeFlag" >
|
|
|
- 全部产品
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="使用说明" prop="scopeFlag" >
|
|
|
- {{ form.promoRule&&form.promoRule.ruleExplain?form.promoRule.ruleExplain:'--' }}
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="加盟商编辑" prop="scopeFlag" >
|
|
|
- {{ form.dealerEditFlag?form.dealerEditFlag==='1'?'是':'否':'--' }}
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="是否发布" prop="scopeFlag" >
|
|
|
- {{ form.publishFlag?form.publishFlag==='1'?'是':'否':'--' }}
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="产品范围" prop="scopeFlag" >
|
|
|
- <div v-if="form.promoRule&&form.promoRule.productRangeList">
|
|
|
- <a-tree-select
|
|
|
- v-model="form.promoRule.productRangeList"
|
|
|
- :maxTagCount="12"
|
|
|
- :tree-data="productTypeList"
|
|
|
- tree-checkable
|
|
|
- :disabled="true"
|
|
|
- :getPopupContainer="triggerNode => triggerNode.parentNode"
|
|
|
- :replaceFields="{children:'children',title: 'productTypeName',key: 'productTypeSn',value: 'productTypeSn'}"
|
|
|
- placeholder="请选择产品范围" />
|
|
|
+ <div class="detailModal-con">
|
|
|
+ <a-form-model
|
|
|
+ id="promotion-basicInfo-form"
|
|
|
+ ref="ruleForm"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ :label-col="formItemLayout.labelCol"
|
|
|
+ :wrapper-col="formItemLayout.wrapperCol" >
|
|
|
+ <a-form-model-item label="标题" prop="title">
|
|
|
+ {{ form.title }}
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="排序" prop="sort">
|
|
|
+ {{ form.sort }}
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="封面图片" prop="imageSet">
|
|
|
+ <img
|
|
|
+ :src="con"
|
|
|
+ alt="图片走丢了"
|
|
|
+ width="80"
|
|
|
+ height="80"
|
|
|
+ v-for="(con,i) in imageSet"
|
|
|
+ style="margin-right:10px;"
|
|
|
+ :key="i"/>
|
|
|
+ <div class="upload-desc">说明:单张大小小于10Mb,最多10张;建议尺寸:宽(420px)*高(230px)</div>
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="内容类型" prop="contentType">
|
|
|
+ {{ form.contentType==='IMAGE_CONTENT'?'图文展示':form.contentType==='VIDEO'?'视频展示':'跳转链接' }}
|
|
|
+ </a-form-model-item>
|
|
|
+ <div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <a-form-model-item label="基本规则" prop="ruleType">
|
|
|
+ {{ form.promoRule&&form.promoRule.ruleType?form.promoRule.ruleType==='ticket'?'指定产品返代金券':'--':'--' }}
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="券名称" prop="ruleName">
|
|
|
+ {{ form.promoRule&&form.promoRule.ruleName?form.promoRule.ruleName:'--' }}
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="券副标题" prop="ruleTitle">
|
|
|
+ {{ form.promoRule&&form.promoRule.ruleTitle?form.promoRule.ruleTitle:'--' }}
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="生成方式" prop="ruleBaseType">
|
|
|
+ {{ form.promoRule&&form.promoRule.ruleBaseType?form.promoRule.ruleBaseType==='bill'?'按订单生成券':'按订单产品款数生成券':'--' }}
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="券有效期" prop="validType" >
|
|
|
+ <span>
|
|
|
+ {{ form.promoRule&&form.promoRule.validType?form.promoRule.validType==='FIXED'?'固定日期':'期限时间':'--' }}
|
|
|
+ </span>
|
|
|
+ <span class="timeBox" v-if="form.promoRule.validType==='FIXED'">{{ form.promoRule.validStartDate }}~{{ form.promoRule.validEndDate }}</span>
|
|
|
+ <span class="timeBox" v-else>领取后,立即生效,有效期{{ form.promoRule.validDays }}天</span>
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="券适用范围" prop="range" >
|
|
|
+ 全部产品
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="使用说明" prop="ruleExplain" >
|
|
|
+ {{ form.promoRule&&form.promoRule.ruleExplain?form.promoRule.ruleExplain:'--' }}
|
|
|
+ </a-form-model-item>
|
|
|
+ <!-- <a-form-model-item label="加盟商编辑" prop="dealerEditFlag" >
|
|
|
+ {{ form.dealerEditFlag?form.dealerEditFlag==='1'?'是':'否':'--' }}
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="是否发布" prop="publishFlag" >
|
|
|
+ {{ form.publishFlag?form.publishFlag==='1'?'是':'否':'--' }}
|
|
|
+ </a-form-model-item> -->
|
|
|
+ <a-form-model-item label="产品范围" prop="productRangeList" >
|
|
|
+ <div v-if="form.promoRule&&form.promoRule.productRangeList">
|
|
|
+ <a-tree-select
|
|
|
+ v-model="form.promoRule.productRangeList"
|
|
|
+ :maxTagCount="12"
|
|
|
+ :tree-data="productTypeList"
|
|
|
+ tree-checkable
|
|
|
+ :disabled="true"
|
|
|
+ :getPopupContainer="triggerNode => triggerNode.parentNode"
|
|
|
+ :replaceFields="{children:'children',title: 'productTypeName',key: 'productTypeSn',value: 'productTypeSn'}"
|
|
|
+ placeholder="请选择产品范围" />
|
|
|
+ </div>
|
|
|
+ <div>--</div>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-form-model>
|
|
|
+ <a-card size="small" :bordered="false" class="pages-wrap">
|
|
|
+ <div class="productTable">
|
|
|
+ <s-table
|
|
|
+ class="sTable"
|
|
|
+ ref="table"
|
|
|
+ size="small"
|
|
|
+ :rowKey="(record) => record.id"
|
|
|
+ :columns="columns"
|
|
|
+ :data="loadData"
|
|
|
+ :defaultLoadData="false"
|
|
|
+ :style="{ maxHeight: 300+'px' }"
|
|
|
+ :scroll="{ y:230 }"
|
|
|
+ bordered>
|
|
|
+ </s-table>
|
|
|
</div>
|
|
|
- <div>--</div>
|
|
|
- </a-form-model-item>
|
|
|
- </a-form-model>
|
|
|
- <a-card size="small" :bordered="false" class="pages-wrap">
|
|
|
- <div class="productTable">
|
|
|
- <s-table
|
|
|
- class="sTable"
|
|
|
- ref="table"
|
|
|
- size="small"
|
|
|
- :rowKey="(record) => record.id"
|
|
|
- :columns="columns"
|
|
|
- :data="loadData"
|
|
|
- :defaultLoadData="false"
|
|
|
- :style="{ maxHeight: 300+'px' }"
|
|
|
- :scroll="{ y:230 }"
|
|
|
- bordered>
|
|
|
- </s-table>
|
|
|
+ </a-card>
|
|
|
+ <div class="btn-cont">
|
|
|
+ <a-button id="promotion-basicInfo-modal-back" @click="isShow = false">关闭</a-button>
|
|
|
</div>
|
|
|
- </a-card>
|
|
|
- <div class="btn-cont">
|
|
|
- <a-button id="promotion-basicInfo-modal-back" @click="isShow = false">关闭</a-button>
|
|
|
</div>
|
|
|
</a-spin>
|
|
|
</a-modal>
|
|
@@ -109,9 +112,10 @@
|
|
|
|
|
|
<script>
|
|
|
import { commonMixin } from '@/utils/mixin'
|
|
|
-import { promoActiveDetail, promoRuleProductList } from '@/api/promoActive'
|
|
|
-import { productTypeQuery } from '@/api/productType'
|
|
|
import { STable } from '@/components'
|
|
|
+import { productTypeQuery } from '@/api/productType'
|
|
|
+import { promoActiveDetail, promoRuleProductList } from '@/api/promoActive'
|
|
|
+
|
|
|
export default {
|
|
|
name: 'DetailModal',
|
|
|
mixins: [commonMixin],
|
|
@@ -146,9 +150,22 @@ export default {
|
|
|
ruleEnableFlag: '1', // 参数配置 1勾选配置 0不能配置
|
|
|
publishFlag: '0',
|
|
|
dealerEditFlag: '0', // 加盟商编辑 1是 0否
|
|
|
- promoRule: {},
|
|
|
- publishState: 'UNPUBLISH'
|
|
|
+ promoRule: {
|
|
|
+ ruleType: 'ticket', // 基本规则类型
|
|
|
+ productRangeFlag: '', // 产品范围标记 0无 1有产品范围
|
|
|
+ productRangeList: [], // 产品范围列表
|
|
|
+ ruleName: '', // 券名称
|
|
|
+ ruleTitle: '', // 副标题
|
|
|
+ ruleBaseType: 'category', // 券生成方式
|
|
|
+ ruleExplain: '', // 使用说明
|
|
|
+ validType: undefined, // 券有效期类型
|
|
|
+ validStartDate: undefined, // 券生效时间
|
|
|
+ validEndDate: undefined, // 券失效时间
|
|
|
+ validDays: undefined, // 券有效期天数
|
|
|
+ range: '1'
|
|
|
+ }
|
|
|
},
|
|
|
+ imageSet: [],
|
|
|
columns: [
|
|
|
{ title: '序号', dataIndex: 'no', width: '4%', align: 'center', customRender: function (text) { return text || '--' } },
|
|
|
{ title: '产品编码', dataIndex: 'productCode', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
|
|
@@ -158,6 +175,21 @@ export default {
|
|
|
{ title: '返券金额', dataIndex: 'ruleValue', width: '12%', align: 'center', customRender: text => { return ((text || text == 0) ? this.toThousands(text) : '--') } },
|
|
|
{ title: '参考终端价', dataIndex: 'terminalPrice', width: '12%', align: 'center', customRender: text => { return ((text || text == 0) ? this.toThousands(text) : '--') } }
|
|
|
],
|
|
|
+ rules: {
|
|
|
+ title: [{ required: true, message: '请输入标题名称', trigger: 'blur' }],
|
|
|
+ imageSet: [{ required: true, message: '请选择要上传的封面图片', trigger: 'change' }],
|
|
|
+ sort: [{ required: true, message: '请输入排序数字', trigger: 'blur' }],
|
|
|
+ contentType: [{ required: true, message: '请选择内容类型', trigger: 'change' }],
|
|
|
+ content: [{ required: true, message: '请输入对应内容', trigger: ['blur', 'change'] }],
|
|
|
+ contentLink: [{ required: true, message: '请输入对应内容', trigger: 'blur' }],
|
|
|
+ publishFlag: [{ required: true, message: '请选择是否发布', trigger: 'change' }],
|
|
|
+ range: [{ required: true, message: '请选择券适用范围', trigger: 'change' }],
|
|
|
+ ruleType: [{ required: true, message: '请选择基本规则', trigger: 'change' }],
|
|
|
+ ruleName: [{ required: true, message: '请输入券名称', trigger: ['change', 'blur'] }],
|
|
|
+ ruleBaseType: [{ required: true, message: '请选择生成方式', trigger: 'change' }],
|
|
|
+ validType: [{ required: true, message: '请选择券有效期类型', trigger: 'change' }],
|
|
|
+ ruleDetailList: [{ type: 'array', required: true, message: '请选择券内容', trigger: 'blur' }]
|
|
|
+ },
|
|
|
// 加载数据方法 必须为 Promise 对象
|
|
|
loadData: parameter => {
|
|
|
this.disabled = true
|
|
@@ -194,24 +226,28 @@ export default {
|
|
|
ruleEnableFlag: '1', // 参数配置 1勾选配置 0不能配置
|
|
|
publishFlag: '0',
|
|
|
dealerEditFlag: '0', // 加盟商编辑 1是 0否
|
|
|
- promoRule: {},
|
|
|
- publishState: 'UNPUBLISH'
|
|
|
+ promoRule: {}
|
|
|
}
|
|
|
+ this.imageSet = []
|
|
|
},
|
|
|
// 获取列表详情
|
|
|
getDetail () {
|
|
|
promoActiveDetail({ sn: this.itemSn }).then(res => {
|
|
|
if (res.status == 200) {
|
|
|
- this.form = res.data
|
|
|
if (res.data.contentType === 'LINK') {
|
|
|
console.log('加载产品范围')
|
|
|
this.$nextTick(() => {
|
|
|
this.getTreeData()
|
|
|
})
|
|
|
+ if (res.data.images) {
|
|
|
+ this.form.imageSet = res.data.images
|
|
|
+ this.imageSet = res.data.images.split(',')
|
|
|
+ }
|
|
|
if (res.data.promoRule.productRangeList && res.data.promoRule.productRangeList.productRangeList.length > 0) {
|
|
|
this.form.promoRule.productRangeList = res.data.promoRule.productRangeList.map(item => { return item.productTypeSn })
|
|
|
}
|
|
|
}
|
|
|
+ this.form = res.data
|
|
|
}
|
|
|
})
|
|
|
},
|
|
@@ -249,6 +285,15 @@ export default {
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.promotion-basicInfo-modal{
|
|
|
+ .detailModal-con{
|
|
|
+ max-height: 600px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
+ .timeBox{
|
|
|
+ margin-left: 10px;
|
|
|
+ color:#ed1c24;
|
|
|
+ opacity: .7;
|
|
|
+ }
|
|
|
.ant-modal-body {
|
|
|
padding: 40px 40px 24px;
|
|
|
}
|