账单推送主张单增加图片

src/views/base/billInfo-detail.vue

@@ -27,11 +27,27 @@
             ></el-input>
         </el-form-item>
         <el-form-item label="手机端会费公示" prop="wxShow">
-            <el-radio-group v-model="formModel.wxShow">
+            <el-radio-group v-model="formModel.wxShow" @change="wxShowChange()">
                 <el-radio :label="true">是</el-radio>
                 <el-radio :label="false">否</el-radio>
             </el-radio-group>
         </el-form-item>
+        <el-form-item label="图片" prop="picUrl"  v-if="formModel.wxShow">
+              <el-upload
+                class="avatar-uploader"
+                name="photoFile"
+                :action="uploadUrl"
+                :show-file-list="false"
+                :headers="headers"
+                :data="uploadData"
+                :on-success="handleAvatarSuccess"
+                :before-upload="beforeAvatarUpload"
+                accept="image/png,image/jpeg"
+              >
+                <img v-if="fileUrl" :src="fileUrl" class="avatar" />
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+        </el-form-item>
         </el-form>
     </div>
     <span slot="footer" class="dialog-footer">
@@ -45,6 +61,7 @@
 <script>
 import Constant from "@/constant";
 import billInfoApi from "@/api/base/billInfo";
+import { getToken } from "@/utils/auth"; // get token from cookie
 export default {
     props: ["businessKey", "title"],
     data() {
@@ -66,6 +83,15 @@ export default {
                 value: "id",
                 label: "industryName",
             },
+            //上传图片start
+            uploadUrl: Constant.serverUrl + "/uploadPicture",
+            uploadData: {
+                subFolder: "biillInfo",
+            },
+            fileUrl: "",
+            headers: {
+                Authorization: getToken(),
+            },
         }
     },
     methods: {
@@ -107,6 +133,25 @@ export default {
                 }
             });
         },
+        handleAvatarSuccess(res, file) {
+            this.loading = false;
+            var self = this;
+            self.formModel.picUrl = res.data;
+            self.fileUrl = res.data + "?x-oss-process=image/resize,m_lfit,w_200";
+        },
+        beforeAvatarUpload(file) {
+        this.loading = true;
+        // const isJPG = file.type === "image/jpeg";
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        // if (!isJPG) {
+        //   this.$message.error("上传图片只能是 JPG 格式!");
+        // }
+        if (!isLt2M) {
+            this.$message.error("上传图片大小不能超过 2MB!");
+        }
+            return isLt2M;
+        },
     },
     mounted: function () {
         var self = this;
@@ -123,7 +168,13 @@ export default {
             self.loading = false;
 
             if (jsonData.result) {
-            self.formModel = jsonData.data;
+                self.formModel = jsonData.data;
+
+                let picUrl = self.formModel.picUrl;
+                if (picUrl != null) {
+                    self.fileUrl =
+                    picUrl + "?x-oss-process=image/resize,m_lfit,h_200";
+                }
             } else {
             self.$message.error(jsonData.message + "");
             }
@@ -138,4 +189,22 @@ export default {
 .user-panel {
   margin: 10px auto;
 }
+.el-breadcrumb {
+  margin: 10px;
+  line-height: 20px;
+}
+
+.el-divider {
+  margin: 5px 0;
+}
+
+.demo-form-inline {
+  margin-left: 10px;
+  text-align: left;
+}
+
+.button-group {
+  margin-left: 10px;
+  text-align: left;
+}
 </style>

src/views/base/billInfo-list.vue

@@ -89,6 +89,21 @@
                 <span v-else>否</span>
             </template>
         </el-table-column>
+        <el-table-column prop="picUrl" label="图片">
+            <template slot-scope="{ row }">
+                <a :href="row.picUrl" target="_blank" v-if="row.picUrl">
+                    <el-avatar
+                    :size="48"
+                    shape="circle"
+                    :src="
+                        row.picUrl +
+                        '?x-oss-process=image/resize,m_fill,w_64,h_64'
+                    "
+                    :key="row.id"
+                    ></el-avatar>
+                </a> 
+            </template>
+        </el-table-column>
         <el-table-column prop="status" label="推送状态">
             <template slot-scope="{ row }">
                 <span v-if="row.status=='0'">未推送</span>