|
@@ -1,410 +0,0 @@
|
|
|
-<template>
|
|
|
- <a-modal
|
|
|
- centered
|
|
|
- id="promotionEdit-modal"
|
|
|
- class="promotionEdit-modal"
|
|
|
- :footer="null"
|
|
|
- :maskClosable="false"
|
|
|
- :title="modalTit"
|
|
|
- v-model="isShow"
|
|
|
- @cancel="isShow=false"
|
|
|
- width="76%">
|
|
|
- <!-- 表单 -->
|
|
|
- <div class="promotionEdit-content" ref="formBox">
|
|
|
- <a-spin :spinning="spinning" tip="Loading...">
|
|
|
- <a-form-model
|
|
|
- id="promotionEdit-form"
|
|
|
- ref="ruleForm"
|
|
|
- :model="form"
|
|
|
- :rules="rules"
|
|
|
- :label-col="formItemLayout.labelCol"
|
|
|
- :wrapper-col="formItemLayout.wrapperCol"
|
|
|
- >
|
|
|
- <a-form-model-item label="标题名称" prop="title">
|
|
|
- <a-input
|
|
|
- id="promotionEdit-title"
|
|
|
- :maxLength="30"
|
|
|
- v-model.trim="form.title"
|
|
|
- placeholder="请输入标题名称(最多30个字符)"
|
|
|
- v-if="!isDisabled"
|
|
|
- allowClear/>
|
|
|
- <span v-else>{{ form.title }}</span>
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="封面图片" prop="imageSet">
|
|
|
- <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-form-model-item label="排序" prop="sort">
|
|
|
- <a-input-number
|
|
|
- style="width:300px;"
|
|
|
- id="promotionEdit-sort"
|
|
|
- v-if="!isDisabled"
|
|
|
- allowClear
|
|
|
- placeholder="请输入排序数字(数字越大越靠后)"
|
|
|
- v-model="form.sort"
|
|
|
- :min="0"
|
|
|
- :max="999999"/>
|
|
|
- <span v-else>{{ form.sort }}</span>
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="内容类型" prop="contentType">
|
|
|
- <v-select
|
|
|
- v-model="form.contentType"
|
|
|
- ref="saleStatus"
|
|
|
- id="promotion-saleStatus"
|
|
|
- code="PROMO_CONTENT_TYPE"
|
|
|
- showType="radio"
|
|
|
- :disabled="isDisabled"
|
|
|
- allowClear></v-select>
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="内容" prop="content" v-show="form.contentType =='IMAGE_CONTENT'">
|
|
|
- <editor
|
|
|
- v-if="pageType === 'add' || (pageType === 'edit'&&!isDisabled)"
|
|
|
- id="promotionEdit-editor"
|
|
|
- ref="editor"
|
|
|
- class="promotionEdit-editor"
|
|
|
- @on-change="editorChange"
|
|
|
- :cache="false"></editor>
|
|
|
- <div v-show="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-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'">
|
|
|
- <a-input
|
|
|
- id="promotionEdit-title"
|
|
|
- v-if="!isDisabled"
|
|
|
- :maxLength="100"
|
|
|
- v-model.trim="form.contentLink"
|
|
|
- placeholder="请输入跳转链接"
|
|
|
- allowClear />
|
|
|
- <span v-else>{{ form.contentLink }}</span>
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="是否发布" prop="enabledFlag">
|
|
|
- <a-radio-group id="promotionEdit-enabledFlag" button-style="solid" v-model="form.enabledFlag">
|
|
|
- <a-radio-button value="1">
|
|
|
- 是
|
|
|
- </a-radio-button>
|
|
|
- <a-radio-button value="0">
|
|
|
- 否
|
|
|
- </a-radio-button>
|
|
|
- </a-radio-group>
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="是否显示" prop="showFlag" v-if="form.enabledFlag == 1">
|
|
|
- <a-radio-group id="promotionEdit-showFlag" button-style="solid" v-model="form.showFlag">
|
|
|
- <a-radio-button value="1">
|
|
|
- 显示
|
|
|
- </a-radio-button>
|
|
|
- <a-radio-button value="0">
|
|
|
- 隐藏
|
|
|
- </a-radio-button>
|
|
|
- </a-radio-group>
|
|
|
- </a-form-model-item>
|
|
|
- </a-form-model>
|
|
|
- </a-spin>
|
|
|
- <div class="btn-cont">
|
|
|
- <a-button id="promotionEdit-cancel" @click="isShow = false" style="margin-right:15px;">取消</a-button>
|
|
|
- <a-button
|
|
|
- style="margin-right:15px;color: #fff;background-color: #39f;border-color: #39f;"
|
|
|
- id="promotionEdit-views"
|
|
|
- @click="handleSee"
|
|
|
- v-if="form.contentType !='LINK'">预览</a-button>
|
|
|
- <a-button type="primary" id="promotionEdit-save" @click="handleSave">确定</a-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 预览 -->
|
|
|
- <promotion-show-modal ref="showModal" :openModal="openShowModal" @close="openShowModal = false"></promotion-show-modal>
|
|
|
- </a-modal>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { commonMixin } from '@/utils/mixin'
|
|
|
-// 组件
|
|
|
-import { VSelect, Upload } from '@/components'
|
|
|
-import Editor from '@/components/WEeditor'
|
|
|
-import promotionShowModal from './promotionShowModal'
|
|
|
-// 接口
|
|
|
-import { saveActive, promoTerminalDetail } from '@/api/promoTerminal'
|
|
|
-export default {
|
|
|
- name: 'PromotionEditModal',
|
|
|
- mixins: [commonMixin],
|
|
|
- components: { VSelect, Upload, Editor, promotionShowModal },
|
|
|
- props: {
|
|
|
- openModal: { // 弹框显示状态
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- itemId: { // 单据id
|
|
|
- type: [Number, String],
|
|
|
- default: ''
|
|
|
- },
|
|
|
- pageType: { // 新增or编辑
|
|
|
- type: String,
|
|
|
- default: 'add'
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- // 弹窗标题
|
|
|
- modalTit () {
|
|
|
- return this.pageType != 'add' ? '发布修改' : '促销发布'
|
|
|
- }
|
|
|
- },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- spinning: false,
|
|
|
- isShow: this.openModal, // 是否打开弹框
|
|
|
- // 表单label布局
|
|
|
- formItemLayout: {
|
|
|
- labelCol: { span: 4 },
|
|
|
- wrapperCol: { span: 18 }
|
|
|
- },
|
|
|
- // 提交参数
|
|
|
- form: {
|
|
|
- promoActiveSn: undefined, // 活动sn
|
|
|
- title: '', // 标题
|
|
|
- contentType: 'IMAGE_CONTENT', // 内容类型
|
|
|
- imageSet: '', // 图片
|
|
|
- showFlag: '0', // 是否显示
|
|
|
- content: '', // 内容
|
|
|
- enabledFlag: '0', // 启用禁用
|
|
|
- sort: undefined, // 排序
|
|
|
- contentLink: '' // 跳转链接
|
|
|
- },
|
|
|
- images: [], // 图片
|
|
|
- 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: {
|
|
|
- // 预览
|
|
|
- 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 () {
|
|
|
- promoTerminalDetail({ sn: this.itemId }).then(res => {
|
|
|
- if (res.status == 200) {
|
|
|
- this.isDisabled = res.data.state === 'PUBLISH'
|
|
|
- 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
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 确定发布
|
|
|
- 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
|
|
|
- },
|
|
|
- // 重置表单
|
|
|
- resetForm () {
|
|
|
- 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
|
|
|
- }
|
|
|
- this.images = []
|
|
|
- this.isDisabled = false
|
|
|
- this.$refs.ruleForm.resetFields()
|
|
|
- this.$refs.formBox.scrollTop = 0
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- // 父页面传过来的弹框状态
|
|
|
- openModal (newValue, oldValue) {
|
|
|
- this.isShow = newValue
|
|
|
- },
|
|
|
- // 重定义的弹框状态
|
|
|
- isShow (newValue, oldValue) {
|
|
|
- if (!newValue) {
|
|
|
- this.$emit('close')
|
|
|
- this.resetForm()
|
|
|
- } else {
|
|
|
- // 如果时编辑
|
|
|
- if (this.pageType == 'edit') {
|
|
|
- this.getDetail()
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
- .promotionEdit-modal{
|
|
|
- .promotionEdit-content{
|
|
|
- max-height:60vh;
|
|
|
- overflow-y: scroll;
|
|
|
- }
|
|
|
- .ant-modal-body {
|
|
|
- padding: 40px 40px 24px;
|
|
|
- }
|
|
|
- .upload{
|
|
|
- width: 100%!important;
|
|
|
- }
|
|
|
- /deep/.upload-file .ant-upload-list-item-info{
|
|
|
- padding:2px !important;
|
|
|
- }
|
|
|
- // 商品图片描述
|
|
|
- .upload-desc{
|
|
|
- font-size: 12px;
|
|
|
- color: #808695;
|
|
|
- }
|
|
|
- // 文本编辑器 工具栏样式换行
|
|
|
- .promotionEdit-editor{
|
|
|
- .w-e-toolbar{
|
|
|
- flex-wrap: wrap;
|
|
|
- }
|
|
|
- }
|
|
|
- .btn-cont {
|
|
|
- text-align: center;
|
|
|
- margin: 35px 0 10px;
|
|
|
- }
|
|
|
- #promotionEdit-attachList{
|
|
|
- height: auto;
|
|
|
- }
|
|
|
- a{
|
|
|
- color: inherit;
|
|
|
- }
|
|
|
- .box{
|
|
|
- border:1px solid #d9d9d9;
|
|
|
- border-radius:4px;
|
|
|
- padding:4px 11px;
|
|
|
- cursor: not-allowed;
|
|
|
- background:#f8f8f8;
|
|
|
- padding:10px;
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|