浏览代码

轮播图

chenrui 9 月之前
父节点
当前提交
e782aa5ecf

+ 65 - 28
src/config/router.config.js

@@ -3514,6 +3514,53 @@ export const asyncRouterMap = [
               }
             ]
           }
+          // {
+          //   path: '/promotionRulesManagement/promotionManagement',
+          //   redirect: '/promotionRulesManagement/promotionManagement/list',
+          //   name: 'promotionManagement',
+          //   component: BlankLayout,
+          //   meta: {
+          //     title: '修理厂促销',
+          //     icon: 'file-ppt',
+          //     permission: 'M_promotionManagementList'
+          //   },
+          //   hideChildrenInMenu: true,
+          //   children: [
+          //     {
+          //       path: 'list',
+          //       name: 'promotionManagementList',
+          //       component: () => import(/* webpackChunkName: "promotionRulesManagement" */ '@/views/promotionRulesManagement/promotionManagement/list.vue'),
+          //       meta: {
+          //         title: '修理厂促销列表',
+          //         icon: 'file-ppt',
+          //         hidden: true,
+          //         permission: 'M_promotionManagementList'
+          //       }
+          //     },
+          //     {
+          //       path: 'add/:sn/:pageType',
+          //       name: 'promotionManagementAdd',
+          //       component: () => import(/* webpackChunkName: "promotionRulesManagement" */ '@/views/promotionRulesManagement/promotionManagement/edit.vue'),
+          //       meta: {
+          //         title: '新增修理厂促销',
+          //         icon: 'file-ppt',
+          //         hidden: true,
+          //         permission: 'B_promotionManagementAdd'
+          //       }
+          //     },
+          //     {
+          //       path: 'edit/:sn/:pageType',
+          //       name: 'promotionManagementEdit',
+          //       component: () => import(/* webpackChunkName: "promotionRulesManagement" */ '@/views/promotionRulesManagement/promotionManagement/edit.vue'),
+          //       meta: {
+          //         title: '编辑修理厂促销',
+          //         icon: 'file-ppt',
+          //         hidden: true,
+          //         permission: 'B_promotionManagementEdit'
+          //       }
+          //     }
+          //   ]
+          // }
         ]
       },
       // 易码通
@@ -3621,54 +3668,44 @@ export const asyncRouterMap = [
                   icon: 'file-ppt',
                   hidden: true,
                   replaceTab: true
-                  // permission: 'B_promotionManagementAdd'
+                  // permission: 'B_promotionalActivitiesAdd'
                 }
               }
             ]
           },
           {
-            path: '/promotionRulesManagement/promotionManagement',
-            redirect: '/promotionRulesManagement/promotionManagement/list',
-            name: 'promotionManagement',
+            path: '/easyPassManagement/homepageCarouselImg',
+            redirect: '/easyPassManagement/homepageCarouselImg/list',
+            name: 'homepageCarouselImg',
             component: BlankLayout,
             meta: {
-              title: '修理厂促销',
-              icon: 'file-ppt',
-              permission: 'M_promotionManagementList'
+              title: '首页轮播图',
+              icon: 'file-ppt'
+              // permission: 'M_homepageCarouselImg'
             },
             hideChildrenInMenu: true,
             children: [
               {
                 path: 'list',
-                name: 'promotionManagementList',
-                component: () => import(/* webpackChunkName: "promotionRulesManagement" */ '@/views/promotionRulesManagement/promotionManagement/list.vue'),
+                name: 'carouselImageList',
+                component: () => import(/* webpackChunkName: "easyPassManagement" */ '@/views/easyPassManagement/homepageCarouselImg/list.vue'),
                 meta: {
-                  title: '修理厂促销列表',
+                  title: '首页轮播图列表',
                   icon: 'file-ppt',
-                  hidden: true,
-                  permission: 'M_promotionManagementList'
-                }
-              },
-              {
-                path: 'add/:sn/:pageType',
-                name: 'promotionManagementAdd',
-                component: () => import(/* webpackChunkName: "promotionRulesManagement" */ '@/views/promotionRulesManagement/promotionManagement/edit.vue'),
-                meta: {
-                  title: '新增修理厂促销',
-                  icon: 'file-ppt',
-                  hidden: true,
-                  permission: 'B_promotionManagementAdd'
+                  hidden: true
+                  // permission: 'M_homepageCarouselImgList'
                 }
               },
               {
-                path: 'edit/:sn/:pageType',
-                name: 'promotionManagementEdit',
-                component: () => import(/* webpackChunkName: "promotionRulesManagement" */ '@/views/promotionRulesManagement/promotionManagement/edit.vue'),
+                path: 'add',
+                name: 'carouselImageAdd',
+                component: () => import(/* webpackChunkName: "easyPassManagement" */ '@/views/easyPassManagement/homepageCarouselImg/edit.vue'),
                 meta: {
-                  title: '编辑修理厂促销',
+                  title: '新增轮播图',
                   icon: 'file-ppt',
                   hidden: true,
-                  permission: 'B_promotionManagementEdit'
+                  replaceTab: true
+                  // permission: 'B_homepageCarouselImgAdd'
                 }
               }
             ]

+ 707 - 0
src/views/easyPassManagement/homepageCarouselImg/edit.vue

@@ -0,0 +1,707 @@
+<template>
+  <div class="promotionEdit-wrap">
+    <a-spin :spinning="spinning" tip="Loading...">
+      <a-page-header :ghost="false" :backIcon="false" class="promotionEdit-cont" >
+        <!-- 自定义的二级文字标题 -->
+        <template slot="subTitle">
+          <a id="promotionEdit-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" />返回列表</a>
+          <span v-if="pageType==='edit'" style="margin: 0 10px 0 20px;color: #666;font-size: 14px;font-weight: 600;">促销名称:{{ promotionName||'--' }}</span>
+        </template>
+      </a-page-header>
+      <!-- 表单 -->
+      <a-card :bordered="false" class="promotionEdit-cont">
+        <a-form-model
+          id="promotionEdit-form"
+          ref="ruleForm"
+          :model="form"
+          :rules="rules"
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+        >
+          <a-row>
+            <a-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
+              <a-form-model-item label="轮播图名称" prop="title" :label-col="{span:4}" :wrapper-col="{span:16}">
+                <a-input
+                  id="promotionEdit-title"
+                  :maxLength="30"
+                  v-model.trim="form.title"
+                  placeholder="请输入轮播图名称(最多30个字符)"
+                  :disabled="isDisabled"
+                  allowClear/>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
+              <a-form-model-item label="轮播时间" prop="sort" :label-col="{span:4}" :wrapper-col="{span:16}">
+                <a-range-picker
+                  v-model="time"
+                  :format="dateFormat"
+                  id="promotionEdit-time"
+                  @change="dateChange"
+                  :disabled="isDisabled"
+                  :disabled-date="disabledDate"
+                  :placeholder="['开始时间', '结束时间']" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
+              <a-form-model-item label="轮播图排序" prop="sort" :label-col="{span:4}" :wrapper-col="{span:16}">
+                <a-input-number
+                  style="width:100%"
+                  id="promotionEdit-sort"
+                  :disabled="isDisabled"
+                  allowClear
+                  placeholder="请输入轮播图排序数字(数字越大越靠后)"
+                  v-model="form.sort"
+                  :min="0"
+                  :max="99999999"/>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+              <a-form-model-item label="参与经销商" prop="imageSet">
+                <a-row :gutter="15">
+                  <a-col :md="10" :sm="24">
+                    <a-select
+                      style="width:98%;"
+                      id="promotionList-dealerScope"
+                      v-model="form.dealerScope"
+                      placeholder="请选择参与经销商"
+                      @change="changeDealerScope"
+                      allowClear>
+                      <a-select-option id="promotionList-dealerScope-all" value="ALL_DEALER">全部客户</a-select-option>
+                      <a-select-option id="promotionList-dealerScope-some" value="SOME_DEALER">部分客户</a-select-option>
+                    </a-select>
+                  </a-col>
+                  <a-col :md="2" :sm="24" v-show="form.dealerScope && form.dealerScope!='ALL_DEALER' ">
+                    <a-button id="promotionList-basicInfo-dealerScope" type="primary" :loading="spinning" @click="handleDealerModal">选择</a-button>
+                  </a-col>
+                  <a-col :md="5" :sm="24" v-show="chooseDealerList && chooseDealerList.length>0">
+                    已{{ chooseDealerList.length }}选项
+                  </a-col>
+                  <a-col :md="24" :sm="24" v-show="chooseDealerList && chooseDealerList.length>0">
+                    <div class="buyerBox">
+                      <a-tag closable v-for="con in chooseDealerList" id="promotionList-dealerSn" :key="con.dealerSn" @close="delBuyerName(con)">
+                        {{ con.dealerName }}
+                      </a-tag>
+                    </div>
+                  </a-col>
+                </a-row>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+              <a-form-model-item label="封面图片" prop="imageSet">
+                <Upload
+                  class="upload"
+                  id="promotionEdit-imageSet"
+                  v-model="form.imageSet"
+                  ref="imageSet"
+                  :fileSize="10"
+                  :maxNums="1"
+                  @change="changeImage"
+                  listType="picture-card"></Upload>
+                <span class="upload-desc">说明:单张大小小于10Mb;建议尺寸:宽(420px)*高(230px)</span>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+              <a-form-model-item label="内容类型" prop="contentType">
+                <v-select
+                  v-model="form.contentType"
+                  id="promotion-contentType"
+                  code="PROMO_CONTENT_TYPE"
+                  showType="radio"
+                  :disabled="isDisabled"
+                  @change="changeContentType"
+                  allowClear></v-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+              <a-form-model-item label="内容" prop="content" v-show="form.contentType =='IMAGE_CONTENT'">
+                <editor
+                  v-show="pageType === 'add'||(pageType === 'edit'&&!isDisabled)"
+                  id="promotionEdit-editor"
+                  ref="editor"
+                  class="promotionEdit-editor"
+                  @on-change="editorChange"
+                  :cache="false"></editor>
+                <div v-if="(pageType === 'edit')&&isDisabled" class="box" v-html="form.content"></div>
+              </a-form-model-item>
+              <a-form-model-item label="上传视频" prop="content" v-show="form.contentType =='VIDEO'">
+                <Upload
+                  v-if="pageType==='add'||(pageType==='edit'&&!isDisabled)"
+                  class="upload"
+                  id="promotionEdit-videoSet"
+                  v-model="form.content"
+                  fileType="video/mp4"
+                  ref="videoSet"
+                  :fileSize="100"
+                  :maxNums="1"
+                  @change="changeVideo"
+                ></Upload>
+                <div v-else>
+                  <video
+                    ref="videoPlayer"
+                    width="230"
+                    height="150"
+                    controls
+                    loop
+                    controlsList="nodownload">
+                    <source :src="form.content" type="video/mp4">
+                  </video>
+                </div>
+                <span class="upload-desc">说明:文件最大100M;视频:mp4.avi.flv</span>
+              </a-form-model-item>
+              <a-form-model-item label="跳转链接" prop="contentLink" v-if="form.contentType =='LINK'">
+                <a-input
+                  style="width:50%;"
+                  :disabled="form.linkType==='1'||(pageType==='edit'&&isDisabled)"
+                  id="promotionEdit-contentLink"
+                  :maxLength="100"
+                  v-model.trim="form.contentLink"
+                  placeholder="请输入跳转链接"
+                  @blur="handleLink"
+                  allowClear />
+                <a-select
+                  id="promotionEdit-linkType"
+                  :disabled="isDisabled"
+                  default-value="货架促销"
+                  @change="handleLinkType"
+                  style="width: 120px;margin-left:10px;"
+                  v-model="form.linkType">
+                  <a-select-option value="1">
+                    货架促销
+                  </a-select-option>
+                  <a-select-option value="2">
+                    其他
+                  </a-select-option>
+                </a-select>
+                <!-- <span class="tip upload-desc">
+                  选择【货架促销】,促销内容会同步显示在促销模块内
+                </span> -->
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+        </a-form-model>
+      </a-card>
+    </a-spin>
+    <div class="affix-cont">
+      <a-button
+        type="primary"
+        class="button-primary"
+        :disabled="spinning"
+        id="productInfoEdit-submit-btn"
+        size="large"
+        @click="handleSave('all')"
+        v-if="form.contentType !='LINK'|| isShowNextStep ||(form.contentType ==='LINK'&&form.linkType ==='2')"
+        style="padding: 0 60px;">保存</a-button>
+    </div>
+    <!-- 添加产品 -->
+    <chooseProduct
+      ref="chooseProduct"
+      :chooseType="chooseTypeList"
+      :itemSn="$route.params.sn"
+      :openModal="showProModal"
+      @ok="addProductSuccess"
+      @close="closeProductModal"></chooseProduct>
+  </div>
+</template>
+
+<script>
+import { commonMixin } from '@/utils/mixin'
+import moment from 'moment'
+// 组件
+import { VSelect, Upload } from '@/components'
+import Editor from '@/components/WEeditor'
+// import promotionShowModal from './promotionShowModal'
+// import productTable from './productTable'
+// import chooseProduct from './chooseProductsModal.vue'
+// 接口
+import { productTypeQuery } from '@/api/productType'
+import { promoActivePublish, promoActiveDetail, saveBatchEntity, promoCreateBatch, deleteByProductType } from '@/api/promoActive'
+export default {
+  name: 'ProductBrandEditModal',
+  mixins: [commonMixin],
+  components: { VSelect, Upload, Editor },
+  data () {
+    return {
+      spinning: false,
+      // 表单 label 设置
+      formItemLayout: {
+        labelCol: { span: 2 },
+        wrapperCol: { span: 20 }
+      },
+      productRangeList: [], // 产品范围列表
+      chooseDealerList: [],
+      // 链接配置内容
+      form: {
+        promoActiveSn: undefined, // 促销活动sn
+        title: '', // 标题
+        imageSet: '', // 图片
+        contentType: 'IMAGE_CONTENT', // 内容类型
+        content: '', // 内容
+        contentLink: '', // 链接内容
+        sort: undefined, // 排序
+        publishFlag: '0', // 是否发布
+        linkType: '1',
+        dealerEditFlag: '0', // 加盟商编辑 1是 0否
+        promoRule: {
+          ruleType: 'ticket', // 基本规则类型
+          ruleName: '', // 券名称
+          ruleTitle: '', // 副标题
+          ruleBaseType: 'category', // 券生成方式
+          ruleExplain: '', // 使用说明
+          validType: undefined, // 券有效期类型
+          validStartDate: undefined, // 券生效时间
+          validEndDate: undefined, // 券失效时间
+          validDays: undefined, // 券有效期天数
+          dealerEditFlag: '0', // 加盟商编辑 1是 0否
+          publishFlag: '0', // 是否发布
+          range: '1'
+        }
+      },
+      time: [], // 有效期
+      dateFormat: 'YYYY-MM-DD', // 有效期时间格式
+      promotionName: '', // 促销名称
+      pageType: undefined, // 页面类型
+      showProModal: false, // 打开产品弹窗
+      isShowNextStep: false, // 是否显示下一步 并提交一半配置产品
+      isDisabled: false, // 控制页面是否能编辑
+      chooseTypeList: [], // 已选中产品范围
+      imageSet: [], // 回显显示图片数据
+      productTypeList: [], // 产品范围    列表数据
+      // 表单验证规则
+      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' }],
+        'promoRule.ruleType': [{ required: true, message: '请选择基本规则', trigger: 'change' }],
+        'promoRule.ruleName': [{ required: true, message: '请输入券名称', trigger: ['change', 'blur'] }],
+        'promoRule.ruleBaseType': [{ required: true, message: '请选择生成方式', trigger: 'change' }],
+        'promoRule.validType': [{ required: true, message: '请选择券有效期类型', trigger: 'change' }],
+        'promoRule.publishFlag': [{ required: true, message: '请选择是否发布', trigger: 'change' }],
+        'promoRule.dealerEditFlag': [{ required: true, message: '请选择加盟商是否可编辑', trigger: 'change' }],
+        'promoRule.range': [{ required: true, message: '请选择', trigger: 'blur' }],
+        dealerEditFlag: [{ required: true, message: '请选择加盟商是否可编辑', trigger: 'change' }]
+      }
+    }
+  },
+  methods: {
+    // 禁用日期时间
+    disabledDate (current) {
+      return current && current < moment().startOf('day')
+    },
+    // 券有效期时间
+    dateChange (date, dateString) {
+      this.time = date
+      if (dateString[0] != '' && dateString[1] != '') {
+        this.form.promoRule.validStartDate = dateString[0] + ' 00:00:00'
+        this.form.promoRule.validEndDate = dateString[1] + ' 23:59:59'
+      }
+    },
+    // 打开产品弹窗
+    insterProduct (obj) {
+      if (obj && Object.keys(obj).length > 0) {
+        this.chooseTypeList = obj.typeArr
+      }
+      this.showProModal = true
+    },
+    // 关闭产品弹窗
+    closeProductModal () {
+      this.showProModal = false
+    },
+    // 返回列表
+    handleBack () {
+      this.$router.push({ name: 'carouselImageList', query: { closeLastOldTab: true } })
+    },
+    //  详情  挨个赋值原因:该接口和修理厂促销列表详情用的同一个接口,给后端传值过滤多余参数
+    getDetail () {
+      const _this = this
+      promoActiveDetail({ sn: this.$route.params.sn }).then(res => {
+        if (res.status == 200) {
+          // 编辑按钮时,publishState 已发布,只能编辑是否发布;publishState已关闭,都可以编辑
+          if (_this.pageType === 'edit') {
+            _this.isDisabled = res.data.publishState === 'PUBLISH'
+            _this.form.promoRule.publishFlag = res.data.publishFlag
+            _this.form.promoRule.dealerEditFlag = res.data.dealerEditFlag
+          }
+          _this.form.publishFlag = res.data.publishFlag
+          _this.form.dealerEditFlag = res.data.dealerEditFlag
+          _this.form.promoActiveSn = res.data.promoActiveSn
+          _this.form.title = res.data.title
+          _this.form.contentType = res.data.contentType
+          _this.form.sort = res.data.sort
+          _this.imageSet = res.data.imageSet
+          if (res.data.imageSet) {
+            const images = res.data.imageSet.join(',')
+            _this.form.imageSet = images
+            if (this.pageType === 'add' || (this.pageType === 'edit' && res.data.publishState != 'PUBLISH')) {
+              _this.$refs.imageSet.setFileList(images)
+            }
+          }
+          _this.form.content = res.data.content
+          _this.promotionName = res.data.name || ''
+          _this.form.dealerEditFlag = res.data.dealerEditFlag
+          if (res.data.contentType == 'IMAGE_CONTENT') {
+            _this.$refs.editor.setHtml(res.data.content)
+          } else if (res.data.contentType == 'VIDEO') {
+            if (res.data.publishState != 'PUBLISH') {
+              _this.$refs.videoSet.setFileList(res.data.content)
+            }
+          } else if (res.data.contentType == 'LINK') {
+            _this.form.contentLink = res.data.content
+            _this.form.linkType = res.data.content != '/pagesB/promoDetail' ? '2' : '1'
+            if (res.data.promoRule) {
+              _this.isShowNextStep = true
+              _this.form.promoRule.range = '1'
+              _this.time = [res.data.promoRule.validStartDate, res.data.promoRule.validEndDate]
+              if (res.data.promoRule.productRangeList && res.data.promoRule.productRangeList.length > 0) {
+                _this.productRangeList = res.data.promoRule.productRangeList.map(item => { return item.productTypeSn })
+              }
+            }
+            _this.form.promoRule = { ..._this.form.promoRule, ...res.data.promoRule }
+          }
+        }
+      })
+    },
+    // 券有效期 change
+    handleValidType (con) {
+      this.form.promoRule.validType = con
+      if (con === 'FIXED') {
+        this.form.promoRule.validDays = undefined
+      } else {
+        this.time = []
+        this.form.promoRule.validStartDate = undefined
+        this.form.promoRule.validEndDate = undefined
+      }
+    },
+    //  确定保存  验证必填
+    handleSave (type) {
+      const _this = this
+      if (_this.form.contentType === 'LINK') {
+        _this.form.content = _this.form.contentLink
+      }
+      // 验证组件必填项
+      _this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          _this.savePartInfo(type)
+        }
+      })
+    },
+    // 保存
+    savePartInfo (type) {
+      const _this = this
+      _this.form.promoActiveSn = this.$route.params.sn
+      var formData = JSON.parse(JSON.stringify(_this.form))
+      formData.imageSet = formData.imageSet ? formData.imageSet.split(',') : []
+      // 跳转链接
+      if (formData.contentType == 'LINK') {
+        delete formData.contentLink
+        if (_this.productRangeList && _this.productRangeList.length > 0) {
+          formData.promoRule.productRangeList = _this.productRangeList.map(item => { return { productTypeSn: item } })
+        }
+        // 促销活动
+        if (_this.form.linkType === '1') {
+          if (_this.form.promoRule.validType === 'FIXED') {
+            if (!_this.form.promoRule.validStartDate || _this.form.promoRule.validStartDate.validEndDate) {
+              _this.$message.warning('请输入券有效期!')
+              return false
+            }
+          } else {
+            if (!_this.form.promoRule.validDays) {
+              _this.$message.warning('请输入券有效期!')
+              return false
+            }
+          }
+          formData.publishFlag = _this.form.promoRule.publishFlag
+          formData.dealerEditFlag = _this.form.promoRule.dealerEditFlag
+        } else {
+          formData.promoRule = undefined
+        }
+        if (_this.$refs.chooseProductList) {
+          const numInfo = _this.$refs.chooseProductList.getDataNum()
+          if (numInfo == 0) {
+            _this.$message.warning('请选择返券产品!')
+            return
+          }
+        }
+      } else {
+        formData.promoRule = undefined
+      }
+      _this.spinning = true
+
+      promoActivePublish(formData).then(res => {
+        if (res.status == 200) {
+          _this.$message.success(res.message)
+          if (type === 'all') {
+            _this.$nextTick(() => {
+              _this.handleBack()
+              _this.resetSearchForm()
+            })
+          } else {
+            _this.isShowNextStep = true
+            _this.getDetail()
+          }
+          _this.spinning = false
+        } else {
+          _this.spinning = false
+        }
+      })
+    },
+    //  图片上传
+    changeImage (file) {
+      this.form.imageSet = file
+    },
+    // 视频上传
+    changeVideo (file) {
+      this.form.content = file
+    },
+    //  文本编辑器
+    editorChange (html, text) {
+      this.form.content = html
+    },
+    // 重置
+    resetSearchForm () {
+      if (this.pageType == 'add' || (this.pageType == 'edit' && !this.isDisabled)) {
+        if (this.$refs.imageSet) {
+          this.$refs.imageSet.setFileList('')
+        }
+        if (this.$refs.videoSet) {
+          this.$refs.videoSet.setFileList('')
+        }
+      }
+      if (this.$refs.editor) {
+        this.$refs.editor.setHtml('')
+      }
+      this.form = {
+        promoActiveSn: undefined, // 促销活动sn
+        title: '', // 标题
+        imageSet: '', // 图片
+        contentType: 'IMAGE_CONTENT', // 内容类型
+        content: '', // 内容
+        contentLink: '', // 链接内容
+        sort: undefined, // 排序
+        publishFlag: '0', // 是否发布
+        linkType: '1',
+        dealerEditFlag: '0', // 加盟商编辑 1是 0否
+        productRangeList: [], // 产品范围列表
+        promoRule: {
+          ruleType: 'ticket', // 基本规则类型
+          ruleName: '', // 券名称
+          ruleTitle: '', // 副标题
+          ruleBaseType: 'category', // 券生成方式
+          ruleExplain: '', // 使用说明
+          validType: undefined, // 券有效期类型
+          validStartDate: undefined, // 券生效时间
+          validEndDate: undefined, // 券失效时间
+          validDays: undefined, // 券有效期天数
+          dealerEditFlag: '0', // 加盟商编辑 1是 0否
+          publishFlag: '0', // 是否发布
+          range: '1'
+        } // 链接配置内容
+      }
+      this.isShowNextStep = false
+      this.isDisabled = false
+      if (this.$refs.ruleForm) {
+        this.$refs.ruleForm.resetFields()
+      }
+      if (this.$refs.ruleForm) {
+        this.$refs.ruleForm.resetFields()
+      }
+    },
+    // 获取产品范围数据
+    getTreeData () {
+      productTypeQuery({}).then(res => {
+        if (res.status == 200) {
+          this.productTypeList = res.data
+        } else {
+          this.productTypeList = []
+        }
+      })
+    },
+    // 选择内容类型
+    changeContentType (e) {
+      if (e === 'LINK') {
+        this.form.linkType = '1'
+        this.form.contentLink = '/pagesB/promoDetail'
+        this.form.content = '/pagesB/promoDetail'
+      } else {
+        this.form.linkType = undefined
+        this.form.contentLink = ''
+        this.form.content = ''
+      }
+      this.form.contentType = e
+    },
+    // 填入link内容
+    handleLink (con) {
+      if (!con.target.value || con.target.value != '/pagesB/promoDetail') {
+        this.form.linkType = '2'
+      } else {
+        this.form.linkType = '1'
+      }
+      this.form.contentLink = con.target.value
+    },
+    // 选择货架促销填入默认值
+    handleLinkType (val) {
+      this.form.contentLink = val === '2' ? '' : '/pagesB/promoDetail'
+    },
+    // 添加产品
+    handleAddProduct () {
+      this.chooseTypeList = this.productRangeList
+      this.showProModal = true
+    },
+    // 批量添加
+    handleBatchAdd () {
+      if (!this.form.promoRule.ruleValue) {
+        this.$message.warning('请输入返券金额(需大于0)!')
+        return
+      }
+      this.$refs.chooseProductList.editMorePrice(this.form.promoRule.ruleValue)
+    },
+    // 添加产品成功
+    addProductSuccess (list) {
+      const productArr = list.map(item => {
+        return {
+          promoActiveSn: this.$route.params.sn,
+          promoRuleSn: this.form.promoRule.promoRuleSn,
+          productCode: item.code,
+          productSn: item.productSn,
+          ruleValue: this.form.promoRule.ruleValue,
+          price: item.terminalPrice
+        }
+      })
+      promoCreateBatch(productArr).then(res => {
+        if (res.status == 200) {
+          this.showProModal = false
+          // 获取产品列表 有分页
+          this.$refs.chooseProductList.pageInit()
+        }
+      })
+    },
+    // 选择产品范围
+    onChangeTree (e) {
+      deleteByProductType({ promoActiveSn: this.$route.params.sn, productTypeSnList: this.productRangeList || [] }).then(res => {
+        if (res.status == 200) {
+          this.$refs.chooseProductList.pageInit()
+        }
+      })
+      // 保存产品范围
+      const newArr = this.productRangeList.map(item => {
+        return {
+          promoActiveSn: this.$route.params.sn,
+          promoRuleSn: this.form.promoRule.promoRuleSn,
+          productTypeSn: item
+        }
+      })
+      saveBatchEntity({ list: newArr, promoActiveSn: this.$route.params.sn }).then(res => {
+        if (res.status == 200) {
+          console.log('保存产品范围成功')
+        }
+      })
+    },
+    // 初始化
+    pageInit () {
+      this.pageType = this.$route.params.pageType
+      if (this.pageType === 'edit') {
+        this.getDetail()
+      }
+      console.log('加载产品范围')
+      this.$nextTick(() => {
+        this.getTreeData()
+      })
+    }
+  },
+  mounted () {
+    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
+      this.pageInit()
+    }
+  },
+  activated () {
+    // 如果是新页签打开,则重置当前页面
+    if (this.$store.state.app.isNewTab) {
+      this.pageInit()
+    }
+    // 仅刷新列表,不重置页面
+    if (this.$store.state.app.updateList) {
+      this.pageInit()
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {})
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.promotionEdit-wrap{
+    position: relative;
+    height: 100%;
+    box-sizing: border-box;
+    padding-bottom:51px;
+    >.ant-spin-nested-loading{
+      overflow-y: scroll;
+      height: 100%;
+    }
+    /deep/.ant-form-item{
+      margin-bottom:8px;
+    }
+    .promotionEdit-cont{
+      margin-bottom: 10px;
+    }
+    .upload{
+      width: 100%!important;
+    }
+    //  文本编辑器  工具栏样式换行
+    .promotionEdit-editor{
+      .w-e-toolbar{
+        flex-wrap: wrap;
+        z-index: 0;
+      }
+    }
+    .buyerBox{
+      border:1px solid #d9d9d9;
+      margin-top:10px;
+      border-radius:4px;padding:4px 10px;
+      background:#f2f2f2;max-height:130px;
+      overflow-y:scroll;
+    }
+    //  商品图片描述
+    .upload-desc{
+      font-size: 12px;
+      color: #808695;
+    }
+    #promotionEdit-attachList{
+      height: auto;
+    }
+    .box{
+      border:1px solid #d9d9d9;
+      border-radius:4px;
+      padding:4px 11px;
+      color:rgba(0, 0, 0, 0.25);
+      cursor: not-allowed;
+      background:#fdfdfd;
+    }
+    .affix{
+      .ant-affix{
+        z-index: 101;
+        display:inline-block
+      }
+    }
+    /deep/.ant-radio-disabled + span{
+     color:#000!important;
+    }
+    .tip{
+      margin-left:10px;
+    }
+
+    .productInfo{
+      display:flex;
+      justify-content: space-between;
+    }
+    #setPromotion-productRange{
+      /deep/.ant-select-dropdown{
+        max-height:30vh !important;
+      }
+    }
+  }
+</style>

+ 356 - 0
src/views/easyPassManagement/homepageCarouselImg/list.vue

@@ -0,0 +1,356 @@
+<template>
+  <div>
+    <a-card size="small" :bordered="false" class="promotion-wrap searchBoxNormal">
+      <!-- 搜索条件 -->
+      <div ref="tableSearch" class="table-page-search-wrapper">
+        <a-form layout="inline" id="promotion-form" @keyup.enter.native="$refs.table.refresh(true)">
+          <a-row :gutter="15">
+            <a-col :md="6" :sm="24">
+              <a-form-item label="创建时间">
+                <rangeDate id="promotion-createDate" ref="rangeCreateDate" :value="createDate" @change="dateCreateChange" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-form-item label="轮播图名称">
+                <a-input id="promotion-promotionName" v-model.trim="queryParam.name" allowClear placeholder="请输入轮播图名称"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-form-item label="轮播图状态">
+                <v-select
+                  v-model="queryParam.publishState"
+                  ref="publishState"
+                  id="promotion-publishState"
+                  code="PROMO_STATE"
+                  placeholder="请选择轮播图状态"
+                  allowClear></v-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <span class="table-page-search-submitButtons">
+                <a-button type="primary" :disabled="disabled" id="promotion-refresh" @click="$refs.table.refresh(true)">查询</a-button>
+                <a-button style="margin-left: 8px" :disabled="disabled" id="promotion-reset" @click="resetSearchForm()">重置</a-button>
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+    </a-card>
+    <!-- 列表 -->
+    <a-card size="small" :bordered="false">
+      <a-spin :spinning="spinning" tip="Loading...">
+        <!-- 操作按钮 -->
+        <div class="table-operator" v-if="$hasPermissions('B_promotionManagementAdd')">
+          <a-button type="primary" id="promotion-add-btn" @click="openAddModal = true">新增</a-button>
+        </div>
+        <s-table
+          class="sTable fixPagination"
+          ref="table"
+          :style="{ height: tableHeight+70+'px' }"
+          size="small"
+          :rowKey="(record) => record.id"
+          :columns="columns"
+          :data="loadData"
+          :scroll="{ y: tableHeight }"
+          :defaultLoadData="false"
+          bordered>
+          <!-- 促销状态 -->
+          <template slot="stateVal" slot-scope="text, record">
+            <span>{{ record.publishState==='UNPUBLISH'?'未发布':record.publishState==='PUBLISH'?'已发布':record.publishState==='CLOSE'?'已关闭':'已结束' }}</span>
+          </template>
+          <!-- 促销时间 -->
+          <template slot="promotionTime" slot-scope="text, record">
+            <span>{{ record.activeDateStart }}至{{ record.activeDateEnd }}</span>
+          </template>
+          <!-- 参与客户 -->
+          <template slot="joinCustomers" slot-scope="text, record">
+            <span @click="handleCustomers(record)" :id="'promotion-seeDealerInfo-'+record.id" v-if="record.dealerSnList&&record.dealerSnList.length>0">共有<span class="link-bule">{{ record.dealerSnList.length }}</span>个客户</span>
+            <span v-else>共有0个客户</span>
+          </template>
+          <!-- 促销描述 -->
+          <template slot="salesDesc" slot-scope="text, record">
+            <a-tooltip placement="rightBottom" v-if="record.description&&record.description.length>14">
+              <template slot="title">
+                <span>{{ record.description }}</span>
+              </template>
+              <div @click="promotionDesc(record)" :id="'promotion-description-'+record.id" class="link-bule">{{ record.description }}</div>
+            </a-tooltip>
+            <div v-else-if="!record.description" class="desc">--</div>
+            <div v-else @click="promotionDesc(record)" :id="'promotion-description-'+record.id" class="link-bule">{{ record.description }}</div>
+          </template>
+          <!-- 促销展示 -->
+          <template slot="salesShow" slot-scope="text, record">
+            <div @click="handleSaleShow(record)" :id="'promotion-seeImgInfo-'+record.id" v-if="record.contentType!='LINK'&&record.imageSet && record.imageSet.length>0">
+              <img :src="record.imageSet[0]" alt="图片走丢啦" width="60" />
+            </div>
+            <div v-else-if="record.contentType=='LINK'&&record.imageSet && record.imageSet.length>0">
+              <img :src="record.imageSet[0]" alt="图片走丢啦" width="60" />
+            </div>
+            <span v-else>--</span>
+          </template>
+          <!-- 操作 -->
+          <!-- state状态 END已结束    CLOSE已关闭    PUBLISH  已发布    UNPUBLISH  未发布 -->
+          <template slot="action" slot-scope="text, record">
+            <div>
+              <a-button
+                size="small"
+                type="link"
+                class="button-warning"
+                :id="'promotion-edit-btn-'+record.id"
+                @click="promotionEdit(record)"
+                v-if="(record.publishState=='UNPUBLISH' || record.publishState=='CLOSE') && $hasPermissions('B_promotionManagementEdit')">编辑</a-button>
+              <a-button
+                size="small"
+                type="link"
+                class="button-warning"
+                :id="'promotion-modify-btn-'+record.id"
+                @click="handleRelease(record,'edit')"
+                v-if="((record.publishState=='PUBLISH'&&record.content!='/pagesB/promoDetail')||(record.publishState=='PUBLISH'&&record.content==='/pagesB/promoDetail'&&record.dealerEditFlag==='0') || record.publishState=='CLOSE')&&$hasPermissions('B_promotionManagementContent')">发布修改</a-button>
+              <a-button
+                size="small"
+                type="link"
+                class="button-success"
+                @click="handleSee(record)"
+                v-if="(record.publishState=='PUBLISH' || record.publishState=='END')&&$hasPermissions('B_promotionManagementDetail')"
+                :id="'promotion-seeDetail-btn-'+record.id">查看</a-button>
+              <a-button
+                size="small"
+                type="link"
+                class="button-info"
+                @click="handleRelease(record,'add')"
+                v-if="record.publishState=='UNPUBLISH'&&$hasPermissions('B_promotionManagementContent')"
+                :id="'promotion-release-btn-'+record.id">发布</a-button>
+              <a-button
+                size="small"
+                type="link"
+                class="button-error"
+                v-if="record.publishState=='UNPUBLISH'&&$hasPermissions('B_promotionManagementDel')"
+                @click="handleDel(record)"
+                :id="'promotion-del-btn-'+record.id">删除</a-button>
+            </div>
+          </template>
+        </s-table>
+      </a-spin>
+      <!-- 参与客户 -->
+      <lookUp-customers-modal ref="lookUpCustomers" :openModal="openCustomerModal" @close="openCustomerModal = false"></lookUp-customers-modal>
+      <!-- 促销描述 -->
+      <promotion-desc-modal :openModal="openDescModal" :con="descCon" @close="openDescModal = false;descCon=''"></promotion-desc-modal>
+      <!-- 促销展示 -->
+      <promotion-show-modal ref="showModal" :openModal="openShowModal" @close="openShowModal = false"></promotion-show-modal>
+      <!-- 新增 -->
+      <addModal :openModal="openAddModal" :itemId="itemId" @close="closeAddModal" @ok="$refs.table.refresh()"></addModal>
+      <!-- 查看 -->
+      <detail-Modal :openModal="openDetailModal" :itemSn="itemId" @close="closeDetailModal" @ok="$refs.table.refresh()" />
+    </a-card>
+  </div>
+</template>
+
+<script>
+import { commonMixin } from '@/utils/mixin'
+// 组件
+import { STable, VSelect } from '@/components'
+import rangeDate from '@/views/common/rangeDate.vue'
+// import lookUpCustomersModal from './lookUpCustomersModal'
+// import promotionDescModal from './promotionDescModal'
+// import promotionShowModal from './promotionShowModal'
+// import addModal from './addModal'
+// import detailModal from './detailModal'
+// 接口
+import { promoActiveList, promoActiveDel } from '@/api/promoActive'
+export default {
+  name: 'PromotionList',
+  mixins: [commonMixin],
+  components: { STable, VSelect, rangeDate },
+  data () {
+    return {
+      spinning: false,
+      tableHeight: 0, // 表格高度
+      disabled: false, //  查询、重置按钮是否可操作
+      openCustomerModal: false, // 打开参与客户弹窗
+      openDescModal: false, // 打开促销描述弹窗
+      openShowModal: false, // 打开促销展示弹窗
+      openAddModal: false, // 打开新增弹窗
+      openDetailModal: false, // 打开详情弹窗
+      createDate: [], //  创建时间
+      itemId: '', // 当前活动sn
+      descCon: '', // 描述内容
+      pageType: '', // 发布类型  add  促销发布  edit 发布修改
+      dealerSn: [], // 经销商sn
+      // 查询参数
+      queryParam: {
+        beginDate: undefined, // 促销开始时间
+        endDate: undefined, // 促销结束时间
+        name: '', // 促销名称
+        publishState: undefined// 是否发布
+      },
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.disabled = true
+        this.spinning = true
+        const params = Object.assign(parameter, this.queryParam)
+        return promoActiveList(params).then(res => {
+          let data
+          if (res.status == 200) {
+            data = res.data
+            const no = (data.pageNo - 1) * data.pageSize
+            for (var i = 0; i < data.list.length; i++) {
+              data.list[i].no = no + i + 1
+            }
+            this.disabled = false
+          }
+          this.spinning = false
+          return data
+        })
+      },
+      columns: [// 表头
+        { title: '序号', dataIndex: 'no', width: '4%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '创建时间', dataIndex: 'createDate', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '轮播图名称', dataIndex: 'name', width: '12%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '轮播时间', scopedSlots: { customRender: 'promotionTime' }, width: '12%', align: 'center' },
+        { title: '参与经销商', scopedSlots: { customRender: 'joinCustomers' }, width: '10%', align: 'center' },
+        { title: '封面展示', scopedSlots: { customRender: 'salesShow' }, width: '6%', align: 'center' },
+        // { slots: { title: 'arrowFalgTitle' }, scopedSlots: { customRender: 'arrowFalg' }, width: '6%', align: 'center' },
+        { title: '轮播图状态', scopedSlots: { customRender: 'stateVal' }, width: '6%', align: 'center' },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: '10%', align: 'center' }
+      ]
+    }
+  },
+  methods: {
+    // 关闭添加促销活动弹窗
+    closeAddModal () {
+      this.openAddModal = false; this.itemId = ''
+    },
+    // 参与经销商
+    handleCustomers (row) {
+      this.openCustomerModal = true
+      this.$nextTick(() => {
+        this.$refs.lookUpCustomers.pageInit({ dealerSnList: row.dealerSnList ? row.dealerSnList : undefined, promoActiveSn: row.promoActiveSn })
+      })
+    },
+    //  创建时间  change
+    dateCreateChange (date) {
+      this.queryParam.beginDate = date[0]
+      this.queryParam.endDate = date[1]
+    },
+    // 促销展示
+    handleSaleShow (record) {
+      this.openShowModal = true
+      this.$nextTick(() => {
+        this.$refs.showModal.pageInit({ type: record.contentType, con: record.content })
+      })
+    },
+    // 促销编辑
+    promotionEdit (item) {
+      this.itemId = item.promoActiveSn
+      this.$nextTick(() => {
+        this.openAddModal = true
+      })
+    },
+    // 促销描述
+    promotionDesc (row) {
+      this.descCon = row.description
+      this.$nextTick(() => {
+        this.openDescModal = true
+      })
+    },
+    // 删除促销活动
+    handleDel (row) {
+      const _this = this
+      this.$confirm({
+        title: '提示',
+        content: '点击确定,该内容将会被删除,不可再恢复!',
+        centered: true,
+        onOk () {
+          _this.spinning = true
+          promoActiveDel({ sn: row.promoActiveSn }).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$refs.table.refresh()
+              _this.spinning = false
+            } else {
+              _this.spinning = false
+            }
+          })
+        }
+      })
+    },
+    // 重置
+    resetSearchForm () {
+      this.$refs.rangeCreateDate.resetDate(this.createDate)
+      this.queryParam.beginDate = undefined
+      this.queryParam.endDate = undefined
+      this.queryParam.name = ''
+      this.queryParam.publishState = undefined
+      this.$refs.table.refresh(true)
+    },
+    // 促销发布
+    handleRelease (row, type) {
+      const newType = row.imageSet && row.imageSet.length > 0 ? 'edit' : type
+      this.$router.push({ name: 'carouselImageAdd', params: { sn: row.promoActiveSn, pageType: newType } })
+    },
+    // 打开详情
+    handleSee (row) {
+      this.openDetailModal = true
+      this.itemId = row.promoActiveSn
+    },
+    // 关闭详情
+    closeDetailModal () {
+      this.openDetailModal = false
+      this.itemId = ''
+    },
+    // 初始化
+    pageInit () {
+      const _this = this
+      this.$nextTick(() => { // 页面渲染完成后的回调
+        _this.setTableH()
+      })
+    },
+    // 计算表格高度
+    setTableH () {
+      const tableSearchH = this.$refs.tableSearch.offsetHeight
+      this.tableHeight = window.innerHeight - tableSearchH - 240
+    }
+  },
+  watch: {
+    '$store.state.app.winHeight' (newValue, oldValue) { //  窗口变更时,需同时更改表格高度
+      this.setTableH()
+    }
+  },
+  mounted () {
+    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
+      this.pageInit()
+      this.resetSearchForm()
+    }
+  },
+  activated () {
+    // 如果是新页签打开,则重置当前页面
+    if (this.$store.state.app.isNewTab) {
+      this.pageInit()
+      this.resetSearchForm()
+    }
+    // 仅刷新列表,不重置页面
+    if (this.$store.state.app.updateList) {
+      this.pageInit()
+      this.$refs.table.refresh()
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {})
+  }
+}
+</script>
+<style lang="less" scoped>
+  .font1{
+   color:#39f;
+  }
+  .desc{
+    width: 100%;
+    padding:0 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    box-sizing: border-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+</style>

+ 134 - 16
src/views/easyPassManagement/promotionalActivities/edit.vue

@@ -59,7 +59,13 @@
               <a-form-model-item label="参与经销商" prop="contentType">
                 <a-row :gutter="15">
                   <a-col :md="10" :sm="24">
-                    <a-select id="promotionList-dealerScope" v-model="form.dealerScope" placeholder="请选择参与经销商" @change="changeDealerScope" allowClear>
+                    <a-select
+                      style="width:98%;"
+                      id="promotionList-dealerScope"
+                      v-model="form.dealerScope"
+                      placeholder="请选择参与经销商"
+                      @change="changeDealerScope"
+                      allowClear>
                       <a-select-option id="promotionList-dealerScope-all" value="ALL_DEALER">全部经销商</a-select-option>
                       <a-select-option id="promotionList-dealerScope-some" value="SOME_DEALER">部分经销商</a-select-option>
                     </a-select>
@@ -123,18 +129,95 @@
                   allowClear></v-select>
               </a-form-model-item>
             </a-col>
-            <a-col
-              :xs="24"
-              :sm="24"
-              :md="24"
-              :lg="24"
-              :xl="24"
-              v-if="!isShowNextStep">
-              <div style="text-align:center;"><a-button type="primary" size="large" :disabled="isDisabled" @click="handleSave('part')" >保存后设置产品</a-button></div>
-            </a-col>
-            <div v-else>
+            <!-- 买产品送代金券 -->
+            <div>
+              <a-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
+                <a-form-model-item label="券名称" :label-col="{span:4}" :wrapper-col="{span:16}" prop="promoRule.ruleName">
+                  <a-input
+                    :disabled="isDisabled"
+                    id="promotionEdit-ruleName"
+                    :maxLength="20"
+                    v-model.trim="form.promoRule.ruleName"
+                    placeholder="请输入券名称(最多20个字符)"
+                    allowClear />
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
+                <a-form-model-item label="券副标题" :label-col="{span:4}" :wrapper-col="{span:16}">
+                  <a-input
+                    :disabled="isDisabled"
+                    id="promotionEdit-ruleTitle"
+                    :maxLength="20"
+                    v-model.trim="form.promoRule.ruleTitle"
+                    placeholder="请输入券副标题(最多20个字符)"
+                    allowClear />
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+                <a-form-model-item label="生成方式" prop="promoRule.ruleBaseType">
+                  <v-select
+                    style="width:40%;"
+                    v-model="form.promoRule.ruleBaseType"
+                    id="promotionEdit-ruleBaseType"
+                    code="PROMO_RULE_BASE_TYPE"
+                    :disabled="isDisabled"
+                    allowClear></v-select>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+                <a-form-model-item label="券有效期" prop="promoRule.validType">
+                  <v-select
+                    style="width:40%;"
+                    v-model="form.promoRule.validType"
+                    placeholder="请选择券有效期"
+                    id="promotionEdit-validType"
+                    code="PROMO_RULE_TICKET_TYPE"
+                    :disabled="isDisabled"
+                    @change="handleValidType"
+                    allowClear></v-select>
+                  <a-range-picker
+                    v-show="form.promoRule.validType==='FIXED'"
+                    style="width:40%;margin-left:10px;"
+                    v-model="time"
+                    :format="dateFormat"
+                    id="promotionEdit-time"
+                    @change="dateChange"
+                    :disabled="isDisabled"
+                    :disabled-date="disabledDate"
+                    :placeholder="['开始时间', '结束时间']" />
+                  <span style="width:40%;margin-left:10px;" v-show="form.promoRule.validType==='LIMIT'">
+                    有效期<a-input-number
+                      style="margin:0 5px;"
+                      v-model="form.promoRule.validDays"
+                      :step="1"
+                      id="promotionEdit-validDays"
+                      :max="99999999"
+                      :min="1"
+                      :disabled="isDisabled"
+                      :precision="0"/>天
+                  </span>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+                <a-form-model-item class="productName" label="券适用范围" prop="promoRule.range">
+                  全部产品
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+                <a-form-model-item label="使用说明" prop="promoRule.ruleExplain">
+                  <a-input
+                    v-model="form.promoRule.ruleExplain"
+                    :disabled="isDisabled"
+                    type="textarea"
+                    id="promotionEdit-ruleExplain"
+                    placeholder="请输入使用说明(最多50个字符)"
+                    :maxLength="50" />
+                </a-form-model-item>
+              </a-col>
+            </div>
+            <div v-if="isShowNextStep">
               <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-                <a-form-model-item :label="form.promotionRuleType=='BUY_PROD_GIVE_PROD'?'满赠规则':'优惠方式'" prop="promoRule.range">
+                <a-form-model-item :label="form.promotionRuleType=='BUY_PROD_GIVE_PROD'?'满赠规则':form.promotionRuleType=='PROMO_PROD'?'优惠方式':'返券产品'" prop="promoRule.range">
                   <div class="productInfo flex-center">
                     <!-- 买产品送产品 -->
                     <div v-if="form.promotionRuleType == 'BUY_PROD_GIVE_PROD'">
@@ -168,7 +251,23 @@
                     </div>
                     <!-- 特价产品 -->
                     <div v-if="form.promotionRuleType == 'PROMO_PROD'">
-                      同款产品买<a-input-number
+                      <a-select
+                        id="promotionList-discountType"
+                        default-value="0"
+                        v-model="form.discountType"
+                        placeholder="请选择"
+                        style="width:60%;"
+                        size="small"
+                        @change="handleDiscountType"
+                        allowClear>
+                        <a-select-option value="1" id="promotionList-discountType1">
+                          直降
+                        </a-select-option>
+                        <a-select-option value="2" id="promotionList-discountType2">
+                          打折
+                        </a-select-option>
+                      </a-select>{{ form.discountType==='1'? '直降':'折扣' }}
+                      <a-input-number
                         v-model="form.promoRule.ruleValue"
                         style="margin:0 5px;"
                         :min="0"
@@ -177,7 +276,18 @@
                         :max="99999999"
                         id="promotionEdit-ruleValue"
                         :disabled="isDisabled"
-                        size="small"/>赠
+                        size="small"/>{{ form.discountType==='1'? '元':'%' }}
+                      <a-button
+                        type="primary"
+                        id="promotionEdit-addSet-btn"
+                        :disabled="isDisabled"
+                        class="button-primary"
+                        size="small"
+                        @click="handleBatchAdd">批量设置</a-button>
+                    </div>
+                    <!-- 买产品返代金券 -->
+                    <div>
+                      返券金额
                       <a-input-number
                         v-model="form.promoRule.ruleValue"
                         style="margin:0 5px;"
@@ -187,7 +297,7 @@
                         :max="99999999"
                         id="promotionEdit-ruleValue"
                         :disabled="isDisabled"
-                        size="small"/>个(数量叠加)
+                        size="small"/>
                       <a-button
                         type="primary"
                         id="promotionEdit-addSet-btn"
@@ -220,6 +330,13 @@
         @click="handleSave('all')"
         v-if="isShowNextStep"
         style="padding: 0 60px;">保存</a-button>
+      <a-button
+        type="primary"
+        class="button-primary"
+        style="padding: 0 30px;"
+        size="large"
+        v-if="!isShowNextStep"
+        @click="handleSave('part')">保存后设置产品</a-button>
     </div>
     <!-- 添加产品 -->
     <chooseProduct
@@ -283,7 +400,8 @@ export default {
           dealerEditFlag: '0', // 加盟商编辑 1是 0否
           publishFlag: '0', // 是否发布
           range: '1'
-        }
+        },
+        promotionRuleType: 'other'
       },
       chooseDealerList: [], // 所选经销商数据
       time: [], // 有效期