banner图可以上传文件

src/apps/mobile/components/UploadImage/index.vue

@@ -2,7 +2,7 @@
     <div>
         <el-upload
             ref="elUpload"
-            action="#"
+            :action="actionUrl"
             list-type="picture-card"
             :data="data"
             :multiple="multiple"
@@ -11,6 +11,7 @@
             :show-file-list="showFileList"
             :name="name"
             :accept="accept"
+            :auto-upload="true"
             :before-upload="beforeUpload"
             :on-preview="handlePictureCardPreview"
             :on-success="handleImageSuccess"
@@ -18,7 +19,7 @@
             :on-exceed="handleExceed"
             class="upload-image"
             :class="{ 'hide-upload': hideUpload }"
-            :http-request="httpRequestMain"
+            :httpaaa-request="httpRequestMain"
         >
             <div class="upload-tip">
                 <i class="el-icon-plus"></i>
@@ -35,7 +36,7 @@
 import { uploadFile } from '@/apps/mobile/api/files/index';
 import emitter from 'element-ui/src/mixins/emitter';
 import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
-
+import { uploadUrl } from '@/config';
 export default {
     name: 'UploadImage',
     mixins: [emitter],
@@ -97,6 +98,7 @@ export default {
     },
     data() {
         return {
+            actionUrl: uploadUrl,
             tempUrl: '',
             hideUpload: false,
             fileList: [],
@@ -117,8 +119,7 @@ export default {
     },
     watch: {
         value(val) {
-            // this.watchValue();
-            // console.log(val);
+            this.watchValue();
         },
     },
     methods: {
@@ -183,8 +184,9 @@ export default {
             this.emitInput(fileArray.join(','));
         },
         handleImageSuccess(res, file, fileList) {
-            file.url = res.pathUrl;
-            this.emitInput(this.value ? this.value + ',' + res.pathUrl : res.pathUrl);
+            let pathUrl = res.data.pathUrl
+            file.url = pathUrl;
+            this.emitInput(this.value ? this.value + ',' + pathUrl :  pathUrl);
         },
         handleExceed() {
             this.$message.error(`最多上传${this.limit}张图片`);
@@ -214,9 +216,10 @@ export default {
     margin: 0;
     display: inline;
     vertical-align: top;
-    /deep/ .el-upload-list__item {
-        margin: 0;
-    }
+    
+}
+/deep/ .el-upload-list__item {
+    transition: all .1s cubic-bezier(.55,0,.1,1);
 }
 .hide-upload /deep/ .el-upload--picture-card {
     display: none;

src/apps/mobile/components/uploadAuto/index.vue

@@ -183,7 +183,6 @@ export default {
             // this.$refs['addEditDialogForm'].validateField('file');
         },
         handleUploadSuccess(response, file, fileList) {
-            console.log(response, file, fileList, 'response, file, fileList');
 
             this.$emit('validateUpload', {
                 fileList: fileList,

src/apps/mobile/views/banner/components/addEditDialog.vue

@@ -1,53 +1,40 @@
 <template>
     <div class="add-edit-dialog-container">
-        <el-dialog
-            :title="title"
-            :visible.sync="visible"
-            width="600px"
-            :before-close="close"
-            :close-on-click-modal="false"
-        >
+        <el-dialog :title="title" :visible.sync="visible" width="600px" :before-close="close" :close-on-click-modal="false">
             <el-form :model="formData" ref="formData" :rules="rules" label-width="90px">
                 <el-form-item label="名称:" prop="imgName">
                     <el-input placeholder="请输入" v-model="formData.imgName"></el-input>
                 </el-form-item>
-                <el-form-item label="图片:" class="plate-icon" prop="file">
+                <el-form-item label="图片:" class="plate-icon" prop="image">
                     <!-- <p class="color666">图片大小不能超过3MB</p> -->
-                    <Upload
-                        :fileList="fileList"
-                        @changeUploadFile="changeUploadFile"
-                        @validateUpload="validateUpload"
-                        :limitUpload="1"
-                        :maximumSize="maximumSize"
-                        :uploadType="1"
-                        ref="upload"
-                    ></Upload>
+                    <UploadImage v-model="formData.image" :limit="1" ref="bannerUpload"></UploadImage>
+                    <!-- <Upload :fileList="bannerList" @changeUploadFile="bannerChangeUploadFile" @validateUpload="bannerValidateUpload" :limitUpload="1" :maximumSize="maximumSize" :uploadType="1" ref="bannerUpload"></Upload> -->
                 </el-form-item>
                 <el-form-item label="跳转类型:" prop="jumpType">
-                    <el-select v-model="formData.jumpType" placeholder="请选择">
+                    <el-select v-model="formData.jumpType" placeholder="请选择" clearable="true">
                         <el-option label="pdf" :value="1"></el-option>
                         <el-option label="网页链接" :value="2"></el-option>
+                        <el-option label="图片" :value="3"></el-option>
                     </el-select>
                 </el-form-item>
-                <el-form-item label="跳转链接:" prop="url" v-show="formData.jumpType == 2">
-                    <el-input placeholder="跳转链接" v-model="formData.url"></el-input>
-                </el-form-item>
-                <el-form-item label="文件:" prop="jumpType" v-show="formData.jumpType == 1">
-                    <el-upload
-                        ref="uploadPdf"
-                        :action="uploadUrl"
-                        :on-remove="handlePdfRemove"
-                        :on-success="handlePdfSuccess"
-                        :on-exceed="handlePdfExceed"
-                        :before-upload="beforeUpload"
-                        :file-list="pdfList"
-                        :multiple="false"
-                        :limit="1"
-                        accept="application/pdf">
-                        <el-button size="small" type="primary">点击上传</el-button>
-                    </el-upload>
-                </el-form-item>
-                
+
+                <span v-show="formData.jumpType">
+                    <el-form-item label="落地页:" prop="url">
+                        <span v-show="formData.jumpType == 1">
+                            <el-upload ref="uploadPdf" :action="uploadUrl" :on-remove="handlePdfRemove" :on-success="handlePdfSuccess" :on-exceed="handlePdfExceed" :before-upload="beforePdfUpload" :file-list="pdfList" :multiple="false" :limit="1" accept="application/pdf">
+                                <el-button size="small" type="primary">点击上传</el-button>
+                            </el-upload>
+                        </span>
+                        <span v-show="formData.jumpType == 2">
+                            <el-input placeholder="跳转链接" v-model="formData.url"></el-input>
+                        </span>
+                        <span v-show="formData.jumpType == 3">
+                            <UploadImage v-model="formData.url" :limit="1" ref="bannerDetailUpload"></UploadImage>
+                            <!-- <Upload :fileList="bannerDetailList" @changeUploadFile="bannerDetailChangeUploadFile" @validateUpload="bannerDetailValidateUpload" :limitUpload="1" :maximumSize="maximumSize" :uploadType="1" ref="bannerDetailUpload"></Upload> -->
+                        </span>
+                    </el-form-item>
+                </span>
+
                 <el-form-item label="显示位置:" prop="type">
                     <el-select v-model="formData.type" placeholder="请选择">
                         <el-option label="工作台banner" :value="1"></el-option>
@@ -65,16 +52,12 @@
                         inactive-text="关"
                         :active-value="1"
                         :inactive-value="0"
-                    ></el-switch> -->
-                </el-form-item>
+                    ></el-switch>
+                </el-form-item>-->
             </el-form>
             <div slot="footer" class="dialog-footer">
                 <el-button @click="close()">取 消</el-button>
-                <el-button
-                    type="primary"
-                    @click="submitForm('formData')"
-                    :disabled="submitBtndisabled"
-                >确 定</el-button>
+                <el-button type="primary" @click="submitForm('formData')" :disabled="submitBtndisabled">确 定</el-button>
             </div>
         </el-dialog>
     </div>
@@ -84,11 +67,10 @@ import { uploadUrl } from '@/config.js';
 import Upload from '@/apps/mobile/components/uploadAuto/index';
 import { addBanner, editBanner } from '@/apps/mobile/api/banner/index';
 import { validPositiveInteger, validHttps } from '@/apps/mobile/utils/validate';
-import { staticPath } from '@/apps//mobile/utils/util';
+import UploadImage from '@/apps/mobile/components/UploadImage/index';
+const defaultFormData = { jumpType: null, imgName: null, url: null, type: 3, serialNo: null };
 export default {
-    components: {
-        Upload,
-    },
+    components: { Upload,UploadImage },
     data() {
         // http(s)校验
         var checkHttps = (rule, value, callback) => {
@@ -109,14 +91,12 @@ export default {
         };
         return {
             uploadUrl: uploadUrl,
-            jumpType: null,
-            type: null,
             visible: false,
             title: '新增',
-            formData: { file: null },
+            type: '',
+            formData: JSON.parse(JSON.stringify(defaultFormData)),
             submitBtndisabled: false,
-            fileList: [], // 图片列表
-            pdfList: [],//pdf列表
+            pdfList: [], //pdf列表
             maximumSize: 3, //图片大小  不超过3MB
             limitUpload: 1,
             rules: {
@@ -124,86 +104,63 @@ export default {
                     { required: true, message: '请输入名称', trigger: 'blur' },
                     { max: 30, message: '长度最大30个字符', trigger: 'blur' },
                 ],
-                jumpType: [{ required: true, message: '请选择跳转类型', trigger: 'change' }],
-                type: [{ required: true, message: '请选择显示位置', trigger: 'blur' }],
-                serialNo: [
-                    { validator: checkSort, message: '请输入正整数', trigger: 'blur' }
-                ],
-                file: [{ required: true, message: '请上传图片', trigger: 'blur' }],
-                url: [
-                    { validator: checkHttps, message: '请输入正确的链接地址', trigger: 'blur' }
-                ],
+                // jumpType: [{ message: '请选择跳转类型', trigger: 'change' }],
+                type: [{ required: true, message: '请选择显示位置', trigger: 'change' }],
+                serialNo: [{ validator: checkSort, message: '请输入正整数', trigger: 'blur' }],
+                image: [{ required: true, message: '请上传图片', trigger: 'change' }],
+                url: [{ validator: checkHttps, message: '请输入正确的链接地址', trigger: 'blur' }],
             },
         };
     },
     methods: {
         open(type, data) {
-            this.type = type;
-            let obj1 = {
-                file: null,
-            };
             if (type === 'edit') {
+                this.type = "edit";
                 this.title = '编辑';
-                if (data.image) {
-                    obj1.file = true;
-                    let url = staticPath(data.image);
-                    let obj = {
-                        name: '',
-                        url,
-                        response: {
-                            data: { pathUrl: data.image },
-                        },
-                    };
-                    this.fileList.push(obj);
-
-                    this.pdfList = [
-                        {
-                            name: data.url,
-                            url: data.url,
-                            hasBeenUploaded: true,
-                            newName: data.url,
-                        },
-                    ];
+                let tempData = { ...JSON.parse(JSON.stringify(defaultFormData)), ...JSON.parse(JSON.stringify(data)) };
+                
+                //pdf
+                if (tempData.jumpType === 1) {
+                    this.pdfList.push({ name: tempData.url, url: tempData.url });
                 }
-                this.formData = Object.assign({ ...data, ...obj1 });
-            } else {
-                this.title = '新增';
-                this.formData = obj1;
+                //网页链接
+                if (tempData.jumpType === 2) {
+                }
+                //图片
+                if (tempData.jumpType === 3) {
+                    
+                }
+                this.formData = tempData;
+
+            }
+            if (type === 'add') {
+                this.type = "add";
+                this.formData = JSON.parse(JSON.stringify(defaultFormData));
             }
+
             this.visible = true;
         },
         close() {
-            this.type = null;
-            this.$refs['formData'].resetFields();
-            this.$refs.upload.clearFiles(); // 清空已上传的文件列表
-            this.fileList = [];
+            this.$refs.formData.resetFields();
+            this.type = "";
+            this.formData = JSON.parse(JSON.stringify(defaultFormData));
             this.pdfList = [];
             this.submitBtndisabled = false;
             this.visible = false;
         },
         submitForm(formName) {
-            this.$refs[formName].validate(valid => {
+            this.$refs[formName].validate((valid) => {
                 if (valid) {
                     this.submitBtndisabled = true;
                     let message = '';
-                    let image = null;
-                    if (this.fileList.length > 0) {
-                        console.log(this.fileList, 'this.fileList');
-
-                        image = this.fileList[0].response.data.pathUrl;
-                    }
-                    let obj = Object.assign({ ...this.formData, image });
-                    console.log(obj, 'objj');
-
+                    let obj = Object.assign({ ...this.formData });
                     if (this.type === 'add') {
                         message = '新增成功';
-                        delete obj.file;
-                        obj.createBy = 0; //创建者ID
                         addBanner(obj)
-                            .then(res => {
+                            .then((res) => {
                                 this.completeOperation(message);
                             })
-                            .catch(err => err);
+                            .catch((err) => err);
                     }
                     if (this.type === 'edit') {
                         message = '修改成功';
@@ -220,25 +177,12 @@ export default {
                             .then(() => {
                                 this.completeOperation(message);
                             })
-                            .catch(err => err);
+                            .catch((err) => err);
                     }
                 }
             });
         },
-        /**
-         * 手动验证upload、更新选择完成的图片数据
-         * @param {Object} data: fileList是上传的图片数据 validateValues为true时说明有上传图片 为null时无上传图片
-         */
-        validateUpload(data) {
-            this.changeUploadFile(data.fileList);
-            // console.log(data,'data');
-            this.formData.file = data.validateValues;
-            this.$refs['formData'].validateField('file');
-        },
-        changeUploadFile(fileList) {
-            this.fileList = fileList;
-            console.log(this.fileList, 'this.fileList');
-        },
+
         /**
          * 将新增、编辑操作完成之后共同需要调用的方法放在此函数里面
          * @param {String} message 提示信息
@@ -253,19 +197,18 @@ export default {
             this.$emit('queryListData');
         },
 
+        //--------------------------------pdf上传----------------------------------------------------------
         handlePdfRemove() {
             this.formData.url = '';
-            this.formData.file = null;
         },
         handlePdfSuccess(response) {
             this.formData.url = response.data.pathUrl;
-            this.formData.file = true;
-            this.$refs['formData'].validateField('file');
+            this.$refs['formData'].validateField('url');
         },
         handlePdfExceed() {
             this.$message.warning('只能上传一个文件!');
         },
-        beforeUpload(file) {
+        beforePdfUpload(file) {
             let fileType = ['application/pdf'].indexOf(file.type);
             const isLt5M = file.size / 1024 / 1024 < 8;
             if (fileType === -1) {
@@ -276,13 +219,7 @@ export default {
             }
             return fileType !== -1 && isLt5M;
         },
-    },
-    watch: {
-        fileList(val) {
-            this.$nextTick(() => {
-                this.$refs.upload.changeHideUpload();
-            });
-        },
+        //--------------------------------pdf上传----------------------------------------------------------
     },
 };
 </script>

src/apps/mobile/views/banner/index.vue

@@ -26,21 +26,10 @@
                         </el-col>
                         <el-col :span="24">
                             <el-form-item>
-                                <el-button
-                                    type="primary"
-                                    plain
-                                    round
-                                    icon="el-icon-plus"
-                                    @click="create(null)"
-                                >新建</el-button>
+                                <el-button type="primary" plain round icon="el-icon-plus" @click="create(null)">新建</el-button>
                                 <!-- <el-button type="primary" plain round @click="batchUse">批量启用</el-button>
                                 <el-button type="primary" plain round @click="batchClose">批量关闭</el-button> -->
-                                <el-button
-                                    type="primary"
-                                    plain
-                                    round
-                                    @click="deleteData(ids, 'batch')"
-                                >批量删除</el-button>
+                                <el-button type="primary" plain round @click="deleteData(ids, 'batch')">批量删除</el-button>
                             </el-form-item>
                         </el-col>
                     </el-row>
@@ -53,29 +42,15 @@
             </div>
 
             <div class="MaintenanceTable">
-                <el-table
-                    ref="multipleTable"
-                    :data="tableData"
-                    style="width: 100%"
-                    tooltip-effect="dark"
-                    @selection-change="selectionChange"
-                    class="OutTable"
-                    border
-                    v-loading="listLoading"
-                >
+                <el-table ref="multipleTable" :data="tableData" style="width: 100%" tooltip-effect="dark" @selection-change="selectionChange" class="OutTable" border v-loading="listLoading">
                     <el-table-column type="selection"></el-table-column>
                     <!-- <el-table-column prop="ProjectCode" label="项目编号"></el-table-column> -->
                     <el-table-column prop="imgName" label="名称" :show-overflow-tooltip="true"></el-table-column>
                     <el-table-column prop="planDate" label="图片" :show-overflow-tooltip="true">
                         <template slot-scope="scope">
                             <!-- <span @click="imgOpen(scope.row.image)"></span> -->
-                            <el-image
-                                :src="scope.row.image | pathPipe"
-                                style="width:40px;cursor:pointer"
-                                fit="cover"
-                                :preview-src-list="[scope.row.image]"
-                            ></el-image>
-                            
+                            <el-image :src="scope.row.image | pathPipe" style="width:40px;cursor:pointer" fit="cover" :preview-src-list="[scope.row.image]"></el-image>
+
                         </template>
                     </el-table-column>
                     <el-table-column prop="url" label="跳转链接" :show-overflow-tooltip="true">
@@ -89,6 +64,7 @@
                         <template slot-scope="scope">
                             <span v-show="scope.row.jumpType == 1">pdf</span>
                             <span v-show="scope.row.jumpType == 2">网页链接</span>
+                            <span v-show="scope.row.jumpType == 3">图片</span>
                         </template>
                     </el-table-column>
                     <el-table-column prop="type" label="显示位置">
@@ -114,30 +90,13 @@
 
                     <el-table-column label="操作">
                         <template slot-scope="scope">
-                            <el-button
-                                size="mini"
-                                type="primary"
-                                plain
-                                round
-                                @click="deleteData(scope.row.id)"
-                            >删除</el-button>
-                            <el-button
-                                size="mini"
-                                type="success"
-                                plain
-                                round
-                                @click="edit(scope.row)"
-                            >编辑</el-button>
+                            <el-button size="mini" type="primary" plain round @click="deleteData(scope.row.id)">删除</el-button>
+                            <el-button size="mini" type="success" plain round @click="edit(scope.row)">编辑</el-button>
                         </template>
                     </el-table-column>
                 </el-table>
                 <div class="pagenation">
-                    <PageComponent
-                        :total="total"
-                        @pagination="handlePagination"
-                        :pageSize.sync="page.pageSize"
-                        :pageNum.sync="page.pageNum"
-                    ></PageComponent>
+                    <PageComponent :total="total" @pagination="handlePagination" :pageSize.sync="page.pageSize" :pageNum.sync="page.pageNum"></PageComponent>
                 </div>
             </div>
         </div>
@@ -150,10 +109,7 @@ import TitleBar from '@/apps/mobile/components/common/TitleBar';
 import AddEditDialog from './components/addEditDialog';
 import { queryPageBanner, deleteBanner, editBanner, noUseBathBanner, useBathBanner } from '@/apps/mobile/api/banner/index';
 export default {
-    components: {
-        TitleBar,
-        AddEditDialog,
-    },
+    components: {TitleBar,AddEditDialog,},
     data() {
         return {
             searchForm: {}, // 搜索表单
@@ -169,7 +125,7 @@ export default {
     },
     methods: {
         selectionChange(data) {
-            this.ids = data.map(item => {
+            this.ids = data.map((item) => {
                 return item.id;
             });
         },
@@ -196,9 +152,9 @@ export default {
                 },
             };
             queryPageBanner(obj)
-                .then(res => {
-                    if(res.statusCode == "10"){
-                        this.$router.replace("/login");
+                .then((res) => {
+                    if (res.statusCode == '10') {
+                        this.$router.replace('/login');
                     }
                     this.tableData = res.data.records;
                     this.total = res.data.total;
@@ -215,12 +171,13 @@ export default {
          */
         deleteData(id, type = 'single') {
             if (type === 'batch') {
-                if (this.ids.length === 0) return this.$message.warning('请至少选中一项 !');
-                // console.log(this.ids, "ids");
+                if (this.ids.length === 0) {
+                    return this.$message.warning('请至少选中一项 !');
+                }
 
-                this.delete({ids: this.ids});
+                this.delete({ ids: this.ids });
             } else {
-                this.delete({ids: [id]});
+                this.delete({ ids: [id] });
             }
         },
         delete(id) {
@@ -242,13 +199,11 @@ export default {
         },
         // 页码变化时
         handlePagination(val) {
-            console.log(val, 'handlePagination');
             this.page = val;
             this.queryListData();
         },
         // 启用状态改变时
         switchChange(val, id) {
-            console.log(val, id);
             let obj = {
                 statuz: val,
                 id,
@@ -258,7 +213,7 @@ export default {
                     this.$message.success('修改成功');
                     this.queryListData();
                 })
-                .catch(err => err);
+                .catch((err) => err);
         },
         // 查询
         query() {
@@ -276,28 +231,33 @@ export default {
         },
         // 批量关闭
         batchClose() {
-            if (this.ids.length === 0) return this.$message.warning('请至少选中一项 !');
+            if (this.ids.length === 0) {
+                return this.$message.warning('请至少选中一项 !');
+            }
+                
+
             noUseBathBanner(this.ids)
                 .then(() => {
                     this.$message.success('修改成功');
                     this.queryListData();
                 })
-                .catch(err => err);
+                .catch((err) => err);
         },
         // 批量开启
         batchUse() {
-            if (this.ids.length === 0) return this.$message.warning('请至少选中一项 !');
+            if (this.ids.length === 0) {
+                return this.$message.warning('请至少选中一项 !');
+            }
             useBathBanner(this.ids)
                 .then(() => {
                     this.$message.success('修改成功');
                     this.queryListData();
                 })
-                .catch(err => err);
+                .catch((err) => err);
         },
-        openPdf(imgs){
+        openPdf(imgs) {
             window.open(imgs);
-        }
-        
+        },
     },
     created() {
         this.queryListData();
@@ -306,14 +266,15 @@ export default {
 </script>
 <style lang="stylus" scoped>
 .banner-index {
-  ::v-deep .el-image {
-      img {
-          pointer-events: auto;
-      }
-      .el-icon-circle-close {
-          font-size: 50px;
-          color: #fff;
-      }
-  }
+    ::v-deep .el-image {
+        img {
+            pointer-events: auto;
+        }
+
+        .el-icon-circle-close {
+            font-size: 50px;
+            color: #fff;
+        }
+    }
 }
 </style>

src/apps/mobile/views/operation-bank/user/components/redEnvelopes.vue

@@ -96,7 +96,7 @@ export default {
         },
         getCouponsList() {
             let obj = {
-                checkFalg: 1,
+                checkFalg: [1],
                 type: this.type,
                 statuz: 1,
                 ...this.page,