|
@@ -1,17 +1,17 @@
|
|
|
<template>
|
|
|
- <div class="promotionEdit-wrap">
|
|
|
+ <div class="carouselImageEdit-wrap">
|
|
|
<a-spin :spinning="spinning" tip="Loading...">
|
|
|
- <a-page-header :ghost="false" :backIcon="false" class="promotionEdit-cont" >
|
|
|
+ <a-page-header :ghost="false" :backIcon="false" class="carouselImageEdit-cont" >
|
|
|
<!-- 自定义的二级文字标题 -->
|
|
|
<template slot="subTitle">
|
|
|
- <a id="promotionEdit-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" />返回列表</a>
|
|
|
+ <a id="carouselImageEdit-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" />返回列表</a>
|
|
|
<span v-if="$route.params.sn" style="margin: 0 10px 0 20px;color: #666;font-size: 14px;font-weight: 600;">促销名称:{{ form.bannerName||'--' }}</span>
|
|
|
</template>
|
|
|
</a-page-header>
|
|
|
<!-- 表单 -->
|
|
|
- <a-card :bordered="false" class="promotionEdit-cont">
|
|
|
+ <a-card :bordered="false" class="carouselImageEdit-cont">
|
|
|
<a-form-model
|
|
|
- id="promotionEdit-form"
|
|
|
+ id="carouselImageEdit-form"
|
|
|
ref="ruleForm"
|
|
|
:model="form"
|
|
|
:rules="rules"
|
|
@@ -22,8 +22,9 @@
|
|
|
<a-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
<a-form-model-item label="轮播图名称" prop="bannerName" :label-col="{span:4}" :wrapper-col="{span:16}">
|
|
|
<a-input
|
|
|
- id="promotionEdit-bannerName"
|
|
|
+ id="carouselImageEdit-bannerName"
|
|
|
:maxLength="30"
|
|
|
+ :disabled="isDisabled"
|
|
|
v-model.trim="form.bannerName"
|
|
|
placeholder="请输入轮播图名称(最多30个字符)"
|
|
|
allowClear/>
|
|
@@ -35,9 +36,9 @@
|
|
|
v-model="form.time"
|
|
|
style="width:100%"
|
|
|
:format="dateFormat"
|
|
|
- id="promotionEdit-time"
|
|
|
+ id="carouselImageEdit-time"
|
|
|
@change="dateChange"
|
|
|
- :disabled="$route.params.sn"
|
|
|
+ :disabled="isDisabled"
|
|
|
:disabled-date="disabledDate"
|
|
|
:placeholder="['开始时间', '结束时间']" />
|
|
|
</a-form-model-item>
|
|
@@ -46,7 +47,7 @@
|
|
|
<a-form-model-item label="轮播图排序" prop="sort">
|
|
|
<a-input-number
|
|
|
style="width:40%"
|
|
|
- id="promotionEdit-sort"
|
|
|
+ id="carouselImageEdit-sort"
|
|
|
allowClear
|
|
|
placeholder="请输入轮播图排序数字(数字越大越靠后)"
|
|
|
v-model="form.sort"
|
|
@@ -60,25 +61,25 @@
|
|
|
<a-col :md="10" :sm="24">
|
|
|
<a-select
|
|
|
style="width:98%;"
|
|
|
- id="promotionList-allDealerFlag"
|
|
|
+ id="carouselImageEdit-allDealerFlag"
|
|
|
v-model="form.allDealerFlag"
|
|
|
placeholder="请选择参与经销商"
|
|
|
@change="changeDealerScope"
|
|
|
- :disabled="$route.params.sn"
|
|
|
+ :disabled="isDisabled"
|
|
|
allowClear>
|
|
|
<a-select-option id="promotionList-dealerScope-all" value="1">全部经销商</a-select-option>
|
|
|
<a-select-option id="promotionList-dealerScope-some" value="0">部分经销商</a-select-option>
|
|
|
</a-select>
|
|
|
</a-col>
|
|
|
<a-col :md="2" :sm="24" v-show="form.allDealerFlag && form.allDealerFlag!='1' ">
|
|
|
- <a-button id="promotionList-basicInfo-dealerScope" type="primary" :loading="spinning" :disabled="$route.params.sn" @click="handleDealerModal">选择</a-button>
|
|
|
+ <a-button id="promotionList-basicInfo-dealerScope" type="primary" :loading="spinning" :disabled="isDisabled" @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="$route.params.sn" v-for="con in chooseDealerList" id="promotionList-dealerSn" :key="con.dealerSn" @close="delBuyerName(con)">
|
|
|
+ <a-tag :closable="isDisabled" v-for="con in chooseDealerList" id="promotionList-dealerSn" :key="con.dealerSn" @close="delBuyerName(con)">
|
|
|
{{ con.dealerName }}
|
|
|
</a-tag>
|
|
|
</div>
|
|
@@ -90,7 +91,7 @@
|
|
|
<a-form-model-item label="封面图片" prop="imageUrl">
|
|
|
<Upload
|
|
|
class="upload"
|
|
|
- id="promotionEdit-imageUrl"
|
|
|
+ id="carouselImageEdit-imageUrl"
|
|
|
v-model="form.imageUrl"
|
|
|
ref="imageSet"
|
|
|
:fileSize="10"
|
|
@@ -104,10 +105,11 @@
|
|
|
<a-form-model-item label="内容类型" prop="contentType">
|
|
|
<v-select
|
|
|
v-model="form.contentType"
|
|
|
- id="promotion-contentType"
|
|
|
+ id="carouselImageEdit-contentType"
|
|
|
code="PROMO_CONTENT_TYPE"
|
|
|
showType="radio"
|
|
|
- :disabled="$route.params.sn"
|
|
|
+ :notIn="notShowSel"
|
|
|
+ :disabled="isDisabled"
|
|
|
allowClear></v-select>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
@@ -115,9 +117,9 @@
|
|
|
<a-form-model-item label="内容" prop="content" v-show="form.contentType =='IMAGE_CONTENT'">
|
|
|
<editor
|
|
|
v-show="!$route.params.sn"
|
|
|
- id="promotionEdit-editor"
|
|
|
+ id="carouselImageEdit-editor"
|
|
|
ref="editor"
|
|
|
- class="promotionEdit-editor"
|
|
|
+ class="carouselImageEdit-editor"
|
|
|
@on-change="editorChange"
|
|
|
:cache="false"></editor>
|
|
|
<div style="border:1px solid #efefef;border-radius:8px;padding:10px 20px;" v-if="$route.params.sn" v-html="form.content"></div>
|
|
@@ -125,11 +127,11 @@
|
|
|
<a-form-model-item label="上传视频" prop="content" v-show="form.contentType =='VIDEO'">
|
|
|
<Upload
|
|
|
class="upload"
|
|
|
- id="promotionEdit-videoSet"
|
|
|
+ id="carouselImageEdit-videoSet"
|
|
|
v-model="form.content"
|
|
|
fileType="video/mp4"
|
|
|
ref="videoSet"
|
|
|
- :disabled="$route.params.sn"
|
|
|
+ :disabled="isDisabled"
|
|
|
:fileSize="100"
|
|
|
:maxNums="1"
|
|
|
@change="changeVideo"
|
|
@@ -139,12 +141,11 @@
|
|
|
<a-form-model-item label="跳转链接" prop="contentLink" v-if="form.contentType =='LINK'">
|
|
|
<a-input
|
|
|
style="width:50%;"
|
|
|
- :disabled="$route.params.sn"
|
|
|
- id="promotionEdit-contentLink"
|
|
|
+ :disabled="isDisabled"
|
|
|
+ id="carouselImageEdit-contentLink"
|
|
|
:maxLength="100"
|
|
|
v-model.trim="form.contentLink"
|
|
|
placeholder="请输入跳转链接"
|
|
|
- @blur="handleLink"
|
|
|
allowClear />
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
@@ -157,7 +158,7 @@
|
|
|
type="primary"
|
|
|
class="button-primary"
|
|
|
:disabled="spinning"
|
|
|
- id="productInfoEdit-submit-btn"
|
|
|
+ id="carouselImageEdit-submit-btn"
|
|
|
size="large"
|
|
|
@click="handleSave('all')"
|
|
|
style="padding: 0 60px;">保存</a-button>
|
|
@@ -178,7 +179,7 @@ import chooseDealer from './chooseDealer'
|
|
|
import { saveShopBanner, shopBannerDetail } from '@/api/shopBanner'
|
|
|
|
|
|
export default {
|
|
|
- name: 'ProductBrandEditModal',
|
|
|
+ name: 'CarouselImageEdit',
|
|
|
mixins: [commonMixin],
|
|
|
components: { VSelect, Upload, Editor, chooseDealer },
|
|
|
data () {
|
|
@@ -189,9 +190,8 @@ export default {
|
|
|
labelCol: { span: 2 },
|
|
|
wrapperCol: { span: 20 }
|
|
|
},
|
|
|
- productRangeList: [], // 产品范围列表
|
|
|
- chooseDealerList: [],
|
|
|
- openDealerModal: false,
|
|
|
+ chooseDealerList: [], // 已选经销商数据
|
|
|
+ openDealerModal: false, // 打开选择经销商弹窗
|
|
|
// 链接配置内容
|
|
|
form: {
|
|
|
bannerSn: undefined, // 轮播图sn
|
|
@@ -205,19 +205,11 @@ export default {
|
|
|
imageUrl: '', // 图片
|
|
|
contentType: 'LINK', // 内容类型
|
|
|
content: '', // 内容
|
|
|
- contentLink: '',
|
|
|
- state: 'UNPUBLISH'
|
|
|
+ contentLink: '', // 内容链接
|
|
|
+ state: 'UNPUBLISH'// 发布状态
|
|
|
},
|
|
|
-
|
|
|
dateFormat: 'YYYY-MM-DD', // 有效期时间格式
|
|
|
- promotionName: '', // 促销名称
|
|
|
- pageType: undefined, // 页面类型
|
|
|
- showProModal: false, // 打开产品弹窗
|
|
|
- isShowNextStep: false, // 是否显示下一步 并提交一半配置产品
|
|
|
- isDisabled: false, // 控制页面是否能编辑
|
|
|
- chooseTypeList: [], // 已选中产品范围
|
|
|
- imageSet: [], // 回显显示图片数据
|
|
|
- productTypeList: [], // 产品范围 列表数据
|
|
|
+ notShowSel: ['PROMO_LINK'], // 是否显示促销活动选择按钮
|
|
|
// 表单验证规则
|
|
|
rules: {
|
|
|
bannerName: [{ required: true, message: '请输入轮播图名称', trigger: 'blur' }],
|
|
@@ -254,14 +246,15 @@ export default {
|
|
|
this.form.bannerEndDate = dateString[1] + ' 23:59:59'
|
|
|
}
|
|
|
},
|
|
|
- // 关闭 选择经销商弹窗
|
|
|
- closeDealerModal () {
|
|
|
- this.openDealerModal = false
|
|
|
- },
|
|
|
// 打开 选择经销商弹窗
|
|
|
handleDealerModal () {
|
|
|
this.openDealerModal = true
|
|
|
},
|
|
|
+ // 关闭 选择经销商弹窗
|
|
|
+ closeDealerModal () {
|
|
|
+ this.openDealerModal = false
|
|
|
+ },
|
|
|
+ // 参与经销商 change
|
|
|
changeDealerScope () {},
|
|
|
// 返回列表
|
|
|
handleBack () {
|
|
@@ -279,9 +272,11 @@ export default {
|
|
|
} else if (res.data.contentType == 'LINK') {
|
|
|
_this.form.contentLink = res.data.content
|
|
|
}
|
|
|
+
|
|
|
_this.$refs.imageSet.setFileList(res.data.imageUrl)
|
|
|
_this.form = res.data
|
|
|
_this.form.time = [res.data.bannerStartDate, res.data.bannerEndDate]
|
|
|
+ _this.notShowSel = _this.form.bizType ? _this.form.bizType != 'SHOP_PROMO' ? ['PROMO_LINK'] : [] : []
|
|
|
}
|
|
|
})
|
|
|
},
|
|
@@ -340,15 +335,11 @@ export default {
|
|
|
},
|
|
|
// 重置
|
|
|
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('')
|
|
|
- }
|
|
|
+ this.$refs.imageSet.setFileList('')
|
|
|
+ if (this.contentType === 'VIDEO') {
|
|
|
+ this.$refs.videoSet.setFileList('')
|
|
|
}
|
|
|
- if (this.$refs.editor) {
|
|
|
+ if (this.contentType === 'IMAGE_CONTENT') {
|
|
|
this.$refs.editor.setHtml('')
|
|
|
}
|
|
|
this.form = {
|
|
@@ -366,11 +357,6 @@ export default {
|
|
|
contentLink: '',
|
|
|
state: 'UNPUBLISH'
|
|
|
}
|
|
|
- this.isShowNextStep = false
|
|
|
- this.isDisabled = false
|
|
|
- if (this.$refs.ruleForm) {
|
|
|
- this.$refs.ruleForm.resetFields()
|
|
|
- }
|
|
|
if (this.$refs.ruleForm) {
|
|
|
this.$refs.ruleForm.resetFields()
|
|
|
}
|
|
@@ -404,7 +390,7 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.promotionEdit-wrap{
|
|
|
+.carouselImageEdit-wrap{
|
|
|
position: relative;
|
|
|
height: 100%;
|
|
|
box-sizing: border-box;
|
|
@@ -416,14 +402,14 @@ export default {
|
|
|
/deep/.ant-form-item{
|
|
|
margin-bottom:8px;
|
|
|
}
|
|
|
- .promotionEdit-cont{
|
|
|
+ .carouselImageEdit-cont{
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
.upload{
|
|
|
width: 100%!important;
|
|
|
}
|
|
|
// 文本编辑器 工具栏样式换行
|
|
|
- .promotionEdit-editor{
|
|
|
+ .carouselImageEdit-editor{
|
|
|
.w-e-toolbar{
|
|
|
flex-wrap: wrap;
|
|
|
z-index: 0;
|
|
@@ -441,7 +427,7 @@ export default {
|
|
|
font-size: 12px;
|
|
|
color: #808695;
|
|
|
}
|
|
|
- #promotionEdit-attachList{
|
|
|
+ #carouselImageEdit-attachList{
|
|
|
height: auto;
|
|
|
}
|
|
|
.box{
|