From f20a554bdb24e9dfde9dc6a69d78595944f61d15 Mon Sep 17 00:00:00 2001 From: mark <mark18340872469@163.com> Date: 星期二, 25 十月 2022 14:53:57 +0800 Subject: [PATCH] 设备管理 样式调整 --- src/views/productDetail/components/UploadBox.vue | 77 +++++++++++++++++++++++++++++--------- 1 files changed, 58 insertions(+), 19 deletions(-) diff --git a/src/views/productDetail/components/UploadBox.vue b/src/views/productDetail/components/UploadBox.vue index ffa5aa2..6e7bde6 100644 --- a/src/views/productDetail/components/UploadBox.vue +++ b/src/views/productDetail/components/UploadBox.vue @@ -2,7 +2,7 @@ <div class="UploadBox"> <div class="title">绾夸笅姹囨璇存槑</div> <div class="close iconfont" @click="close"></div> - <div class="content"> + <div class="content scroll"> <el-form :model="certificateForm" ref="certificateForm" @@ -61,20 +61,28 @@ <el-form-item label="澶囨敞" prop="reserved"> <el-input type="textarea" v-model="item.reserved"></el-input> </el-form-item> - <el-form-item label="浠樻鍑瘉" prop="pic"> + <el-form-item + label="浠樻鍑瘉" + :prop="`list[${index}].appendix`" + :rules="[ + { required: true, message: '璇蜂笂浼犲嚟璇�', trigger: 'blur' }, + ]" + > + <el-image + class="preview" + v-if="item.appendix" + :src="`/httpImage/${item.appendix}`" + fit="contain" + ></el-image> <el-upload + v-else class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" :http-request="(param) => definedUpload(param, index)" :show-file-list="false" + accept=".jpg, .jpeg, .png" > - <el-image - class="preview" - v-if="item.appendix" - :src="`/httpImage/${item.appendix}`" - fit="contain" - ></el-image> <div class="el-upload__text"> <i class="el-icon-plus"></i> <span class="words"> @@ -82,11 +90,13 @@ </span> </div> </el-upload> - <i - class="el-icon-error remove" - v-if="item.appendix" - @click="item.appendix = ''" - ></i> + <div> + <i + class="el-icon-error remove" + v-if="item.appendix" + @click="item.appendix = ''" + ></i> + </div> </el-form-item> <!-- <div class="text-left" v-if="index!=0"> <el-button @@ -114,10 +124,10 @@ export default { props: { - offerId: {}, + orderId: {}, }, mounted() { - this.certificateForm.orderId = this.offerId; + this.certificateForm.orderId = this.orderId; }, data() { return { @@ -158,12 +168,25 @@ this.certificateForm.list.splice(index, 1); }, definedUpload(param, index) { + const fileName = param.file.name; + const m = fileName.match(/\.(\w+)(#|\?|$)/); + const fileType = (m && m[1]).toString().toLowerCase(); + const validType = ["jpg", "jpeg", "png"].includes(fileType); + if (!validType) { + this.$notify({ + message: "涓婁紶鏍煎紡鏈夎", + type: "warning", + }); + return; + } + let _this = this; const fd = new FormData(); fd.append("file", param.file); + console.log(param); request({ method: "post", - url: `/data/api-s/file/upload`, + url: `/saas/api-s/saasFile/upload`, data: fd, }) .then((res) => { @@ -191,8 +214,18 @@ duration: 2500, offset: 57, }); - this.certificateSubmitVisible = false; - this.close(); + + if (this.$route.path === "/personalCenter") { + this.$emit("closeAll"); + return; + } + + this.$router.push({ + path: "/personalCenter", + query: { + id: 0, + }, + }); } }) .catch((e) => { @@ -255,6 +288,8 @@ } .content { + height: 533px; + overflow-y: auto; box-sizing: border-box; padding: 30px 20px 20px 20px; font-size: 14px; @@ -265,7 +300,7 @@ right: 20px; bottom: 20px; display: flex; - justify-content: end; + justify-content: flex-end; text-align: center; line-height: 40px; @@ -313,6 +348,9 @@ font-size: 12px; } } +.el-image { + width: 120px; +} </style> <style lang="scss"> @@ -322,6 +360,7 @@ border: 1px dashed #c0c5cc !important; border-radius: 3px; background: #e9ebee; + .el-upload__text { margin-top: 35px; display: flex; -- Gitblit v1.8.0