Skip to content

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

feat: share pic

parent d091abec
Hide whitespace changes
Inline Side-by-side
Showing with 346 additions and 1 deletion
src/components/sharePic.vue 0 → 100644
View file @ e6ee192d
<template>
<div ref="sharePic" class="container">
<div class="groupInfo">
<!-- 组团头像信息 -->
<div class="avatorGroup">
<div class="item leader">
<img
class="avator"
src="https://img.lkbang.net/avator/0070abce3cf2fd7f0f436f5e49d3e6f8d684f4571ada0-dMUyR7_fw658.jpeg"
alt=""
/>
<div class="leaderName">团长</div>
<div class="leaderBorder">
<img src="https://img.lkbang.net/activity/share/default/leaderBorder.png?i=1" alt="" />
</div>
<div class="crown">
<img src="https://img.lkbang.net/activity/share/default/crown.png?i=1" alt="" />
</div>
</div>
<div class="item normal">
<img
src="https://img.lkbang.net/avator/0070abce3cf2fd7f0f436f5e49d3e6f8d684f4571ada0-dMUyR7_fw658.jpeg"
alt=""
/>
</div>
<div class="item placeholder" />
<div class="item more" />
<div class="item more" />
<div class="item more" />
<div class="item more" />
</div>
<div class="groupProcess">
<div class="desc">还差 <span>2人</span> 成团，参团截止时间5月3日</div>
</div>
</div>
<div class="skuImg">
<!-- 商品图 -->
<img src="https://img.lkbang.net/activity/share/default/skuImg.png" alt="" />
<div class="skuInfo">
<div class="skuPrice">
<span class="groupPriceContainer">拼团价 ¥</span>
<span class="groupPrice">0</span>
<span class="salePrice">¥3899</span>
</div>
<div class="skuSuccess">
<p>已有<span>6999人</span></p>
<p>拼团成功</p>
</div>
</div>
</div>
<div class="skuName">
<!-- 商品名称 -->
SAINT LAURENT PARIS 圣罗兰 方管纯口红 3.8克 女神挚爱款 千颂伊同款
</div>
<div class="shareInfo">
<!-- 底部分享信息 -->
<div class="qrcode">
<img src="https://img.lkbang.net/activity/share/default/qrcode.png" alt="" />
</div>
<div class="shareDesc">
<p>分享自 <span>羊小咩小程序</span></p>
<p>扫码或长按识别二维码0元拿好物</p>
</div>
</div>
</div>
</template>
<script>
import html2canvas from 'html2canvas';
export default {
mounted() {
this.$nextTick(() => {
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);
});
});
}
};
</script>
<style lang="less" scoped>
* {
margin: 0;
padding: 0;
}
div,
span,
p,
img {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
font-size: 12px;
}
.container {
position: fixed;
top: -9999999px;
left: -9999999px;
width: 1080px;
height: 1920px;
padding: 48px;
color: #333;
}
.groupInfo {
height: 319px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.groupInfo .avatorGroup {
display: flex;
}
.groupInfo .avatorGroup .item {
width: 94px;
height: 94px;
background-color: #ffe1e1;
margin: 0 21px;
border-radius: 50%;
position: relative;
}
.groupInfo .avatorGroup .normal,
.groupInfo .avatorGroup .leader {
background: transparent;
}
.groupInfo .avatorGroup .leader {
display: flex;
align-items: center;
justify-content: center;
}
.groupInfo .avatorGroup .leader .avator {
width: 84px;
height: 84px;
border-radius: 50%;
}
.groupInfo .avatorGroup .leader .leaderBorder {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.groupInfo .avatorGroup .leader .leaderBorder img {
width: 100%;
height: 100%;
}
.groupInfo .avatorGroup .leader .crown {
position: absolute;
top: -18px;
right: -5px;
width: 49px;
height: 43px;
}
.groupInfo .avatorGroup .leader .crown img {
width: 100%;
height: 100%;
}
.groupInfo .avatorGroup .leader .leaderName {
position: absolute;
bottom: -18px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
width: 76px;
height: 36px;
color: #fff;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
background: #ff9700;
border-radius: 8px;
}
.groupInfo .avatorGroup .normal img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.groupInfo .avatorGroup .more {
border: 2px dashed #ff9393;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
color: #ec1500;
font-size: 34px;
}
.groupInfo .avatorGroup .more::after {
content: '?';
}
.groupInfo .avatorGroup .placeholder {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
color: #ec1500;
font-size: 34px;
}
.groupInfo .avatorGroup .placeholder::after {
content: '...';
margin-top: -15px;
}
.groupInfo .groupProcess {
width: 750px;
height: 123px;
padding-top: 50px;
}
.groupInfo .groupProcess .desc {
width: 100%;
height: 100%;
background: #ffe8e8;
border-radius: 36.5px;
color: #333;
font-size: 34px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.groupInfo .groupProcess .desc span {
color: #ec1500;
margin: 0 10px;
}
.skuImg {
width: 984px;
height: 984px;
position: relative;
}
.skuImg img {
width: 100%;
height: 100%;
}
.skuImg .skuInfo {
position: absolute;
bottom: 0;
left: 0;
display: flex;
width: 100%;
height: 134px;
background-image: url('https://img.lkbang.net/activity/share/default/skuInfoBg.png');
background-repeat: no-repeat;
background-size: cover;
}
.skuImg .skuInfo .skuPrice {
display: flex;
align-items: baseline;
width: 653px;
height: 100%;
flex-shrink: 0;
color: @white;
font-size: 34px;
padding-left: 32px;
margin-right: 10px;
}
.skuImg .skuInfo .skuPrice .groupPrice {
display: inline-block;
color: @white;
font-size: 64px;
margin-right: 10px;
}
.skuImg .skuInfo .skuPrice .salePrice {
font-size: 34px;
text-decoration: line-through;
font-weight: lighter;
line-height: 134px;
}
.skuImg .skuInfo .skuSuccess {
flex: 1;
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.skuImg .skuInfo .skuSuccess p {
font-size: 34px;
text-align: center;
}
.skuImg .skuInfo .skuSuccess p:first-child {
margin-bottom: 15px;
}
.skuImg .skuInfo .skuSuccess p span {
color: #ec1500;
}
.skuName {
height: 132px;
margin: 28px 0 42px;
font-size: 44px;
color: #333333;
line-height: 62px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.shareInfo {
height: 318px;
background: #f7f8f9;
border-radius: 24px;
padding: 0 48px;
display: flex;
align-items: center;
justify-content: space-between;
}
.shareInfo .qrcode {
width: 353px;
height: 278px;
flex-shrink: 0;
padding: 0 75px 0 0;
}
.shareInfo .qrcode img {
width: 100%;
height: 100%;
}
.shareInfo .shareDesc {
flex: 1;
font-size: 34px;
color: #666;
}
.shareInfo .shareDesc p:first-child {
margin-bottom: 25px;
}
.shareInfo .shareDesc span {
font-weight: bold;
}
</style>
src/views/goodsDetail/index.vue
View file @ e6ee192d
...@@ -169,6 +169,7 @@ ...@@ -169,6 +169,7 @@
:disabled="false" :disabled="false"
@buy="goVccOrDetail" @buy="goVccOrDetail"
/> />
<sharePic ref="sharePic" />
</div> </div>
</template> </template>
<script> <script>
...@@ -183,6 +184,7 @@ import successInfo from '@/components/groupBuySuccessInfo'; ...@@ -183,6 +184,7 @@ import successInfo from '@/components/groupBuySuccessInfo';
import rules from '@/components/rules'; import rules from '@/components/rules';
import groupDescInfo from './components/groupDescInfo'; import groupDescInfo from './components/groupDescInfo';
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import sharePic from '@/components/sharePic';
export default { export default {
// eslint-disable-next-line vue/name-property-casing // eslint-disable-next-line vue/name-property-casing
name: 'goodDetail', name: 'goodDetail',
...@@ -194,7 +196,8 @@ export default { ...@@ -194,7 +196,8 @@ export default {
avatorGroup, avatorGroup,
successInfo, successInfo,
rules, rules,
groupDescInfo groupDescInfo,
sharePic
}, },
filters: { filters: {
Img2Thumb Img2Thumb
......
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