新增宠物卡通手办

components.d.ts

@@ -31,5 +31,6 @@ declare module '@vue/runtime-core' {
     VanRadio: typeof import('vant/es')['Radio']
     VanRadioGroup: typeof import('vant/es')['RadioGroup']
     VanStepper: typeof import('vant/es')['Stepper']
+    VanUploader: typeof import('vant/es')['Uploader']
   }
 }

src/api/badge.ts

@@ -151,3 +151,11 @@ export const composite = (data: any) => {
     data,
   })
 }
+
+// 获取上传多图的url
+export const getMultiUrl = (params: any) => {
+  return request('images/multiUrl', {
+    method: 'GET',
+    params,
+  })
+}

src/views/badge/index.vue

@@ -119,7 +119,7 @@
         <div class="tag-change-item-title" :class="{ tagActive: prodId == 7 || prodId == 1 }" @click="prodChange(7)">
           人物主体
         </div>
-        <div class="tag-change-item-title" :class="{ tagActive: prodId == 8 || prodId == 2 }" @click="prodChange(8)">
+        <div class="tag-change-item-title" :class="{ tagActive: prodId == 8 || prodId == 19 }" @click="prodChange(8)">
           宠物主体
         </div>
       </div>
@@ -176,7 +176,7 @@
         <h5-cropper :option="option" @getbase64Data="getbase64Data" @imgorigoinf="imgorigoinf"></h5-cropper>
       </div>
     </div>
-    <div v-if="typeId == 4">
+    <div v-if="typeId == 4 && kindList.length > 0">
       <div style="font-size: 16px; color: #222; font-weight: bold; margin-top: 16px;padding: 0 16px;">风格类型</div>
       <div class="kind-box">
         <div class="kind-box-item" v-for="item in kindList" :key="item.id" :class="{ styleActive: kindId == item.id }">
@@ -186,6 +186,12 @@
         </div>
       </div>
     </div>
+    <div v-if="typeId == 4 && prodId == 19">
+      <div style="font-size: 16px; color: #222; font-weight: bold; margin-top: 16px;padding: 0 16px;">多视角参考图</div>
+      <div class="photo-upload-box-refer">
+        <van-uploader v-model="referPicture" multiple :max-count="3" :max-size="10 * 1024 * 1024" @oversize="onOversize" :deletable="true" :show-preview="true" :before-read="beforeRead" />
+      </div>
+    </div>
     <div v-if="typeId != 4">
       <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 7 || prodId == 1">温馨提示：请上传只有{{ prop == '3D真人肖像' ? '1' : '1-3' }}人的照片</div>
       <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 8 || prodId == 2">温馨提示：请上传只有1-3只宠物的照片</div>
@@ -256,6 +262,7 @@ import { useRouter } from 'vue-router'
 import H5Cropper  from 'vue-cropper-h5'
 import "vue-cropper-h5/dist/style.css"
 import { showLoadingToast, showToast, closeToast, showFailToast, showSuccessToast } from 'vant';
+import type { UploaderFileListItem } from 'vant'
 import * as badgeApi from '@/api/badge'
 
 import { localStorage } from '@/utils/local-storage'
@@ -263,6 +270,9 @@ import CryptoJS from 'crypto-js'
 
 const show = ref(false)
 const imgShow = ref(false)
+
+const referPicture = ref<UploaderFileListItem[]>([])
+
 const router = useRouter()
 const option = ref({
   canScale: true,
@@ -339,7 +349,7 @@ const getOrderStat = () => {
   badgeApi.getOrderStat({}).then((res: any) => {
     orderStat.value = res
     if (res.type_id == 4) {
-      prodId.value = res.prod_id == 1 ? 1 : 2
+      prodId.value = res.prod_id == 1 ? 1 : 19
       getKindList()
     } else {
       prodId.value = res.type_id == 3 ? 8 : res.prod_id
@@ -353,11 +363,11 @@ const getOrderStat = () => {
 const kindList = ref([])
 const getKindList = () => {
   badgeApi.getKindList({
-    support_subject: 1,
+    support_subject: prodId.value == 19 ? 2 : 1,
     type_id: 4
   }).then((res: any) => {
     kindList.value = res.list
-    kindId.value = res.list && res.list[0].id
+    kindId.value = res.list && res.list[0]?.id
     console.log('kindList', kindList.value)
   })
 }
@@ -368,11 +378,17 @@ const prodChange = (id: number) => {
     showToast('人物3D冰箱贴暂未开放')
     return 
   }
-  if (typeId.value == 4 && id == 8) {
+  if (typeId.value == 4) {
-    showToast('宠物卡通手办暂未开放')
+    if(prodId.value == 19) {
+      showToast('该订单属于宠物卡通手办')
       return 
     }
-  prodId.value = typeId.value == 4 ? id == 8 ? 2 : 1 : id == 7 ? 7 : 8
+    if(prodId.value == 1) {
+      showToast('该订单属于人物卡通手办')
+      return 
+    }
+  }
+  prodId.value = typeId.value == 4 ? id == 8 ? 19 : 1 : id == 7 ? 7 : 8
   picture.value = null
   kindId.value = 0
 }
@@ -566,6 +582,75 @@ const sendFaceToOss = async (src: string, url: string, path: string) => {
   }
 }
 
+const onOversize = (file: any) => {
+  if (file.size > 10 * 1024 * 1024) {
+    showToast('照片大小不能超过10M')
+    return false
+  }
+  return true
+}
+
+const beforeRead = (file: any) => {
+  const MIN_WIDTH = 300
+  const MIN_HEIGHT = 300
+  const MAX_SIZE = 10 * 1024 * 1024
+
+  const toPreviewAndCheck = (input: any): Promise<UploaderFileListItem> => {
+    return new Promise((resolve, reject) => {
+      const raw: File = input.file || input
+      if (raw.size > MAX_SIZE) {
+        showToast('照片大小不能超过10M')
+        reject(false)
+        return
+      }
+      const objectUrl = URL.createObjectURL(raw)
+      const img = new Image()
+      img.src = objectUrl
+      img.onload = () => {
+        const width = img.naturalWidth
+        const height = img.naturalHeight
+        imageWidth.value = width
+        imageHeight.value = height
+        URL.revokeObjectURL(objectUrl)
+        if (width < MIN_WIDTH || height < MIN_HEIGHT) {
+          showToast(`请上传尺寸大于${MIN_WIDTH}×${MIN_HEIGHT}像素的照片`)
+          reject(false)
+          return
+        }
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          const url = e.target?.result as string
+          // 设置回显，不手动 push，交由 v-model 维护
+          const out: any = input
+          out.url = url
+          resolve(out)
+        }
+        reader.onerror = () => {
+          showToast('图片读取失败')
+          reject(false)
+        }
+        reader.readAsDataURL(raw)
+      }
+      img.onerror = () => {
+        showToast('图片加载失败')
+        URL.revokeObjectURL(objectUrl)
+        reject(false)
+      }
+    })
+  }
+
+  if (Array.isArray(file)) {
+    return Promise.allSettled(file.map(toPreviewAndCheck)).then((results) => {
+      const passed = results
+        .filter(r => r.status === 'fulfilled')
+        .map((r: any) => r.value)
+      if (passed.length === 0) return Promise.reject(false)
+      return passed
+    })
+  }
+  return toPreviewAndCheck(file)
+}
+
 
 
 // 获取Pid
@@ -593,6 +678,17 @@ const getPid = async () => {
         sendToOss(imgurl.value, res.oss_url)
       ]
       await Promise.all(uploadTasks)
+      if (typeId.value == 4 && prodId.value == 19 && referPicture.value.length > 0) {
+        const multiUrlTasks = referPicture.value.map((item) => {
+          return badgeApi.getMultiUrl({
+            pid: pid.value,
+          }).then((res: any) => {
+            console.log('multiUrl', res)
+            return sendToOss(item.file, res.multi_url)
+          })
+        })
+        await Promise.all(multiUrlTasks)
+      }
     } catch (err) {
       closeToast()
       console.error('上传失败:', err)
@@ -618,7 +714,7 @@ const getPid = async () => {
 // 上传到OSS
 const pendingUploads = ref(0)
 const isAnotherAPICalled = ref(false)
-const sendToOss = async (src: string, url: string) => {
+const sendToOss = async (src: string | Blob | File, url: string) => {
   try {
     pendingUploads.value++
     const response = await fetch(url, {
@@ -1335,4 +1431,7 @@ onMounted(() => {
   background: #50CF54;
   color: #fff;
 }
+.photo-upload-box-refer {
+  margin: 16px 36px;
+}
 </style>