图片宽高参数

entrypoints/popup/pages/DesignPic.tsx

@@ -8,6 +8,7 @@ export default function DesignPic() {
   const [tableData, setTableData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [isPage, setIsPage] = useState(true);
+  const [btnLoading, setBtnLoading] = useState(false);
 
   useEffect(() => {
     is_temu_design()
@@ -37,7 +38,7 @@ export default function DesignPic() {
       <>
         {
           record.file ? <>
-            <img className='size-20' src={record.file} /></> : <>
+            <div className='flex items-center justify-center'><img className='size-20' src={record.file} /></div></> : <>
             <span>暂无图片</span>
           </>
         }
@@ -102,15 +103,15 @@ export default function DesignPic() {
 
   const getPicData = async () => {
     const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
-      // 获取页面域名
-      if (tab.url) {
-        const url = tab.url
-        if (!url.includes('main/customize-goods')) {
-          // temu定制页面
-          CustomMessage.error('当前页面不是定制页面')
-          return
-        }
+    // 获取页面域名
+    if (tab.url) {
+      const url = tab.url
+      if (!url.includes('main/customize-goods')) {
+        // temu定制页面
+        CustomMessage.error('当前页面不是定制页面')
+        return
       }
+    }
     try {
       setLoading(true)
       // 获取上传路径
@@ -129,9 +130,11 @@ export default function DesignPic() {
           const { data = {} } = res;
           const { url = null } = data;
           setUploadUrl(url)
-          setLoading(false)
         }
+      }).catch(e => {
+        setLoading(false)
       })
+      setBtnLoading(true)
       // 获取当前活动标签页
       const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
 
@@ -214,42 +217,8 @@ export default function DesignPic() {
 
           console.log(tables_arr, "tables_arrddd")
 
-          // 上传图片的参数处理
-          // let params_arr: any[] = []
-          // tables_arr.forEach(item => {
-          //   // const sku_info = item.sku_info?.text?.split('SKU：')
-          //   let order_no = ""
-          //   if (item.order_no && item.order_no != "-") {
-          //     order_no = item.order_no.substring(0, 15); // 取前15位
-          //   }
-          //   if (item.design_info.length) {
-          //     item.design_info.forEach(design_item => {
-          //       const prarm = {
-          //         title: '',
-          //         label: '',
-          //         category_id: '',
-          //         category_name: '',
-          //         file: '',
-          //         cur_index: ''
-          //       };
-          //       if (order_no && design_item.picture && design_item.picture != '-') {
-          //         // const text = design_item.text.split('}')
-          //         const bg_pic = (design_item.picture.backgroundImages as { url: string }[] | undefined)?.[0]?.url ?? '';
-          //         let bg_file = bg_pic.split('&imageMogr2/thumbnail/60x60')[0]
-          //         prarm.title = `${order_no}-${design_item.region}`
-          //         prarm.label = `${order_no}-${design_item.region}`
-          //         prarm.file = bg_file ?? '';
-          //         params_arr.push(prarm)
-          //       }
-          //     })
-          //   }
-          // })
-
-          // console.log(params_arr, "params_arr")
-          // setTableData(params_arr)
-
           // 上传图片和文字的参数处理
-          let pic_text_arr: any[] = []
+          let pic_text_arr: any[] = [], img_values: any = {}
           tables_arr.forEach(item => {
             let order_no = "", data_params: any[] = []
             if (item.order_no && item.order_no != "-") {
@@ -263,6 +232,17 @@ export default function DesignPic() {
                   if (items.picture && items.picture != '-') {
                     let bg_pic1 = (items.picture.backgroundImages as { url: string }[] | undefined)?.[0]?.url ?? '';
                     bg_pic = bg_pic1.split('&imageMogr2/thumbnail/60x60')[0]
+                    if (!img_values[bg_pic]) {
+                      img_values[bg_pic] = {
+                        src: bg_pic,
+                        width: '',
+                        height: ''
+                      }
+                    }
+                    if (bg_pic) {
+                      param['width'] = 400;
+                      param['height'] = 400;
+                    }
                   } else {
                     bg_pic = ""
                   }
@@ -288,89 +268,72 @@ export default function DesignPic() {
               })
             }
           })
-
-          console.log(pic_text_arr, "pic_text_arr")
-          let pic_text_arr1 = pic_text_arr.filter(item => item.order_no && item.order_no != "-")
-          console.log(pic_text_arr1, "pic_text_arr1")
-          // const params = {...pic_text_arr[0],api_token: localStorage.getItem('access_token')}
-          // console.log(params,"params")
-          // fetch(`http:${uploadUrl}photo/temuUpload `, {
-          //   method: 'POST',
-          //   headers: {
-          //     'Content-Type': 'application/json',
-          //   },
-          //   body: JSON.stringify(params),
-          // }).then(resjson => {
-          //   return resjson.json();
-          // }).then(res => {
-          //   if (res.data) {
-
-          //   }
-          // })
-
-          // 数据显示
-          let table_data: any[] = []
-          pic_text_arr1.forEach(item => {
-            if (item.data_params.length) {
-              item.data_params.forEach((items: any) => {
-                table_data.push({
-                  order_no: item.order_no,
-                  design_sku: item.design_sku,
-                  file: items.design_pic,
-                  region: items.region,
-                  text: items.text,
-                })
-              })
+          // console.log(img_values,'-img_valuesimg_values')
+          let img_values1: any = {}, cIndex = 0
+          Object.values(img_values).forEach((item, n) => {
+            if (!img_values1[n]) {
+              img_values1[n] = item
             }
           })
 
-          setTableData(table_data)
+          const queueImg = () => {
+            if (img_values1[cIndex]) {
+              let img = new Image()
+              img.onload = function () {
+                img_values1[cIndex].width = img.width
+                img_values1[cIndex].height = img.height
+                img_values[img_values1[cIndex]?.src]['width'] = img.width
+                img_values[img_values1[cIndex]?.src]['height'] = img.height
+                cIndex++
+                queueImg()
+              }
+              img.onerror = function () {
+                cIndex++
+                queueImg()
+              }
+              img.src = img_values1[cIndex]?.src
 
-          // const table_arrs = response.tables // 表格数组
-          // let i = 0, table_node = table_arrs[i], tables_arr = [];
-          // let table_boj: {
-          //     good_info: any;
-          //     sku_info: any;
-          //     design_info: { region: any; text: any; picture: any }[];
-          // } = {
-          //     good_info: null,
-          //     sku_info: null,
-          //     design_info: []
-          // };
-          // while (i < response.tables.length) {
-          //     // 长度大于4时，指针改变
-          //     if (table_node.length > 4) {
-          //         if (table_boj.design_info.length) {
-          //             // 一个商品的定制信息
-          //             tables_arr.push(table_boj)
-          //             // 重置
-          //             table_boj = {
-          //                 good_info: null,
-          //                 sku_info: null,
-          //                 design_info: []
-          //             }
-          //         }
-          //         table_boj = {
-          //             good_info: table_node[1],
-          //             sku_info: table_node[2],
-          //             design_info: [{
-          //                 region: table_node[9],
-          //                 text: table_node[10],
-          //                 picture: table_node[11],
-          //             }]
-          //         }
-          //         i++
-          //         table_node = table_arrs[i]
-          //     } else {
-          //         table_boj.design_info.push({
-          //             region: table_node[0],
-          //             text: table_node[1],
-          //             picture: table_node[2],
-          //         })
-          //         i++
-          //         table_node = table_arrs[i]
-          //     }
-          // }
+            } else {
+              getImgWh()
+            }
+          }
+          queueImg()
+          function getImgWh() {
+            // 筛选备货单号存在的值
+            let pic_text_arr1 = pic_text_arr.filter(item => item.order_no && item.order_no != "-")
+            // 为存在图片的对象添加宽高
+            pic_text_arr1.map(item => {
+              item.data_params.map((items: any) => {
+                if (items.design_pic) {
+                  if (img_values[items.design_pic]) {
+                    items['width'] = img_values[items.design_pic].width
+                    items['height'] = img_values[items.design_pic].height
+                  }
+                }
+              })
+            })
+            // 数据显示
+            let table_data: any[] = []
+            pic_text_arr1.forEach(item => {
+              if (item.data_params.length) {
+                item.data_params.forEach((items: any) => {
+                  table_data.push({
+                    order_no: item.order_no,
+                    design_sku: item.design_sku,
+                    file: items.design_pic,
+                    region: items.region,
+                    text: items.text,
+                    width: items.width || "",
+                    height: items.height || "",
+                  })
+                })
+              }
+            })
+            console.log(pic_text_arr1, "pic_text_arr1aaa", img_values1)
+            setTableData(table_data)
+            setBtnLoading(false)
+            setLoading(false)
+          }
 
 
         } else {
@@ -379,6 +342,8 @@ export default function DesignPic() {
         }
       }
     } catch (error) {
+      setBtnLoading(false)
+      setLoading(false)
       console.error("获取表格数据失败:", error);
       CustomMessage.error("获取表格数据失败");
     }
@@ -389,12 +354,17 @@ export default function DesignPic() {
     console.log(tableData, "tableData")
     let table_obj: { [key: string]: any } = {};
     tableData.forEach(item => {
+      if (!table_obj[item.design_sku]) {
+        table_obj[item.design_sku] = ""
+      }
       if (table_obj[item.design_sku]) {
         const data_params = table_obj[item.design_sku].data_params
         data_params.push({
           design_pic: item.file,
           region: item.region,
-          text: item.text
+          text: item.text,
+          width: item.width,
+          height: item.height,
         })
         table_obj[item.design_sku] = {
           ...table_obj[item.design_sku],
@@ -407,7 +377,9 @@ export default function DesignPic() {
           data_params: [{
             design_pic: item.file,
             region: item.region,
-            text: item.text
+            text: item.text,
+            width: item.width,
+            height: item.height,
           }]
         }
       }
@@ -461,62 +433,6 @@ export default function DesignPic() {
     }
     setLoading(true)
     FetchFun(table_params[arr_index])
-
-
-
-    return
-    // 在此处添加下标索引参数
-    const table_datas = tableData.map((item, index) => {
-      item.cur_index = index + 1
-      item.api_token = token
-      return item
-    })
-    if (!uploadUrl) {
-      Message.error("图片上传路径未获取到,请重新点击获取定制图片数据按钮")
-      return
-    }
-    const fetch_fn = (data: any) => {
-      const formData = new FormData()
-      for (var key in data) {
-        formData.append(key, data[key])
-      }
-      fetch(fetch_url, {
-        method: 'POST',
-        // headers: {
-        //   'Content-Type': 'application/json',
-        // },
-        body: formData,
-        mode: 'cors'
-      }).then(resjson => {
-        return resjson.json();
-      }).then(res => {
-        if (res.code == -1) {
-          Message.error(res.msg)
-        }
-        arr_index++
-        if (arr_index < table_datas.length) {
-          fetch_fn(table_datas[arr_index])
-        } else {
-          // 上传完成
-          Message.success(res.msg)
-          setLoading(false)
-        }
-      }).catch(error => {
-        setLoading(false)
-        Message.error(error.message)
-        arr_index++
-        if (arr_index < table_datas.length) {
-          fetch_fn(table_datas[arr_index])
-        }
-      })
-    }
-
-    console.log(table_datas, "table_datasss")
-    setLoading(true)
-    fetch_fn(table_datas[arr_index])
-
-
-    // setTableData(tableData)
   }
 
   return (
@@ -524,13 +440,13 @@ export default function DesignPic() {
       <div className='w-3xl h-fit'>
         <Button
           type="primary"
-          disabled={isPage}
+          disabled={isPage || btnLoading}
           style={{ marginBottom: '10px', marginRight: '10px' }}
           onClick={() => {
             getPicData()
           }}>获取定制数据</Button>
         <Button
-          disabled={(!tableData.length) || isPage}
+          disabled={(!tableData.length) || isPage || btnLoading}
           type="primary"
           style={{ marginBottom: '10px', marginRight: '10px' }}
           onClick={() => {
@@ -538,11 +454,11 @@ export default function DesignPic() {
           }}>上传定制信息</Button>
         <span className='text-red-500'>ps:需在Temu定制商品内容页面获取数据,且上传图片过程中请勿关闭插件</span>
         <Table dataSource={dataSourceWithIndex}>
-          <Table.Column title="图片" cell={pic_render} />
-          <Table.Column title="备货单" cell={name_render} />
-          <Table.Column title="定制区域" cell={label_render} />
-          <Table.Column title="文字" cell={text_render} />
-          <Table.Column title="操作" cell={option_render} />
+          <Table.Column title="图片" cell={pic_render} align="center" />
+          <Table.Column title="备货单" cell={name_render} align="center" />
+          <Table.Column title="定制区域" cell={label_render} align="center" />
+          <Table.Column title="文字" cell={text_render} align="center" />
+          <Table.Column title="操作" cell={option_render} align="center" />
         </Table>
         <p className='text-red-500'>ps:若获取不到数据,可能是插件未连接成功,请刷新页面</p>
       </div>