|
|
@@ -0,0 +1,269 @@
|
|
|
+<template>
|
|
|
+ <div class="tab4Add">
|
|
|
+ <div class="insideTop">
|
|
|
+ 学院宣传片管理 > 新增宣传片
|
|
|
+ <div class="add">
|
|
|
+ <el-button type="primary" @click="goBack">返 回</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="obstruct"></div>
|
|
|
+ <!-- 主要内容 -->
|
|
|
+ <div class="conten">
|
|
|
+ <div class="con_top">基本信息</div>
|
|
|
+ <!-- 表单 -->
|
|
|
+ <el-form
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ ref="ruleForm"
|
|
|
+ label-width="140px"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ >
|
|
|
+ <el-form-item label="标题：" prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.name"
|
|
|
+ maxlength="25"
|
|
|
+ show-word-limit
|
|
|
+ style="width: 500px"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 图片和附件 -->
|
|
|
+ <el-form-item label="封面图片：">
|
|
|
+ <i class="biaoshi"></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>
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ <p class="upHint">格式要求：支持png、jpg、gif和jpeg的图片格式；最大支持20M。</p>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 上传附件 -->
|
|
|
+ <el-form-item label="视频文件：">
|
|
|
+ <i class="biaoshi"></i>
|
|
|
+ <el-upload
|
|
|
+ multiple
|
|
|
+ class="upload-demo"
|
|
|
+ :file-list="fileList"
|
|
|
+ :action="baseURL + '/cms/security/video/upload/video'"
|
|
|
+ :headers="{ token }"
|
|
|
+ :before-upload="beforeFujian"
|
|
|
+ :on-success="successFujian"
|
|
|
+ :before-remove="beforeRemove"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :limit="1"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ :show-file-list="true"
|
|
|
+ >
|
|
|
+ <el-button size="small" type="primary">点击上传</el-button>
|
|
|
+ <div class="el-upload__tip" slot="tip">
|
|
|
+ <p class="upHint">格式要求：</p>
|
|
|
+ <p class="upHint">1、支持视频格式文件（例如：AVI、mov、rmvb、rm、FLV、mp4、3GP）。</p>
|
|
|
+ <p class="upHint">2、最大支持2G的视频文件。</p>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <!-- 底部按钮 -->
|
|
|
+ <div class="con_btn">
|
|
|
+ <el-button type="primary">保 存</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'tab4Add',
|
|
|
+ components: {},
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ fileList: [],
|
|
|
+ // 服务器前缀地址
|
|
|
+ baseURL: '',
|
|
|
+ token: '',
|
|
|
+ ruleForm: {
|
|
|
+ id: '',
|
|
|
+ name: '',
|
|
|
+ thumb: '',
|
|
|
+ video: '',
|
|
|
+ fileName: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: '不能为空', trigger: 'blur' }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ // 点击返回
|
|
|
+ goBack () {
|
|
|
+ this.$confirm('点击返回后，编辑的信息将无法保存，是否继续？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ .then(async () => {
|
|
|
+ this.$router.push('/layout/tab4')
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message.info('已取消')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 上传图片
|
|
|
+ beforethumbUpload (file) {
|
|
|
+ // console.log(998, file)
|
|
|
+ // 限制图片大小和格式
|
|
|
+ const sizeOk = file.size / 1024 / 1024 < 5
|
|
|
+ const typeOk =
|
|
|
+ file.type === 'image/png' ||
|
|
|
+ file.type === 'image/jpeg' ||
|
|
|
+ file.type === 'image/gif'
|
|
|
+
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ if (!typeOk) {
|
|
|
+ this.$message.error('照片格式有误！')
|
|
|
+ reject(file)
|
|
|
+ } else if (!sizeOk) {
|
|
|
+ this.$message.error('照片大小超过5M！')
|
|
|
+ reject(file)
|
|
|
+ } else if (file.name.length > 32) {
|
|
|
+ this.$message.error('照片名字不能超过32个字！')
|
|
|
+ reject(file)
|
|
|
+ } else {
|
|
|
+ this.$message.success('上传成功')
|
|
|
+ resolve(file)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ upload_thumb_success (data) {
|
|
|
+ // console.log('图片上传成功', data.data.urlPath)
|
|
|
+ this.ruleForm.thumb = data.data.urlPath
|
|
|
+ },
|
|
|
+ // 上传附件
|
|
|
+ beforeFujian (file) {
|
|
|
+ console.log('附件上传前', file)
|
|
|
+ const sizeOk = file.size / 1024 / 1024 < 1024
|
|
|
+ const typeOk =
|
|
|
+ file.type === 'video/mp4' ||
|
|
|
+ file.type === 'video/avi' ||
|
|
|
+ file.type === 'video/quicktime' ||
|
|
|
+ file.type === 'video/rm' ||
|
|
|
+ (file.type === '' &&
|
|
|
+ (file.name.includes('.flv') || file.name.includes('.rmvb'))) ||
|
|
|
+ file.type === 'video/3gpp'
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ if (file.name.length > 32) {
|
|
|
+ this.$message.error('视频名字不能超过32个字')
|
|
|
+ reject(file)
|
|
|
+ } else if (!sizeOk) {
|
|
|
+ this.$message.error('视频大小超过1GB！')
|
|
|
+ reject(file)
|
|
|
+ } else if (!typeOk) {
|
|
|
+ this.$message.error('视频格式有误！')
|
|
|
+ reject(file)
|
|
|
+ } else {
|
|
|
+ resolve(file)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ successFujian (file) {
|
|
|
+ console.log('上传附件成功', file)
|
|
|
+ if (file.code === 0) {
|
|
|
+ this.ruleForm.video = file.data.urlPath
|
|
|
+ this.ruleForm.fileName = file.data.fileName
|
|
|
+ this.$message.success('上传成功')
|
|
|
+ } else if (file.code === -1) {
|
|
|
+ this.$message.warning('上传失败，不支持的文件格式')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeRemove (file, fileList) {
|
|
|
+ if (file && file.status === 'success') {
|
|
|
+ return this.$confirm(`确定移除 ${file.name}？`)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleRemove (file, fileList) {
|
|
|
+ this.ruleForm.video = ''
|
|
|
+ this.ruleForm.fileName = ''
|
|
|
+ },
|
|
|
+ handleExceed (files, fileList) {
|
|
|
+ this.$message.warning('只能上传一个视频，请删除原视频后操作')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created () {
|
|
|
+ },
|
|
|
+ // 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted () {},
|
|
|
+ beforeCreate () {}, // 生命周期 - 创建之前
|
|
|
+ beforeMount () {}, // 生命周期 - 挂载之前
|
|
|
+ beforeUpdate () {}, // 生命周期 - 更新之前
|
|
|
+ updated () {}, // 生命周期 - 更新之后
|
|
|
+ beforeDestroy () {}, // 生命周期 - 销毁之前
|
|
|
+ destroyed () {}, // 生命周期 - 销毁完成
|
|
|
+ activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.tab4Add {
|
|
|
+ height: 100%;
|
|
|
+ .conten {
|
|
|
+ position: relative;
|
|
|
+ /deep/.el-icon-plus {
|
|
|
+ border: 1px dashed #ccc;
|
|
|
+ }
|
|
|
+ height: calc(100% - 32px);
|
|
|
+ .con_top {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ padding-left: 20px;
|
|
|
+ background-color: #fbfbfb;
|
|
|
+ }
|
|
|
+ .biaoshi1::before {
|
|
|
+ left: -120px;
|
|
|
+ }
|
|
|
+ .biaoshi2::before {
|
|
|
+ top: -10px;
|
|
|
+ }
|
|
|
+ .avatar-uploader .el-upload {
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #3e5eb3;
|
|
|
+ }
|
|
|
+ .avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ line-height: 178px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .con_btn {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ bottom: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
