From c47928748c3c27f5947696e8dbb36a4905008064 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Thu, 24 Dec 2020 23:54:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E6=8F=90=E5=8F=96?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E8=BE=93=E5=85=A5=E6=A1=86=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/JInput.vue            | 31 ----------------
 src/components/input/UploadImageInput.vue  | 42 ++++++++++++++++++++++
 src/styles/setting.scss                    |  1 +
 src/views/setting/articles/blogManager.vue | 18 +++++-----
 4 files changed, 51 insertions(+), 41 deletions(-)
 delete mode 100644 src/components/input/JInput.vue
 create mode 100644 src/components/input/UploadImageInput.vue

diff --git a/src/components/input/JInput.vue b/src/components/input/JInput.vue
deleted file mode 100644
index 879741c..0000000
--- a/src/components/input/JInput.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <el-tooltip class="item" effect="dark" placement="bottom">
-    <el-input autosize type="textarea" width="100%" v-model="currentValue"></el-input>
-    <div slot="content" v-if="value.length > 0">
-      <el-image v-if="value === 'img'" style="width: 150px;" :src="value" fit="contain"></el-image>
-      <a v-if="value === 'url'" :href="value">{{value}}</a>
-    </div>
-  </el-tooltip>
-</template>
-<script>
-export default {
-  name: 'JInput',
-  props: {
-    value: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      currentValue: this.value
-    }
-  },
-  watch: {
-    currentValue(val) {
-      console.log('890')
-      this.$emit("update:value", val);
-    }
-  }
-}
-</script>
diff --git a/src/components/input/UploadImageInput.vue b/src/components/input/UploadImageInput.vue
new file mode 100644
index 0000000..8f028a4
--- /dev/null
+++ b/src/components/input/UploadImageInput.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <el-upload
+      action="https://jsonplaceholder.typicode.com/posts/"
+      :show-file-list="false"
+      :limit="1">
+      <el-button size="small" type="text">点击上传</el-button>
+    </el-upload>
+    <el-tooltip class="item" effect="dark" placement="bottom">
+      <el-input :autosize="{ minRows: 2, maxRows: 4}" type="textarea" width="100%" v-model="currentValue" @change="change"></el-input>
+      <div slot="content">
+        <el-image style="width: 150px;" :src="currentValue" fit="contain"></el-image>
+      </div>
+    </el-tooltip>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UploadImageInput',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      currentValue: this.value
+    }
+  },
+  watch: {
+    value(val) {
+      this.currentValue = val
+    }
+  },
+  methods: {
+    change() {
+      this.$emit('input', this.currentValue)
+    }
+  }
+}
+</script>
diff --git a/src/styles/setting.scss b/src/styles/setting.scss
index 274ce3a..61b938c 100644
--- a/src/styles/setting.scss
+++ b/src/styles/setting.scss
@@ -55,6 +55,7 @@ a:hover {
 }
 .config-itme-label {
   padding-top: 15px;
+  padding-bottom: 5px;
   font-size: 14px;
   font-weight: 500;
 }
diff --git a/src/views/setting/articles/blogManager.vue b/src/views/setting/articles/blogManager.vue
index 82da4ee..b206496 100644
--- a/src/views/setting/articles/blogManager.vue
+++ b/src/views/setting/articles/blogManager.vue
@@ -11,13 +11,11 @@
       </a-affix>
       <el-collapse v-model="activeNames">
         <el-collapse-item title="网站首页背景" name="1">
-          <div class="config-itme-label">站点背景大图：</div>
-          <el-tooltip class="item" effect="dark" placement="bottom" :disabled="!form.categoryBackground || form.categoryBackground.length === 0">
-            <el-input :autosize="{ minRows: 2, maxRows: 4}" type="textarea" width="100%" v-model="form.backgroundSite"></el-input>
-            <div slot="content">
-              <el-image style="width: 150px;" :src="form.backgroundSite" fit="contain"></el-image>
-            </div>
-          </el-tooltip>
+          <div class="config-itme-label">站点背景大图：
+          </div>
+          <upload-image-input
+            v-model="form.backgroundSite"
+          />
           <span class="instruction">在这里填入图片的URL地址, 以在网站首页显示一个背景大图。</span>
           <div class="config-itme-label">首页大图内文字：</div>
           <el-input autosize type="textarea" v-model="form.backgroundTextSite"></el-input>
@@ -103,12 +101,12 @@
 
 import '../../../assets/fontawesome-free-5.11.2-web/css/all.min.css'
 import {getSetting, updateSetting} from '@/api/setting-api'
-import JInput from "@/components/input/JInput";
+import UploadImageInput from "@/components/input/UploadImageInput";
 
 export default {
   name: 'blogManager',
   components: {
-    JInput,
+    UploadImageInput
   },
   data() {
     return {
@@ -136,7 +134,7 @@ export default {
     this.$nextTick(() => {
       const that = this
       setTimeout(function (){
-        that.activeNames = ['2']
+        that.activeNames = ['1']
       },50)
     })
   },