|
@@ -1,8 +1,457 @@
|
|
<template>
|
|
<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>
|
|
|
|
+ </template>
|
|
|
|
+ </a-page-header>
|
|
|
|
+ <!-- 表单 -->
|
|
|
|
+ <a-form-model
|
|
|
|
+ id="promotionEdit-form"
|
|
|
|
+ ref="ruleForm"
|
|
|
|
+ :model="form"
|
|
|
|
+ :rules="rules"
|
|
|
|
+ :label-col="formItemLayout.labelCol"
|
|
|
|
+ :wrapper-col="formItemLayout.wrapperCol"
|
|
|
|
+ >
|
|
|
|
+ <a-card :bordered="false" class="promotionEdit-cont">
|
|
|
|
+ <a-row>
|
|
|
|
+ <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
|
+ <a-form-model-item label="标题名称" prop="title">
|
|
|
|
+ <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="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
|
+ <a-form-model-item label="排序" prop="sort">
|
|
|
|
+ <a-input-number
|
|
|
|
+ style="width:100%"
|
|
|
|
+ id="promotionEdit-sort"
|
|
|
|
+ :disabled="isDisabled"
|
|
|
|
+ allowClear
|
|
|
|
+ placeholder="请输入排序数字(数字越大越靠后)"
|
|
|
|
+ v-model="form.sort"
|
|
|
|
+ :min="0"
|
|
|
|
+ :max="999999"/>
|
|
|
|
+ </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" :label-col="{span:2}" :wrapper-col="{span:20}">
|
|
|
|
+ <Upload
|
|
|
|
+ v-if="pageType==='add'||(pageType==='edit'&&!isDisabled)"
|
|
|
|
+ class="upload"
|
|
|
|
+ id="promotionEdit-imageSet"
|
|
|
|
+ v-model="form.imageSet"
|
|
|
|
+ ref="imageSet"
|
|
|
|
+ :fileSize="10"
|
|
|
|
+ :maxNums="10"
|
|
|
|
+ @change="changeImage"
|
|
|
|
+ listType="picture-card"></Upload>
|
|
|
|
+ <div v-else>
|
|
|
|
+ <img
|
|
|
|
+ :src="con"
|
|
|
|
+ alt="图片走丢了"
|
|
|
|
+ width="80"
|
|
|
|
+ height="80"
|
|
|
|
+ v-for="(con,i) in images"
|
|
|
|
+ style="margin-right:10px;"
|
|
|
|
+ :key="i" />
|
|
|
|
+ </div>
|
|
|
|
+ <span class="upload-desc">说明:单张大小小于10Mb,最多10张;建议尺寸:宽(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" :label-col="{span:2}" :wrapper-col="{span:18}">
|
|
|
|
+ <v-select
|
|
|
|
+ v-model="form.contentType"
|
|
|
|
+ ref="saleStatus"
|
|
|
|
+ id="promotion-saleStatus"
|
|
|
|
+ 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'" :label-col="{span:2}" :wrapper-col="{span:20}">
|
|
|
|
+ <editor
|
|
|
|
+ v-show="pageType === 'add'||(pageType === 'edit'&&!isDisabled)"
|
|
|
|
+ id="promotionEdit-editor"
|
|
|
|
+ ref="editor"
|
|
|
|
+ class="promotionEdit-editor"
|
|
|
|
+ @on-change="editorChange"
|
|
|
|
+ :cache="false"></editor>
|
|
|
|
+ <div v-show="(pageType === 'edit'||pageType === 'see')&&isDisabled" class="box" v-html="form.content"></div>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="上传视频" prop="content" v-show="form.contentType =='VIDEO'" :label-col="{span:2}" :wrapper-col="{span:20}">
|
|
|
|
+ <Upload
|
|
|
|
+ v-if="pageType==='add'||(pageType==='edit'&&!isDisabled)"
|
|
|
|
+ class="upload"
|
|
|
|
+ id="promotionEdit-imageSet"
|
|
|
|
+ v-model="form.content"
|
|
|
|
+ fileType="video/mp4"
|
|
|
|
+ ref="videoSet"
|
|
|
|
+ :fileSize="100"
|
|
|
|
+ :maxNums="1"
|
|
|
|
+ @change="changeVideo"
|
|
|
|
+ ></Upload>
|
|
|
|
+ <div v-else>
|
|
|
|
+ <video 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'" :label-col="{span:2}" :wrapper-col="{span:20}">
|
|
|
|
+ <a-input
|
|
|
|
+ style="width:50%;"
|
|
|
|
+ :disabled="isDisabled"
|
|
|
|
+ id="promotionEdit-title"
|
|
|
|
+ :maxLength="100"
|
|
|
|
+ v-model.trim="form.contentLink"
|
|
|
|
+ placeholder="请输入跳转链接"
|
|
|
|
+ @blur="handleLink"
|
|
|
|
+ allowClear />
|
|
|
|
+ <a-select id="promotionEdit-title" 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>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ <!-- 参数配置 -->
|
|
|
|
+ <a-row style="width:83%;margin:0 auto 24px;" v-if="form.contentType =='LINK'&&form.linkType!='2'">
|
|
|
|
+ <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
|
+ <a-checkbox @change="onChangeParams" :disabled="isDisabled">参数配置</a-checkbox>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col
|
|
|
|
+ :xs="24"
|
|
|
|
+ :sm="24"
|
|
|
|
+ :md="24"
|
|
|
|
+ :lg="24"
|
|
|
|
+ :xl="24"
|
|
|
|
+ v-show="isShowParams">
|
|
|
|
+ <!-- 参数配置内容 -->
|
|
|
|
+ <setPromotion style="margin-top:20px;" :disabledVal="isDisabled" @addProduct="insterProduct"></setPromotion>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-card>
|
|
|
|
+ </a-form-model>
|
|
|
|
+ </a-spin>
|
|
|
|
+ <div class="affix-cont">
|
|
|
|
+ <a-button
|
|
|
|
+ type="primary"
|
|
|
|
+ class="button-primary"
|
|
|
|
+ :disabled="spinning"
|
|
|
|
+ id="productInfoEdit-submit-btn"
|
|
|
|
+ size="large"
|
|
|
|
+ @click="handleSave"
|
|
|
|
+ style="padding: 0 60px;">保存</a-button>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 预览 -->
|
|
|
|
+ <promotion-show-modal ref="showModal" :openModal="openShowModal" @close="openShowModal = false"></promotion-show-modal>
|
|
|
|
+ <!-- 添加产品 -->
|
|
|
|
+ <chooseProduct ref="chooseProduct" :openModal="showProModal" @close="closeProductModal"></chooseProduct>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+import { commonMixin } from '@/utils/mixin'
|
|
|
|
+import { VSelect, Upload } from '@/components'
|
|
|
|
+import Editor from '@/components/WEeditor'
|
|
|
|
+// import { saveActive, promoTerminalDetail } from '@/api/promoTerminal'
|
|
|
|
+import promotionShowModal from './promotionShowModal'
|
|
|
|
+import setPromotion from './setPromotion'
|
|
|
|
+import chooseProduct from './chooseProductsModal.vue'
|
|
|
|
+export default {
|
|
|
|
+ name: 'ProductBrandEditModal',
|
|
|
|
+ mixins: [commonMixin],
|
|
|
|
+ components: { VSelect, Upload, Editor, promotionShowModal, setPromotion, chooseProduct },
|
|
|
|
+ data () {
|
|
|
|
+ return {
|
|
|
|
+ isShow: this.openModal, // 是否打开弹框
|
|
|
|
+ spinning: false,
|
|
|
|
+ formItemLayout: {
|
|
|
|
+ labelCol: { span: 4 },
|
|
|
|
+ wrapperCol: { span: 16 }
|
|
|
|
+ },
|
|
|
|
+ form: {
|
|
|
|
+ promoActiveSn: undefined,
|
|
|
|
+ title: '',
|
|
|
|
+ contentType: 'IMAGE_CONTENT',
|
|
|
|
+ imageSet: '',
|
|
|
|
+ showFlag: '0',
|
|
|
|
+ content: '',
|
|
|
|
+ enabledFlag: '0',
|
|
|
|
+ sort: undefined,
|
|
|
|
+ contentLink: '',
|
|
|
|
+ linkType: undefined
|
|
|
|
+ },
|
|
|
|
+ pageType: undefined, // 页面类型
|
|
|
|
+ showProModal: false,
|
|
|
|
+ images: [],
|
|
|
|
+ isShowParams: false, // 是否显示参数配置内容
|
|
|
|
+ openShowModal: false,
|
|
|
|
+ isDisabled: false, // 控制是否能编辑
|
|
|
|
+ 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' }
|
|
|
|
+ ],
|
|
|
|
+ enabledFlag: [
|
|
|
|
+ { required: true, message: '请选择是否发布', trigger: 'change' }
|
|
|
|
+ ],
|
|
|
|
+ showFlag: [
|
|
|
|
+ { required: true, message: '请选择是否显示', trigger: 'change' }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 设置参数
|
|
|
|
+ onChangeParams (e) {
|
|
|
|
+ this.isShowParams = e.target.checked
|
|
|
|
+ },
|
|
|
|
+ // 打开弹窗
|
|
|
|
+ insterProduct (flag) {
|
|
|
|
+ this.showProModal = true
|
|
|
|
+ },
|
|
|
|
+ // 返回列表
|
|
|
|
+ handleBack () {
|
|
|
|
+ this.resetSearchForm()
|
|
|
|
+ this.$router.push({ name: 'promotionInfoList', query: { closeLastOldTab: true } })
|
|
|
|
+ },
|
|
|
|
+ // 预览
|
|
|
|
+ handleSee () {
|
|
|
|
+ if (this.form.content) {
|
|
|
|
+ this.openShowModal = true
|
|
|
|
+ this.$refs.showModal.pageInit({ type: this.form.contentType, con: this.form.content })
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error('请输入预览内容!')
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 详情
|
|
|
|
+ getDetail () {
|
|
|
|
+ // 查看按钮时,所有按钮不能编辑 编辑按钮时,state 已发布,只能编辑是否发布;state已关闭,都可以编辑
|
|
|
|
+ promoTerminalDetail({ sn: this.$route.params.sn }).then(res => {
|
|
|
|
+ if (res.status == 200) {
|
|
|
|
+ if (this.pageType === 'edit') {
|
|
|
|
+ this.isDisabled = res.data.state === 'PUBLISH'
|
|
|
|
+ } else {
|
|
|
|
+ this.isDisabled = true
|
|
|
|
+ }
|
|
|
|
+ this.form.promoActiveSn = res.data.promoActiveSn
|
|
|
|
+ this.form.title = res.data.title
|
|
|
|
+ this.form.contentType = res.data.contentType
|
|
|
|
+ this.form.showFlag = res.data.showFlag
|
|
|
|
+ this.form.enabledFlag = res.data.enabledFlag
|
|
|
|
+ this.form.sort = res.data.sort
|
|
|
|
+ this.images = res.data.imageSet
|
|
|
|
+ this.form.imageSet = res.data.images
|
|
|
|
+ this.form.content = res.data.content
|
|
|
|
+ this.$refs.imageSet.setFileList(res.data.images)
|
|
|
|
+ if (res.data.contentType == 'IMAGE_CONTENT') {
|
|
|
|
+ this.$refs.editor.setHtml(res.data.content)
|
|
|
|
+ } else if (res.data.contentType == 'VIDEO') {
|
|
|
|
+ if (res.data.state != 'PUBLISH') {
|
|
|
|
+ this.$refs.videoSet.setFileList(res.data.content)
|
|
|
|
+ }
|
|
|
|
+ } else if (res.data.contentType == 'LINK') {
|
|
|
|
+ this.form.contentLink = res.data.content
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ closeProductModal () {
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 确定
|
|
|
|
+ handleSave () {
|
|
|
|
+ const _this = this
|
|
|
|
+ if (_this.form.contentType == 'LINK') {
|
|
|
|
+ _this.form.content = _this.form.contentLink
|
|
|
|
+ }
|
|
|
|
+ _this.$refs.ruleForm.validate(valid => {
|
|
|
|
+ if (valid) {
|
|
|
|
+ _this.form.promoActiveSn = this.itemId
|
|
|
|
+ const formData = JSON.parse(JSON.stringify(_this.form))
|
|
|
|
+ formData.imageSet = formData.imageSet ? formData.imageSet.split(',') : []
|
|
|
|
+ formData.showFlag = formData.enabledFlag == 0 ? '0' : formData.showFlag
|
|
|
|
+ if (formData.contentType == 'LINK') {
|
|
|
|
+ delete formData.contentLink
|
|
|
|
+ }
|
|
|
|
+ _this.spinning = true
|
|
|
|
+ saveActive(formData).then(res => {
|
|
|
|
+ if (res.status == 200) {
|
|
|
|
+ _this.$message.success(res.message)
|
|
|
|
+ _this.spinning = false
|
|
|
|
+ _this.isShow = false
|
|
|
|
+ _this.$emit('ok')
|
|
|
|
+ } else {
|
|
|
|
+ _this.spinning = false
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ return 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)) {
|
|
|
|
+ this.$refs.imageSet.setFileList('')
|
|
|
|
+ this.$refs.videoSet.setFileList('')
|
|
|
|
+ }
|
|
|
|
+ if (this.$refs.editor) {
|
|
|
|
+ this.$refs.editor.setHtml('')
|
|
|
|
+ }
|
|
|
|
+ this.form = {
|
|
|
|
+ promoActiveSn: undefined,
|
|
|
|
+ title: '',
|
|
|
|
+ contentType: 'IMAGE_CONTENT',
|
|
|
|
+ imageSet: '',
|
|
|
|
+ showFlag: '0',
|
|
|
|
+ content: '',
|
|
|
|
+ enabledFlag: '0',
|
|
|
|
+ sort: undefined,
|
|
|
|
+ contentLink: '',
|
|
|
|
+ linkType: undefined
|
|
|
|
+ }
|
|
|
|
+ this.images = []
|
|
|
|
+ this.isDisabled = false
|
|
|
|
+ this.$refs.ruleForm.resetFields()
|
|
|
|
+ },
|
|
|
|
+ // 选择内容类型
|
|
|
|
+ changeContentType (e) {
|
|
|
|
+ if (e === 'LINK') {
|
|
|
|
+ this.form.linkType = '1'
|
|
|
|
+ this.form.contentLink = '/pagesB/promoDetail'
|
|
|
|
+ } else {
|
|
|
|
+ this.form.linkType = undefined
|
|
|
|
+ this.form.contentLink = ''
|
|
|
|
+ }
|
|
|
|
+ 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'
|
|
|
|
+ },
|
|
|
|
+ pageInit () {
|
|
|
|
+ this.pageType = this.$route.params.pageType ? this.$route.params.pageType : 'add'
|
|
|
|
+ if (this.pageType === 'edit' || this.pageType === 'see') {
|
|
|
|
+ this.getDetail()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mounted () {
|
|
|
|
+ this.pageInit()
|
|
|
|
+ },
|
|
|
|
+ activated () {
|
|
|
|
+ this.pageInit()
|
|
|
|
+ },
|
|
|
|
+ beforeRouteEnter (to, from, next) {
|
|
|
|
+ next(vm => {})
|
|
|
|
+ }
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
|
-</style>
|
|
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+.promotionEdit-wrap{
|
|
|
|
+ position: relative;
|
|
|
|
+ height: 100%;
|
|
|
|
+ padding-bottom: 51px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ >.ant-spin-nested-loading{
|
|
|
|
+ overflow-y: scroll;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+ .promotionEdit-cont{
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ }
|
|
|
|
+ .upload{
|
|
|
|
+ width: 100%!important;
|
|
|
|
+ }
|
|
|
|
+ // 文本编辑器 工具栏样式换行
|
|
|
|
+ .promotionEdit-editor{
|
|
|
|
+ .w-e-toolbar{
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ z-index: 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // /deep/.upload-file .ant-upload-list-item-info{
|
|
|
|
+ // padding:2px !important;
|
|
|
|
+ // }
|
|
|
|
+ // 商品图片描述
|
|
|
|
+ .upload-desc{
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: #808695;
|
|
|
|
+ }
|
|
|
|
+ #promotionEdit-attachList{
|
|
|
|
+ height: auto;
|
|
|
|
+ }
|
|
|
|
+ // a{
|
|
|
|
+ // color: inherit;
|
|
|
|
+ // }
|
|
|
|
+ .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;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|