feat:图形库购买

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.0.1",
   "scripts": {
-    "start": "vite --host --open --port 80",
+    "start": "vite --host --open --port 88",
     "prod": "vue-tsc --noEmit && vite build --base=https://assets.le5lecdn.com/v/",
     "build": "vue-tsc --noEmit && vite build --base=/v/",
     "trial": "vue-tsc --noEmit && vite build --mode trial --base=/v/",

src/services/download.ts

@@ -145,6 +145,7 @@ export const getPayList = (meta2dData: any) => {
   const pngs = new Set<string>();
   const jsPens = new Set<string>();
   const iotPens = new Set<string>();
+  const svgPens = new Set<string>();
   for (const pen of meta2dData.pens) {
     if (pen.image) {
       if (
@@ -153,17 +154,40 @@ export const getPayList = (meta2dData: any) => {
       ) {
         pngs.add(pen.image.replace(img_cdn, ''));
       }
-    } else if (pen.subClassName) {
-      jsPens.add(pen.subClassName);
+    } else if (pen.subClassName && pen.fullname) {
+      jsPens.add(pen.name);
     } else if (components.includes(pen.name)) {
       iotPens.add(pen.name);
     } else if (pen.svgUrl) {
-      //todo SVG
       if (
         pen.svgUrl.startsWith(`${img_cdn}/svg/`) ||
         pen.svgUrl.startsWith('/svg/')
       ) {
-        pngs.add(pen.svgUrl.replace(img_cdn, ''));
+        svgPens.add(pen.svgUrl.replace(img_cdn, ''));
+      }
+    }
+  }
+
+  if (![...svgPens].length) {
+    //判断是否为老数据
+    if (meta2dData.paths) {
+      let keys = [];
+      for (let key of Object.keys(meta2dData.paths)) {
+        let path = meta2dData.paths[key];
+        if (
+          path.indexOf('-1.18Zm4-1') !== -1 ||
+          path.indexOf('-1.19Zm4-1') !== -1 ||
+          path.indexOf('2.85ZM') !== -1 ||
+          path.indexOf('-1-2.39.3') !== -1
+        ) {
+          keys.push(keys);
+        }
+      }
+      let flag = meta2dData.pens.some(
+        (pen) => pen.name === 'svgPath' && keys.includes(pen.pathId)
+      );
+      if (flag) {
+        svgPens.add('*'); //需要购买所有
       }
     }
   }
@@ -172,51 +196,82 @@ export const getPayList = (meta2dData: any) => {
     pngs: [...pngs],
     jsPens: [...jsPens],
     iotPens: [...iotPens],
+    svgPens: [...svgPens],
   };
 };
 
 //获取已购买
 export const getComponentPurchased = async (list: any) => {
-  console.log(list);
-  let names = [...list.pngs, ...list.jsPens, ...list.iotPens];
+  let _list = [];
+  list.pngs.forEach((item) => {
+    _list.push({
+      type: '图片图元',
+      name: item,
+    });
+  });
+  list.jsPens.forEach((item) => {
+    _list.push({
+      type: 'JS线性图元',
+      name: item,
+    });
+  });
+  list.iotPens.forEach((item) => {
+    _list.push({
+      type: '控件',
+      name: item,
+    });
+  });
+  if ([...list.svgPens].includes('*')) {
+    _list.push({
+      type: 'SVG线性图元',
+    });
+  } else {
+    list.svgPens.forEach((item) => {
+      _list.push({
+        type: 'SVG线性图元',
+        name: item,
+      });
+    });
+  }
   const res: any = await axios.post('/api/paid/2d/component', {
-    names,
+    list: _list,
   });
 
   if (res.error) {
-    return {
-      price: 88888888888,
-      list: [],
-    };
+    return [];
   }
-  let purchasedPngs = res.list.filter((item) => list.pngs.has(item));
-  let purchasedJs = res.list.filter((item) => list.jsPens.has(item));
-  let purchasedIot = res.list.filter((item) => list.iotPens.has(item));
-  // console.log(
-  //   '过滤',
-  //   [...list.pngs].length,
-  //   purchasedPngs.length,
-  //   [...list.jsPens].length,
-  //   purchasedJs.length,
-  //   [...list.iotPens].length,
-  //   purchasedIot.length
-  // );
-  let price =
-    ([...list.pngs].length - purchasedPngs.length) * 50 +
-    ([...list.jsPens].length - purchasedJs.length) * 10 +
-    ([...list.iotPens].length - purchasedIot.length) * 70;
 
-  return {
-    list: res.list,
-    price,
-    // unPurchase
-  };
+  // let purchasedPngs = res.list.filter((item) => list.pngs.has(item));
+  // let purchasedJs = res.list.filter((item) => list.jsPens.has(item));
+  // let purchasedIot = res.list.filter((item) => list.iotPens.has(item));
+  // let purchasedSvg = res.list.filter((item) => list.svgPens.has(item));
+
+  // let price =
+  //   ([...list.pngs].length - purchasedPngs.length) * 50 +
+  //   ([...list.jsPens].length - purchasedJs.length) * 10 +
+  //   ([...list.iotPens].length - purchasedIot.length) * 70+
+  //   ([...list.svgPens].length - purchasedSvg.length) * 10;
+
+  return res.list;
 };
 
 export const get2dComponentJs = async (names: string[]) => {
-  const res: any = await axios.post('/api/2d-component.js', {
-    names,
+  let list = [];
+  names.forEach((item) => {
+    list.push({
+      type: '控件',
+      name: item,
+    });
   });
+  const res: any = await axios.post(
+    '/api/2d-component.js',
+    {
+      // list,
+    },
+    {
+      responseType: 'blob',
+    }
+  );
   return res;
 };
 
@@ -226,3 +281,9 @@ export const getTemPngs = async (names: string[]) => {
   });
   return res;
 };
+
+export const getGoods = async () => {
+  const res: any = await axios.get('/api/goods/2d/component/types');
+  // console.log("res",res);
+  return res;
+};

src/services/png.ts

@@ -52,15 +52,22 @@ export async function makeSvg(elem: any) {
   let _svgDom = svgDom.replaceAll('#333;', '#fff;');
   elem.svg = _svgDom;
   elem.data = parseSvg(_svgDom);
-  //le5le logo
-  let le5le_svgpath = [
-    'M45.78,68.79c-.17.37-.39.79-.65,1.25s-.54.95-.84,1.44-.6,1-.9,1.43-.59.88-.85,1.25L40.2,73c.27-.37.56-.77.87-1.22s.61-.9.89-1.36.55-.91.79-1.36.44-.83.59-1.18Zm4-1.85v4.12a4.1,4.1,0,0,1-.13,1.17,1.74,1.74,0,0,1-.45.73,2.42,2.42,0,0,1-.81.46c-.33.11-.73.23-1.21.34L46,74.05l-.83-2.59.9-.22a2.73,2.73,0,0,0,.72-.27.65.65,0,0,0,.2-.55V67.31l-5.59.74L42,60.31c.62-.08,1.28-.18,2-.29s1.4-.22,2.11-.34l2.14-.39c.71-.13,1.4-.27,2.06-.41s1.29-.27,1.87-.41,1.11-.26,1.57-.39l.55,2.63-2.08.48c-.76.17-1.57.34-2.41.5l-2.6.49-2.58.45-.17,2.55L47,64.84V62.63l2.78-.31v2.15l4.93-.65v2.47Zm2.72-.22c.17.19.39.45.65.78s.54.69.83,1.08.58.79.86,1.2.54.81.77,1.18l-2.36,1.82c-.18-.35-.4-.74-.65-1.15s-.51-.83-.79-1.24L51,69.25c-.27-.36-.51-.66-.73-.91Z',
-    'M71.3,61.9v2.21L56.66,66V63.82l3.27-.43.25-1-2.39.31V60.84l2.84-.37.21-.87-3.4.44V57.85l13.08-1.73v2.2l-6.85.9-.21.88,6-.79-.15,2.85ZM58.11,66.56,69.86,65v5.63L58.11,72.19Zm2.59,3.09,6.44-.84V67.52l-6.44.85ZM62.78,63l3.87-.51.07-.95L63,62.05Z',
-    'M78,64.55c-.17.37-.39.79-.65,1.25s-.54,1-.84,1.44-.6,1-.9,1.43-.59.88-.85,1.25l-2.34-1.13c.27-.36.56-.76.87-1.21s.61-.9.9-1.36.55-.91.79-1.36.43-.83.58-1.18Zm4-1.85v4.12A4.05,4.05,0,0,1,81.84,68a1.56,1.56,0,0,1-.45.73,2.12,2.12,0,0,1-.8.45c-.33.12-.74.23-1.22.35l-1.17.29-.83-2.6.9-.21a2.17,2.17,0,0,0,.72-.28.6.6,0,0,0,.21-.54V63.07l-5.6.74.58-7.74c.62-.08,1.28-.18,2-.29s1.4-.22,2.11-.34l2.14-.39c.72-.13,1.4-.27,2.07-.41s1.28-.27,1.87-.41,1.1-.26,1.56-.39l.55,2.63L84.38,57c-.77.17-1.57.34-2.42.5s-1.71.33-2.59.49l-2.58.45-.18,2.55,2.59-.34V58.38l2.78-.3v2.15l4.93-.65v2.47Zm2.71-.22q.27.29.66.78l.83,1.08c.29.39.58.79.86,1.2s.53.81.76,1.18l-2.36,1.82c-.18-.35-.4-.74-.65-1.16s-.51-.82-.79-1.23-.54-.78-.81-1.14-.51-.66-.72-.91Z',
-  ];
+  let le5le = [];
   elem.data.forEach((pen) => {
-    if (le5le_svgpath.includes(pen.path)) {
-      (pen as any).svgUrl = elem.image;
+    if (pen.name === 'svgPath') {
+      if (
+        pen.path.indexOf('-1.18Zm4-1') !== -1 ||
+        pen.path.indexOf('-1.19Zm4-1') !== -1 ||
+        pen.path.indexOf('2.85ZM') !== -1 ||
+        pen.path.indexOf('-1-2.39.3') !== -1
+      ) {
+        le5le.push(pen);
+      }
     }
   });
+  if (le5le.length === 3) {
+    le5le.forEach((pen) => {
+      (pen as any).svgUrl = elem.image;
+    });
+  }
 }

src/views/components/Header.vue

@@ -332,12 +332,11 @@
         <t-collapse-panel
           v-if="[...prePayList.pngs].length"
           value="0"
-          header="图元"
+          :header="data.goods[0].type"
         >
           <template #headerRightContent>
             <t-space size="small">
-              <t-checkbox v-model="ss">全部</t-checkbox>
-              (1000个,5折)
+              <t-checkbox v-model="data.goods[0].checked"></t-checkbox>
             </t-space>
           </template>
           <div v-for="pngPen in prePayList.pngs" class="pay-line">
@@ -352,71 +351,165 @@
             </div>
             <div>
               <check-icon
-                v-show="purchasedList.includes(pngPen)"
+                v-show="data.purchasedList.some((item) => item.name === pngPen)"
                 style="color: #4480f9ff"
               />
             </div>
             <div>
-              {{ purchasedList.includes(pngPen) ? 0 : 50 }}
+              {{
+                data.purchasedList.some((item) => item.name === pngPen)
+                  ? 0
+                  : data.goods[0].unitPrice
+              }}
             </div>
           </div>
           <div class="pay-tip">
-            <p>已选择3个图元 小计:￥200</p>
+            <p v-if="data.goods[0].checked">
+              已选择{{ data.goods[0].unPurchased }}个图元 小计:￥{{
+                data.goods[0].unPurchased * data.goods[0].unitPrice
+              }}
+            </p>
+            <p v-else>已选择0个图元 小计:￥0</p>
           </div>
         </t-collapse-panel>
         <t-collapse-panel
           v-if="[...prePayList.iotPens].length"
           value="1"
-          header="控件"
+          :header="data.goods[1].type"
         >
           <template #headerRightContent>
             <t-space size="small">
-              <t-checkbox v-model="ss">全部</t-checkbox>
-              (1000个,5折)
+              <t-checkbox v-model="data.goods[1].checked"></t-checkbox>
             </t-space>
           </template>
           <div v-for="iotPen in prePayList.iotPens" class="pay-line">
             <div>
               <svg class="l-icon" aria-hidden="true">
-                <use :xlink:href="'#' + iotPensMap[iotPen].icon"></use>
+                <use :xlink:href="'#' + iotPensMap[iotPen]?.icon"></use>
               </svg>
-              {{ iotPensMap[iotPen].name }}
+              {{ iotPensMap[iotPen]?.name || iotPen }}
             </div>
             <div>
               <check-icon
-                v-show="purchasedList.includes(iotPen)"
+                v-show="data.purchasedList.some((item) => item.name === iotPen)"
                 style="color: #4480f9ff"
               />
             </div>
-            <div>{{ purchasedList.includes(iotPen) ? 0 : 70 }}</div>
+            <div>
+              {{
+                data.purchasedList.some((item) => item.name === iotPen)
+                  ? 0
+                  : data.goods[1].unitPrice
+              }}
+            </div>
           </div>
           <div class="pay-tip">
-            <p>已选择3个图元 小计:￥200</p>
+            <p v-if="data.goods[1].checked">
+              已选择{{ data.goods[1].unPurchased }}个图元 小计:￥{{
+                data.goods[1].unPurchased * data.goods[1].unitPrice
+              }}
+            </p>
+            <p v-else>已选择0个图元 小计:￥0</p>
+          </div>
+        </t-collapse-panel>
+        <t-collapse-panel
+          v-if="[...prePayList.svgPens].length"
+          value="2"
+          :header="data.goods[2].type"
+        >
+          <template #headerRightContent>
+            <t-space size="small">
+              <t-checkbox v-model="data.goods[2].checked"></t-checkbox>
+            </t-space>
+          </template>
+          <template v-if="data.goods[2].count === data.goods[2].total">
+            <div>
+              1套（{{
+                data.goods[2].count
+              }}个）。【说明】检查到当前项目为老版本格式，需要购买整套SVG线性图元。
+            </div>
+            <div>
+              <check-icon
+                v-show="data.goods[2].unPurchased === 0"
+                style="color: #4480f9ff"
+              />
+            </div>
+          </template>
+          <template v-else>
+            <div v-for="svgPen in prePayList.svgPens" class="pay-line">
+              <div>
+                <t-image
+                  class="pay-svg"
+                  :src="svgPen"
+                  :lazy="true"
+                  fit="contain"
+                />
+                {{
+                  svgPen.slice(
+                    svgPen.lastIndexOf('/') + 1,
+                    svgPen.lastIndexOf('.')
+                  )
+                }}
+              </div>
+              <div>
+                <check-icon
+                  v-show="
+                    data.purchasedList.some((item) => item.name === svgPen)
+                  "
+                  style="color: #4480f9ff"
+                />
+              </div>
+              <div>
+                {{
+                  data.purchasedList.some((item) => item.name === svgPen)
+                    ? 0
+                    : data.goods[2].unitPrice
+                }}
+              </div>
+            </div>
+          </template>
+          <div class="pay-tip">
+            <p v-if="data.goods[2].checked">
+              已选择{{ data.goods[2].unPurchased }}个图元 小计:￥{{
+                data.goods[2].unPurchased * data.goods[2].unitPrice
+              }}
+            </p>
+            <p v-else>已选择0个图元 小计:￥0</p>
           </div>
         </t-collapse-panel>
         <t-collapse-panel
           v-if="[...prePayList.jsPens].length"
           value="3"
-          header="js图元"
+          :header="data.goods[3].type"
         >
           <template #headerRightContent>
             <t-space size="small">
-              <t-checkbox v-model="ss">全部</t-checkbox>
-              (1000个,5折)
+              <t-checkbox v-model="data.goods[3].checked"></t-checkbox>
             </t-space>
           </template>
           <div v-for="jsPen in prePayList.jsPens" class="pay-line">
-            <div>{{ jsPen }}</div>
+            <div style="margin-left: 16px">{{ jsPen }}</div>
             <div>
               <check-icon
-                v-show="purchasedList.includes(jsPen)"
+                v-show="data.purchasedList.some((item) => item.name === jsPen)"
                 style="color: #4480f9ff"
               />
             </div>
-            <div>{{ purchasedList.includes(jsPen) ? 0 : 70 }}</div>
+            <div>
+              {{
+                data.purchasedList.some((item) => item.name === jsPen)
+                  ? 0
+                  : data.goods[3].unitPrice
+              }}
+            </div>
           </div>
           <div class="pay-tip">
-            <p>已选择3个图元 小计:￥200</p>
+            <p v-if="data.goods[3].checked">
+              已选择{{ data.goods[3].unPurchased }}个图元 小计:￥{{
+                data.goods[3].unPurchased * data.goods[3].unitPrice
+              }}
+            </p>
+            <p v-else>已选择0个图元 小计:￥0</p>
           </div>
         </t-collapse-panel>
       </t-collapse>
@@ -424,9 +517,9 @@
     <div class="flex pay-footer">
       <p>企业图形库购买一次，永久使用</p>
       <div class="flex pay-price">
-        共100个图元，合计
+        共{{ finalPrice.total }}个图元，合计
         <p>￥</p>
-        <p>{{ payPrice }}</p>
+        <p>{{ finalPrice.price }}</p>
       </div>
     </div>
   </t-dialog>
@@ -452,7 +545,14 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, onBeforeMount, onUnmounted, nextTick } from 'vue';
+import {
+  reactive,
+  ref,
+  onBeforeMount,
+  onUnmounted,
+  nextTick,
+  computed,
+} from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useUser } from '@/services/user';
 import { MessagePlugin } from 'tdesign-vue-next';
@@ -501,6 +601,7 @@ import {
   getComponentPurchased,
   get2dComponentJs,
   getTemPngs,
+  getGoods,
 } from '@/services/download';
 import { formComponents } from '@/services/defaults';
 import WechatPay from './WechatPay.vue';
@@ -521,6 +622,8 @@ const data = reactive({
     codeUrl: '',
     id: '', //订单id
   },
+  goods: [], //所有商品类型
+  purchasedList: [], //已经购买的列表
 });
 
 onBeforeMount(async () => {
@@ -547,12 +650,13 @@ const prePayList = reactive({
   pngs: new Set<string>(),
   jsPens: new Set<string>(),
   iotPens: new Set<string>(),
+  svgPens: new Set<string>(),
 });
 let payListNum = 0;
 let comparePayListNum = 0;
-let purchasedList = []; //已购买列表
+// let purchasedList = []; //已购买列表
 const iotPensMap = {};
-const payPrice = ref(0);
+// const payPrice = ref(0);
 
 const getIotPensMap = () => {
   formComponents.forEach((item) => {
@@ -586,7 +690,6 @@ const dealWithMessage = async (e) => {
             saveDownload();
           }
         } else if (data.name === 'payList') {
-          console.log('data.data', data);
           prePayList.pngs = new Set([...prePayList.pngs, ...data.data.pngs]);
           prePayList.jsPens = new Set([
             ...prePayList.jsPens,
@@ -596,14 +699,18 @@ const dealWithMessage = async (e) => {
             ...prePayList.iotPens,
             ...data.data.iotPens,
           ]);
+          prePayList.svgPens = new Set([
+            ...prePayList.svgPens,
+            ...data.data.svgPens,
+          ]);
 
           comparePayListNum += 1;
           if (comparePayListNum >= payListNum) {
-            console.log('进入');
             if (
               ![...prePayList.pngs].length &&
               ![...prePayList.jsPens].length &&
-              ![...prePayList.iotPens].length
+              ![...prePayList.iotPens].length &&
+              ![...prePayList.svgPens].length
             ) {
               //直接下载
               preDownload(meta2d.data());
@@ -947,11 +1054,10 @@ const downloadHtml = async () => {
   //图形库需要购买
   const meta2dData = meta2d.data();
   let list = getPayList(meta2dData);
-  console.log('list', list);
   prePayList.pngs = new Set(list.pngs);
   prePayList.jsPens = new Set(list.jsPens);
   prePayList.iotPens = new Set(list.iotPens);
-
+  prePayList.svgPens = new Set(list.svgPens);
   //向iframe发送消息
   payListNum = 0;
   comparePayListNum = 0;
@@ -978,13 +1084,17 @@ const downloadHtml = async () => {
         }),
         '*'
       );
-      console.log('发送消息');
       payListNum += 1;
     });
   }
   if (payListNum === 0) {
     //无嵌入页面
-    if (!list.pngs.length && !list.jsPens.length && !list.iotPens.length) {
+    if (
+      !list.pngs.length &&
+      !list.jsPens.length &&
+      !list.iotPens.length &&
+      !list.svgPens.length
+    ) {
       preDownload(meta2dData);
     } else {
       await showPayListDialog();
@@ -993,18 +1103,52 @@ const downloadHtml = async () => {
 };
 
 const showPayListDialog = async () => {
-  console.log('prePayList', prePayList);
-  let purchased = await getComponentPurchased(prePayList);
-  console.log(purchased);
-  if (purchased.price) {
-    purchasedList = purchased.list;
-    payPrice.value = purchased.price;
-    payListDialog.show = true;
-  } else {
-    //价格为0，直接下载
-    preDownload(meta2d.data());
+  data.goods = await getGoods();
+  data.purchasedList = await getComponentPurchased(prePayList);
+  data.goods.forEach((item, index) => {
+    item.checked = true;
+    let purchased = data.purchasedList?.filter(
+      (_item) => _item.type === item.type
+    );
+    if (index === 0) {
+      item.total = [...prePayList.pngs].length;
+      item.unPurchased = item.total - purchased.length;
+    } else if (index === 1) {
+      item.total = [...prePayList.iotPens].length;
+      item.unPurchased = item.total - purchased.length;
+    } else if (index === 3) {
+      item.total = [...prePayList.jsPens].length;
+      item.unPurchased = item.total - purchased.length;
+    } else if (index === 2) {
+      if (purchased.length === 1 && !purchased[0].name) {
+        //说明已经购买全部 //TODO
+        item.total = item.count;
+        item.unPurchased = 0;
+      } else {
+        //需要购买全部
+        if ([...prePayList.svgPens].includes('*')) {
+          item.total = item.count;
+          item.unPurchased = item.total;
+        } else {
+          item.total = [...prePayList.svgPens].length;
+          item.unPurchased = item.total - purchased.length;
+        }
+      }
+    }
+  });
+  let price = 0;
+  data.goods.forEach((item, index) => {
+    if (item.checked) {
+      price += item.unPurchased * item.unitPrice;
+    }
+  });
+  if(price===0){
+    skipPay();//如果计算价格为0，直接下载
+  }else{
+   payListDialog.show = true;
   }
 };
+
 const preDownload = (meta2dData: any) => {
   MessagePlugin.info('正在下载打包中，可能需要几分钟，请耐心等待...');
   iframeNum = 0;
@@ -1146,27 +1290,64 @@ const saveDownload = async () => {
   const list = [...downloadList];
   //控件
   const js = await get2dComponentJs([...prePayList.iotPens]);
-  //  let o=window.dc;
-  //   let e=window.mk;
-  //   let uncodeJs = o(e(user.id), js);
-  //   console.log('uncodeJs',uncodeJs);
-  ///png图形库
-  const pngs = await getTemPngs([...prePayList.pngs]);
   list.push({
     data: js,
-    path: '/view/js/2.text',
+    path: '/view/js/2d-components.js',
   });
+
+  ///png图形库
+  const pngs = await getTemPngs([...prePayList.pngs]);
   list.forEach((item) => {
     if (pngs[item.url]) {
       item.url = pngs[item.url];
     }
   });
-  console.log('down', list);
+  //js线性图元 由对应页面处理
 
-  //iot 2d-component重写
-  //pngs 替换图片请求地址
-  //js ？
-  // return;
+  //SVG线性图元
+  if ([...prePayList.svgPens].length) {
+    let purchased = data.purchasedList?.filter(
+      (_item) => _item.type === 'SVG线性图元'
+    );
+    if (purchased.length === 1 && !purchased[0].name) {
+      //已经购买全部
+      list.forEach((item) => {
+        if (item.data && item.path.indexOf('/projects/v') !== 1) {
+          //清空所有svgpath
+          let meta2dData = JSON.parse(item.data);
+          for (let key of Object.keys(meta2dData.paths)) {
+            let path = meta2dData.paths[key];
+            if (
+              path.indexOf('-1.18Zm4-1') !== -1 ||
+              path.indexOf('-1.19Zm4-1') !== -1 ||
+              path.indexOf('2.85ZM') !== -1 ||
+              path.indexOf('-1-2.39.3') !== -1
+            ) {
+              meta2dData.paths[key] = '';
+            }
+          }
+          item.data = JSON.stringify(meta2dData);
+        }
+      });
+    } else {
+      list.forEach((item) => {
+        if (item.data && item.path.indexOf('/projects/v') !== 1) {
+          //2d 图纸数据
+          let meta2dData = JSON.parse(item.data);
+          meta2dData.pens.forEach((pen) => {
+            if (pen.name === 'svgPath' && pen.svgUrl) {
+              if ([...prePayList.svgPens].includes(pen.svgUrl)) {
+                pen.pathId = null;
+              }
+            }
+          });
+          item.data = JSON.stringify(meta2dData);
+        }
+      });
+    }
+  }
+
+  //开始下载list
   const [{ default: JSZip }, { saveAs }] = await Promise.all([
     import('jszip'),
     import('file-saver'),
@@ -1731,13 +1912,46 @@ const payListDialog = reactive({
 });
 
 const prePay = async () => {
-  //预支付 //TODO: 这个可以发送已经购买的图元吗
+  let list = [];
+
+  data.goods[0].checked &&
+    prePayList.pngs.forEach((item) => {
+      list.push({
+        type: '图片图元',
+        name: item,
+      });
+    });
+  data.goods[3].checked &&
+    prePayList.jsPens.forEach((item) => {
+      list.push({
+        type: 'JS线性图元',
+        name: item,
+      });
+    });
+  data.goods[1].checked &&
+    prePayList.iotPens.forEach((item) => {
+      list.push({
+        type: '控件',
+        name: item,
+      });
+    });
+  if (data.goods[2].checked) {
+    if ([...prePayList.svgPens].includes('*')) {
+      _list.push({
+        type: 'SVG线性图元',
+      });
+    } else {
+      prePayList.svgPens.forEach((item) => {
+        list.push({
+          type: 'SVG线性图元',
+          name: item,
+        });
+      });
+    }
+  }
   const res: any = await axios.post('/api/order/2d/component/submit', {
-    pngs: [...prePayList.pngs],
-    jsPens: [...prePayList.jsPens],
-    iotPens: [...prePayList.iotPens],
+    list,
   });
-  console.log('res', res);
   wechatPayDialog.show = true;
   data.order = res;
 };
@@ -1748,7 +1962,6 @@ const skipPay = () => {
 };
 
 const finishPay = async () => {
-  console.log('进入');
   let id = data.order.id;
   const result: { state: number } = await axios.post('/api/order/pay/state', {
     id,
@@ -1764,6 +1977,21 @@ const finishPay = async () => {
   }
 };
 
+const finalPrice = computed(() => {
+  let total = 0;
+  let price = 0;
+  data.goods.forEach((item, index) => {
+    if (item.checked) {
+      total += item.unPurchased;
+      price += item.unPurchased * item.unitPrice;
+    }
+  });
+  return {
+    total,
+    price,
+  };
+});
+
 const wechatPayDialog = reactive({
   show: false,
 });
@@ -1866,6 +2094,11 @@ const onSuccess = (success: boolean) => {
       height: 40px;
       margin-top: 7px;
     }
+    :deep(.pay-svg) {
+      .t-image {
+        background: #fff;
+      }
+    }
     .l-icon {
       width: 40px;
       height: 40px;
@@ -1886,6 +2119,7 @@ const onSuccess = (success: boolean) => {
   p {
     position: absolute;
     right: 16px;
+    color: var(--color-desc);
   }
 }
 .pay-footer {