From 78fb1b72b2579524bc332b94ef3c52523228baad Mon Sep 17 00:00:00 2001
From: Fox-33 <1466778434@qq.com>
Date: Sat, 26 Apr 2025 00:44:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=86=E4=BA=AB=E5=A5=BD=E5=8F=8B?=
 =?UTF-8?q?=E5=B0=81=E9=9D=A2=E5=9B=BE=E8=87=AA=E5=8A=A8=E8=A3=81=E5=88=87?=
 =?UTF-8?q?;?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages_order/components/autoCrop.vue    | 111 +++++++++++++++++++++++++++++++++
 pages_order/record/articleSharing.vue  |  17 ++++-
 pages_order/record/groupSharing.vue    |  17 ++++-
 pages_order/record/personalSharing.vue |  18 +++++-
 pages_order/record/videoSharing.vue    |  18 +++++-
 5 files changed, 169 insertions(+), 12 deletions(-)
 create mode 100644 pages_order/components/autoCrop.vue

diff --git a/pages_order/components/autoCrop.vue b/pages_order/components/autoCrop.vue
new file mode 100644
index 0000000..216993e
--- /dev/null
+++ b/pages_order/components/autoCrop.vue
@@ -0,0 +1,111 @@
+<template>
+  <view style="position: fixed; top: 100vh;">
+    <image :src="imageUrl" @load="crop" @error="afterLoadImg" />  
+    <canvas class="canvas" canvas-id="canvas" style="width: 500px; height: 400px;"></canvas>
+  </view>
+</template>
+
+<script>
+import utils from '@/utils/utils.js'
+
+export default {
+  data() {
+    return {
+      imageUrl: null,
+    }
+  },
+  methods: {
+    afterLoadImg() {
+      uni.hideLoading()
+    },
+    cutImgShare(imgUrl, w, h, that) {
+      console.log('--imgUrl', imgUrl)
+      return new Promise((resolve, reject) => {
+        uni.getImageInfo({
+          src: imgUrl,
+          success(res) {
+            try {
+
+              const context = uni.createCanvasContext('canvas', that);
+              console.log('--context', context)
+              let sWidth = w
+              let sHeight = h
+              let sx = 0
+              let sy = 0;
+              let dWidth = 500
+              let dHeight = 400
+
+              console.log('--w', w, '--h', h)
+
+              if (w <= h) {
+                sHeight = Math.floor(sWidth / 5 * 4);
+                sy = Math.floor((h - sHeight) / 2)
+              } else {
+                sWidth = Math.floor(sHeight / 4 * 5);
+                sx = Math.floor((w - sWidth) / 2)
+              }
+              
+              console.log('--sx', sx, '--sy', sy, '--sWidth', sWidth, '--sHeight', sHeight)
+              context.drawImage(res.path, sx, sy, sWidth, sHeight, 0, 0, dWidth, dHeight);
+
+              context.draw(true, setTimeout(() => {
+                uni.canvasToTempFilePath({
+                  canvasId: 'canvas',
+                  fileType: 'jpg',
+                  success: (res) => {
+                    console.log(res.tempFilePath)
+                    resolve(res.tempFilePath);
+                  },
+                  fail(err) {
+                    console.log(err);
+                    reject(err)
+                  }
+                }, that);
+              }, 200));
+
+            } catch (err) {
+              reject(err)
+            }
+
+          },
+          fail(err) {
+            console.log('获取图片信息失败', err);
+            reject(err)
+          }
+        });
+      });
+    },
+    set(imageUrl) {
+      console.log('--set', imageUrl)
+      this.imageUrl = imageUrl
+      uni.showLoading({
+        title: '上传中...'
+      })
+    },
+    async crop(e) {
+      
+      console.log('--crop', e)
+      let that = this
+
+      try {
+        const { width, height } = e.target
+        let fileUrl = await this.cutImgShare(this.imageUrl, width, height, that)
+        
+        this.$Oss.ossUpload(fileUrl).then(url => {
+          console.log('--shareImg', url)
+          this.$emit('change', url)
+        })
+      } catch (err) {
+        console.log('--err', err)
+        this.$emit('change', this.imageUrl)
+      }
+
+      this.afterLoadImg()
+    },
+  },
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages_order/record/articleSharing.vue b/pages_order/record/articleSharing.vue
index 5e8805d..64d4717 100644
--- a/pages_order/record/articleSharing.vue
+++ b/pages_order/record/articleSharing.vue
@@ -109,9 +109,11 @@
       发布
     </button>
     <!-- 不是 审核中 或 已发布 -> 即 创建分享 或 审核不通过 -->
-    <button v-else-if="![0,1].includes(status)" class="button-submit" @click="onSubmit">
+    <button v-else-if="![0,1].includes(status)" class="button-submit" @click="preSubmit">
       提交审核
     </button>
+
+    <autoCrop ref="autoCropRef" @change="onSubmit"></autoCrop>
   </view>
 </template>
 
@@ -122,6 +124,7 @@
   import formNumberBox from '../components/formNumberBox.vue'
   import formUpload from '../components/formUpload.vue'
   import formTextarea from '../components/formTextarea.vue'
+  import autoCrop from '../components/autoCrop.vue'
 
 	export default {
     components: {
@@ -129,6 +132,7 @@
       formNumberBox,
       formUpload,
       formTextarea,
+      autoCrop,
     },
 		data() {
       return {
@@ -319,7 +323,15 @@
           
         }
       },
-      async onSubmit() {
+      async preSubmit() {
+        try {
+          await this.$refs.form.validate()
+          this.$refs.autoCropRef.set(this.form.headImage)
+        } catch (err) {
+          
+        }
+      },
+      async onSubmit(headImage) {
         try {
 
           await this.$refs.form.validate()
@@ -327,7 +339,6 @@
           const textDetails = (await this.getEditorContents())?.html
 
           const {
-            headImage,
             headTitle,
             num,
             wxCodeImage,
diff --git a/pages_order/record/groupSharing.vue b/pages_order/record/groupSharing.vue
index bccd03a..fe3bb14 100644
--- a/pages_order/record/groupSharing.vue
+++ b/pages_order/record/groupSharing.vue
@@ -124,9 +124,11 @@
       发布
     </button>
     <!-- 不是 审核中 或 已发布 -> 即 创建分享 或 审核不通过 -->
-    <button v-else-if="![0,1].includes(status)" class="button-submit" @click="onSubmit">
+    <button v-else-if="![0,1].includes(status)" class="button-submit" @click="preSubmit">
       提交审核
     </button>
+
+    <autoCrop ref="autoCropRef" @change="onSubmit"></autoCrop>
   </view>
 </template>
 
@@ -137,6 +139,7 @@
   import formNumberBox from '../components/formNumberBox.vue'
   import formUpload from '../components/formUpload.vue'
   import formTextarea from '../components/formTextarea.vue'
+  import autoCrop from '../components/autoCrop.vue'
 
 	export default {
     components: {
@@ -144,6 +147,7 @@
       formNumberBox,
       formUpload,
       formTextarea,
+      autoCrop,
     },
 		data() {
       return {
@@ -281,7 +285,15 @@
           
         }
       },
-      async onSubmit() {
+      async preSubmit() {
+        try {
+          await this.$refs.form.validate()
+          this.$refs.autoCropRef.set(this.form.indexImage)
+        } catch (err) {
+          
+        }
+      },
+      async onSubmit(indexImage) {
         try {
 
           await this.$refs.form.validate()
@@ -289,7 +301,6 @@
           const {
             headImage,
             headTitle,
-            indexImage,
             memberNum,
             num,
             wxCodeImage,
diff --git a/pages_order/record/personalSharing.vue b/pages_order/record/personalSharing.vue
index 886ecc3..567d977 100644
--- a/pages_order/record/personalSharing.vue
+++ b/pages_order/record/personalSharing.vue
@@ -117,9 +117,11 @@
       发布
     </button>
     <!-- 不是 审核中 或 已发布 -> 即 创建分享 或 审核不通过 -->
-    <button v-else-if="![0,1].includes(status)" class="button-submit" @click="onSubmit">
+    <button v-else-if="![0,1].includes(status)" class="button-submit" @click="preSubmit">
       提交审核
     </button>
+
+    <autoCrop ref="autoCropRef" @change="onSubmit"></autoCrop>
   </view>
 </template>
 
@@ -130,6 +132,7 @@
   import formNumberBox from '../components/formNumberBox.vue'
   import formUpload from '../components/formUpload.vue'
   import formTextarea from '../components/formTextarea.vue'
+  import autoCrop from '../components/autoCrop.vue'
 
 	export default {
     components: {
@@ -137,6 +140,7 @@
       formNumberBox,
       formUpload,
       formTextarea,
+      autoCrop,
     },
 		data() {
       return {
@@ -267,11 +271,20 @@
             textDetails,
           }
           this.status = status
+
         } catch (err) {
           
         }
       },
-      async onSubmit() {
+      async preSubmit() {
+        try {
+          await this.$refs.form.validate()
+          this.$refs.autoCropRef.set(this.form.indexImage)
+        } catch (err) {
+          
+        }
+      },
+      async onSubmit(indexImage) {
         try {
 
           await this.$refs.form.validate()
@@ -279,7 +292,6 @@
           const {
             headImage,
             headTitle,
-            indexImage,
             num,
             wxCodeImage,
             textDetails,
diff --git a/pages_order/record/videoSharing.vue b/pages_order/record/videoSharing.vue
index f04be73..e279d20 100644
--- a/pages_order/record/videoSharing.vue
+++ b/pages_order/record/videoSharing.vue
@@ -113,18 +113,22 @@
       发布
     </button>
     <!-- 不是 审核中 或 已发布 -> 即 创建分享 或 审核不通过 -->
-    <button v-else-if="![0,1].includes(status)" class="button-submit" @click="onSubmit">
+    <button v-else-if="![0,1].includes(status)" class="button-submit" @click="preSubmit">
       提交审核
     </button>
+
+    <autoCrop ref="autoCropRef" @change="onSubmit"></autoCrop>
   </view>
 </template>
 
 <script>
   import { mapState } from 'vuex'
+
   import formUpload from '../components/formUpload.vue'
   import formInput from '../components/formInput.vue'
   import formNumberBox from '../components/formNumberBox.vue'
   import formTextarea from '../components/formTextarea.vue'
+  import autoCrop from '../components/autoCrop.vue'
 
 	export default {
     components: {
@@ -132,6 +136,7 @@
       formInput,
       formNumberBox,
       formTextarea,
+      autoCrop,
     },
 		data() {
       return {
@@ -270,14 +275,21 @@
           
         }
       },
-      async onSubmit() {
+      async preSubmit() {
+        try {
+          await this.$refs.form.validate()
+          this.$refs.autoCropRef.set(this.form.indexImage)
+        } catch (err) {
+          
+        }
+      },
+      async onSubmit(indexImage) {
         try {
 
           await this.$refs.form.validate()
 
           const {
           headTitle,
-          indexImage,
           vio,
           timeNum,
           num,