|
|
@@ -29,35 +29,49 @@
|
|
|
<el-form-item label="精品类型：">
|
|
|
<i class="biaoshi biaoshi2"></i>
|
|
|
<el-radio v-model="conLeftId" label="1" disabled>实物模型</el-radio>
|
|
|
- <el-radio v-model="conLeftId" label="2" >专题图库</el-radio>
|
|
|
+ <el-radio v-model="conLeftId" label="2">专题图库</el-radio>
|
|
|
<el-radio v-model="conLeftId" label="3" disabled>视频档案</el-radio>
|
|
|
</el-form-item>
|
|
|
<!-- 图片 -->
|
|
|
<el-form-item label="图片：">
|
|
|
<i class="biaoshi biaoshi1"></i>
|
|
|
- <el-upload
|
|
|
- class="avatar-uploader"
|
|
|
- :action="baseURL + '/cms/security/video/upload/img'"
|
|
|
- :headers="{
|
|
|
- token,
|
|
|
- }"
|
|
|
- :show-file-list="false"
|
|
|
- :before-upload="beforethumbUpload"
|
|
|
- :on-success="upload_thumb_success"
|
|
|
- >
|
|
|
- <div v-if="ruleForm.thumb" class="imgdiv">
|
|
|
- <img
|
|
|
- style="width: 100%; height: 100%"
|
|
|
- :src="baseURL + ruleForm.thumb"
|
|
|
- />
|
|
|
- <i
|
|
|
- class="el-icon-circle-close"
|
|
|
- @click.stop="ruleForm.thumb = ''"
|
|
|
- ></i>
|
|
|
+ <div class="imgBox">
|
|
|
+ <div
|
|
|
+ class="imgdiv"
|
|
|
+ v-for="(item, index) in imgList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <el-image
|
|
|
+ style="width: 200px; height: 200px"
|
|
|
+ :src="imgList[0]"
|
|
|
+ :preview-src-list="imgList"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ <!-- 封面显示 -->
|
|
|
+ <div class="cover" v-if="imgActive === index">封面图片</div>
|
|
|
+ <!-- 下面的按钮 -->
|
|
|
+ <div class="handle">
|
|
|
+ <el-button size="mini" type="primary" round>设为封面</el-button>
|
|
|
+ <el-button size="mini" type="info" round @click="againUP(index)">重新上传</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 删除 -->
|
|
|
+ <div class="delImg el-icon-delete"></div>
|
|
|
</div>
|
|
|
- <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
- </el-upload>
|
|
|
- <p class="upHint">格式要求：</p>
|
|
|
+ <el-upload
|
|
|
+ ref="upload"
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="baseURL + '/cms/goods/upload'"
|
|
|
+ :headers="{ token }"
|
|
|
+ :show-file-list="false"
|
|
|
+ :before-upload="beforethumbUpload"
|
|
|
+ :on-success="upload_thumb_success"
|
|
|
+ >
|
|
|
+ <div class="upImg">
|
|
|
+ <i slot="default" class="el-icon-plus"></i>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <p class="upHint upHint1">格式要求：</p>
|
|
|
<p class="upHint">
|
|
|
1、支持png、jpg、gif和jpeg的图片格式；最大支持20M。
|
|
|
</p>
|
|
|
@@ -78,6 +92,15 @@ export default {
|
|
|
components: {},
|
|
|
data () {
|
|
|
return {
|
|
|
+ imgActive: 0,
|
|
|
+ // 上传成功后的图片数组
|
|
|
+ imgList: [
|
|
|
+ 'https://img2.baidu.com/it/u=395719964,2145680590&fm=26&fmt=auto',
|
|
|
+ 'https://img2.baidu.com/it/u=395719964,2145680590&fm=26&fmt=auto',
|
|
|
+ 'https://img2.baidu.com/it/u=395719964,2145680590&fm=26&fmt=auto',
|
|
|
+ 'https://img2.baidu.com/it/u=395719964,2145680590&fm=26&fmt=auto',
|
|
|
+ 'https://img2.baidu.com/it/u=395719964,2145680590&fm=26&fmt=auto'
|
|
|
+ ],
|
|
|
conLeftId: '2',
|
|
|
fileList: [],
|
|
|
// 服务器前缀地址
|
|
|
@@ -97,6 +120,10 @@ export default {
|
|
|
},
|
|
|
computed: {},
|
|
|
methods: {
|
|
|
+ // 点击重新上传
|
|
|
+ againUP (index) {
|
|
|
+ this.$refs.upload.$children[0].$refs.input.click()
|
|
|
+ },
|
|
|
// 点击返回
|
|
|
goBack () {
|
|
|
this.$confirm('点击返回后，编辑的信息将无法保存，是否继续？', '提示', {
|
|
|
@@ -146,8 +173,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
// 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- created () {
|
|
|
- },
|
|
|
+ created () {},
|
|
|
// 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted () {},
|
|
|
beforeCreate () {}, // 生命周期 - 创建之前
|
|
|
@@ -163,9 +189,22 @@ export default {
|
|
|
.tab1Add2 {
|
|
|
height: 100%;
|
|
|
.conten {
|
|
|
+ /deep/.el-form-item__content{
|
|
|
+ line-height: 0;
|
|
|
+ }
|
|
|
+ /deep/.el-form-item{
|
|
|
+ max-height: 480px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
position: relative;
|
|
|
/deep/.el-icon-plus {
|
|
|
+ font-size: 60px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
border: 1px dashed #ccc;
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
}
|
|
|
height: calc(100% - 32px);
|
|
|
.con_top {
|
|
|
@@ -204,6 +243,48 @@ export default {
|
|
|
transform: translateX(-50%);
|
|
|
bottom: 15px;
|
|
|
}
|
|
|
+ .imgBox{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .imgdiv{
|
|
|
+ position: relative;
|
|
|
+ margin-right: 30px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .handle{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ .delImg{
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 10px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #b9412e;
|
|
|
+ padding: 3px;
|
|
|
+ font-size: 26px;
|
|
|
+ position: absolute;
|
|
|
+ top: 5px;
|
|
|
+ right: 5px;
|
|
|
+ }
|
|
|
+ .cover{
|
|
|
+ font-size: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 999;
|
|
|
+ position: absolute;
|
|
|
+ top: 44%;
|
|
|
+ left: 0;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ height: 40px;
|
|
|
+ background-color: rgba(255,255,255,.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .upHint1{
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
