From 4207ef50035d1dec2bd177a3c79cff564ddbcf61 Mon Sep 17 00:00:00 2001
From: zhl <zhl010101@gmail.com>
Date: Wed, 16 Jun 2021 15:03:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0=E6=8F=92?=
 =?UTF-8?q?=E4=BB=B6=E5=A2=9E=E5=8A=A0=E5=9B=BE=E7=89=87=E5=B0=BA=E5=AF=B8?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UploadCorpImage/index.vue  |  4 +++
 src/components/UploadCorpImage/upload.css |  7 +++++
 src/views/game/game_theme.vue             | 38 +++++++++++++++++++++--
 3 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/components/UploadCorpImage/index.vue b/src/components/UploadCorpImage/index.vue
index 08556f8..9422bb8 100644
--- a/src/components/UploadCorpImage/index.vue
+++ b/src/components/UploadCorpImage/index.vue
@@ -4,11 +4,15 @@
       <div>
         <div class="avatar-uploader">
           <div tabindex="0" class="el-upload el-upload--text">
+            <div class="tip-bar">
+              {{width}} x {{height}}
+            </div>
             <i class="el-icon-plus avatar-uploader-icon" @click="handleClick" v-if="!hasImg"></i>
             <img alt="" :src="initialImgUrl" @click="showInitImg" class="upload-preview-img" v-if="hasImg">
             <input type="file" name="file" ref="fileinput"
                    @change="handleChange" accept="image/*"
                    class="el-upload__input">
+
             <div class="action-bar" v-if="hasImg">
               <el-button
                   type="success"
diff --git a/src/components/UploadCorpImage/upload.css b/src/components/UploadCorpImage/upload.css
index a80be06..58fddb8 100644
--- a/src/components/UploadCorpImage/upload.css
+++ b/src/components/UploadCorpImage/upload.css
@@ -593,3 +593,10 @@
     justify-content: space-between;
     padding: 5px;
 }
+
+.upload-corp-container .tip-bar {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 5px;
+    line-height: 20px;
+}
diff --git a/src/views/game/game_theme.vue b/src/views/game/game_theme.vue
index c5e63fd..7c21f22 100644
--- a/src/views/game/game_theme.vue
+++ b/src/views/game/game_theme.vue
@@ -11,14 +11,32 @@
           prop="game_main_pic"
           label="主页正中间图片"
       >
-        <upload-image v-model="record.game_main_pic"/>
+        <upload-corp-image
+            field="image-file"
+            @crop-upload-success="mainUploadSuccess"
+            :width="583"
+            :height="287"
+            img-format="png"
+            v-model="record.game_main_pic"
+        >
+
+        </upload-corp-image>
       </el-form-item>
 
       <el-form-item
           prop="bg_item_icon"
           label="背景图案"
       >
-        <upload-image v-model="record.bg_item_icon"/>
+        <upload-corp-image
+            field="image-file"
+            @crop-upload-success="bgUploadSuccess"
+            :width="392"
+            :height="396"
+            img-format="png"
+            v-model="record.bg_item_icon"
+        >
+
+        </upload-corp-image>
       </el-form-item>
 
       <el-form-item
@@ -64,6 +82,7 @@ import { Component, Vue } from 'vue-property-decorator'
 import Sticky from '@/components/Sticky/index.vue'
 import ElImageViewer from 'element-ui/packages/image/src/image-viewer.vue'
 import UploadImage from '@/components/UploadImage/index.vue'
+import UploadCorpImage from '@/components/UploadCorpImage/index.vue'
 
 import { getGameTheme, saveGameTheme } from '@/api/shop'
 import { UserModule } from '@/store/modules/user'
@@ -73,7 +92,8 @@ import { UserModule } from '@/store/modules/user'
   components: {
     Sticky,
     ElImageViewer,
-    UploadImage
+    UploadImage,
+    UploadCorpImage
   },
   filters: {
     parseGameType: (type: number) => {
@@ -167,6 +187,18 @@ export default class extends Vue {
   private inputBegin() {
     this.$forceUpdate()
   }
+
+  private mainUploadSuccess(imgUrl: string) {
+    console.log('game main success: ' + imgUrl)
+    this.record.game_main_pic = imgUrl
+    this.$forceUpdate()
+  }
+
+  private bgUploadSuccess(imgUrl: string) {
+    console.log('bg item success: ' + imgUrl)
+    this.record.bg_item_icon = imgUrl
+    this.$forceUpdate()
+  }
 }
 </script>