新增徽章形状，裁剪优化

src/views/badge/orderDetail.vue

@@ -5,8 +5,10 @@
     </div>
     <div class="order-status">
       <div class="avatar-wrapper">
-        <img class="avatar-img" :src="order.path" :alt="order.kind_name" />
-        <div class="progress-image-item-shadow"></div>
+        <!-- <img v-if="shapeImage" class="avatar-back-img" :src="shapeImage" alt=""> -->
+        <div class="avatar-front-box">
+          <img class="avatar-font-img" :src="imageUrl" :alt="order.kind_name" />
+        </div>
       </div>
     </div>
     <div class="status-info">
@@ -22,16 +24,20 @@
       <div class="product-title">产品信息</div>
       <div class="product-details">
         <div class="product-row">
-      <span class="product-label">产品名称</span>
-      <span class="product-value">立体徽章</span>
+          <span class="product-label">产品名称</span>
+          <span class="product-value">立体徽章</span>
         </div>
         <div class="product-row">
-      <span class="product-label">尺寸</span>
-      <span class="product-value">{{order.model_size}}</span>
+          <span class="product-label">尺寸</span>
+          <span class="product-value">{{order.model_size}}</span>
+        </div>
+        <div class="product-row" v-if="shape_name">
+          <span class="product-label">形状</span>
+          <span class="product-value">{{shape_name}}</span>
         </div>
         <div class="product-row">
-      <span class="product-label">购买数量</span>
-      <span class="product-value">{{order.count}}</span>
+          <span class="product-label">购买数量</span>
+          <span class="product-value">{{order.count}}</span>
         </div>
       </div>
     </div>
@@ -80,13 +86,42 @@ onMounted(() => {
   id.value = route.query.id
   getOrderDetail()
 })
+
+const shapeImage = ref('')
+const imageUrl = ref('')
+const getStyle = ref('')
+const shape_name = ref('')
+
 function getOrderDetail() {
   badgeApi.getOrderDetail({
     id: id.value,
   }).then(res => {
     order.value = res
+    imageUrl.value = res.path
+    shapeImage.value = res.shape_details.frame_path
+    shape_name.value = res.shape_details.name
+    // if (res.shape_details) {
+    //   ImageShow(res.shape_details)
+    // }
   })
 }
+
+const ImageShow = (item: any) => {
+  const scale = 0.6
+  const img = new Image()
+  img.src = item.frame_path
+  img.onload = () => {
+    console.log('img', img)
+    const ratioWidth = 320 / img.width;
+    const ratioHeight = 320 / img.height;
+    const x = item.axisx * ratioWidth * scale;
+    const y = item.axisy * ratioHeight * scale;
+    const path_width = item.width * ratioWidth * scale;
+    const path_height = item.height * ratioHeight * scale;
+    getStyle.value = `left: ${x}px;top: ${y}px;width: ${path_width}px;height: ${path_height}px;transform: rotate3D(1, 1, 0, 0deg)`
+  }
+}
+
 const router = useRouter();
 function goBack() {
   router.back()
@@ -121,23 +156,38 @@ function getStatus(status: number) {
     cursor: pointer;
   }
   .order-status {
+    margin: 0 auto;
+    width: 100vw;
+    height: 100vw;
     display: flex;
-    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    margin-top: 32px;
+    flex-direction: column;
   }
   .avatar-wrapper {
-    width: 85vw;
-    height: 85vw;
-    border-radius: 50%;
-    margin-bottom: 24px;
-    background: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     position: relative;
+    width: 320px;
+    height: 320px;
+  }
+  .avatar-back-img {
+    position: absolute;
+    width: 320px;
+    height: 320px;
+    top: 0;
+    left: 0;
+    z-index: 2;
+  }
+  .avatar-front-box {
+    width: 320px;
+    height: 320px;
+    position: absolute;
+    z-index: 1;
+  }
+  .avatar-font-img {
+    width: 100%;
+    height: auto;
+    border-radius: 10px;
   }
-  
   .progress-image-item-shadow {
     position: absolute;
     top: 0;