|
@@ -0,0 +1,247 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container article-carousel-upload">
|
|
|
+ <a-spin :spinning="loading">
|
|
|
+ <!-- 上传 -->
|
|
|
+ <div class="common-card basic-information-box">
|
|
|
+ <div class="basic-information-title">上传轮播图</div>
|
|
|
+ <div class="basic-information-form">
|
|
|
+ <a-upload
|
|
|
+ name="file"
|
|
|
+ accept=".jpg,.png,.jpeg"
|
|
|
+ :headers="headers"
|
|
|
+ :show-upload-list="false"
|
|
|
+ multiple
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ @change="uploadFileFun"
|
|
|
+ >
|
|
|
+ <a-button>
|
|
|
+ <a-icon type="upload" /> <span>点击上传</span>
|
|
|
+ </a-button>
|
|
|
+ </a-upload>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 轮播图列表 -->
|
|
|
+ <div class="common-card a-card-margin-top basic-information-box">
|
|
|
+ <div class="basic-information-title">轮播图列表</div>
|
|
|
+ <div class="carousel-list">
|
|
|
+ <div
|
|
|
+ :class="{
|
|
|
+ 'carousel-item': true,
|
|
|
+ 'carousel-item-margin': (index + 1) % 3 !== 0,
|
|
|
+ }"
|
|
|
+ v-for="(item, index) in carouselList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <img class="carousel-item-img" :src="item.url" fit="contain" />
|
|
|
+ <a title="删除">
|
|
|
+ <a-icon
|
|
|
+ class="carousel-item-delete"
|
|
|
+ type="delete"
|
|
|
+ @click="handleDeleteCarousel(item)"
|
|
|
+ />
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-spin>
|
|
|
+ <!-- <div class="company-info">
|
|
|
+ <span>
|
|
|
+ copyright © 浮游科技有限公司出品
|
|
|
+ </span>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { formatePathParams } from '@/filters';
|
|
|
+export default {
|
|
|
+ name: 'examQuestionBatchImport',
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false, // 是否显示加载动画
|
|
|
+ headers: {
|
|
|
+ authorization: 'authorization-text',
|
|
|
+ },
|
|
|
+ carouselList: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ url:
|
|
|
+ 'https://jtxt-material-images-public.oss-cn-beijing.aliyuncs.com/f843e819a41048f3b21a86eea4d61120.png',
|
|
|
+ materialId: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ url:
|
|
|
+ 'https://jtxt-material-images-public.oss-cn-beijing.aliyuncs.com/f843e819a41048f3b21a86eea4d61120.png',
|
|
|
+ materialId: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ url:
|
|
|
+ 'https://jtxt-material-images-public.oss-cn-beijing.aliyuncs.com/f843e819a41048f3b21a86eea4d61120.png',
|
|
|
+ materialId: '',
|
|
|
+ },
|
|
|
+ ], // 已有轮播图列表
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.initDataFun(); //初始化数据
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ beforeDestroy() {},
|
|
|
+ watch: {},
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ //初始化数据
|
|
|
+ initDataFun() {
|
|
|
+ // this.getCarouselListFun(); // 查询:轮播图列表
|
|
|
+ },
|
|
|
+ // 查询:轮播图列表
|
|
|
+ getCarouselListFun() {
|
|
|
+ let params = {
|
|
|
+ num: 10,
|
|
|
+ };
|
|
|
+ this.$_http
|
|
|
+ .get(this.$_API.INTERFACE_GET_CAROUSELS_LIST, { params })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ this.carouselList = res.data;
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 上传前的校验
|
|
|
+ beforeUpload(file) {
|
|
|
+ console.log(file);
|
|
|
+ let isJpgOrPng =
|
|
|
+ file.type === 'image/jpeg' ||
|
|
|
+ file.type === 'image/png' ||
|
|
|
+ file.type === 'image/jpg';
|
|
|
+ if (!isJpgOrPng) {
|
|
|
+ this.$message.error('上传图片只能是 .jpeg, .jpg, .png, 格式!');
|
|
|
+ }
|
|
|
+ let isLtHalf1M = file.size / 1024 / 1024 < 0.5;
|
|
|
+ if (!isLtHalf1M) {
|
|
|
+ this.$message.error(`${file.name} 文件必须小于 0.5M !`);
|
|
|
+ }
|
|
|
+ let bySelf = false;
|
|
|
+ return isJpgOrPng && isLtHalf1M && bySelf;
|
|
|
+ },
|
|
|
+ // 确认上传图片
|
|
|
+ uploadFileFun(data) {
|
|
|
+ console.log(data);
|
|
|
+ this.loading = true;
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('image-file', data.file);
|
|
|
+ this.$_http
|
|
|
+ .post(this.$_API.INTERFACE_POST_FILE_UPLOAD_IMAGE, formData, {
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'multipart/form-data;',
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ this.loading = false;
|
|
|
+ // this.carouselAddFun(res.data); // 新增一个轮播图
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message.error(`${err.response.data}`);
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 新增一个轮播图
|
|
|
+ carouselAddFun(item) {
|
|
|
+ if (!item || !item.url) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ materialId: '',
|
|
|
+ imageUrl: item.url,
|
|
|
+ };
|
|
|
+ this.$_http
|
|
|
+ .post(this.$_API.INTERFACE_POST_CAROUSELS_ADD, params)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.success && res.data) {
|
|
|
+ this.$message.success(`成功上传一张轮播图`);
|
|
|
+ } else {
|
|
|
+ this.$message.error(`${res.data || res.message}`);
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message.error(`${err.response.data}`);
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 操作:删除一个轮播图
|
|
|
+ handleDeleteCarousel(item) {
|
|
|
+ console.log(item);
|
|
|
+ if (!item || !item.id) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ carouselId: item.id,
|
|
|
+ };
|
|
|
+ this.$_http
|
|
|
+ .delete(
|
|
|
+ formatePathParams(
|
|
|
+ this.$_API.INTERFACE_DELETE_CAROUSELS_DELETE,
|
|
|
+ params
|
|
|
+ )
|
|
|
+ )
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+@import '~@/styles/common/variable.less';
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+@import '~@/styles/common/variable.less';
|
|
|
+.article-carousel-upload {
|
|
|
+ .carousel-list {
|
|
|
+ margin-top: @paddingMarginVal;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .carousel-item {
|
|
|
+ width: 32%;
|
|
|
+ position: relative;
|
|
|
+ .carousel-item-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
+ }
|
|
|
+ .carousel-item-delete {
|
|
|
+ padding: 3px 3px;
|
|
|
+ border-radius: 3px;
|
|
|
+ border: 1px solid @mainColorBorder;
|
|
|
+ background-color: @mainColorWhite;
|
|
|
+ position: absolute;
|
|
|
+ right: @paddingMarginVal;
|
|
|
+ top: @paddingMarginVal;
|
|
|
+ font-size: 20px;
|
|
|
+ color: @mainColorBlack25;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ color: @mainColorBlueNormal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .carousel-item-margin {
|
|
|
+ margin-right: 2%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|