feat: 增加生成商品详情海报功能

7952c131 · Xuguangxing · db353e68 · 7952c131 · 7952c131 · 7952c131
Commit 7952c131 authored Sep 18, 2021 by Xuguangxing
11 changed files
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,8 +15,10 @@
        "@qg/ui-track-web": "0.0.3",
        "core-js": "^3.6.5",
        "crypto-js": "^3.1.9-1",
+        "html2canvas": "^1.3.2",
        "intersection-observer": "^0.12.0",
        "js-cookie": "^2.2.1",
+        "qiniu-js": "^3.3.1",
        "raven-js": "^3.27.2",
        "sa-sdk-javascript": "^1.15.16",
        "vue": "2.6.11",
@@ -1062,6 +1064,26 @@
        "regenerator-runtime": "^0.13.4"
      }
    },
+    "node_modules/@babel/runtime-corejs2": {
+      "version": "7.15.4",
+      "resolved": "http://npmprivate.quantgroups.com/@babel%2fruntime-corejs2/-/runtime-corejs2-7.15.4.tgz",
+      "integrity": "sha1-3aVVTRji69TjdOc3CFkOcuHmdPc=",
+      "license": "MIT",
+      "dependencies": {
+        "core-js": "^2.6.5",
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/runtime-corejs2/node_modules/core-js": {
+      "version": "2.6.10",
+      "resolved": "http://npmprivate.quantgroups.com/core-js/-/core-js-2.6.10.tgz",
+      "integrity": "sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA==",
+      "hasInstallScript": true,
+      "license": "MIT"
+    },
    "node_modules/@babel/template": {
      "version": "7.10.4",
      "resolved": "http://npmprivate.quantgroups.com/@babel%2ftemplate/-/template-7.10.4.tgz",
@@ -2766,6 +2788,14 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/base64-arraybuffer": {
+      "version": "0.2.0",
+      "resolved": "http://npmprivate.quantgroups.com/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
+      "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
    "node_modules/base64-js": {
      "version": "1.3.1",
      "resolved": "http://npmprivate.quantgroups.com/base64-js/-/base64-js-1.3.1.tgz",
@@ -4512,6 +4542,15 @@
        "node": ">4"
      }
    },
+    "node_modules/css-line-break": {
+      "version": "2.0.1",
+      "resolved": "http://npmprivate.quantgroups.com/css-line-break/-/css-line-break-2.0.1.tgz",
+      "integrity": "sha512-gwKYIMUn7xodIcb346wgUhE2Dt5O1Kmrc16PWi8sL4FTfyDj8P5095rzH7+O8CTZudJr+uw2GCI/hwEkDJFI2w==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^0.2.0"
+      }
+    },
    "node_modules/css-loader": {
      "version": "3.6.0",
      "resolved": "http://npmprivate.quantgroups.com/css-loader/-/css-loader-3.6.0.tgz",
@@ -7218,6 +7257,19 @@
        "object.getownpropertydescriptors": "^2.0.3"
      }
    },
+    "node_modules/html2canvas": {
+      "version": "1.3.2",
+      "resolved": "http://npmprivate.quantgroups.com/html2canvas/-/html2canvas-1.3.2.tgz",
+      "integrity": "sha512-4+zqv87/a1LsaCrINV69wVLGG8GBZcYBboz1JPWEgiXcWoD9kroLzccsBRU/L9UlfV2MAZ+3J92U9IQPVMDeSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "2.0.1",
+        "text-segmentation": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
    "node_modules/htmlparser2": {
      "version": "3.10.1",
      "resolved": "http://npmprivate.quantgroups.com/htmlparser2/-/htmlparser2-3.10.1.tgz",
@@ -12022,6 +12074,26 @@
        "request": "^2.88.0"
      }
    },
+    "node_modules/qiniu-js": {
+      "version": "3.3.3",
+      "resolved": "http://npmprivate.quantgroups.com/qiniu-js/-/qiniu-js-3.3.3.tgz",
+      "integrity": "sha512-boT5oS5ZDQKZmrkioWp1wXhus0pKJTJXXKsims5JbnqCtAk87dJKzBZEDdKZ1l/bt04WEU5zXf/gvcyj4IpAug==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime-corejs2": "^7.10.2",
+        "querystring": "^0.2.1",
+        "spark-md5": "^3.0.0"
+      }
+    },
+    "node_modules/qiniu-js/node_modules/querystring": {
+      "version": "0.2.1",
+      "resolved": "http://npmprivate.quantgroups.com/querystring/-/querystring-0.2.1.tgz",
+      "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
    "node_modules/qs": {
      "version": "6.5.2",
      "resolved": "http://npmprivate.quantgroups.com/qs/-/qs-6.5.2.tgz",
@@ -12180,8 +12252,7 @@
    "node_modules/regenerator-runtime": {
      "version": "0.13.5",
      "resolved": "http://npmprivate.quantgroups.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
-      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
-      "dev": true
+      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
    },
    "node_modules/regenerator-transform": {
      "version": "0.14.5",
@@ -13262,6 +13333,12 @@
      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
      "dev": true
    },
+    "node_modules/spark-md5": {
+      "version": "3.0.2",
+      "resolved": "http://npmprivate.quantgroups.com/spark-md5/-/spark-md5-3.0.2.tgz",
+      "integrity": "sha1-eVLEoweENHq87nMmjkc7nAFn4/w=",
+      "license": "(WTFPL OR MIT)"
+    },
    "node_modules/spdx-correct": {
      "version": "3.1.1",
      "resolved": "http://npmprivate.quantgroups.com/spdx-correct/-/spdx-correct-3.1.1.tgz",
@@ -14135,6 +14212,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/text-segmentation": {
+      "version": "1.0.2",
+      "resolved": "http://npmprivate.quantgroups.com/text-segmentation/-/text-segmentation-1.0.2.tgz",
+      "integrity": "sha512-uTqvLxdBrVnx/CFQOtnf8tfzSXFm+1Qxau7Xi54j4OPTZokuDOX8qncQzrg2G8ZicAMOM8TgzFAYTb+AqNO4Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.1"
+      }
+    },
    "node_modules/text-table": {
      "version": "0.2.0",
      "resolved": "http://npmprivate.quantgroups.com/text-table/-/text-table-0.2.0.tgz",
@@ -14758,6 +14844,24 @@
        "node": ">= 0.4.0"
      }
    },
+    "node_modules/utrie": {
+      "version": "1.0.1",
+      "resolved": "http://npmprivate.quantgroups.com/utrie/-/utrie-1.0.1.tgz",
+      "integrity": "sha512-JPaDXF3vzgZxfeEwutdGzlrNoVFL5UvZcbO6Qo9D4GoahrieUPoMU8GCpVpR7MQqcKhmShIh8VlbEN3PLM3EBg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.1"
+      }
+    },
+    "node_modules/utrie/node_modules/base64-arraybuffer": {
+      "version": "1.0.1",
+      "resolved": "http://npmprivate.quantgroups.com/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz",
+      "integrity": "sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
    "node_modules/uuid": {
      "version": "3.4.0",
      "resolved": "http://npmprivate.quantgroups.com/uuid/-/uuid-3.4.0.tgz",
@@ -18514,6 +18618,22 @@
        "regenerator-runtime": "^0.13.4"
      }
    },
+    "@babel/runtime-corejs2": {
+      "version": "7.15.4",
+      "resolved": "http://npmprivate.quantgroups.com/@babel%2fruntime-corejs2/-/runtime-corejs2-7.15.4.tgz",
+      "integrity": "sha1-3aVVTRji69TjdOc3CFkOcuHmdPc=",
+      "requires": {
+        "core-js": "^2.6.5",
+        "regenerator-runtime": "^0.13.4"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.10",
+          "resolved": "http://npmprivate.quantgroups.com/core-js/-/core-js-2.6.10.tgz",
+          "integrity": "sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA=="
+        }
+      }
+    },
    "@babel/template": {
      "version": "7.10.4",
      "resolved": "http://npmprivate.quantgroups.com/@babel%2ftemplate/-/template-7.10.4.tgz",
@@ -20036,6 +20156,11 @@
        }
      }
    },
+    "base64-arraybuffer": {
+      "version": "0.2.0",
+      "resolved": "http://npmprivate.quantgroups.com/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
+      "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ=="
+    },
    "base64-js": {
      "version": "1.3.1",
      "resolved": "http://npmprivate.quantgroups.com/base64-js/-/base64-js-1.3.1.tgz",
@@ -21554,6 +21679,14 @@
        "timsort": "^0.3.0"
      }
    },
+    "css-line-break": {
+      "version": "2.0.1",
+      "resolved": "http://npmprivate.quantgroups.com/css-line-break/-/css-line-break-2.0.1.tgz",
+      "integrity": "sha512-gwKYIMUn7xodIcb346wgUhE2Dt5O1Kmrc16PWi8sL4FTfyDj8P5095rzH7+O8CTZudJr+uw2GCI/hwEkDJFI2w==",
+      "requires": {
+        "base64-arraybuffer": "^0.2.0"
+      }
+    },
    "css-loader": {
      "version": "3.6.0",
      "resolved": "http://npmprivate.quantgroups.com/css-loader/-/css-loader-3.6.0.tgz",
@@ -23797,6 +23930,15 @@
        }
      }
    },
+    "html2canvas": {
+      "version": "1.3.2",
+      "resolved": "http://npmprivate.quantgroups.com/html2canvas/-/html2canvas-1.3.2.tgz",
+      "integrity": "sha512-4+zqv87/a1LsaCrINV69wVLGG8GBZcYBboz1JPWEgiXcWoD9kroLzccsBRU/L9UlfV2MAZ+3J92U9IQPVMDeSQ==",
+      "requires": {
+        "css-line-break": "2.0.1",
+        "text-segmentation": "^1.0.2"
+      }
+    },
    "htmlparser2": {
      "version": "3.10.1",
      "resolved": "http://npmprivate.quantgroups.com/htmlparser2/-/htmlparser2-3.10.1.tgz",
@@ -27743,6 +27885,23 @@
        "request": "^2.88.0"
      }
    },
+    "qiniu-js": {
+      "version": "3.3.3",
+      "resolved": "http://npmprivate.quantgroups.com/qiniu-js/-/qiniu-js-3.3.3.tgz",
+      "integrity": "sha512-boT5oS5ZDQKZmrkioWp1wXhus0pKJTJXXKsims5JbnqCtAk87dJKzBZEDdKZ1l/bt04WEU5zXf/gvcyj4IpAug==",
+      "requires": {
+        "@babel/runtime-corejs2": "^7.10.2",
+        "querystring": "^0.2.1",
+        "spark-md5": "^3.0.0"
+      },
+      "dependencies": {
+        "querystring": {
+          "version": "0.2.1",
+          "resolved": "http://npmprivate.quantgroups.com/querystring/-/querystring-0.2.1.tgz",
+          "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg=="
+        }
+      }
+    },
    "qs": {
      "version": "6.5.2",
      "resolved": "http://npmprivate.quantgroups.com/qs/-/qs-6.5.2.tgz",
@@ -27874,8 +28033,7 @@
    "regenerator-runtime": {
      "version": "0.13.5",
      "resolved": "http://npmprivate.quantgroups.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
-      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
-      "dev": true
+      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
    },
    "regenerator-transform": {
      "version": "0.14.5",
@@ -28803,6 +28961,11 @@
      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
      "dev": true
    },
+    "spark-md5": {
+      "version": "3.0.2",
+      "resolved": "http://npmprivate.quantgroups.com/spark-md5/-/spark-md5-3.0.2.tgz",
+      "integrity": "sha1-eVLEoweENHq87nMmjkc7nAFn4/w="
+    },
    "spdx-correct": {
      "version": "3.1.1",
      "resolved": "http://npmprivate.quantgroups.com/spdx-correct/-/spdx-correct-3.1.1.tgz",
@@ -29532,6 +29695,14 @@
        }
      }
    },
+    "text-segmentation": {
+      "version": "1.0.2",
+      "resolved": "http://npmprivate.quantgroups.com/text-segmentation/-/text-segmentation-1.0.2.tgz",
+      "integrity": "sha512-uTqvLxdBrVnx/CFQOtnf8tfzSXFm+1Qxau7Xi54j4OPTZokuDOX8qncQzrg2G8ZicAMOM8TgzFAYTb+AqNO4Cw==",
+      "requires": {
+        "utrie": "^1.0.1"
+      }
+    },
    "text-table": {
      "version": "0.2.0",
      "resolved": "http://npmprivate.quantgroups.com/text-table/-/text-table-0.2.0.tgz",
@@ -30061,6 +30232,21 @@
      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
      "dev": true
    },
+    "utrie": {
+      "version": "1.0.1",
+      "resolved": "http://npmprivate.quantgroups.com/utrie/-/utrie-1.0.1.tgz",
+      "integrity": "sha512-JPaDXF3vzgZxfeEwutdGzlrNoVFL5UvZcbO6Qo9D4GoahrieUPoMU8GCpVpR7MQqcKhmShIh8VlbEN3PLM3EBg==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.1"
+      },
+      "dependencies": {
+        "base64-arraybuffer": {
+          "version": "1.0.1",
+          "resolved": "http://npmprivate.quantgroups.com/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz",
+          "integrity": "sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA=="
+        }
+      }
+    },
    "uuid": {
      "version": "3.4.0",
      "resolved": "http://npmprivate.quantgroups.com/uuid/-/uuid-3.4.0.tgz",
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
    "html2canvas": "^1.3.2",
    "intersection-observer": "^0.12.0",
    "js-cookie": "^2.2.1",
+    "qiniu-js": "^3.3.1",
    "raven-js": "^3.27.2",
    "sa-sdk-javascript": "^1.15.16",
    "vue": "2.6.11",

--- a/public/index.html
+++ b/public/index.html
@@ -105,12 +105,12 @@
  </script>
  </head>
  <body>
-    <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script>
+    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script>
    <script>
        // init vConsole
        var vConsole = new VConsole();
        console.log('Hello world');
-    </script>
+    </script> -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>

--- a/src/api/groupBuy.js
+++ b/src/api/groupBuy.js
@@ -5,7 +5,7 @@ const { talosHost } = config;
 export default {
  // 查询商品sku详情
  detailInfo: params => {
-    return http.get(`${talosHost}/api/kdsp/sku-info/detail/query`, { params });
+    return http.post(`${talosHost}/api/kdsp/activity/activity-goods-special/detail`, { ...params });
  },
  // 详情图片
  getDetailPic: url => {

--- a/src/api/qiniu.api.js
+++ b/src/api/qiniu.api.js
+import config from '@/config';
+import http from '@/service/httpDecorator';
+const { talosHost } = config;
+
+export default {
+  // 获取七牛token
+  getQiniuToken: data => {
+    return http.get(`${talosHost}/api/kdsp/common/upload/token`, { params: data });
+  }
+};
--- a/src/components/sharePic.vue
+++ b/src/components/sharePic.vue
@@ -66,23 +66,48 @@
 </template>
 <script>
 import html2canvas from 'html2canvas';
+import qiNiuApi from '@/api/qiniu.api';
+import { upload } from 'qiniu-js';
+import config from '@/config';
 export default {
  mounted() {
-    this.$nextTick(() => {
+    // this.uploadPic();
+  },
+  methods: {
+    async uploadPic() {
+      const [res] = await qiNiuApi.getQiniuToken();
+      const token = res.token;
      html2canvas(this.$refs.sharePic, {
        width: 1080,
        height: 1920,
        useCORS: true,
        scale: 1
      }).then(function(canvas) {
-        let base64Img = canvas.toDataURL('image/png');
-        console.log(base64Img);
-        let img = document.createElement('img');
-        img.src = base64Img;
-        // img.setAttribute('crossOrigin', 'Anonymous');
-        document.body.appendChild(img);
+        canvas.toBlob(
+          blob => {
+            const observable = upload(blob, null, token);
+            const observer = {
+              error(err) {
+                console.log(err);
+              },
+              complete({ hash }) {
+                const fileLink = config.qiniuHost + hash;
+                console.log('fileLink', fileLink);
+              }
+            };
+            observable.subscribe(observer);
+            // newImg.onload = function() {
+            //   URL.revokeObjectURL(url);
+            // };
+
+            // newImg.src = url;
+            // document.body.appendChild(newImg);
+          },
+          'image/jpeg',
+          0.85
+        );
      });
-    });
+    }
  }
 };
 </script>

--- a/src/config/env.config.js
+++ b/src/config/env.config.js
@@ -10,6 +10,7 @@ const shenceHost = 'https://bn.xyqb.com/sa?project=default'; // 测试地址
 const talosHost = 'https://talos-vcc3.liangkebang.net';
 const faceHost = 'https://auth-vcc3.liangkebang.net';
 const kdspHost = 'https://kdsp-api-vcc3.liangkebang.net';
+const opapiHost = 'https://opapi-vcc3.liangkebang.net';
 const VCC_CHANNEL = '';
 const TERMINAL = 'H5';
 const VERSION = '7.9.00';
@@ -23,5 +24,6 @@ export default {
  VCC_CHANNEL,
  TERMINAL,
  VERSION,
-  kdspHost
+  kdspHost,
+  opapiHost
 };
--- a/src/config/prod.config.js
+++ b/src/config/prod.config.js
@@ -7,6 +7,7 @@ const VCC_CHANNEL = '';
 const TERMINAL = 'H5';
 const VERSION = '7.9.00';
 const kdspHost = 'https://kdsp-api.q-gp.com';
+const opapiHost = `${protocol}//opapi.xyqb.com`;

 export default {
  // apiHost,
@@ -18,5 +19,6 @@ export default {
  TERMINAL,
  VERSION,
  qiniuHost,
-  kdspHost
+  kdspHost,
+  opapiHost
 };
--- a/src/views/goodsDetail/index.vue
+++ b/src/views/goodsDetail/index.vue
@@ -19,7 +19,8 @@
      <div class="goods-group-buy-info">
        <div class="goods-group-buy-info-price">
          <p class="price">
-            成团价¥<span class="group-price">0</span>售价¥<span class="sale-price">3000</span>
+            成团价¥<span class="group-price">{{ detailInfo.activityPrice }}</span
+            >售价¥<span class="sale-price">{{ detailInfo.price }}</span>
          </p>
          <p class="desc">拼团成功/失败，款项原路返回至账户</p>
        </div>
@@ -30,7 +31,7 @@
      </div>
      <!-- 商品名称/价格 -->
      <div class="goods-info">
-        <div class="goods-info-name">{{ detailInfo.skuName || name.goodsName }}</div>
+        <div class="goods-info-name">{{ detailInfo.goodsName }}</div>
      </div>

      <div class="goods-param">
@@ -246,7 +247,6 @@ export default {
    this.hasLogin = window.localStorage.getItem('vccToken') != 'null' ? true : false;
    this.detailParam = { ...this.$route.query };
    this.name = this.$route.params;
-    this.imgList = [this.name.goodsimg];
    this.init(this.detailParam);
  },
  mounted() {
@@ -272,10 +272,10 @@ export default {
    },
    async init(detailParam) {
      const [res] = await goods.detailInfo(detailParam);
-      this.imgList = res.imageList || [];
+      this.imgList = res.imageUrl || [];
      this.detailInfo = res;
      try {
-        const detailImages = await goods.getDetailPic(this.detailInfo.detailUrl);
+        const detailImages = await goods.getDetailPic(this.detailInfo.contentDetailUrl);
        // const imgReg = new RegExp('(?<=src=").[^"]*', 'g');
        // this.detailImgList = (detailImages || '').match(imgReg);
        let imgReg = /<img.*?(?:>|\/>)/gi;

--- a/src/views/goodsDetail/smallPic.vue
+++ b/src/views/goodsDetail/smallPic.vue
@@ -17,7 +17,7 @@
        <div class="goods-product-info-desc">
          <div class="goods-product-info-desc-part1">
            <div class="goods-product-info-desc-title">
-              {{ detailInfo.skuName || name.goodsName }}
+              {{ detailInfo.goodsName }}
            </div>
            <div class="goods-product-info-desc-progress">
              <cr-progress
@@ -33,11 +33,9 @@
          </div>
          <div class="goods-product-info-desc-price">
            <div class="goods-product-info-desc-price-group">
-              成团价 ¥<span class="actualPrice">0</span>
-            </div>
-            <div class="goods-product-info-desc-price-market">
-              售价¥3389
+              成团价 ¥<span class="actualPrice">{{ detailInfo.activityPrice }}</span>
            </div>
+            <div class="goods-product-info-desc-price-market">售价¥{{ detailInfo.price }}</div>
          </div>
        </div>
      </div>
@@ -138,10 +136,10 @@ export default {
    },
    async init(detailParam) {
      const [res] = await goods.detailInfo(detailParam);
-      this.imgList = res.imageList || [];
+      this.imgList = res.imageUrl || [];
      this.detailInfo = res;
      try {
-        const detailImages = await goods.getDetailPic(this.detailInfo.detailUrl);
+        const detailImages = await goods.getDetailPic(this.detailInfo.contentDetailUrl);
        // const imgReg = new RegExp('(?<=src=").[^"]*', 'g');
        // this.detailImgList = (detailImages || '').match(imgReg);
        let imgReg = /<img.*?(?:>|\/>)/gi;

--- a/yarn.lock
+++ b/yarn.lock
@@ -798,6 +798,14 @@
    "@babel/types" "^7.4.4"
    "esutils" "^2.0.2"

+"@babel/runtime-corejs2@^7.10.2":
+  "integrity" "sha1-3aVVTRji69TjdOc3CFkOcuHmdPc="
+  "resolved" "http://npmprivate.quantgroups.com/@babel%2fruntime-corejs2/-/runtime-corejs2-7.15.4.tgz"
+  "version" "7.15.4"
+  dependencies:
+    "core-js" "^2.6.5"
+    "regenerator-runtime" "^0.13.4"
+
 "@babel/runtime@^7.0.0", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.6":
  "integrity" "sha512-otddXKhdNn7d0ptoFRHtMLa8LqDxLYwTjB4nYgM1yy5N6gU/MUf8zqyyLltCH3yAVitBzmwK4us+DD0l/MauAg=="
  "resolved" "http://npmprivate.quantgroups.com/@babel%2fruntime/-/runtime-7.10.5.tgz"
@@ -1854,6 +1862,16 @@
    "mixin-deep" "^1.2.0"
    "pascalcase" "^0.1.1"

+"base64-arraybuffer@^0.2.0":
+  "integrity" "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ=="
+  "resolved" "http://npmprivate.quantgroups.com/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz"
+  "version" "0.2.0"
+
+"base64-arraybuffer@^1.0.1":
+  "integrity" "sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA=="
+  "resolved" "http://npmprivate.quantgroups.com/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz"
+  "version" "1.0.1"
+
 "base64-js@^1.0.2":
  "integrity" "sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g=="
  "resolved" "http://npmprivate.quantgroups.com/base64-js/-/base64-js-1.3.1.tgz"
@@ -2755,6 +2773,11 @@
  "resolved" "http://npmprivate.quantgroups.com/core-js/-/core-js-2.6.10.tgz"
  "version" "2.6.10"

+"core-js@^2.6.5":
+  "integrity" "sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA=="
+  "resolved" "http://npmprivate.quantgroups.com/core-js/-/core-js-2.6.10.tgz"
+  "version" "2.6.10"
+
 "core-js@^3.6.5":
  "integrity" "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
  "resolved" "http://npmprivate.quantgroups.com/core-js/-/core-js-3.6.5.tgz"
@@ -2892,6 +2915,13 @@
    "postcss" "^7.0.1"
    "timsort" "^0.3.0"

+"css-line-break@2.0.1":
+  "integrity" "sha512-gwKYIMUn7xodIcb346wgUhE2Dt5O1Kmrc16PWi8sL4FTfyDj8P5095rzH7+O8CTZudJr+uw2GCI/hwEkDJFI2w=="
+  "resolved" "http://npmprivate.quantgroups.com/css-line-break/-/css-line-break-2.0.1.tgz"
+  "version" "2.0.1"
+  dependencies:
+    "base64-arraybuffer" "^0.2.0"
+
 "css-loader@^3.5.3":
  "integrity" "sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ=="
  "resolved" "http://npmprivate.quantgroups.com/css-loader/-/css-loader-3.6.0.tgz"
@@ -4643,6 +4673,14 @@
    "toposort" "^1.0.0"
    "util.promisify" "1.0.0"

+"html2canvas@^1.3.2":
+  "integrity" "sha512-4+zqv87/a1LsaCrINV69wVLGG8GBZcYBboz1JPWEgiXcWoD9kroLzccsBRU/L9UlfV2MAZ+3J92U9IQPVMDeSQ=="
+  "resolved" "http://npmprivate.quantgroups.com/html2canvas/-/html2canvas-1.3.2.tgz"
+  "version" "1.3.2"
+  dependencies:
+    "css-line-break" "2.0.1"
+    "text-segmentation" "^1.0.2"
+
 "htmlparser2@^3.3.0", "htmlparser2@^3.8.3":
  "integrity" "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ=="
  "resolved" "http://npmprivate.quantgroups.com/htmlparser2/-/htmlparser2-3.10.1.tgz"
@@ -7350,6 +7388,15 @@
  dependencies:
    "request" "^2.88.0"

+"qiniu-js@^3.3.1":
+  "integrity" "sha512-boT5oS5ZDQKZmrkioWp1wXhus0pKJTJXXKsims5JbnqCtAk87dJKzBZEDdKZ1l/bt04WEU5zXf/gvcyj4IpAug=="
+  "resolved" "http://npmprivate.quantgroups.com/qiniu-js/-/qiniu-js-3.3.3.tgz"
+  "version" "3.3.3"
+  dependencies:
+    "@babel/runtime-corejs2" "^7.10.2"
+    "querystring" "^0.2.1"
+    "spark-md5" "^3.0.0"
+
 "qs@^6.10.1":
  "integrity" "sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg=="
  "resolved" "http://npmprivate.quantgroups.com/qs/-/qs-6.10.1.tgz"
@@ -7380,6 +7427,11 @@
  "resolved" "http://npmprivate.quantgroups.com/querystring-es3/-/querystring-es3-0.2.1.tgz"
  "version" "0.2.1"

+"querystring@^0.2.1":
+  "integrity" "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg=="
+  "resolved" "http://npmprivate.quantgroups.com/querystring/-/querystring-0.2.1.tgz"
+  "version" "0.2.1"
+
 "querystring@0.2.0":
  "integrity" "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA="
  "resolved" "http://npmprivate.quantgroups.com/querystring/-/querystring-0.2.0.tgz"
@@ -8191,6 +8243,11 @@
  "resolved" "http://npmprivate.quantgroups.com/source-map/-/source-map-0.6.1.tgz"
  "version" "0.6.1"

+"spark-md5@^3.0.0":
+  "integrity" "sha1-eVLEoweENHq87nMmjkc7nAFn4/w="
+  "resolved" "http://npmprivate.quantgroups.com/spark-md5/-/spark-md5-3.0.2.tgz"
+  "version" "3.0.2"
+
 "spdx-correct@^3.0.0":
  "integrity" "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w=="
  "resolved" "http://npmprivate.quantgroups.com/spdx-correct/-/spdx-correct-3.1.1.tgz"
@@ -8678,6 +8735,13 @@
    "source-map" "~0.6.1"
    "source-map-support" "~0.5.12"

+"text-segmentation@^1.0.2":
+  "integrity" "sha512-uTqvLxdBrVnx/CFQOtnf8tfzSXFm+1Qxau7Xi54j4OPTZokuDOX8qncQzrg2G8ZicAMOM8TgzFAYTb+AqNO4Cw=="
+  "resolved" "http://npmprivate.quantgroups.com/text-segmentation/-/text-segmentation-1.0.2.tgz"
+  "version" "1.0.2"
+  dependencies:
+    "utrie" "^1.0.1"
+
 "text-table@^0.2.0":
  "integrity" "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ="
  "resolved" "http://npmprivate.quantgroups.com/text-table/-/text-table-0.2.0.tgz"
@@ -9084,6 +9148,13 @@
  "resolved" "http://npmprivate.quantgroups.com/utils-merge/-/utils-merge-1.0.1.tgz"
  "version" "1.0.1"

+"utrie@^1.0.1":
+  "integrity" "sha512-JPaDXF3vzgZxfeEwutdGzlrNoVFL5UvZcbO6Qo9D4GoahrieUPoMU8GCpVpR7MQqcKhmShIh8VlbEN3PLM3EBg=="
+  "resolved" "http://npmprivate.quantgroups.com/utrie/-/utrie-1.0.1.tgz"
+  "version" "1.0.1"
+  dependencies:
+    "base64-arraybuffer" "^1.0.1"
+
 "uuid@^3.3.2", "uuid@^3.4.0":
  "integrity" "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
  "resolved" "http://npmprivate.quantgroups.com/uuid/-/uuid-3.4.0.tgz"