|
|
@@ -2,91 +2,73 @@
|
|
|
<div class="poster">
|
|
|
<van-overlay :show="show" @click="show = false, showPoster = false" class="overlay">
|
|
|
<div class="wrapper">
|
|
|
- <div id="poster">
|
|
|
- <div class="poster-img">
|
|
|
- <div class="title">
|
|
|
- <div class="title-image">
|
|
|
- <van-image src="" width="100%" height="100%"></van-image>
|
|
|
- <div class="text">
|
|
|
- <div class="name">{{ dataInfo.name }}</div>
|
|
|
- <van-image src=""></van-image>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <img :src="link" style="width: 76vw;
|
|
|
+ height: 124vw;
|
|
|
+ margin-top: 10vw;" alt="">
|
|
|
+ </div>
|
|
|
+ </van-overlay>
|
|
|
+ <van-share-sheet class="sheet" v-model="showPoster" :options="options" @select="onSelect" :overlay="false" />
|
|
|
+ <div id="poster" ref="poster">
|
|
|
+ <div class="poster-img">
|
|
|
+ <div class="title">
|
|
|
+ <div class="title-image">
|
|
|
+ <van-image src="" width="100%" height="100%"></van-image>
|
|
|
+ <div class="text">
|
|
|
+ <div class="name">{{ dataInfo.name }}</div>
|
|
|
+ <van-image src=""></van-image>
|
|
|
</div>
|
|
|
- <div class="card">
|
|
|
- <div
|
|
|
- class="card-mine"
|
|
|
- :style="{
|
|
|
- backgroundImage: `url(${imgUrl})`,
|
|
|
- backgroundSize: '100% 100%',
|
|
|
- }"
|
|
|
- >
|
|
|
- <div class="logo">
|
|
|
- <van-image
|
|
|
- src="https://static.caimei365.com/app/img/icon/logo-fanbai.png"
|
|
|
- mode=""
|
|
|
- class="titleImgUrl"
|
|
|
- cross
|
|
|
- ></van-image>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-mine" :style="{
|
|
|
+ backgroundImage: `url(${imgUrl})`,
|
|
|
+ backgroundSize: '100% 100%',
|
|
|
+ }">
|
|
|
+ <div class="logo">
|
|
|
+ <van-image src="https://static.caimei365.com/app/img/icon/logo-fanbai.png" mode="" class="titleImgUrl"
|
|
|
+ cross></van-image>
|
|
|
+ </div>
|
|
|
+ <div class="card-contain">
|
|
|
+ <div style="display: flex">
|
|
|
+ <div class="card-head">
|
|
|
+ <van-image :src="userInfo.image && userInfo.image.length > 12
|
|
|
+ ? userInfo.image
|
|
|
+ : 'https://static.caimei365.com/app/img/icon/default-head-new.png'
|
|
|
+ " mode="" class="head"></van-image>
|
|
|
</div>
|
|
|
- <div class="card-contain">
|
|
|
- <div style="display: flex">
|
|
|
- <div class="card-head">
|
|
|
- <van-image
|
|
|
- :src="
|
|
|
- userInfo.image && userInfo.image.length > 12
|
|
|
- ? userInfo.image
|
|
|
- : 'https://static.caimei365.com/app/img/icon/default-head-new.png'
|
|
|
- "
|
|
|
- mode=""
|
|
|
- class="head"
|
|
|
- ></van-image>
|
|
|
- </div>
|
|
|
- <div class="card-info">
|
|
|
- <div class="card-info-head">
|
|
|
- <div class="card-name">
|
|
|
- {{ userInfo.linkMan }}
|
|
|
- </div>
|
|
|
- <div class="card-info-tab">客户经理</div>
|
|
|
- </div>
|
|
|
- <div class="card-info-iphone">
|
|
|
- {{
|
|
|
- userInfo.mobile
|
|
|
- ? userInfo.mobile.replace(/(?=(\d{4})+$)/g, "-")
|
|
|
- : ""
|
|
|
- }}
|
|
|
- </div>
|
|
|
+ <div class="card-info">
|
|
|
+ <div class="card-info-head">
|
|
|
+ <div class="card-name">
|
|
|
+ {{ userInfo.linkMan }}
|
|
|
</div>
|
|
|
+ <div class="card-info-tab">客户经理</div>
|
|
|
</div>
|
|
|
- <div class="card-qrcode">
|
|
|
- <div class="qrcode-message">
|
|
|
- <van-image
|
|
|
- :src="userInfo.qrCode || ''"
|
|
|
- class="qrcode"
|
|
|
- mode=""
|
|
|
- ></van-image>
|
|
|
- </div>
|
|
|
- <div class="tips">长按或扫二维码—-联系我-—</div>
|
|
|
+ <div class="card-info-iphone">
|
|
|
+ {{
|
|
|
+ userInfo.mobile
|
|
|
+ ? userInfo.mobile.replace(/(?=(\d{4})+$)/g, "-")
|
|
|
+ : ""
|
|
|
+ }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="card-qrcode">
|
|
|
+ <div class="qrcode-message">
|
|
|
+ <van-image :src="userInfo.qrCode || ''" class="qrcode" mode=""></van-image>
|
|
|
+ </div>
|
|
|
+ <div class="tips">长按或扫二维码—-联系我-—</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </van-overlay>
|
|
|
- <van-share-sheet
|
|
|
- class="sheet"
|
|
|
- v-model="showPoster"
|
|
|
- :options="options"
|
|
|
- @select="onSelect"
|
|
|
- :overlay="false"
|
|
|
- />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import html2Canvas from 'html2canvas'
|
|
|
+import { Toast } from 'vant'
|
|
|
|
|
|
export default {
|
|
|
props: {
|
|
|
@@ -111,25 +93,39 @@ export default {
|
|
|
icon: 'https://static.caimei365.com/app/mini-distribution/saveImage.png',
|
|
|
id: 1
|
|
|
}
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ link: ''
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
showPoster (val) {
|
|
|
if (!val) {
|
|
|
- this.show = false
|
|
|
this.showPoster = false
|
|
|
} else {
|
|
|
this.getPosterImageUrl()
|
|
|
}
|
|
|
+ },
|
|
|
+ userInfo: {
|
|
|
+ handler (val) {
|
|
|
+ if (val) {
|
|
|
+ console.log(val)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- onSelect () {},
|
|
|
+ onSelect () {
|
|
|
+ Toast.success('请长按图片分享好友或保存到本地')
|
|
|
+ this.showPoster = false
|
|
|
+ },
|
|
|
getPosterImageUrl () {
|
|
|
- const html = document.getElementById('poster')
|
|
|
- html2Canvas(html, { width: html.offsetWidth, height: html.offsetHeight, useCORS: true, allowTaint: true }).then(canvas => {
|
|
|
+ const html = this.$refs.poster
|
|
|
+ console.log('html: ' + html)
|
|
|
+ html2Canvas(html, { width: html.clientWidth, height: html.clientHeight, useCORS: true, allowTaint: true }).then(canvas => {
|
|
|
console.log(canvas)
|
|
|
+ this.link = canvas.toDataURL('image/jpg')
|
|
|
+ // console.log('link: ' + this.link)
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
@@ -142,6 +138,7 @@ export default {
|
|
|
z-index: 100;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.wrapper {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
@@ -149,16 +146,21 @@ export default {
|
|
|
}
|
|
|
|
|
|
#poster {
|
|
|
+ position: absolute;
|
|
|
+ left: -9999px;
|
|
|
+ top: -9999px;
|
|
|
margin-top: 10vw;
|
|
|
width: 76vw;
|
|
|
height: 124vw;
|
|
|
background: url("https://static.caimei365.com/app/img/icon/bgImage.png") 100%;
|
|
|
padding: 2vw;
|
|
|
box-sizing: border-box;
|
|
|
+
|
|
|
.poster-img {
|
|
|
overflow: hidden;
|
|
|
border-radius: 1.2vw;
|
|
|
height: 100%;
|
|
|
+
|
|
|
.title {
|
|
|
width: 100%;
|
|
|
height: 72%;
|
|
|
@@ -166,28 +168,34 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 1.1vw;
|
|
|
padding: 2.7vw;
|
|
|
+
|
|
|
.title-image {
|
|
|
width: 100%;
|
|
|
height: 64vw;
|
|
|
}
|
|
|
+
|
|
|
.text {
|
|
|
display: flex;
|
|
|
margin-top: 2vw;
|
|
|
justify-content: space-between;
|
|
|
+
|
|
|
.name {
|
|
|
width: 40vw;
|
|
|
color: #333;
|
|
|
font-size: 3vw;
|
|
|
line-height: 5vw;
|
|
|
}
|
|
|
+
|
|
|
::v-deep .van-image {
|
|
|
width: 15vw;
|
|
|
height: 15vw;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.card {
|
|
|
margin-top: 2vw;
|
|
|
+
|
|
|
.card-mine {
|
|
|
width: 100%;
|
|
|
height: 28%;
|
|
|
@@ -196,32 +204,39 @@ export default {
|
|
|
opacity: 1;
|
|
|
box-sizing: border-box;
|
|
|
padding: 2vw 3vw;
|
|
|
+
|
|
|
.titleImgUrl {
|
|
|
width: 22vw;
|
|
|
height: 6vw;
|
|
|
}
|
|
|
+
|
|
|
.card-contain {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
+
|
|
|
.head {
|
|
|
width: 12vw;
|
|
|
height: 12vw;
|
|
|
border-radius: 50%;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
+
|
|
|
.card-info {
|
|
|
margin-left: 2.2vw;
|
|
|
}
|
|
|
+
|
|
|
.card-info-head {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 1.7vw;
|
|
|
+
|
|
|
.card-name {
|
|
|
color: #ffffff;
|
|
|
font-size: 3.2vw;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
+
|
|
|
.card-info-tab {
|
|
|
width: 15vw;
|
|
|
background-color: #ffbb00;
|
|
|
@@ -233,20 +248,24 @@ export default {
|
|
|
border-radius: 1.2vw;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.card-info-iphone {
|
|
|
color: #ffffff;
|
|
|
font-size: 3.2vw;
|
|
|
}
|
|
|
+
|
|
|
.card-qrcode {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
+
|
|
|
.qrcode {
|
|
|
width: 12vw;
|
|
|
height: 12vw;
|
|
|
object-fit: contain;
|
|
|
margin-bottom: 1vw;
|
|
|
}
|
|
|
+
|
|
|
.tips {
|
|
|
font-size: 3vw;
|
|
|
color: #fff;
|
yun-mo