长页上传资源可以删除

master
yujialong 2 years ago
parent f396b248be
commit 26f93ef2e0
  1. 72
      src/components/modules/module.vue
  2. 2
      src/const/modules.js
  3. 4
      src/pages/column/page/talentCenter.vue
  4. 10
      src/styles/page/page.scss

@ -80,41 +80,43 @@
<el-form-item v-for="(item, i) in data.forms" :key="i" :prop="item.prop" :label="item.label">
<el-input v-if="item.type === 'input'" v-model="data.form[item.prop]" placeholder="请输入" maxlength="100"></el-input>
<el-input v-if="item.type === 'textarea'" v-model="data.form[item.prop]" type="textarea" placeholder="请输入" maxlength="300"></el-input>
<el-upload
v-if="item.type === 'upload'"
class="uploader"
accept=".jpg,.png,.jpeg"
:on-success="res => uploadSuccess(res, data.form)"
:show-file-list="false"
:headers="headers"
:action="api.upload">
<img v-if="data.form[item.prop]" :src="data.form[item.prop]" class="avatar">
<div class="uploader-default" v-else>
<i class="el-icon-plus"></i>
<p>上传图片</p>
</div>
<div slot="tip" class="el-upload__tip">
<p>只支持.jpg,.png格式</p>
</div>
</el-upload>
<el-upload
v-if="item.type === 'video'"
accept=".mp4,.mov,.avi"
:on-success="res => uploadSuccess(res, data.form, item)"
:file-list="fileList"
:headers="headers"
:action="api.upload">
<el-button>上传视频</el-button>
</el-upload>
<!-- 图片视频都可上传 -->
<el-upload
v-if="item.type === 'media'"
:on-success="res => uploadSuccess(res, data.form, item)"
:file-list="fileList"
:headers="headers"
:action="api.upload">
<el-button>上传资源</el-button>
</el-upload>
<div v-if="item.type === 'upload' || item.type === 'video' || item.type === 'media'" class="uploader-wrap">
<el-upload
class="uploader"
accept=".jpg,.png,.jpeg"
:on-success="res => uploadSuccess(res, data.form)"
:show-file-list="false"
:headers="headers"
:action="api.upload">
<img v-if="data.form[item.prop]" :src="data.form[item.prop]" class="avatar">
<div class="uploader-default" v-else>
<i class="el-icon-plus"></i>
<p>上传图片</p>
</div>
<div slot="tip" class="el-upload__tip">
<p>只支持.jpg,.png格式</p>
</div>
</el-upload>
<el-upload
v-if="item.type === 'video'"
accept=".mp4,.mov,.avi"
:on-success="res => uploadSuccess(res, data.form, item)"
:file-list="fileList"
:headers="headers"
:action="api.upload">
<el-button>上传视频</el-button>
</el-upload>
<!-- 图片视频都可上传 -->
<el-upload
v-if="item.type === 'media'"
:on-success="res => uploadSuccess(res, data.form, item)"
:file-list="fileList"
:headers="headers"
:action="api.upload">
<el-button>上传资源</el-button>
</el-upload>
<i v-if="!item.required" class="el-icon-delete del" @click="data.form[item.prop] = ''"></i>
</div>
<div v-if="item.type === 'link'" class="flex">
<el-input class="m-r-10" v-model="data.form.link.linkName"></el-input>
<el-button @click="toLink(data.form)">设置链接</el-button>

@ -5562,7 +5562,7 @@ export default {
type: 'upload',
prop: 'pic',
label: '图片',
required: true
required: false
},
],
form: {

@ -40,7 +40,7 @@
<h6 class="c-title">{{ modules[3].form.title }}</h6>
<div class="more">查看更多 ></div>
</div>
<p class="des" v-html="modules[3].form.des"></p>
<div class="des" v-html="modules[3].form.des"></div>
<div class="cover" @click="toSet(3)">点击更换标题链接与描述</div>
</div>
<p class="hot">热门岗位</p>
@ -61,7 +61,7 @@
<h6 class="c-title">{{ modules[6].form.title }}</h6>
<div class="more">查看更多 ></div>
</div>
<p class="des" v-html="modules[6].form.des"></p>
<div class="des" v-html="modules[6].form.des"></div>
<div class="cover" @click="toSet(6)">点击更换标题链接与描述</div>
</div>
<p class="hot">热门岗位</p>

@ -149,7 +149,15 @@ $avatar-height: 80px;
color: #8c939d;
}
}
/deep/ .uploader {
/deep/.uploader-wrap {
display: flex;
.del {
margin-left: 5px;
font-size: 18px;
cursor: pointer;
}
}
/deep/.uploader {
.el-upload {
position: relative;
width: $avatar-width;

Loading…
Cancel
Save