caimei365
/
caimei365-www


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
							<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://www.thymeleaf.org ">
<head>
    <title>采美365网-采美文章-编辑文章</title>
    <template th:replace="components/head-link"></template>
    <!--element ui 样式表-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <link rel="stylesheet" th:href="@{/lib/element-ui/element-ui-min.css}" />
    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
    <link th:if="${pageId==1026}" th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/supplier-center/article/article-edit.css(v=${version})}" charset="UTF-8" rel="stylesheet" type="text/css">
    <template th:replace="components/analysis"></template>
</head>
<body>
<input type="hidden" th:value="${ossBucket}" id="ossBucket">
<!-- 引用头部 -->
<template th:replace="components/header"></template>

<!-- 我的采美 -->
<div id="articleEdit" class="article-edit">
    <div class="navLayout" v-cloak>
        <div class="crumbs" v-if="isPC">
            <span>我的采美</span>
            <span>&gt;</span>
            <span>采美文章</span>
            <span>&gt;</span>
            <span>文章管理</span>
        </div>
        <div class="wrap clear">
            <!--左侧导航-->
            <template th:replace="supplier-center/components/tableft"></template>
            <div class="right-box right">
                <div class="row">
                    <div class="top-tip">温馨提示：发布采美文章有利于曝光您的店铺商品，提高成交量（发布并且审核通过后，可在信息中心搜索您的文章）</div>

                    <div class="valide-form">
                        <el-form :model="formData" :rules="rules" ref="ruleForm" label-position="top">
                            <!-- 标题 -->
                            <el-form-item label="标题" prop="title" class="mint-filter">
                                <el-input v-model="formData.title" placeholder="请输入文章标题" @focus="onFocused" @blur="onBlured"></el-input>
                                <div class="mint-message" v-if="formValidate.title">{{formValidate.title}}</div>
                            </el-form-item>
                            <!-- 文章标签 -->
                            <el-form-item label="文章标签" prop="label" class="mint-filter">
                                <el-input v-model="formData.label" placeholder="请输入文章标签" @focus="onFocused" @blur="onBlured"></el-input>
                                <div class="mint-message" v-if="formValidate.label">{{formValidate.label}}</div>
                            </el-form-item>
                            <el-form-item  label="">
                                <!-- 预选标签列表 -->
                                <div class="tag-list">
                                    <div v-for="(label, index) in articleLabels"
                                         class="tag"
                                         :class="{active: checkLabel(index)}" @click.stop="labelClick(index)">
                                        <span>{{label}}</span>
                                        <span class="close">×</span>
                                    </div>
                                </div>
                                <!-- 新增标签 -->
                                <div class="label-add">
                                    <el-input v-model="addLabelName" placeholder="请输入标签名" @focus="onFocused" @blur="onBlured"></el-input>
                                    <button class="add-tag" type="button" @click.stop="addLabel">添加</button>
                                </div>
                            </el-form-item>
                            <!-- SEO关键词 -->
                            <el-form-item label="SEO关键词" prop="keyword" class="mint-filter">
                                <el-input v-model="formData.keyword" placeholder="请输入SEO关键词" class="seo-auto-input" @focus="onFocused" @blur="onBlured"></el-input>
                                <div class="mint-message" v-if="formValidate.keyword">{{formValidate.keyword}}</div>
                            </el-form-item>
                            <!-- 关联标签库 -->
                            <el-form-item label="关联标签库" prop="labelIds" class="mint-filter">
                                <el-select
                                        v-model="formData.labelIds"
                                        multiple
                                        placeholder="请选择标签"
                                        class="max-width"
                                        :multiple-limit="6"
                                        clearable
                                        filterable
                                        remote
                                        reserve-keyword
                                        :remote-method="fetchQueryKeywordList"
                                        :loading="remoteLoading"
                                >
                                    <el-option v-for="item in labelList" :key="item.id" :label="item.keyword" :value="item.id"></el-option>
                                </el-select>
                                <div class="mint-message" v-if="formValidate.labelIds">{{formValidate.labelIds}}</div>
                            </el-form-item>
                            <!-- 发布人 -->
                            <el-form-item label="发布人" prop="publisher" class="mint-filter">
                                <el-input v-model="formData.publisher" placeholder="请填写发布人姓名" @focus="onFocused" @blur="onBlured"></el-input>
                                <div class="mint-message" v-if="formValidate.publisher">{{formValidate.publisher}}</div>
                            </el-form-item>
                            <!-- 来源 -->
                            <el-form-item label="来源" prop="source">
                                <el-input v-model="formData.source" placeholder="请填写文章来源" @focus="onFocused" @blur="onBlured"></el-input>
                            </el-form-item>
                            <!-- 推荐语(描述) -->
                            <el-form-item label="推荐语(描述)" prop="recommendContent" class="mint-filter">
                                <el-input type="textarea" :rows="3" v-model="formData.recommendContent" placeholder="请填写推荐语(描述)" @focus="onFocused" @blur="onBlured"></el-input>
                                <div class="mint-message" v-if="formValidate.recommendContent">{{formValidate.recommendContent}}</div>
                            </el-form-item>
                            <!-- 文章内容 -->
                            <el-form-item label="文章内容" prop="articleContent" class="mint-filter">
                                <el-input v-model="formData.articleContent" v-show="false" @focus="onFocused" @blur="onBlured"></el-input>
                                <editor v-model="formData.articleContent" placeholder="请输入文章内容"></editor>
                                <div class="mint-message" v-if="formValidate.articleContent">{{formValidate.articleContent}}</div>
                            </el-form-item>
                            <!-- 文章分类 -->
                            <el-form-item label="文章分类" prop="typeId">
                                <el-select v-model="formData.typeId" class="max-width">
                                    <template v-for="(typeInfo, index) in articleTypeList">
                                        <el-option :label="typeInfo.typeName" :value="typeInfo.typeId" :key="typeInfo.typeId"></el-option>
                                    </template>
                                </el-select>
                            </el-form-item>
                            <!-- 引导图 -->
                            <el-form-item label="引导图" prop="guidanceImage">
                                <el-input v-model="formData.guidanceImage" placeholder="引导图" v-show="false"></el-input>
                                <el-upload
                                        :class="{ 'hide-upload': articleImageList.length >= 1 }"
                                        :action="action"
                                        list-type="picture-card"
                                        :on-success="handleUploadSuccess"
                                        :on-remove="handleImageRemove"
                                        :file-list="articleImageList"
                                        :limit="1"
                                >
                                    <i class="el-icon-plus"></i>
                                    <div slot="tip" class="el-upload__tip">建议图片尺寸210px*210px，并上传白底图片</div>
                                </el-upload>
                            </el-form-item>
                            <!-- 状态 -->
                            <el-form-item label="" prop="status">
                                <span class="cm-label"><em>*</em>状态:</span>
                                <el-radio-group v-model="formData.status">
                                    <el-radio :label="1">发布</el-radio>
                                    <el-radio :label="0">存草稿</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-form>
                        <!-- 提交 -->
                        <div class="form-item btns">
                            <button class="btn break" @click="handleBack">返回</button>
                            <button class="btn submit" @click="handleSave">提交</button>
                            <button class="btn submit" @click="handlePreview">预览</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 引入底部 -->
<template th:replace="components/footer"></template>
<template th:replace="components/foot-link"></template>

<script charset="utf-8" type="text/javascript" th:src="@{/lib/wangEditor.min.js}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/article/editor-component.js(v=${version})}"></script>
<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/article/article-edit.js(v=${version})}"></script>
</body>
</html>