Skip to content

G
group-buy-ui
Commit 7952c131 authored by Xuguangxing's avatar Xuguangxing
Browse files
Options

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

parent db353e68
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 324 additions and 29 deletions
package-lock.json
View file @ 7952c131
This diff is collapsed.
public/index.html
View file @ 7952c131
......@@ -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>
......
src/api/groupBuy.js
View file @ 7952c131
......@@ -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 => {
......
src/api/qiniu.api.js 0 → 100644
View file @ 7952c131
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 });
}
};
src/components/sharePic.vue
View file @ 7952c131
......@@ -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>
......
src/config/env.config.js
View file @ 7952c131
......@@ -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
};
src/config/prod.config.js
View file @ 7952c131
......@@ -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
};
src/views/goodsDetail/index.vue
View file @ 7952c131
......@@ -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;
......
src/views/goodsDetail/smallPic.vue
View file @ 7952c131
......@@ -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;
......
yarn.lock
View file @ 7952c131
......@@ -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"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment