|
@@ -1,302 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="promotionRulesEdit-wrap">
|
|
|
- <!-- 内容 -->
|
|
|
- <a-page-header :ghost="false" :backIcon="false" class="promotionRulesEdit-cont" >
|
|
|
- <!-- 自定义的二级文字标题 -->
|
|
|
- <template slot="subTitle">
|
|
|
- <a id="promotionRulesEdit-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
|
|
|
- </template>
|
|
|
- </a-page-header>
|
|
|
- <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" >
|
|
|
- <a-card size="small" :bordered="false" class="promotionRulesEdit-cont">
|
|
|
- <!-- 基础设置 -->
|
|
|
- <div class="module">
|
|
|
- <h3 class="module-tit">基础设置</h3>
|
|
|
- <a-divider style="margin-top: 0;" />
|
|
|
- <a-row :gutter="15">
|
|
|
- <a-col span="12">
|
|
|
- <a-form-model-item label="活动名称" prop="name">
|
|
|
- <a-input
|
|
|
- id="promotionRulesEdit-name"
|
|
|
- :maxLength="100"
|
|
|
- v-model.trim="form.name"
|
|
|
- @change="filterEmpty"
|
|
|
- placeholder="请输入活动名称(最多100个字符)"
|
|
|
- allowClear />
|
|
|
- </a-form-model-item>
|
|
|
- </a-col>
|
|
|
- <a-col span="12">
|
|
|
- <a-form-model-item label="活动时间" prop="activityTime">
|
|
|
- <a-row :gutter="15">
|
|
|
- <a-col span="8">
|
|
|
- <a-select
|
|
|
- id="promotionRulesEdit-isLimit"
|
|
|
- placeholder="请选择"
|
|
|
- v-model="form.isLimit"
|
|
|
- style="width: 100%;">
|
|
|
- <a-select-option v-for="item in rangeList" :key="item.val" :value="item.val">{{ item.name }}</a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-col>
|
|
|
- <a-col span="16">
|
|
|
- <a-range-picker
|
|
|
- v-if="form.isLimit==1"
|
|
|
- style="width:100%"
|
|
|
- id="promotionRulesEdit-activityTime"
|
|
|
- :disabledDate="disabledDate"
|
|
|
- v-model="form.activityTime"
|
|
|
- :format="dateFormat"
|
|
|
- :placeholder="['开始时间', '结束时间']" />
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form-model-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-row :gutter="15">
|
|
|
- <a-col span="12">
|
|
|
- <a-form-model-item label="参与客户" prop="activityTime">
|
|
|
- <a-row :gutter="15">
|
|
|
- <a-col span="8">
|
|
|
- <a-select
|
|
|
- id="promotionRulesEdit-isLimit"
|
|
|
- placeholder="请选择"
|
|
|
- v-model="form.isLimit"
|
|
|
- style="width: 100%;">
|
|
|
- <a-select-option v-for="item in rangeList" :key="item.val" :value="item.val">{{ item.name }}</a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-col>
|
|
|
- <a-col span="16">
|
|
|
- <a-select
|
|
|
- v-if="form.isLimit==1"
|
|
|
- id="promotionRulesEdit-isLimit"
|
|
|
- placeholder="请选择客户"
|
|
|
- v-model="form.isLimit"
|
|
|
- style="width: 100%;">
|
|
|
- <a-select-option v-for="item in rangeList" :key="item.val" :value="item.val">{{ item.name }}</a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form-model-item>
|
|
|
- </a-col>
|
|
|
- <a-col span="12">
|
|
|
- <a-form-model-item prop="activityTime">
|
|
|
- <template slot="label">
|
|
|
- <a-popover style="margin-top: 13px;">
|
|
|
- <template slot="content">即促销品的销售价总额不能高于限值,达到后活动不能参与。</template>
|
|
|
- <a-icon type="question-circle" theme="twoTone" />
|
|
|
- </a-popover>
|
|
|
- <span>活动经费上限</span>
|
|
|
- </template>
|
|
|
- <a-row :gutter="15">
|
|
|
- <a-col span="8">
|
|
|
- <a-select
|
|
|
- id="promotionRulesEdit-isLimit"
|
|
|
- placeholder="请选择"
|
|
|
- v-model="form.isLimit"
|
|
|
- style="width: 100%;">
|
|
|
- <a-select-option v-for="item in rangeList" :key="item.val" :value="item.val">{{ item.name }}</a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-col>
|
|
|
- <a-col span="16">
|
|
|
- <a-input-number
|
|
|
- v-if="form.isLimit==1"
|
|
|
- id="promotionRulesEdit-carOwnersPrice"
|
|
|
- v-model="form.carOwnersPrice"
|
|
|
- :min="1"
|
|
|
- :max="999999"
|
|
|
- :precision="2"
|
|
|
- style="width: 85%;margin-right: 5px;"
|
|
|
- placeholder="请输入活动经费上限(1~999999)"
|
|
|
- allowClear />
|
|
|
- <span v-if="form.isLimit==1">万元</span>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form-model-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-row :gutter="15">
|
|
|
- <a-col span="12">
|
|
|
- <a-form-model-item prop="activityTime">
|
|
|
- <template slot="label">
|
|
|
- <a-popover style="margin-top: 13px;">
|
|
|
- <template slot="content">即限制每个采购单需达到下限金额才能参与促销。</template>
|
|
|
- <a-icon type="question-circle" theme="twoTone" />
|
|
|
- </a-popover>
|
|
|
- <span>订单起订金额</span>
|
|
|
- </template>
|
|
|
- <a-row :gutter="15">
|
|
|
- <a-col span="8">
|
|
|
- <a-select
|
|
|
- id="promotionRulesEdit-isLimit"
|
|
|
- placeholder="请选择"
|
|
|
- v-model="form.isLimit"
|
|
|
- style="width: 100%;">
|
|
|
- <a-select-option v-for="item in rangeList" :key="item.val" :value="item.val">{{ item.name }}</a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-col>
|
|
|
- <a-col span="16">
|
|
|
- <a-input-number
|
|
|
- v-if="form.isLimit==1"
|
|
|
- id="promotionRulesEdit-carOwnersPrice"
|
|
|
- v-model="form.carOwnersPrice"
|
|
|
- :min="1"
|
|
|
- :max="999999"
|
|
|
- :precision="2"
|
|
|
- style="width: 85%;margin-right: 5px;"
|
|
|
- placeholder="请输入订单起订金额(1~999999)"
|
|
|
- allowClear />
|
|
|
- <span v-if="form.isLimit==1">万元</span>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form-model-item>
|
|
|
- </a-col>
|
|
|
- <a-col span="12">
|
|
|
- <a-form-model-item label="备注" prop="name">
|
|
|
- <a-input
|
|
|
- id="promotionRulesEdit-name"
|
|
|
- :maxLength="100"
|
|
|
- v-model.trim="form.name"
|
|
|
- placeholder="请输入备注(最多100个字符)"
|
|
|
- allowClear />
|
|
|
- </a-form-model-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </div>
|
|
|
- </a-card>
|
|
|
- <a-card size="small" :bordered="false" class="promotionRulesEdit-cont">
|
|
|
- <!-- 促销规则设置 -->
|
|
|
- <div class="module">
|
|
|
- <h3 class="module-tit">促销规则设置</h3>
|
|
|
- <a-divider style="margin-top: 0;" />
|
|
|
- <a-form-model-item label="促销类型" prop="type" extra="(即买正价产品送促销品,例如买刹车片送滤芯)" :label-col="{span: 2}" :wrapper-col="{span: 8}">
|
|
|
- <a-select
|
|
|
- id="promotionRulesEdit-type"
|
|
|
- placeholder="请选择"
|
|
|
- v-model="form.type"
|
|
|
- style="width: 80%;">
|
|
|
- <a-select-option v-for="item in typeList" :key="item.val" :value="item.val">{{ item.name }}</a-select-option>
|
|
|
- </a-select>
|
|
|
- <a-button icon="plus" size="small" id="promotionRulesEdit-add-btn" style="margin-left: 10px;"></a-button>
|
|
|
- </a-form-model-item>
|
|
|
- <div v-if="form.type==0">
|
|
|
- <a-form-model-item label="促销设置" required :label-col="{span: 2}" :wrapper-col="{span: 22}">
|
|
|
- 购买满
|
|
|
- <a-form-model-item prop="name" style="display: inline-block;">
|
|
|
- <a-input-number
|
|
|
- id="promotionRulesEdit-carOwnersPrice"
|
|
|
- v-model="form.carOwnersPrice"
|
|
|
- :min="1"
|
|
|
- :max="999999"
|
|
|
- :precision="0"
|
|
|
- style="width: 200px;margin-right: 5px;"
|
|
|
- placeholder="请输入数量(1~999999)"
|
|
|
- allowClear />
|
|
|
- </a-form-model-item>
|
|
|
- 正价产品送
|
|
|
- <a-form-model-item prop="name" style="display: inline-block;">
|
|
|
- <a-input-number
|
|
|
- id="promotionRulesEdit-carOwnersPrice"
|
|
|
- v-model="form.carOwnersPrice"
|
|
|
- :min="1"
|
|
|
- :max="999999"
|
|
|
- :precision="0"
|
|
|
- style="width: 200px;margin-right: 5px;"
|
|
|
- placeholder="请输入数量(1~999999)"
|
|
|
- allowClear />
|
|
|
- </a-form-model-item>
|
|
|
- 促销品
|
|
|
- </a-form-model-item>
|
|
|
- <a-row :gutter="15">
|
|
|
- <a-col span="12">
|
|
|
- <a-form-model-item label="正价产品" prop="name">
|
|
|
- <a-button size="small" @click="openModal=true" id="promotionRulesEdit-zj" type="primary" class="button-error">请选择</a-button>
|
|
|
- </a-form-model-item>
|
|
|
- </a-col>
|
|
|
- <a-col span="12">
|
|
|
- <a-form-model-item label="正价产品" prop="name">
|
|
|
- <a-button size="small" id="promotionRulesEdit-zj" type="primary" class="button-info">已选</a-button>
|
|
|
- </a-form-model-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </a-card>
|
|
|
- </a-form-model>
|
|
|
- <a-affix :offset-bottom="0">
|
|
|
- <div style="text-align: center;width: 100%;background-color: #fff;padding: 12px 0;box-shadow: 0 0 20px #dcdee2;">
|
|
|
- <a-button
|
|
|
- type="primary"
|
|
|
- id="promotionRulesEdit-submit"
|
|
|
- size="large"
|
|
|
- class="button-primary"
|
|
|
- style="padding: 0 60px;">保存</a-button>
|
|
|
- </div>
|
|
|
- </a-affix>
|
|
|
- <!-- 选择产品 -->
|
|
|
- <choosePriceProductsModal :openModal="openModal" @close="openModal=false" />
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import moment from 'moment'
|
|
|
-import ChoosePriceProductsModal from './choosePriceProductsModal.vue'
|
|
|
-export default {
|
|
|
- components: { ChoosePriceProductsModal },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- formItemLayout: {
|
|
|
- labelCol: { span: 4 },
|
|
|
- wrapperCol: { span: 16 }
|
|
|
- },
|
|
|
- form: {
|
|
|
- name: '', // 产品名称
|
|
|
- isLimit: 0, // 是否限制活动时间
|
|
|
- activityTime: [],
|
|
|
- type: undefined // 促销类型
|
|
|
- },
|
|
|
- rules: {
|
|
|
- name: [
|
|
|
- { required: true, message: '请输入产品名称', trigger: 'blur' }
|
|
|
- ]
|
|
|
- },
|
|
|
- rangeList: [ // 是否限制
|
|
|
- { name: '不限', val: 0 },
|
|
|
- { name: '限制', val: 1 }
|
|
|
- ],
|
|
|
- typeList: [ // 促销类型
|
|
|
- { name: '买产品送产品', val: 0 },
|
|
|
- { name: '买产品送采购额', val: 1 },
|
|
|
- { name: '特价产品销售', val: 2 },
|
|
|
- { name: '加价换购', val: 3 }
|
|
|
- ],
|
|
|
- dateFormat: 'YYYY-MM-DD',
|
|
|
- openModal: false // 是否选择正价产品
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 过滤空格
|
|
|
- filterEmpty () {
|
|
|
- let str = this.form.name
|
|
|
- str = str.replace(/\ +/g, '')
|
|
|
- str = str.replace(/[ ]/g, '')
|
|
|
- str = str.replace(/[\r\n]/g, '')
|
|
|
- this.form.name = str
|
|
|
- },
|
|
|
- // 不可选日期
|
|
|
- disabledDate (date, dateStrings) {
|
|
|
- return date && date.valueOf('day') < moment().subtract(1, 'day') // 今天以后,包含今天
|
|
|
- },
|
|
|
- // 返回列表
|
|
|
- handleBack () {
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
- .promotionRulesEdit-wrap{
|
|
|
- .promotionRulesEdit-cont{
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|