|
|
@@ -0,0 +1,1799 @@
|
|
|
+<template>
|
|
|
+ <div class="manage-root newspaper-create">
|
|
|
+ <Header />
|
|
|
+ <div class="manage-root-contain">
|
|
|
+ <nav-menu
|
|
|
+ class="manage-root-contain-left"
|
|
|
+ :activeMenuIndex="activeMenuIndex"
|
|
|
+ ></nav-menu>
|
|
|
+ <div class="manage-root-contain-right">
|
|
|
+ <breadcrumb
|
|
|
+ :breadcrumbList="breadcrumbList"
|
|
|
+ class="breadcrumb-box"
|
|
|
+ ></breadcrumb>
|
|
|
+ <div class="create-top" v-if="stepIndex === 0">
|
|
|
+ <div class="common-title-box">
|
|
|
+ <h3>{{ id ? "编辑画刊" : "创建画刊" }}</h3>
|
|
|
+ <div class="btn-box" v-if="id || (!id && stepIndex !== 2)">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ @click="handleStep('-')"
|
|
|
+ :disabled="stepIndex === 0"
|
|
|
+ >上一步</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="handleStep('+')"
|
|
|
+ :disabled="stepIndex === 1"
|
|
|
+ :loading="loading"
|
|
|
+ >下一步</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-steps :active="stepIndex" align-center>
|
|
|
+ <el-step title="画刊信息" description="填写画刊基本信息">
|
|
|
+ <svg-icon icon-class="dot" slot="icon" class="svg-dot"></svg-icon>
|
|
|
+ </el-step>
|
|
|
+ <el-step title="添加内容" description="为画刊添加内容">
|
|
|
+ <svg-icon icon-class="dot" slot="icon" class="svg-dot"></svg-icon>
|
|
|
+ </el-step>
|
|
|
+ </el-steps>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="create-bottom"
|
|
|
+ :class="[stepIndex === 1 ? 'create-bottom-high' : '']"
|
|
|
+ >
|
|
|
+ <template v-if="stepIndex === 0">
|
|
|
+ <el-form
|
|
|
+ :model="newspaperForm"
|
|
|
+ :rules="rulesNewspaper"
|
|
|
+ ref="newspaperForm"
|
|
|
+ label-width="100px"
|
|
|
+ class="registerForm"
|
|
|
+ >
|
|
|
+ <el-form-item label="画刊封面" prop="cover_image_url">
|
|
|
+ <upload
|
|
|
+ :datafileList="newspaperForm.cover_image_list"
|
|
|
+ :changeFillId="handleAvatarSuccess"
|
|
|
+ :fileName="'cover'"
|
|
|
+ :showList="true"
|
|
|
+ uploadType="image"
|
|
|
+ :filleNumber="1"
|
|
|
+ v-if="!newspaperForm.cover_image_url"
|
|
|
+ styleType="upload"
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ class="cover-box"
|
|
|
+ v-else
|
|
|
+ @mouseover="Imagemouseover('coverFlag', true)"
|
|
|
+ @mouseout="Imagemouseover('coverFlag', false)"
|
|
|
+ >
|
|
|
+ <el-image
|
|
|
+ :src="newspaperForm.cover_image_url"
|
|
|
+ fit="cover"
|
|
|
+ style="width: 200px; height: 280px"
|
|
|
+ ></el-image>
|
|
|
+ <p v-show="coverFlag" @click="handleDeleteFile('cover', 0)">
|
|
|
+ <i class="el-icon-delete"></i>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <p class="tips">建议上传宽高为200*280的图</p>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="画刊名称" prop="iss_name">
|
|
|
+ <el-input
|
|
|
+ v-model="newspaperForm.iss_name"
|
|
|
+ placeholder="请输入画刊名称"
|
|
|
+ @blur="handleTrim('newspaperForm', 'iss_name')"
|
|
|
+ maxlength="100"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="出版机构" prop="vendor_name">
|
|
|
+ <el-select
|
|
|
+ v-model="newspaperForm.vendor_name"
|
|
|
+ filterable
|
|
|
+ allow-create
|
|
|
+ default-first-option
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, i) in vendorList"
|
|
|
+ :key="item + i"
|
|
|
+ :label="item"
|
|
|
+ :value="item"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否合刊" required="" prop="comb_flag">
|
|
|
+ <el-radio-group v-model="newspaperForm.comb_flag">
|
|
|
+ <el-radio :label="0">否</el-radio>
|
|
|
+ <el-radio :label="1">是</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="期数"
|
|
|
+ prop="iss_no"
|
|
|
+ class="validity-box"
|
|
|
+ v-if="newspaperForm.comb_flag === 0"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="newspaperForm.iss_no"
|
|
|
+ type="number"
|
|
|
+ maxlength="5"
|
|
|
+ @input="$forceUpdate()"
|
|
|
+ >
|
|
|
+ <template slot="append">期</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="期数"
|
|
|
+ prop="iss_no_start"
|
|
|
+ v-if="newspaperForm.comb_flag === 1"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="newspaperForm.iss_no_start"
|
|
|
+ style="width: 114px"
|
|
|
+ maxlength="20"
|
|
|
+ @input="$forceUpdate()"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <!-- <el-input v-model="newspaperForm.iss_no_end" type="number">
|
|
|
+ <template slot="append">期</template>
|
|
|
+ </el-input> -->
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="发行日期" prop="release_date">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="newspaperForm.release_date"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ format="yyyy-MM-dd"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="标签" prop="info_tag_data">
|
|
|
+ <el-select
|
|
|
+ v-model="newspaperForm.info_tag_data"
|
|
|
+ multiple
|
|
|
+ filterable
|
|
|
+ allow-create
|
|
|
+ default-first-option
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, i) in tabsList"
|
|
|
+ :key="item + i"
|
|
|
+ :label="item"
|
|
|
+ :value="item"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="简介" prop="iss_note">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ :rows="4"
|
|
|
+ placeholder="请输入简介"
|
|
|
+ v-model="newspaperForm.iss_note"
|
|
|
+ maxlength="140"
|
|
|
+ show-word-limit
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <template>
|
|
|
+ <el-form-item
|
|
|
+ label="原价"
|
|
|
+ prop="iss_price_org"
|
|
|
+ class="price-box"
|
|
|
+ :key="'iss_price'"
|
|
|
+ >
|
|
|
+ <el-input-number
|
|
|
+ v-model="newspaperForm.iss_price_org"
|
|
|
+ :min="0"
|
|
|
+ size="small"
|
|
|
+ :precision="2"
|
|
|
+ class="personal-ceil"
|
|
|
+ ></el-input-number>
|
|
|
+ <span class="prepend">￥</span>
|
|
|
+ <span class="append">元</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="优惠价格" prop="has_discount">
|
|
|
+ <el-radio-group v-model="newspaperForm.has_discount">
|
|
|
+ <el-radio :label="0">没有</el-radio>
|
|
|
+ <el-radio :label="1">有</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="优惠价格"
|
|
|
+ prop="iss_price_sell"
|
|
|
+ class="price-box"
|
|
|
+ v-if="newspaperForm.has_discount === 1"
|
|
|
+ >
|
|
|
+ <el-input-number
|
|
|
+ v-model="newspaperForm.iss_price_sell"
|
|
|
+ :min="0"
|
|
|
+ size="small"
|
|
|
+ :precision="2"
|
|
|
+ class="personal-ceil"
|
|
|
+ ></el-input-number>
|
|
|
+ <span class="prepend">￥</span>
|
|
|
+ <span class="append">元</span>
|
|
|
+ <p class="tips">优惠价格必须低于原价</p>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-form>
|
|
|
+ </template>
|
|
|
+ <div
|
|
|
+ v-if="stepIndex === 1"
|
|
|
+ class="picArticle-box"
|
|
|
+ v-loading="loading"
|
|
|
+ >
|
|
|
+ <div class="picArticle-operate">
|
|
|
+ <div class="operate-left">
|
|
|
+ <i class="el-icon-arrow-left go-back" @click="$router.go(-1)"
|
|
|
+ >返回</i
|
|
|
+ >
|
|
|
+ <template>
|
|
|
+ <label>文章名称</label>
|
|
|
+ <el-input placeholder="请输入" v-model="title"></el-input>
|
|
|
+ </template>
|
|
|
+ <template>
|
|
|
+ <label>作者</label>
|
|
|
+ <el-input placeholder="请输入" v-model="author"></el-input>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="operate-right">
|
|
|
+ <el-button
|
|
|
+ type="info"
|
|
|
+ plain
|
|
|
+ size="small"
|
|
|
+ class="next-btn"
|
|
|
+ @click="changePageImg(picIndex - 1)"
|
|
|
+ :disabled="picIndex === 0"
|
|
|
+ >上一张</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="info"
|
|
|
+ plain
|
|
|
+ size="small"
|
|
|
+ class="next-btn"
|
|
|
+ @click="changePageImg(picIndex + 1)"
|
|
|
+ :disabled="picIndex === pageIds.length - 1"
|
|
|
+ >下一张</el-button
|
|
|
+ >
|
|
|
+ <!-- <el-button size="small" class="preview-btn">预览</el-button> -->
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ :loading="loading"
|
|
|
+ @click="savePageInfo(picIndex)"
|
|
|
+ >保存</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="picArticle-pic">
|
|
|
+ <div class="pic-box">
|
|
|
+ <draggable
|
|
|
+ v-model="pageIds"
|
|
|
+ chosenClass="chosen"
|
|
|
+ forceFallback="true"
|
|
|
+ group="people"
|
|
|
+ animation="1000"
|
|
|
+ @start="onStart"
|
|
|
+ @end="onEnd()"
|
|
|
+ class="article-list"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="pic-item"
|
|
|
+ v-for="(itemp, indexp) in pageIds"
|
|
|
+ :key="indexp"
|
|
|
+ @click="changePageImg(indexp)"
|
|
|
+ >
|
|
|
+ <el-image
|
|
|
+ :src="picObj[itemp].url"
|
|
|
+ fit="cover"
|
|
|
+ style="width: 198px; height: 124px"
|
|
|
+ v-if="picObj[itemp] && picObj[itemp].url"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ <div v-if="picIndex === indexp" class="pic-item-active">
|
|
|
+ <div class="mp3-box" v-if="picActiveSound[0]">
|
|
|
+ <img src="../../../assets/music-line.png" />
|
|
|
+ <span>{{
|
|
|
+ indexp + 1 + ". " + picActiveSound[0].name
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ <i class="el-icon-delete" @click="deletePic(itemp)"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </draggable>
|
|
|
+ <upload
|
|
|
+ :datafileList="pageIds"
|
|
|
+ :changeFillId="handlePagePicSuccess"
|
|
|
+ :fileName="'cover'"
|
|
|
+ :showList="true"
|
|
|
+ uploadType="image"
|
|
|
+ :filleNumber="999"
|
|
|
+ styleType="upload"
|
|
|
+ tips=" "
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="picObj[picActiveId]"
|
|
|
+ id="selectableArea"
|
|
|
+ @mousedown="startSelection"
|
|
|
+ @mousemove="updateSelection"
|
|
|
+ @mouseup="endSelection"
|
|
|
+ @mouseleave="endSelection"
|
|
|
+ :style="{
|
|
|
+ width: '1075px',
|
|
|
+ height: '751px',
|
|
|
+ background:
|
|
|
+ 'url(' +
|
|
|
+ picObj[picActiveId].url +
|
|
|
+ ') center / cover no-repeat',
|
|
|
+ position: 'relative',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-if="isSelecting"
|
|
|
+ :style="{
|
|
|
+ position: 'absolute',
|
|
|
+ top: `${startY}px`,
|
|
|
+ left: `${startX}px`,
|
|
|
+ width: `${endX - startX}px`,
|
|
|
+ height: `${endY - startY}px`,
|
|
|
+ border: '2px solid #165DFF',
|
|
|
+ }"
|
|
|
+ ></div>
|
|
|
+ <template
|
|
|
+ v-for="(itemh, indexh) in pages[picActiveId].hotspots"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-if="indexh === hotspotsActiveIndex"
|
|
|
+ :key="indexh"
|
|
|
+ :style="{
|
|
|
+ position: 'absolute',
|
|
|
+ top: `${itemh.y}`,
|
|
|
+ left: `${itemh.x}`,
|
|
|
+ width: `${itemh.width}`,
|
|
|
+ height: `${itemh.height}`,
|
|
|
+ border: '2px solid #165DFF',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <label
|
|
|
+ :style="{
|
|
|
+ position: 'absolute',
|
|
|
+ top: '-13px',
|
|
|
+ right: '-13px',
|
|
|
+ width: '26px',
|
|
|
+ height: '26px',
|
|
|
+ border: '2px solid #165DFF',
|
|
|
+ textAlign: 'center',
|
|
|
+ borderRadius: '50%',
|
|
|
+ boxShadow: ' 0px 5px 5px -3px #0000001A',
|
|
|
+ background: '#fff',
|
|
|
+ color: '#165DFF',
|
|
|
+ }"
|
|
|
+ >{{ indexh + 1 }}</label
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hotspots-box" v-if="pages[picActiveId]">
|
|
|
+ <div class="hotspots-top">
|
|
|
+ <div class="hotspots-top-left">
|
|
|
+ <label>音频</label>
|
|
|
+ <upload
|
|
|
+ :datafileList="picActiveSound"
|
|
|
+ :changeFillId="handleSoundSuccess"
|
|
|
+ uploadType="mp3"
|
|
|
+ :filleNumber="1"
|
|
|
+ :showList="true"
|
|
|
+ tips=" "
|
|
|
+ :fileName="'sound'"
|
|
|
+ v-if="picActiveSound.length == 0"
|
|
|
+ />
|
|
|
+ <ul v-if="picActiveSound.length > 0" class="resource-list">
|
|
|
+ <li v-for="(itemR, indexR) in picActiveSound" :key="indexR">
|
|
|
+ <a
|
|
|
+ ><svg-icon icon-class="mp3" class="icon-logo"></svg-icon
|
|
|
+ ><span>{{ itemR.name }}</span></a
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="el-icon-circle-close"
|
|
|
+ @click="handleDelResource(indexR, itemR.id, 'mp3')"
|
|
|
+ ></i>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ :loading="genloading"
|
|
|
+ @click="genTokens"
|
|
|
+ >生成字幕</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="hotspots-top-left">
|
|
|
+ <label>视频</label>
|
|
|
+ <upload
|
|
|
+ :datafileList="picActiveVideo"
|
|
|
+ :changeFillId="handleSoundSuccess"
|
|
|
+ uploadType="mp4"
|
|
|
+ :filleNumber="1"
|
|
|
+ :showList="true"
|
|
|
+ tips=" "
|
|
|
+ :fileName="'video'"
|
|
|
+ v-if="picActiveVideo.length == 0"
|
|
|
+ style="width: 500px"
|
|
|
+ />
|
|
|
+ <ul v-if="picActiveVideo.length > 0" class="resource-list">
|
|
|
+ <li v-for="(itemR, indexR) in picActiveVideo" :key="indexR">
|
|
|
+ <a
|
|
|
+ ><svg-icon icon-class="mp4" class="icon-logo"></svg-icon
|
|
|
+ ><span>{{ itemR.name }}</span></a
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="el-icon-circle-close"
|
|
|
+ @click="handleDelResource(indexR, itemR.id, 'mp4')"
|
|
|
+ ></i>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ul
|
|
|
+ class="hotspots-list"
|
|
|
+ v-if="pages[picActiveId] && pages[picActiveId].hotspots"
|
|
|
+ >
|
|
|
+ <li
|
|
|
+ v-for="(itemh, indexh) in pages[picActiveId].hotspots"
|
|
|
+ :key="indexh"
|
|
|
+ >
|
|
|
+ <span>{{ indexh + 1 }}</span>
|
|
|
+ <div class="content">
|
|
|
+ <el-input
|
|
|
+ v-if="indexh === hotspotsActiveIndex"
|
|
|
+ type="textarea"
|
|
|
+ :rows="2"
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="itemh.text"
|
|
|
+ maxlength="500"
|
|
|
+ show-word-limit
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <p v-else>{{ itemh.text }}</p>
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ v-if="hotspotsActiveIndex !== indexh"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="hotspotsActiveIndex = indexh"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-else
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="hotspotsActiveIndex = null"
|
|
|
+ >保存</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="small"
|
|
|
+ @click="deletehotspots(indexh)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="previewBook"
|
|
|
+ :show-close="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :append-to-body="true"
|
|
|
+ width="100%"
|
|
|
+ top="0"
|
|
|
+ class="login-dialog"
|
|
|
+ v-if="previewBook"
|
|
|
+ >
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
+import Header from "../../../components/Header.vue";
|
|
|
+import NavMenu from "../../../components/NavMenu.vue";
|
|
|
+import Breadcrumb from "../../../components/Breadcrumb.vue";
|
|
|
+import Upload from "../../../components/Upload.vue";
|
|
|
+import { getLogin } from "@/api/ajax";
|
|
|
+import { mapState } from "vuex";
|
|
|
+import draggable from "vuedraggable";
|
|
|
+
|
|
|
+export default {
|
|
|
+ //import引入的组件需要注入到对象中才能使用
|
|
|
+ components: { Header, NavMenu, Breadcrumb, Upload, draggable },
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ const validateIssNo = (rule, value, callback) => {
|
|
|
+ if (value === "") {
|
|
|
+ callback(new Error("请输入期数"));
|
|
|
+ } else {
|
|
|
+ let start = this.newspaperForm.iss_no_start;
|
|
|
+ let end = this.newspaperForm.iss_no_end;
|
|
|
+ if (start !== null && end !== null) {
|
|
|
+ if (start >= end) {
|
|
|
+ callback(new Error("开始期数需小于结束期数"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ callback(new Error("请输入期数"));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const validatePrice = (rule, value, callback) => {
|
|
|
+ if (value === "") {
|
|
|
+ callback(new Error("请输入价格"));
|
|
|
+ } else {
|
|
|
+ let price = this.newspaperForm.iss_price_org;
|
|
|
+ let currentPrice = this.newspaperForm.iss_price_sell;
|
|
|
+ if (price !== undefined && currentPrice !== undefined) {
|
|
|
+ if (price === 0 && rule.fullField === "price") {
|
|
|
+ callback(new Error("原价需大于0"));
|
|
|
+ } else if (currentPrice >= price && this.newspaperForm.has_discount) {
|
|
|
+ callback(new Error("优惠价格必须低于原价"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ callback(new Error("请输入"));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const validatePrices = (rule, value, callback) => {
|
|
|
+ if (value === "") {
|
|
|
+ callback(new Error("请输入价格"));
|
|
|
+ } else {
|
|
|
+ let price = this.newspaperForm.with_addon_price_org;
|
|
|
+ let currentPrice = this.newspaperForm.with_addon_price_sell;
|
|
|
+ if (price !== undefined && currentPrice !== undefined) {
|
|
|
+ if (price === 0 && rule.fullField === "price") {
|
|
|
+ callback(new Error("原价需大于0"));
|
|
|
+ } else if (
|
|
|
+ currentPrice >= price &&
|
|
|
+ this.newspaperForm.has_discount_addon
|
|
|
+ ) {
|
|
|
+ callback(new Error("优惠价格必须低于原价"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ callback(new Error("请输入"));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const validateIssNoDan = (rule, value, callback) => {
|
|
|
+ if (value === "") {
|
|
|
+ callback(new Error("请输入期数"));
|
|
|
+ } else {
|
|
|
+ if (value.length > 5) {
|
|
|
+ callback(new Error("期数过长"));
|
|
|
+ } else {
|
|
|
+ let reg = /^[0-9]*[1-9][0-9]*$/;
|
|
|
+ let result = reg.test(value);
|
|
|
+ if (!result) {
|
|
|
+ callback(new Error("期数只能输入正整数"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ activeMenuIndex: "pictorial_manage",
|
|
|
+ breadcrumbList: [
|
|
|
+ {
|
|
|
+ icon: "file-list-line",
|
|
|
+ url: "",
|
|
|
+ text: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "",
|
|
|
+ url: "",
|
|
|
+ notLink: true,
|
|
|
+ text: "内容管理",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "",
|
|
|
+ url: "",
|
|
|
+ text: "画刊管理",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ id: this.$route.query.id ? this.$route.query.id : "",
|
|
|
+ stepIndex: 0, // 步骤索引
|
|
|
+ coverFlag: false,
|
|
|
+ newspaperForm: {
|
|
|
+ cover_image_url: "",
|
|
|
+ cover_image_list: [],
|
|
|
+ cover_image_id: null,
|
|
|
+ iss_name: "",
|
|
|
+ vendor_name: "21世纪报社",
|
|
|
+ comb_flag: 0,
|
|
|
+ iss_no: null,
|
|
|
+ iss_no_start: null,
|
|
|
+ iss_no_end: null,
|
|
|
+ release_date: "",
|
|
|
+ info_tag_data: [],
|
|
|
+ chn_data: "",
|
|
|
+ chn_data_str: "",
|
|
|
+ iss_note: "",
|
|
|
+ with_addon_flag: 0,
|
|
|
+ iss_price_org: null,
|
|
|
+ iss_price_sell: null,
|
|
|
+ with_addon_price_org: null,
|
|
|
+ with_addon_price_sell: null,
|
|
|
+ has_discount: 1,
|
|
|
+ has_discount_addon: 1,
|
|
|
+ },
|
|
|
+ rulesNewspaper: {
|
|
|
+ iss_name: [
|
|
|
+ { required: true, message: "请输入画刊名称", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ vendor_name: [
|
|
|
+ { required: true, message: "请输入出版机构", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ iss_no: [
|
|
|
+ { required: true, validator: validateIssNoDan, trigger: "blur" },
|
|
|
+ ],
|
|
|
+ iss_no_start: [
|
|
|
+ { required: true, message: "请输入期数", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ iss_no_end: [
|
|
|
+ { required: true, validator: validateIssNo, trigger: "blur" },
|
|
|
+ ],
|
|
|
+ iss_price_org: [
|
|
|
+ { required: true, validator: validatePrice, trigger: "blur" },
|
|
|
+ ],
|
|
|
+ iss_price_sell: [
|
|
|
+ { required: true, validator: validatePrice, trigger: "blur" },
|
|
|
+ ],
|
|
|
+ with_addon_price_org: [
|
|
|
+ { required: true, validator: validatePrices, trigger: "blur" },
|
|
|
+ ],
|
|
|
+ with_addon_price_sell: [
|
|
|
+ { required: true, validator: validatePrices, trigger: "blur" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ vendorList: [], // 出版机构列表
|
|
|
+ vlList: [], // 课标词表
|
|
|
+ tplList: [], // 栏目列表
|
|
|
+ tabsList: ["中英双语", "少儿必读"],
|
|
|
+ issueId: "",
|
|
|
+ drag: false,
|
|
|
+ loading: false,
|
|
|
+ previewBook: false,
|
|
|
+ pageIds: [],
|
|
|
+ pages: {},
|
|
|
+ picObj: {},
|
|
|
+ picActiveObj: {}, // 当前高亮图片的内容
|
|
|
+ picIndex: null, // 选中的图片索引
|
|
|
+ picActiveId: "",
|
|
|
+ resourceObj: {}, // 资源文件列表
|
|
|
+ picActiveSound: [], // 当前高亮图片的音频
|
|
|
+ picActiveVideo: [], // 当前高亮图片的视频
|
|
|
+ drag: false,
|
|
|
+ title: "",
|
|
|
+ author: "",
|
|
|
+ isSelecting: false,
|
|
|
+ startX: 0,
|
|
|
+ startY: 0,
|
|
|
+ endX: 0,
|
|
|
+ endY: 0,
|
|
|
+ hotspotsActiveIndex: null, // 当前编辑热区索引
|
|
|
+ genloading: false, // 字幕节点loading
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //计算属性 类似于data概念
|
|
|
+ computed: {
|
|
|
+ ...mapState(["$studyType"]),
|
|
|
+ },
|
|
|
+ //监控data中数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ // 上一步下一步
|
|
|
+ handleStep(type) {
|
|
|
+ if (type == "-") {
|
|
|
+ if (this.stepIndex > 0) this.stepIndex--;
|
|
|
+ } else {
|
|
|
+ if (this.stepIndex === 0) {
|
|
|
+ this.$refs["newspaperForm"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (this.id) {
|
|
|
+ this.handleEditIssue();
|
|
|
+ } else {
|
|
|
+ this.handleAddIssue();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleAvatarSuccess(fileList, name) {
|
|
|
+ if (name === "cover") {
|
|
|
+ this.newspaperForm.cover_image_list = fileList;
|
|
|
+ this.newspaperForm.cover_image_id =
|
|
|
+ fileList[0] &&
|
|
|
+ fileList[0].response &&
|
|
|
+ fileList[0].response.file_info_list &&
|
|
|
+ fileList[0].response.file_info_list[0]
|
|
|
+ ? fileList[0].response.file_info_list[0].file_id
|
|
|
+ : "";
|
|
|
+ this.newspaperForm.cover_image_url =
|
|
|
+ fileList[0] &&
|
|
|
+ fileList[0].response &&
|
|
|
+ fileList[0].response.file_info_list &&
|
|
|
+ fileList[0].response.file_info_list[0]
|
|
|
+ ? fileList[0].response.file_info_list[0].file_url
|
|
|
+ : "";
|
|
|
+ this.$forceUpdate();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSoundSuccess(fileList, name) {
|
|
|
+ let obj = {
|
|
|
+ id:
|
|
|
+ fileList[0] &&
|
|
|
+ fileList[0].response &&
|
|
|
+ fileList[0].response.file_info_list &&
|
|
|
+ fileList[0].response.file_info_list[0]
|
|
|
+ ? fileList[0].response.file_info_list[0].file_id
|
|
|
+ : "",
|
|
|
+ url:
|
|
|
+ fileList[0] &&
|
|
|
+ fileList[0].response &&
|
|
|
+ fileList[0].response.file_info_list &&
|
|
|
+ fileList[0].response.file_info_list[0]
|
|
|
+ ? fileList[0].response.file_info_list[0].file_url
|
|
|
+ : "",
|
|
|
+ name:
|
|
|
+ fileList[0] &&
|
|
|
+ fileList[0].response &&
|
|
|
+ fileList[0].response.file_info_list &&
|
|
|
+ fileList[0].response.file_info_list[0]
|
|
|
+ ? fileList[0].response.file_info_list[0].file_name
|
|
|
+ : "",
|
|
|
+ };
|
|
|
+ if (name === "sound") {
|
|
|
+ this.picActiveSound = [obj];
|
|
|
+ this.pages[this.picActiveId].sound.id = obj.id;
|
|
|
+ } else {
|
|
|
+ this.picActiveVideo = [obj];
|
|
|
+ this.pages[this.picActiveId].video.id = obj.id;
|
|
|
+ }
|
|
|
+ this.$set(this.resourceObj, obj.id, obj);
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ // 删除资源文件
|
|
|
+ handleDelResource(i, id, type) {
|
|
|
+ if (type === "mp3") {
|
|
|
+ this.picActiveSound.splice(i, 1);
|
|
|
+ this.pages[this.picActiveId].sound.id = "";
|
|
|
+ } else {
|
|
|
+ this.picActiveVideo.splice(i, 1);
|
|
|
+ this.pages[this.picActiveId].video.id = "";
|
|
|
+ }
|
|
|
+ delete this.resourceObj[id];
|
|
|
+ },
|
|
|
+ handlePagePicSuccess(fileList) {
|
|
|
+ let newPage = [];
|
|
|
+ fileList.forEach((file) => {
|
|
|
+ if (
|
|
|
+ file.response &&
|
|
|
+ file.response.file_info_list &&
|
|
|
+ file.response.file_info_list[0]
|
|
|
+ ) {
|
|
|
+ let obj = {
|
|
|
+ url: file.response.file_info_list[0].file_url,
|
|
|
+ id: file.response.file_info_list[0].file_id,
|
|
|
+ };
|
|
|
+ this.pageIds.push(file.response.file_info_list[0].file_id);
|
|
|
+ this.$set(this.picObj, file.response.file_info_list[0].file_id, obj);
|
|
|
+ newPage.push(file.response.file_info_list[0].file_id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.savePageInfo(null, "add", newPage);
|
|
|
+ if (!this.picIndex) {
|
|
|
+ this.picIndex = 0;
|
|
|
+ this.picActiveId = this.pageIds[0];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ Imagemouseover(item, flag) {
|
|
|
+ this[item] = flag;
|
|
|
+ },
|
|
|
+ handleDeleteFile(item, i) {
|
|
|
+ this.$confirm("确定删除吗?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ }).then(() => {
|
|
|
+ if (item === "cover") {
|
|
|
+ this.newspaperForm.cover_image_list.splice(i, 1);
|
|
|
+ this.newspaperForm.cover_image_url = "";
|
|
|
+ this.newspaperForm.cover_image_id = null;
|
|
|
+ this.$forceUpdate();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleDeleteArticle(item, i, id) {
|
|
|
+ this.$confirm("确定删除吗?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ }).then(() => {
|
|
|
+ item.splice(i, 1);
|
|
|
+ getLogin("/PaperServer/Manager/ArticleManager/DeleteArticle", {
|
|
|
+ id: id,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 去掉前后空格
|
|
|
+ handleTrim(form, fild) {
|
|
|
+ this[form][fild] = this[form][fild].trim();
|
|
|
+ },
|
|
|
+ // 获取出版机构列表
|
|
|
+ getVendorList() {
|
|
|
+ let MethodName = "/PaperServer/Manager/PicIssueManager/FindVendors";
|
|
|
+ let data = {
|
|
|
+ key_word: "",
|
|
|
+ };
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.vendorList = res.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+
|
|
|
+ handleAddIssue() {
|
|
|
+ this.loading = true;
|
|
|
+ let MethodName = "/PaperServer/Manager/PicIssueManager/AddIssue";
|
|
|
+ let form = this.newspaperForm;
|
|
|
+ let data = {
|
|
|
+ iss_cover_id: form.cover_image_id,
|
|
|
+ iss_name: form.iss_name,
|
|
|
+ vendor_name: form.vendor_name,
|
|
|
+ release_date: form.release_date,
|
|
|
+ comb_flag: form.comb_flag,
|
|
|
+ iss_no: form.comb_flag === 0 ? form.iss_no : form.iss_no_start,
|
|
|
+ iss_price_org: form.iss_price_org,
|
|
|
+ iss_price_sell:
|
|
|
+ this.newspaperForm.has_discount === 1
|
|
|
+ ? form.iss_price_sell
|
|
|
+ : form.iss_price_org,
|
|
|
+ with_addon_price_org: form.with_addon_price_org,
|
|
|
+ with_addon_price_sell:
|
|
|
+ this.newspaperForm.has_discount_addon === 1
|
|
|
+ ? form.with_addon_price_sell
|
|
|
+ : form.with_addon_price_org,
|
|
|
+ iss_note: form.iss_note,
|
|
|
+ info_tag_data: form.info_tag_data,
|
|
|
+ with_addon_flag: form.with_addon_flag,
|
|
|
+ };
|
|
|
+ if (this.id || this.issueId) {
|
|
|
+ this.loading = false;
|
|
|
+ this.stepIndex++;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false;
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.issueId = res.data.id;
|
|
|
+ this.$router.replace(
|
|
|
+ "/createPictorial?id=" + res.data.id + "&isCreate=true"
|
|
|
+ );
|
|
|
+ this.stepIndex++;
|
|
|
+ this.getPicArticleInfo();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleEditIssue() {
|
|
|
+ this.loading = true;
|
|
|
+ let MethodName = "/PaperServer/Manager/PicIssueManager/EditIssue";
|
|
|
+ let form = this.newspaperForm;
|
|
|
+ let data = {
|
|
|
+ iss_cover_id: form.cover_image_id,
|
|
|
+ iss_name: form.iss_name,
|
|
|
+ vendor_name: form.vendor_name,
|
|
|
+ release_date: form.release_date,
|
|
|
+ comb_flag: form.comb_flag,
|
|
|
+ iss_no: form.comb_flag === 0 ? form.iss_no : form.iss_no_start,
|
|
|
+ study_phase: form.study_phase,
|
|
|
+ vl_id: form.vl_id,
|
|
|
+ iss_price_org: form.iss_price_org,
|
|
|
+ iss_price_sell:
|
|
|
+ this.newspaperForm.has_discount === 1
|
|
|
+ ? form.iss_price_sell
|
|
|
+ : form.iss_price_org,
|
|
|
+ with_addon_price_org: form.with_addon_price_org,
|
|
|
+ with_addon_price_sell:
|
|
|
+ this.newspaperForm.has_discount_addon === 1
|
|
|
+ ? form.with_addon_price_sell
|
|
|
+ : form.with_addon_price_org,
|
|
|
+ iss_note: form.iss_note,
|
|
|
+ info_tag_data: form.info_tag_data,
|
|
|
+ chn_data: JSON.parse(form.chn_data),
|
|
|
+ with_addon_flag: form.with_addon_flag,
|
|
|
+ id: this.id ? this.id : this.issueId,
|
|
|
+ };
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false;
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.stepIndex++;
|
|
|
+ this.getPicArticleInfo();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getInfo() {
|
|
|
+ let MethodName = "/PaperServer/Manager/PicIssueManager/FindIssueById";
|
|
|
+ let data = {
|
|
|
+ id: this.id ? this.id : this.issueId,
|
|
|
+ };
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.newspaperForm = res.data;
|
|
|
+ this.newspaperForm.cover_image_list = [];
|
|
|
+ this.newspaperForm.chn_data = JSON.stringify(res.data.chn_data);
|
|
|
+ this.newspaperForm.chn_data_str = JSON.parse(
|
|
|
+ res.data.chn_data
|
|
|
+ ).join("\n");
|
|
|
+ this.newspaperForm.cover_image_id = res.data.iss_cover_id;
|
|
|
+ this.newspaperForm.iss_no_start = res.data.iss_no;
|
|
|
+ if (res.data.iss_cover_id) {
|
|
|
+ if (res.data.iss_cover_id.indexOf("http") === -1) {
|
|
|
+ getLogin("/FileServer/GetFileInfo", {
|
|
|
+ file_id: res.data.iss_cover_id,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.newspaperForm.cover_image_url = res.file_url;
|
|
|
+ this.$forceUpdate();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.newspaperForm.cover_image_url = res.data.iss_cover_id;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.newspaperForm.cover_image_list.push[
|
|
|
+ {
|
|
|
+ id: res.data.iss_cover_id,
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ } else if (res.data.iss_cover_url) {
|
|
|
+ this.newspaperForm.cover_image_url = res.data.iss_cover_url;
|
|
|
+ this.newspaperForm.cover_image_list.push[
|
|
|
+ {
|
|
|
+ id: res.data.cover_image_url,
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ }
|
|
|
+
|
|
|
+ if (res.data.iss_price_org === res.data.iss_price_sell) {
|
|
|
+ this.$set(this.newspaperForm, "has_discount", 0);
|
|
|
+ } else {
|
|
|
+ this.$set(this.newspaperForm, "has_discount", 1);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ res.data.with_addon_price_org === res.data.with_addon_price_sell
|
|
|
+ ) {
|
|
|
+ this.$set(this.newspaperForm, "has_discount_addon", 0);
|
|
|
+ } else {
|
|
|
+ this.$set(this.newspaperForm, "has_discount_addon", 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ // 获取画刊内容
|
|
|
+ getPicArticleInfo() {
|
|
|
+ this.loading = true;
|
|
|
+ let MethodName =
|
|
|
+ "/PaperServer/Manager/PicArticleManager/FindPicArticleBeanById";
|
|
|
+ let data = {
|
|
|
+ issId: this.id ? this.id : this.issueId,
|
|
|
+ };
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false;
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.title = res.data.title;
|
|
|
+ this.author = res.data.author;
|
|
|
+ if (res.data && res.data.pages) {
|
|
|
+ this.pages = res.data.pages;
|
|
|
+ }
|
|
|
+ if (res.data && res.data.pageIds) {
|
|
|
+ this.pageIds = res.data.pageIds;
|
|
|
+ res.data.pageIds.forEach((items) => {
|
|
|
+ if (!this.picObj[items]) {
|
|
|
+ getLogin("/FileServer/GetFileInfo", {
|
|
|
+ file_id: items,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.$set(this.picObj, items, { url: res.file_url });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (this.picIndex === null) {
|
|
|
+ this.picIndex = 0;
|
|
|
+ this.picActiveId = this.pageIds[0];
|
|
|
+ }
|
|
|
+ if (this.pages[this.picActiveId].sound.id) {
|
|
|
+ getLogin("/FileServer/GetFileInfo", {
|
|
|
+ file_id: this.pages[this.picActiveId].sound.id,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ let obj = {
|
|
|
+ id: res.file_id,
|
|
|
+ url: res.file_url,
|
|
|
+ name: res.file_name,
|
|
|
+ };
|
|
|
+ this.picActiveSound = [obj];
|
|
|
+ this.$set(this.resourceObj, obj.id, obj);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.picActiveSound = [];
|
|
|
+ }
|
|
|
+ if (this.pages[this.picActiveId].video.id) {
|
|
|
+ getLogin("/FileServer/GetFileInfo", {
|
|
|
+ file_id: this.pages[this.picActiveId].video.id,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ let obj = {
|
|
|
+ id: res.file_id,
|
|
|
+ url: res.file_url,
|
|
|
+ name: res.file_name,
|
|
|
+ };
|
|
|
+ this.picActiveVideo = [obj];
|
|
|
+ this.$set(this.resourceObj, obj.id, obj);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.picActiveVideo = [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 删除热区
|
|
|
+ deletehotspots(index) {
|
|
|
+ this.pages[this.picActiveId].hotspots.splice(index, 1);
|
|
|
+ if (this.hotspotsActiveIndex === index) {
|
|
|
+ this.hotspotsActiveIndex = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 预览栏目
|
|
|
+ previewBookItem() {
|
|
|
+ this.previewBook = true;
|
|
|
+ },
|
|
|
+ closePreview() {
|
|
|
+ this.previewBook = false;
|
|
|
+ },
|
|
|
+ //开始拖拽事件
|
|
|
+ onStart(val) {
|
|
|
+ this.drag = true;
|
|
|
+ },
|
|
|
+ //拖拽结束事件
|
|
|
+ onEnd() {
|
|
|
+ this.drag = false;
|
|
|
+ this.picIndex = this.pageIds.indexOf(this.picActiveId);
|
|
|
+ this.savePageInfo();
|
|
|
+ },
|
|
|
+ // 切换图片
|
|
|
+ changePageImg(index) {
|
|
|
+ this.savePageInfo(index);
|
|
|
+ },
|
|
|
+ // 生成字幕时间节点
|
|
|
+ genTokens() {
|
|
|
+ this.genloading = true;
|
|
|
+ let MethodName =
|
|
|
+ "/PaperServer/Manager/PicArticleManager/GenPicArticlePageSrt";
|
|
|
+ let data = {
|
|
|
+ issId: this.id ? this.id : this.issueId,
|
|
|
+ pages: {
|
|
|
+ [this.picActiveId]: this.pages[this.picActiveId],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ this.genloading = false;
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.$message.success("字幕生成成功");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.genloading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 保存图片信息
|
|
|
+ savePageInfo(index, type, list) {
|
|
|
+ if (index || index === 0) {
|
|
|
+ this.picIndex = index;
|
|
|
+ this.picActiveId = this.pageIds[index];
|
|
|
+ }
|
|
|
+ let pagesObj = {};
|
|
|
+ if (type && type === "add") {
|
|
|
+ list.forEach((item) => {
|
|
|
+ let obj = {
|
|
|
+ id: "",
|
|
|
+ img: {
|
|
|
+ id: item,
|
|
|
+ },
|
|
|
+ sound: {
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ video: {
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ hotspots: [],
|
|
|
+ };
|
|
|
+ this.$set(pagesObj, item, obj);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ pagesObj = this.pages;
|
|
|
+ }
|
|
|
+ let MethodName = "/PaperServer/Manager/PicArticleManager/EditPicArticle";
|
|
|
+ let data = {
|
|
|
+ issId: this.id ? this.id : this.issueId,
|
|
|
+ title: this.title,
|
|
|
+ author: this.author,
|
|
|
+ pageIds: this.pageIds,
|
|
|
+ pages: pagesObj,
|
|
|
+ };
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.getPicArticleInfo();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ startSelection(event) {
|
|
|
+ this.isSelecting = true;
|
|
|
+ let clientRect = document
|
|
|
+ .getElementById("selectableArea")
|
|
|
+ .getBoundingClientRect();
|
|
|
+
|
|
|
+ this.startX = event.clientX - clientRect.left;
|
|
|
+ this.startY = event.clientY - clientRect.top;
|
|
|
+ },
|
|
|
+ updateSelection(event) {
|
|
|
+ if (!this.isSelecting) return;
|
|
|
+ let clientRect = document
|
|
|
+ .getElementById("selectableArea")
|
|
|
+ .getBoundingClientRect();
|
|
|
+
|
|
|
+ this.endX = event.clientX - clientRect.left;
|
|
|
+ this.endY = event.clientY - clientRect.top;
|
|
|
+ },
|
|
|
+ endSelection() {
|
|
|
+ this.isSelecting = false;
|
|
|
+ const width = Math.abs(this.endX - this.startX);
|
|
|
+ const height = Math.abs(this.endY - this.startY);
|
|
|
+ const x = this.endX > this.startX ? this.startX + "px" : this.endX + "px";
|
|
|
+ const y = this.endY > this.startY ? this.startY + "px" : this.endY + "px";
|
|
|
+ if (width && height) {
|
|
|
+ this.pages[this.picActiveId].hotspots.push({
|
|
|
+ id: Math.random().toString(36).substring(2, 10),
|
|
|
+ width: width + "px",
|
|
|
+ height: height + "px",
|
|
|
+ x: x,
|
|
|
+ y: y,
|
|
|
+ text: "",
|
|
|
+ });
|
|
|
+ this.startX = 0;
|
|
|
+ this.endX = 0;
|
|
|
+ this.startY = 0;
|
|
|
+ this.endY = 0;
|
|
|
+ this.hotspotsActiveIndex =
|
|
|
+ this.pages[this.picActiveId].hotspots.length - 1;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 删除图片
|
|
|
+ deletePic(id) {
|
|
|
+ let index = this.pageIds.indexOf(id);
|
|
|
+ this.pageIds.splice(index, 1);
|
|
|
+ if (this.pageIds.length > 0) {
|
|
|
+ this.picIndex = 0;
|
|
|
+ this.picActiveId = this.pageIds[0];
|
|
|
+ } else {
|
|
|
+ this.picIndex = null;
|
|
|
+ this.picActiveId = "";
|
|
|
+ }
|
|
|
+ this.savePageInfo("", "del");
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ async created() {
|
|
|
+ this.getVendorList();
|
|
|
+ let obj = {
|
|
|
+ icon: "",
|
|
|
+ url: "",
|
|
|
+ text: "创建画刊",
|
|
|
+ };
|
|
|
+ if (this.$route.query.isCreate === "false") {
|
|
|
+ obj.text = "编辑画刊";
|
|
|
+ }
|
|
|
+ if (this.id) {
|
|
|
+ this.getInfo();
|
|
|
+ }
|
|
|
+ this.breadcrumbList.push(obj);
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {},
|
|
|
+ //生命周期-创建之前
|
|
|
+ beforeCreated() {},
|
|
|
+ //生命周期-挂载之前
|
|
|
+ beforeMount() {},
|
|
|
+ //生命周期-更新之前
|
|
|
+ beforUpdate() {},
|
|
|
+ //生命周期-更新之后
|
|
|
+ updated() {},
|
|
|
+ //生命周期-销毁之前
|
|
|
+ beforeDestory() {},
|
|
|
+ //生命周期-销毁完成
|
|
|
+ destoryed() {},
|
|
|
+ //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ activated() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* @import url(); 引入css类 */
|
|
|
+.create-top {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 24px;
|
|
|
+ .common-title-box {
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.create-bottom {
|
|
|
+ padding: 40px 40px;
|
|
|
+ margin-top: 16px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4px;
|
|
|
+ height: calc(100vh - 292px);
|
|
|
+ overflow: auto;
|
|
|
+ &-high {
|
|
|
+ height: calc(100vh - 146px);
|
|
|
+ padding: 0 16px 40px 16px;
|
|
|
+ }
|
|
|
+ .tips {
|
|
|
+ margin: 0;
|
|
|
+ color: #86909c;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .step-table {
|
|
|
+ border: 1px solid #e5e6eb;
|
|
|
+ border-collapse: collapse;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #1d2129;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ &-header {
|
|
|
+ background: #f7f8fa;
|
|
|
+ width: 120px !important;
|
|
|
+ color: #86909c;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ height: 40px;
|
|
|
+ width: 260px;
|
|
|
+ border: 1px solid #e5e6eb;
|
|
|
+ &.td1 {
|
|
|
+ width: 130px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .step-cascader {
|
|
|
+ width: 250px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tpl-maintain {
|
|
|
+ margin: 0 16px;
|
|
|
+ color: #4f75ff;
|
|
|
+ &:hover {
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ h6 {
|
|
|
+ color: #000;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ margin: 0 0 16px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.cover-box {
|
|
|
+ position: relative;
|
|
|
+ width: 200px;
|
|
|
+ height: 280px;
|
|
|
+ p {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 280px;
|
|
|
+ line-height: 280px;
|
|
|
+ font-size: 20px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ color: #f2f3f5;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.issue-channel {
|
|
|
+ .issue-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ &-left {
|
|
|
+ margin: 0;
|
|
|
+ color: #1d2129;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 28px;
|
|
|
+ span {
|
|
|
+ margin-left: 4px;
|
|
|
+ color: #86909c;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .channel-item {
|
|
|
+ border: 1px solid #e5e6eb;
|
|
|
+ margin: 12px 0;
|
|
|
+ .channel-top {
|
|
|
+ display: flex;
|
|
|
+ padding: 0 12px;
|
|
|
+ height: 42px;
|
|
|
+ align-items: center;
|
|
|
+ .el-icon-caret-bottom,
|
|
|
+ .el-icon-caret-top {
|
|
|
+ color: #4e5969;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &-name {
|
|
|
+ margin-left: 6px;
|
|
|
+ flex: 1;
|
|
|
+ word-break: break-word;
|
|
|
+ color: #1d2129;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ .edit-chn-name {
|
|
|
+ margin-left: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-button--text {
|
|
|
+ padding: 2px 12px;
|
|
|
+ color: #165dff;
|
|
|
+ .el-icon-plus {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ margin-right: 8px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .article-list {
|
|
|
+ margin: 0;
|
|
|
+ padding: 8px;
|
|
|
+ list-style: none;
|
|
|
+ background: #f7f8fa;
|
|
|
+ min-height: 44px;
|
|
|
+ border-top: 1px solid #e5e6eb;
|
|
|
+ li {
|
|
|
+ padding: 13px 20px;
|
|
|
+ border-bottom: 1px solid #e5e6eb;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .svg-icon {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ cursor: move;
|
|
|
+ }
|
|
|
+ .edit-article {
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 8px;
|
|
|
+ width: 32px;
|
|
|
+ height: 48px;
|
|
|
+ }
|
|
|
+ .items {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 16px;
|
|
|
+ h6 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ word-break: break-word;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: #1d2129;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .border {
|
|
|
+ height: 12px;
|
|
|
+ width: 1px;
|
|
|
+ display: block;
|
|
|
+ background: #e5e6eb;
|
|
|
+ }
|
|
|
+ .el-icon-delete {
|
|
|
+ font-weight: bold;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 8px;
|
|
|
+ height: 48px;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.picArticle-box {
|
|
|
+ position: relative;
|
|
|
+ padding-top: 56px;
|
|
|
+ .picArticle-operate {
|
|
|
+ position: fixed;
|
|
|
+ width: calc(100% - 250px);
|
|
|
+ background: #ffffff;
|
|
|
+ top: 124px;
|
|
|
+ left: 236px;
|
|
|
+ z-index: 2;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 16px;
|
|
|
+ .preview-btn {
|
|
|
+ border: 1px solid #165dff;
|
|
|
+ border-radius: 2px;
|
|
|
+ color: #165dff;
|
|
|
+ background: #ffffff;
|
|
|
+ }
|
|
|
+ .next-btn {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .operate-left {
|
|
|
+ .go-back {
|
|
|
+ color: #165dff;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ padding: 5px 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ label {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #4e5969;
|
|
|
+ padding: 0 16px 0 24px;
|
|
|
+ }
|
|
|
+ .el-input {
|
|
|
+ width: 280px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .picArticle-pic {
|
|
|
+ background: #e9e9e9;
|
|
|
+ padding: 16px;
|
|
|
+ border-radius: 4px;
|
|
|
+ .article-list {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 8px;
|
|
|
+ }
|
|
|
+ .pic-box {
|
|
|
+ display: flex;
|
|
|
+ overflow-x: auto;
|
|
|
+ column-gap: 8px;
|
|
|
+ .pic-item {
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ width: 198px;
|
|
|
+ height: 124px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ cursor: move;
|
|
|
+ }
|
|
|
+ :deep .el-upload {
|
|
|
+ width: 198px;
|
|
|
+ height: 124px;
|
|
|
+ }
|
|
|
+ :deep .upload-style {
|
|
|
+ height: 124px;
|
|
|
+ padding-top: 40px;
|
|
|
+ }
|
|
|
+ .pic-item-active {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1;
|
|
|
+ border: 4px solid #306eff;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .mp3-box {
|
|
|
+ display: flex;
|
|
|
+ padding: 8px 16px;
|
|
|
+ border-radius: 40px;
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
+ color: #ffffff;
|
|
|
+ position: absolute;
|
|
|
+ left: 8px;
|
|
|
+ bottom: 8px;
|
|
|
+ z-index: 1;
|
|
|
+ width: 126px;
|
|
|
+ column-gap: 8px;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-icon-delete {
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+ background: #e34444;
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 22px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: 8px;
|
|
|
+ bottom: 8px;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hotspots-box {
|
|
|
+ margin-top: 24px;
|
|
|
+ .hotspots-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .hotspots-top-left {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 8px;
|
|
|
+ label {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 32px;
|
|
|
+ color: #4e5969;
|
|
|
+ }
|
|
|
+ :deep .upload {
|
|
|
+ width: 72px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .resource-list {
|
|
|
+ list-style: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ a {
|
|
|
+ width: 226px;
|
|
|
+ padding: 7px 12px;
|
|
|
+ background: #f7f8fa;
|
|
|
+ border-radius: 2px;
|
|
|
+ color: #1d2129;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ flex: 1;
|
|
|
+ display: block;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .svg-icon {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 8px;
|
|
|
+ color: #4e5969;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-icon-delete {
|
|
|
+ color: #4e5969;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 12px;
|
|
|
+ &:hover {
|
|
|
+ color: #165dff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hotspots-list {
|
|
|
+ list-style: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ padding: 16px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+ width: 100%;
|
|
|
+ column-gap: 8px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 24px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ffffff;
|
|
|
+ background: #004eff;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .el-button--danger {
|
|
|
+ height: 32px;
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ flex: 1;
|
|
|
+ .el-textarea {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.newspaper-create {
|
|
|
+ .validity-box {
|
|
|
+ // width: 114px;
|
|
|
+ .el-input-group {
|
|
|
+ width: 114px;
|
|
|
+ }
|
|
|
+ .el-input__inner {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .el-input-group__append {
|
|
|
+ border: none;
|
|
|
+ background: #f2f3f5;
|
|
|
+ padding: 0 8px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .iss-no-box {
|
|
|
+ .el-form-item__content {
|
|
|
+ display: flex;
|
|
|
+ border-radius: 4px;
|
|
|
+ width: 164px;
|
|
|
+ }
|
|
|
+ .el-input-group {
|
|
|
+ width: 82px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ border-radius: 0 4px 4px 0;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .el-input__inner {
|
|
|
+ border-radius: 0;
|
|
|
+ padding: 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .el-input-group__append {
|
|
|
+ border: none;
|
|
|
+ background: #f2f3f5;
|
|
|
+ padding: 0;
|
|
|
+ border-radius: 0;
|
|
|
+ width: 34px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .iss-start {
|
|
|
+ &.el-input-group {
|
|
|
+ border-radius: 4px 0 0 4px;
|
|
|
+ }
|
|
|
+ .el-input-group__append {
|
|
|
+ width: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ input::-webkit-outer-spin-button,
|
|
|
+ input::-webkit-inner-spin-button {
|
|
|
+ -webkit-appearance: none !important;
|
|
|
+ }
|
|
|
+ .el-divider {
|
|
|
+ width: 600px;
|
|
|
+ }
|
|
|
+ .price-box {
|
|
|
+ width: 300px;
|
|
|
+ display: inline-block;
|
|
|
+ .el-form-item__content {
|
|
|
+ position: relative;
|
|
|
+ .prepend,
|
|
|
+ .append {
|
|
|
+ position: absolute;
|
|
|
+ left: 44px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #1d2129;
|
|
|
+ line-height: 34px;
|
|
|
+ }
|
|
|
+ .append {
|
|
|
+ left: 142px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .personal-ceil {
|
|
|
+ width: 200px;
|
|
|
+ .el-input__inner {
|
|
|
+ width: 200px;
|
|
|
+ padding: 0 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha
