feat:企-下载离线

src/services/download.ts

@@ -240,6 +240,9 @@ export const getComponentPurchased = async (list: any) => {
       });
     });
   }
+  if(!_list.length){
+    return [];
+  }
   const res: any = await axios.post('/api/paid/2d/component', {
     list: _list,
   });
@@ -295,6 +298,13 @@ export const getGoods = async () => {
   return res;
 };
 
+export const getDeployGoods = async () => {
+  const ret:any = await axios.post('/api/goods/list',{
+    type:'私有部署'
+  });
+  return ret.list;
+}
+
 export enum Frame {
   vue2,
   vue3,
@@ -304,7 +314,7 @@ export enum Frame {
 
 let frameFlag = -1;
 
-export const preFrameDownload = async (type: Frame) => {
+export const _preFrameDownload = async (type: Frame) => {
   frameFlag = type;
   // MessagePlugin.info('正在下载打包中，可能需要几分钟，请耐心等待...');
   zip3D(
@@ -631,3 +641,144 @@ async function zipFile(zip: JSZip, filePath: string) {
   );
   zip.file(filePath.replace('/view', ''), res, { createFolders: true });
 }
+
+export const getFrameDownloadList = (meta2dData: any, path: string = 'v',type:Frame) => {
+  const lists = new Set();
+  let img = meta2dData.bkImage;
+  if (img) {
+    if (
+      img.startsWith('/') ||
+      img.startsWith(img_cdn) ||
+      img.startsWith(img_upCdn)
+    ) {
+      let _img = img.replace(img_cdn, '').replace(img_upCdn, '');
+      if (_img.startsWith('/v/')) {
+        _img = _img.slice(2);
+      }
+      lists.add({
+        url: img,
+        path:  (`${
+          type === Frame.vue3
+              ? 'meta2d-vue3'
+              : type === Frame.vue2
+              ? 'meta2d-vue2'
+              : 'meta2d-react'
+          }/public`) + _img,
+      });
+    }
+  }
+
+  //图片图元(image strokeImage backgroundImage)
+  const imageKeys = ['image', 'strokeImage', 'backgroundImage'];
+  const images: string[] = [];
+  for (const pen of meta2dData.pens) {
+    for (const i of imageKeys) {
+      const image = pen[i];
+      if (image) {
+        if (
+          image.startsWith('/') ||
+          image.startsWith(img_cdn) ||
+          image.startsWith(img_upCdn)
+        ) {
+          // 只考虑相对路径下的 image ，绝对路径图片无需下载
+          let _img = image.replace(img_cdn, '').replace(img_upCdn, '');
+          if (_img.startsWith('/v/')) {
+            _img = _img.slice(2);
+          }
+          let path =  (`${
+              type === Frame.vue3
+                  ? 'meta2d-vue3'
+                  : type === Frame.vue2
+                  ? 'meta2d-vue2'
+                  : 'meta2d-react'
+              }/public`) + _img
+          if (!images.includes(image)) {
+            // let _img = image.replace(cdn, '').replace(upCdn, '');
+            lists.add({
+              url: image,
+              path,
+            });
+          }
+          pen[i] = path;
+        }
+      }
+    }
+  }
+
+  let folderName =type===Frame.vue3?'meta2d-vue3':type===Frame.vue2?'meta2d-vue2': 'meta2d-react';
+  if(path === 'v'){ //iframe嵌入的页面无需再次下载
+    //其他文件
+    let files = [];
+    switch (type) {
+      case Frame.vue3:
+        files =[
+          '/view/meta2d-vue3/src/router/index.ts',
+          '/view/meta2d-vue3/src/views/2d/Meta2d.vue',
+          // '/view/meta2d-vue3/src/views/3d/Meta2d.vue',
+          '/view/meta2d-vue3/src/App.vue',
+          '/view/meta2d-vue3/src/main.ts',
+          '/view/meta2d-vue3/src/style.css',
+          '/view/meta2d-vue3/index.html',
+          '/view/meta2d-vue3/package.json',
+          '/view/meta2d-vue3/README.md',
+          '/view/meta2d-vue3/tsconfig.json',
+          '/view/meta2d-vue3/tsconfig.node.json',
+          '/view/meta2d-vue3/vite.config.js',
+        ];
+        break;
+      case Frame.vue2:
+          files =[
+            '/view/meta2d-vue2/public/index.html',
+            '/view/meta2d-vue2/src/router/index.js',
+            '/view/meta2d-vue2/src/views/2d/Meta2d.vue',
+            // '/view/meta2d-vue2/src/views/3d/Meta2d.vue',
+            '/view/meta2d-vue2/src/App.vue',
+            '/view/meta2d-vue2/src/main.js',
+            '/view/meta2d-vue2/package.json',
+            '/view/meta2d-vue2/README.md'
+          ];
+          break;
+      case Frame.react:
+        files =[]
+        break;
+      default:
+        break;
+    }
+    files.forEach((file) => {
+      lists.add({
+        url: (cdn ? cdn : '') + file,
+        path: file.replace('/view', ''),
+      });
+    });
+
+    let jsFiles = [
+      '/view/js/marked.min.js',
+      '/view/js/mycharts.js',
+      '/view/js/echarts.min.js',
+      '/view/js/lcjs.iife.js',
+      '/view/js/highcharts.js',
+      '/view/js/highcharts-more.js',
+      // '/view/js/2d-components.js',
+      '/view/js/r.js',
+    ]
+
+    jsFiles.forEach((file) => {
+      lists.add({
+        url: (cdn ? cdn : '') + file,
+        path:`/${folderName}/public${file.replace('/view', '')}`,
+      });
+    });
+  }
+  //图纸数据
+  if (meta2dData._id) delete meta2dData._id;
+  if (meta2dData.id) delete meta2dData.id;
+  if ((meta2dData as any).image) delete (meta2dData as any).image;
+  lists.add({
+    data: JSON.stringify(meta2dData)
+      .replaceAll(img_cdn, '')
+      .replaceAll(img_upCdn, ''),
+    path: `/${folderName}/public/json/${path}.json`,
+  });
+
+  return lists;
+};

src/views/Preview.vue

@@ -13,7 +13,7 @@ import { useRouter, useRoute } from 'vue-router';
 import { Meta2d, Options, Pen } from '@meta2d/core';
 import { registerBasicDiagram } from '@/services/register';
 import { cdn, getLe5leV } from '@/services/api';
-import { getDownloadList, getPayList, preFrameDownload, Frame} from '@/services/download';
+import { getDownloadList, getPayList,getFrameDownloadList, Frame} from '@/services/download';
 const route = useRoute();
 
 const meta2dDom = ref('');
@@ -54,11 +54,11 @@ const dealWithMessage = (e) => {
         } else if (data.name === 'prePayList') {
           doGetPayList();
         } else if (data.name === 'downloadVue3') {
-          preFrameDownload(Frame.vue3);
+          doGetFrameDownload(Frame.vue3,data.path);
         } else if (data.name === 'downloadVue2') {
-          preFrameDownload(Frame.vue2);
+          doGetFrameDownload(Frame.vue2,data.path);
         } else if (data.name === 'downloadReact') {
-          preFrameDownload(Frame.react);
+          doGetFrameDownload(Frame.react,data.path);
         }
       } else {
         meta2d.emit(data.name);
@@ -109,6 +109,7 @@ const opened = () => {
   });
 };
 
+//获取下载列表
 const doDownload = (path: string) => {
   const list = getDownloadList(meta2d.data(), path);
   window.parent.postMessage(
@@ -121,6 +122,20 @@ const doDownload = (path: string) => {
   );
 };
 
+//获取框架下载列表
+const doGetFrameDownload = (frame: Frame,path:string) => {
+  const list = getFrameDownloadList(meta2d.data(),path, frame);
+  window.parent.postMessage(
+    JSON.stringify({
+      name: 'download',
+      data: [...list],
+      type: 1,
+    }),
+    '*'
+  );
+};
+
+//获取付费图元列表
 const doGetPayList = () => {
   const list = getPayList(meta2d.data());
   window.parent.postMessage(

src/views/components/Header.vue

@@ -35,7 +35,7 @@
           <a @click="downloadZip">
             <div class="flex">
               导出为ZIP文件 <span class="flex-grow"></span>
-              <span><label>VIP</label></span>
+              <span><label>企</label></span>
             </div>
           </a>
         </t-dropdown-item>
@@ -43,7 +43,7 @@
           <a @click="downloadHtml">
             <div class="flex">
               下载离线部署包 <span class="flex-grow"></span>
-              <span><label>VIP</label></span>
+              <span><label>企</label></span>
             </div>
           </a>
         </t-dropdown-item>
@@ -51,7 +51,7 @@
           <a @click="downloadVue3">
             <div class="flex">
               下载Vue3组件包 <span class="flex-grow"></span>
-              <span><label>VIP</label></span>
+              <span><label>企</label></span>
             </div>
           </a>
         </t-dropdown-item>
@@ -59,7 +59,7 @@
           <a @click="downloadVue2">
             <div class="flex">
               下载Vue2组件包 <span class="flex-grow"></span>
-              <span><label>VIP</label></span>
+              <span><label>企</label></span>
             </div>
           </a>
         </t-dropdown-item>
@@ -67,7 +67,7 @@
           <a @click="downloadReact">
             <div class="flex">
               下载React组件包 <span class="flex-grow"></span>
-              <span><label>VIP</label></span>
+              <span><label>企</label></span>
             </div>
           </a>
         </t-dropdown-item>
@@ -308,7 +308,7 @@
       </a>
     </div>
   </div>
-  <t-dialog
+  <!-- <t-dialog
     v-if="payListDialog.show"
     v-model:visible="payListDialog.show"
     class="pay-dialog"
@@ -532,7 +532,74 @@
         <p>{{ finalPrice.price }}</p>
       </div>
     </div>
-  </t-dialog>
+  </t-dialog> -->
+  <t-dialog
+    v-if="payListDialog.show"
+    v-model:visible="payListDialog.show"
+    class="pay-dialog"
+    :close-on-overlay-click="false"
+    :top="95"
+    :width="700"
+    :cancel-btn="{
+          content: '下载试用',
+          variant: 'outline',
+          style: {
+            width: '100px',
+            color:'#707B8F',
+            marginRight:'8px'
+          }
+    }" 
+    confirm-btn="去支付(不支持退款)"
+    @cancel="downloadTrial"
+    @close="payListDialog.show = false"
+    @confirm="prePay"
+  >
+  <template #header>
+        <div>
+          <span style="vertical-align: middle">{{ payListDialog.title }}</span>
+          <t-tooltip  content="这是Tooltip内容">
+            <HelpCircleIcon style="margin-left:12px;" />
+        </t-tooltip>
+        </div>
+   </template>
+   <div class="pay-box">
+     <div class="pay-title">{{ payListDialog.title }}</div>
+     <div class="pay-price">
+       <p>￥</p>
+       <p>{{ data.deploy.price }}</p>
+     </div>
+   </div>
+   <div class="pay-box pay-diagram">
+    <div class="pay-up">
+     <div class="pay-title">
+      <t-checkbox v-model="data.payDiagram.checked"> 企业图形库  
+      
+    </t-checkbox>
+    <ChevronDownIcon @click="data.payDiagram.expend=false" v-if="data.payDiagram.expend" />
+      <ChevronRightIcon @click="data.payDiagram.expend=true" v-else />
+     </div>
+     <div class="pay-price">
+       <p>￥</p>
+       <p>{{ data.payDiagram.price }}</p>
+     </div>
+    </div>
+    <div v-if="data.payDiagram.expend" class="pay-down">
+        <div v-for="item in data.payDiagram.list">
+          <img v-if="item.img" :src="item.img" />
+          <svg v-else class="l-icon" aria-hidden="true">
+            <use :xlink:href="'#' + iotPensMap[item.name]?.icon"></use>
+          </svg>
+        </div>
+    </div>
+   </div>
+   <div class="pay-footer">
+    合计
+    <div>
+       <p>￥</p>
+       <p>{{ data.deploy.price+(data.payDiagram.checked?data.payDiagram.price:0) }}</p>
+     </div>
+   </div>
+</t-dialog>
   <t-dialog
     v-if="wechatPayDialog.show"
     v-model:visible="wechatPayDialog.show"
@@ -604,6 +671,9 @@ import {
   DesktopIcon,
   ControlPlatformIcon,
   AppIcon,
+  ChevronRightIcon,
+  ChevronDownIcon,
+  HelpCircleIcon
 } from 'tdesign-icons-vue-next';
 import {
   getDownloadList,
@@ -612,12 +682,14 @@ import {
   get2dComponentJs,
   getTemPngs,
   getGoods,
-  preFrameDownload,
+  // preFrameDownload,
   zipBkImg,
   zipImages,
   Frame,
   img_cdn,
-  img_upCdn
+  img_upCdn,
+  getDeployGoods,
+  getFrameDownloadList
 } from '@/services/download';
 import { formComponents } from '@/services/defaults';
 import WechatPay from './WechatPay.vue';
@@ -632,7 +704,7 @@ const baseUrl = import.meta.env.BASE_URL || '/';
 
 const { user, signout } = useUser();
 const { setDot } = useDot();
-const data = reactive({
+const data = reactive<any>({
   name: '空白文件',
   order: {
     codeUrl: '',
@@ -640,6 +712,16 @@ const data = reactive({
   },
   goods: [], //所有商品类型
   purchasedList: [], //已经购买的列表
+  deploy:{
+    price:400,
+  },
+  payDiagram: {
+    price: 400,
+    checked:true,
+    expend:false,
+    list:[]
+  },
+  payGoods:{}
 });
 
 onBeforeMount(async () => {
@@ -723,24 +805,7 @@ const dealWithMessage = async (e) => {
 
           comparePayListNum += 1;
           if (comparePayListNum >= payListNum) {
-            if (
-              ![...prePayList.pngs].length &&
-              ![...prePayList.jsPens].length &&
-              ![...prePayList.iotPens].length &&
-              ![...prePayList.svgPens].length
-            ) {
-              //直接下载
-              MessagePlugin.info(
-                '正在下载打包中，可能需要几分钟，请耐心等待...'
-              );
-              if (downloadType === Frame.html) {
-                preDownload(meta2d.data());
-              } else {
-                preFrameDownload(downloadType);
-              }
-            } else {
               await showPayListDialog();
-            }
           }
         }
       } else {
@@ -1097,17 +1162,11 @@ const downloadHtml = async () => {
     MessagePlugin.warning(noLoginTip);
     return;
   }
-
-  if (user.vipDesc !== '超级会员' && user.vipDesc !== '旗舰会员') {
-    MessagePlugin.info('需要开通超级会员~');
-    gotoAccount();
-    return;
-  }
   downloadType = Frame.html;
-  await preGetPayList(Frame.html);
+  await preGetPayList();
 };
 
-const preGetPayList = async (key: Frame) => {
+const preGetPayList = async () => {
   //图形库需要购买
   const meta2dData = meta2d.data();
   let list = getPayList(meta2dData);
@@ -1115,6 +1174,7 @@ const preGetPayList = async (key: Frame) => {
   prePayList.jsPens = new Set(list.jsPens);
   prePayList.iotPens = new Set(list.iotPens);
   prePayList.svgPens = new Set(list.svgPens);
+  downloadList = new Set();
   //向iframe发送消息
   payListNum = 0;
   comparePayListNum = 0;
@@ -1145,75 +1205,145 @@ const preGetPayList = async (key: Frame) => {
     });
   }
   if (payListNum === 0) {
-    //无嵌入页面
-    if (
-      !list.pngs.length &&
-      !list.jsPens.length &&
-      !list.iotPens.length &&
-      !list.svgPens.length
-    ) {
-      MessagePlugin.info('正在下载打包中，可能需要几分钟，请耐心等待...');
-      if (key === Frame.html) {
-        preDownload(meta2dData);
-      } else {
-        preFrameDownload(key);
-      }
-    } else {
       await showPayListDialog();
-    }
   }
 };
 
 const showPayListDialog = async () => {
+  //下载离线部署包
+  const deploys =await getDeployGoods();
+  const pen_3d = meta2d.store.data.pens.filter(
+    (pen) =>
+      pen.name === 'iframe' &&
+      (pen.iframe.indexOf('3d.le5le.com') !== -1 ||
+        pen.iframe.indexOf('/3d') !== -1)
+  );
+  const pen_2d = meta2d.store.data.pens.filter(
+    (pen) =>
+      pen.name === 'iframe' &&
+      (pen.iframe.indexOf('2d.le5le.com') !== -1 ||
+        pen.iframe.indexOf('/2d') !== -1||pen.iframe.indexOf('v.le5le.com') !== -1 ||
+        pen.iframe.indexOf('/view/v') !== -1||pen.iframe.indexOf('data=v') !== -1)
+  );
+  let price = 0;
+  data.payGoods ={}
+  deploys.forEach((item) => {
+   if(item.name==="3D离线部署下载"){
+     price+=item.price*pen_3d.length;
+     if(pen_3d.length){
+        data.payGoods[item.id]=pen_3d.length;
+     }
+   }else if(item.name==="2D离线部署下载"){
+     price+=item.price*(pen_2d.length+1);
+     data.payGoods[item.id]=pen_2d.length+1;
+   }
+  });
+  data.deploy.price = price;
+  //图形库
   data.goods = await getGoods();
   data.purchasedList = await getComponentPurchased(prePayList);
-  data.goods.forEach((item, index) => {
-    item.checked = true;
+  data.payDiagram.list =[];
+  data.goods.forEach((goods)=>{
     let purchased = data.purchasedList?.filter(
-      (_item) => _item.type === item.type
+      (_item) => _item.type === goods.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 names = purchased.map((item) => item.name);
+    let list = [];
+    if(goods.type==='图片图元'){
+      list = [...prePayList.pngs];
+    }else if(goods.type==='JS线性图元'){
+      list = [...prePayList.jsPens];
+    }else if(goods.type==='SVG线性图元'){
+      list = [...prePayList.svgPens];
+    }else if(goods.type==='控件'){
+      list = [...prePayList.iotPens];
+    }
+    let num =0;
+    if (goods.type==='SVG线性图元'&&purchased.length === 1 && !purchased[0].name) {
+     //说明已经购买全部 
+    }else{
+    list.forEach((item)=>{
+      if(!names.includes(item)){
+        if(goods.type==='控件'){
+          data.payDiagram.list.push({
+            name:item
+          });
+        }else{
+          data.payDiagram.list.push({
+            img:item
+          });
         }
+        num+=1;
       }
-    }
-  });
-  let price = 0;
+    })};
+    goods.num = num;
+  })
+   price = 0;
   data.goods.forEach((item, index) => {
-    if (item.checked) {
-      price += item.unPurchased * item.unitPrice;
-    }
+      price += item.num * item.unitPrice;
   });
-  if (price === 0) {
-    skipPay(); //如果计算价格为0，直接下载
-  } else {
-    payListDialog.show = true;
+  console.log("goods",data.goods)
+  data.payDiagram.price = price;
+  // 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;
+  //       }
+  //     }
+  //   }
+  // });
+  payListDialog.show = true;
+  switch (downloadType) {
+    case Frame.html:
+      payListDialog.title = '下载离线部署包';
+      break;
+      case Frame.vue2:
+      payListDialog.title = '下载vue2组件包';
+      break;
+      case Frame.vue3:
+      payListDialog.title = '下载vue3组件包';
+      break;
+      case Frame.react:
+      payListDialog.title = '下载react组件包';
+      break;
   }
+  // let price = 0;
+
+  // if (price === 0) {
+  //   skipPay(); //如果计算价格为0，直接下载
+  // } else {
+  //   payListDialog.show = true;
+
+  // }
 };
 
-const preDownload = (meta2dData: any) => {
+const preDownload = () => {
   iframeNum = 0;
   compareNum = 0;
+  const meta2dData:any = meta2d.data();
   meta2dData.userId = user.id;
   const pen_3d = meta2dData.pens.filter(
     (pen) =>
@@ -1347,13 +1477,171 @@ const preDownload = (meta2dData: any) => {
   }
 };
 
+const preFrameDownload = async () => {
+  iframeNum = 0;
+  compareNum = 0;
+  const meta2dData:any = meta2d.data();
+  meta2dData.userId = user.id;
+  const pen_3d = meta2dData.pens.filter(
+    (pen) =>
+      pen.name === 'iframe' &&
+      (pen.iframe.indexOf('3d.le5le.com') !== -1 ||
+        pen.iframe.indexOf('/3d') !== -1)
+  );
+  let name_3d = (downloadType===Frame.vue3?'toVue3':downloadType===Frame.vue2?'toVue2':'toReact');
+  if (pen_3d && pen_3d.length) {
+    //存在3d场景
+    if (pen_3d.length === 1) {
+      let params = queryURLParams(pen_3d[0].iframe.split('?')[1]);
+      meta2d.store.pens[
+        pen_3d[0].id
+      ].calculative.singleton.div.children[0].contentWindow.postMessage(
+        JSON.stringify({
+          name: name_3d,
+          type: 1, //用于区分是系统消息
+          path: `3d`,
+        }),
+        '*'
+      );
+      pen_3d[0].iframe = '/3d?id=3d';
+    } else {
+      pen_3d.forEach((pen) => {
+        //发送消息
+        let params = queryURLParams(pen.iframe.split('?')[1]);
+        (
+          meta2d.store.pens[pen.id].calculative.singleton.div
+            .children[0] as HTMLIFrameElement
+        ).contentWindow.postMessage(
+          JSON.stringify({
+            name:name_3d,
+            // id: params.id,
+            type: 1,
+            path: `3d-${params.id}`,
+          }),
+          '*'
+        );
+        pen.iframe = `/3d?id=3d-${params.id}`;
+      });
+    }
+    iframeNum += pen_3d.length;
+  }
+
+  const pen_2d = meta2dData.pens.filter(
+    (pen) =>
+      pen.name === 'iframe' &&
+      (pen.iframe.indexOf('2d.le5le.com') !== -1 ||
+        pen.iframe.indexOf('/2d') !== -1)
+  );
+  let name_2d = (downloadType===Frame.vue3?'downloadVue3':downloadType===Frame.vue2?'downloadVue2':'downloadReact');
+
+  if (pen_2d && pen_2d.length) {
+    //存在3d场景
+    if (pen_2d.length === 1) {
+      let params = queryURLParams(pen_2d[0].iframe.split('?')[1]);
+      meta2d.store.pens[
+        pen_2d[0].id
+      ].calculative.singleton.div.children[0].contentWindow.postMessage(
+        JSON.stringify({
+          name: name_2d,
+          id: params.id,
+          type: 1,
+          path: `2d`,
+        }),
+        '*'
+      );
+      pen_2d[0].iframe = '/2d?id=2d';
+    } else {
+      pen_2d.forEach((pen) => {
+        //发送消息
+        let params = queryURLParams(pen.iframe.split('?')[1]);
+        (
+          meta2d.store.pens[pen.id].calculative.singleton.div
+            .children[0] as HTMLIFrameElement
+        ).contentWindow.postMessage(
+          JSON.stringify({
+            name:name_2d,
+            // id: params.id,
+            type: 1,
+            path: `2d-${params.id}`,
+          }),
+          '*'
+        );
+        pen.iframe = `/2d?id=2d-${params.id}`;
+      });
+    }
+    iframeNum += pen_2d.length;
+  }
+
+  const pen_v = meta2dData.pens.filter(
+    (pen) =>
+      pen.name === 'iframe' &&
+      (pen.iframe.indexOf('v.le5le.com') !== -1 ||
+        pen.iframe.indexOf('/view/v') !== -1||pen.iframe.indexOf('data=v') !== -1||pen.iframe.indexOf('/preview') !== -1)
+  );
+console.log("pen_v",pen_v);
+  if (pen_v && pen_v.length) {
+    //存在3d场景
+    pen_v.forEach((pen) => {
+      //发送消息
+      let params = queryURLParams(pen.iframe.split('?')[1]);
+      (
+        meta2d.store.pens[pen.id].calculative.singleton.div
+          .children[0] as HTMLIFrameElement
+      ).contentWindow.postMessage(
+        JSON.stringify({
+          name: name_2d,
+          // id: params.id,
+          type: 1,
+          path: `v-${params.id}`,
+        }),
+        '*'
+      );
+      pen.iframe = `/2d?id=v-${params.id}`;
+    });
+    iframeNum += pen_v.length;
+  }
+
+  downloadList = getFrameDownloadList(meta2dData,undefined,downloadType);
+console.log("downloadList",downloadList);
+console.log("iframeNum",iframeNum);
+  if (iframeNum === 0) {
+    //如果没有嵌入场景
+    console.log(2);
+    saveDownload();
+  } else {
+    setTimeout(() => {
+      if (compareNum < iframeNum) {
+        //message阻塞/报错的情况
+        console.log("1")
+        saveDownload();
+      }
+    }, 10000);
+  }
+}
+
 const saveDownload = async () => {
   const list = [...downloadList];
+  console.log("list",list);
   //控件
+  let jsPath= '';
+  switch (downloadType) {
+    case Frame.html:
+      jsPath = '/view/js/2d-components.js';
+      break;
+    case Frame.vue2:
+      jsPath = '/meta2d-vue2/public/js/2d-components.js';
+      break;
+    case Frame.vue3:
+      jsPath = '/meta2d-vue3/public/js/2d-components.js';
+      break;
+    case Frame.react:
+      jsPath = '/meta2d-react/public/js/2d-components.js';
+      break;
+  }
   const js = await get2dComponentJs([...prePayList.iotPens]);
   list.push({
     data: js,
-    path: '/view/js/2d-components.js',
+    path:jsPath,
   });
 
   ///png图形库
@@ -1531,7 +1819,7 @@ async function downloadAsFrame(type: Frame) {
     return;
   }
   downloadType = type;
-  await preGetPayList(type);
+  await preGetPayList();
 }
 
 // const preFrameDownload = async (type: Frame) => {
@@ -2033,60 +2321,63 @@ const changeDisableAnchor = () => {
 
 const payListDialog = reactive({
   show: false,
+  title:''
 });
 
 const prePay = async () => {
   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.payDiagram.checked){
+      prePayList.pngs.forEach((item) => {
+        list.push({
+          type: '图片图元',
+          name: item,
+        });
       });
-    });
-  if (data.goods[2].checked) {
-    if ([...prePayList.svgPens].includes('*')) {
-      list.push({
-        type: 'SVG线性图元',
+      prePayList.jsPens.forEach((item) => {
+        list.push({
+          type: 'JS线性图元',
+          name: item,
+        });
       });
-    } else {
-      prePayList.svgPens.forEach((item) => {
+
+      prePayList.iotPens.forEach((item) => {
         list.push({
-          type: 'SVG线性图元',
+          type: '控件',
           name: item,
         });
       });
-    }
+      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', {
-    list,
+  const res: any = await axios.post('/api/order/deployment/submit', {
+     goods:data.payGoods,
+    '2ds':list,
   });
   wechatPayDialog.show = true;
   data.order = res;
 };
 
+const downloadTrial = () => {
+  MessagePlugin.info('正在下载打包中，可能需要几分钟，请耐心等待...');
+  //下载试用版
+}
 const skipPay = () => {
   //跳过支付，直接下载
   MessagePlugin.info('正在下载打包中，可能需要几分钟，请耐心等待...');
   if (downloadType === Frame.html) {
-    preDownload(meta2d.data());
+    preDownload();
   } else {
-    preFrameDownload(downloadType);
+    preFrameDownload();
   }
 };
 
@@ -2101,13 +2392,14 @@ const finishPay = async () => {
     payListDialog.show = false;
     MessagePlugin.info('正在下载打包中，可能需要几分钟，请耐心等待...');
     if (downloadType === Frame.html) {
-      preDownload(meta2d.data());
+      preDownload();
     } else {
-      preFrameDownload(downloadType);
+      console.log("downloadType",downloadType);
+      preFrameDownload();
     }
   } else {
     MessagePlugin.error('支付失败');
-    wechatPayDialog.show = false;
+    // wechatPayDialog.show = false;
   }
 };
 
@@ -2192,11 +2484,103 @@ const onSuccess = (success: boolean) => {
   }
 }
 
-.pay-dialog {
-  background-color: red;
+.pay-box{
+  background: rgba(175,202,255,0.04);
+  border-radius: 4px;
+  margin-bottom:24px;
+  padding:20px 24px;
+  position:relative;
+  display:flex;
+  .pay-up{
+    display:flex;
+  }
+ :deep(.t-checkbox__label){
+  font-size: 16px;
+    color: #6e7b91;
+    margin-left:16px;
+ }
+
+  .pay-title{
+    font-size: 16px;
+    color: #6e7b91;
+    .t-icon{
+      margin-top:-5px;
+      margin-left:12px;
+    }
+    :deep(.t-checkbox__input){
+      background:#fff0;
+    }
+    :deep(.t-is-checked){
+      .t-checkbox__input{
+        background:var(--color-primary);
+      }
+    }
+  }
+  .pay-price{
+    position:absolute;
+    right:24px;
+    color:#4480F9;
+    display:flex;
+    p:nth-child(2){
+      font-size: 20px;
+    }
+  }
+
+  .pay-down{
+    margin-top:16px;
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:space-between;
+    /* padding-top:24px; */
+    max-height: 200px;
+    overflow-y: scroll;
+    &>div{
+      width: 96px;
+      height: 96px;
+      background: #1c283b;
+      border-radius: 4px;
+      /* margin-right:4px; */
+      margin-bottom:8px;
+      img{
+        margin:8px;
+        width:80px;
+        height:80px;
+      }
+      .l-icon{
+        width: 80px;
+        height: 80px;
+        margin:8px;
+      }
+    }
+  }
+}
+.pay-footer{
+  display:flex;
+  margin-bottom: -48px;
+  margin-left:24px;
+  font-size: 14px;
+  &>div{
+    color:#4480F9;
+    display:flex;
+    p:nth-child(2){
+      font-size: 24px;
+      font-weight: 800;
+      margin-top:-3px;
+    }
+    p:nth-child(1){
+      margin:0px 4px;
+    }
+  }
 }
+.pay-diagram{
+    flex-direction:column;
+}
+
+/* .pay-dialog {
+  background-color: red;
+} */
 
-.pay-body {
+/* .pay-body {
   height: 300px;
   overflow-y: scroll;
   margin-bottom: 30px;
@@ -2218,9 +2602,9 @@ const onSuccess = (success: boolean) => {
       }
     }
   }
-}
+} */
 
-.pay-line {
+/* .pay-line {
   display: flex;
   height: 54px;
   background-color: #afcaff0a;
@@ -2261,9 +2645,9 @@ const onSuccess = (success: boolean) => {
     width: 40%;
     display: flex;
   }
-}
+} */
 
-.pay-tip {
+/* .pay-tip {
   height: 54px;
   width: 100%;
   position: relative;
@@ -2282,14 +2666,14 @@ const onSuccess = (success: boolean) => {
   .pay-price {
     position: absolute;
     right: 215px;
-    /* margin-left: 50px; */
+   margin-left: 50px; 
     align-items: flex-end;
     line-height: 10px;
 
-    /* p{
+     p{
     vertical-align: bottom;
     line-height: normal;
-  } */
+  } 
     p:nth-child(2) {
       font-size: 32px;
       font-weight: Semibold;
@@ -2302,9 +2686,9 @@ const onSuccess = (success: boolean) => {
       color: #4480f9;
     }
   }
-}
+} */
 
-.pay-title {
+/* .pay-title {
   margin: 18px 0px 12px 18px;
-}
+} */
 </style>