<template>
<div class="body">
<div
class="draggable-button"
:style="{ top: top + 'px', left: left + 'px' }"
@mousedown="startDrag"
@touchstart="startDrag"
@mousemove="moveDrag"
@touchmove="moveDrag"
@mouseup="stopDrag"
@touchend="stopDrag"
@click="handleClick"
>
<slot><van-icon name="debit-pay" /></slot>
</div>
<div class="top"></div>
<div class="middle" ref="captureElement">
<div class="company-logo">
<div class="logo">
<img src="../../assets/logo.png" />
</div>
</div>
<div class="main-content">
<div class="main-top">
<div class="card-header">
<div class="card-name">
<van-popover
v-model="showPopover1"
trigger="click"
:offset="[0, 8]"
>
<p
style="
font-size: 6px;
line-height: 20px;
width: 100px;
text-align: center;
"
>
{{ cardINfo.cardTitle[0] }}
</p>
<template #reference>
<p class="card-name-name">
{{ cardINfo.cardContent[0] }}
</p>
</template>
</van-popover>
<p class="depart">{{ cardINfo.cardContent[1] }}</p>
</div>
<div class="card-avatar">
<div class="avatar">
<van-image
round
width="2.3rem"
height="2.3rem"
:src="img11"
crossorigin="anonymous"
/>
</div>
<div class="command"></div>
</div>
</div>
<div class="card-icon">
<img src="../../assets/gzh.png" alt="" />
</div>
<div class="card-content">
<div class="common">
<img src="../../assets/wangluo.svg" alt="" />
<p>网址</p>
<p class="common1">
<a href=""> </a>
</p>
</div>
<div class="common">
<img src="../../assets/dianhua.svg" alt="" />
<p>{{ cardINfo.cardTitle[2] }}</p>
<p class="common1">
<a :href="'tel:' + cardINfo.cardContent[2]">{{
cardINfo.cardContent[2]
}}</a>
</p>
<img
src="../../assets/phone1.png"
alt=""
@click="callPhoneNumber"
style="margin-left: 3px; margin-top: -1px"
class="iphone"
/>
</div>
<div class="common three">
<img src="../../assets/youxiang.svg" alt="" class="email" />
<p>{{ cardINfo.cardTitle[3] }}</p>
<p class="common1">
{{ cardINfo.cardContent[3] }}
</p>
</div>
<div class="common" @click="Dh">
<img src="../../assets/shouye.svg" alt="" class="fz" />
<p class="address1">地址</p>
<div class="address">
</div>
</div>
</div>
</div>
<div class="main-advertise">
<img src="../../assets/text.png" alt="" class="text" />
</div>
</div>
</div>
<div class="bottom">
<div class="bottom-line"></div>
<div class="bottom-button">
<div class="one">
<img
src="../../assets/shu.svg"
alt=""
@click="$router.push('/company?type=0')"
/>
<p>公司简介</p>
</div>
<div class="two" @click="$router.push('/product1?type=0')">
<img src="../../assets/icon_xinyong_xianxing_jijin-129.svg" alt="" />
<p>产品介绍</p>
</div>
<div class="three" @click="goToCom">
<img src="../../assets/jingmeijianzhan.svg" alt="" />
<p>公司网站</p>
</div>
<div class="five" @click="generateImage">
<img src="../../assets/share.svg" alt="" class="share" />
<p>名片分享</p>
</div>
<div class="four" @click="Dh">
<img src="../../assets/address2.svg" alt="" />
<p>地图位置</p>
</div>
</div>
</div>
<van-overlay :show="show1" @click="show1 = false">
<div class="wrapper">
<div class="block">
<div>
<div v-if="qrcodeDataUrl" class="qrcode">
<img :src="qrcodeDataUrl" alt="QR Code" />
</div>
</div>
</div>
</div>
</van-overlay>
<van-overlay :show="imgShow" @click="imgShow = false">
<div class="wrapper">
<div class="block1">
<img :src="this.screen" alt="" />
</div>
</div>
</van-overlay>
<!-- <div class="cardList" @click="$router.push('/card')">名片夹</div> -->
<div class="split"></div>
<van-overlay :show="show2" @click="show2 = false">
<div class="wrapper" @click="show2 = false">
<div class="block">
<p class="name">
{{ cardINfo.cardContent[0] }}
</p>
</div>
</div>
</van-overlay>
</div>
</template>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
import html2canvas from 'html2canvas'
import { getCard, getSignature, getCardInfo } from '@/api/index'
import QRCode from 'qrcode'
export default {
data() {
return {
dragging: false,
img11:
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
startLeft: 0,
startTop: 0,
left: 290,
top: 470,
touchStarted: false,
cardINfo: {
cardId: 0,
cardTitle: ['名称', '职位', '电话', '邮箱'],
cardContent: []
},
screen: '',
imgShow: false,
showPopover: false,
img: require('@/assets/ava.jpg'),
avatar: '',
showPopover1: false,
show: false,
headIma: '',
qrcodeDataUrl: null,
text: '',
display: false,
show1: false,
show2: false,
display1: false,
color: false,
authName: ''
}
},
methods: {
goHome() {
this.$router.push('/card')
},
startDrag(event) {
const clientX = event.clientX || event.touches[0].clientX
const clientY = event.clientY || event.touches[0].clientY
this.dragging = true
this.startLeft = clientX - this.left
this.startTop = clientY - this.top
if (event.type === 'mousedown') {
event.preventDefault()
}
},
moveDrag(event) {
if (this.dragging) {
const clientX = event.clientX || event.touches[0].clientX
const clientY = event.clientY || event.touches[0].clientY
this.left = clientX - this.startLeft
this.top = clientY - this.startTop
}
},
stopDrag() {
this.dragging = false
},
handleClick() {
if (!this.dragging) {
this.goHome()
}
},
generateImage() {
this.$nextTick(() => {
this.imgShow = true
const elementToCapture = this.$refs.captureElement
console.log(elementToCapture)
html2canvas(elementToCapture, { scale: 2, useCORS: true }).then(
(canvas) => {
const dataUrl = canvas.toDataURL('image/png')
this.screen = dataUrl
}
)
})
},
toCardBox() {
window.location.href = localStorage.getItem('FontAddress') + '/card'
},
setting() {
this.$router.push({
name: 'setting', // 目标页面的名称
params: {
id: localStorage.getItem('cardId') // 将 id 作为参数传递给目标页面
}
})
},
async signW() {
const res = await getSignature({
url: window.location.href
})
window.wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.appid, // 必填,公众号的唯一标识
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.signature, // 必填,签名
jsApiList: ['updateAppMessageShareData'] // 必填,需要使用的JS接口列表
})
window.wx.ready(function () {
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
console.log('成功')
const cardIdWx = localStorage.getItem('cardId')
window.wx.updateAppMessageShareData({
title: 'vCard分享', // 分享标题
desc: '快来认识新朋友吧', // 分享描述
link:
localStorage.getItem('FontAddress') +
'/lookHome?cardId=' +
cardIdWx, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: localStorage.getItem('EndAddress') + '/image/logo.jpg', // 分享图标
success: function () {
// 设置成功
console.log('分享成功')
}
})
})
window.wx.error(function (res) {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
console.log('失败')
})
},
toURLGo(val) {
window.location.href = this.funData.funData[val].value
},
Dh() {
window.location.href =
'https://www.amap.com/search?id=B0FFK0FR9H&city=120111&geoobj=117.115175%7C39.094709%7C117.130035%7C39.101029&query_type=IDQ&query=%E5%A4%A9%E6%B4%A5%E5%A4%AA%E6%9E%81%E9%A3%8E%E6%8E%A7%E7%BD%91%E7%BB%9C%E7%A7%91%E6%8A%80%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8&zoom=17'
},
pop() {
this.display1 = !this.display1
},
callPhoneNumber() {
window.location.href = `tel:${this.tableData.tableData[3].value}`
},
showHiddenInfo() {
this.showFullText = !this.showFullText
},
generateQRCode() {
this.display = !this.display
this.show1 = !this.show1
const cardId = localStorage.getItem('cardId')
const FontAddress = localStorage.getItem('FontAddress')
this.text = FontAddress + '/lookHome?cardId=' + cardId
if (this.text) {
// 使用qrcode库生成二维码
QRCode.toDataURL(this.text, { width: 200 })
.then((url) => {
this.qrcodeDataUrl = url
})
.catch((err) => {
console.error('生成二维码失败:', err)
this.qrcodeDataUrl = null
})
} else {
this.qrcodeDataUrl = null
}
},
add() {
this.show = !this.show
},
skipUrl(val) {
if (val === 1) {
window.location.href = this.tableData.one
} else if (val === 2) {
window.location.href = this.tableData.two
} else if (val === 3) {
window.location.href = this.tableData.three
} else if (val === 4) {
window.location.href = this.tableData.four
} else if (val === 5) {
window.location.href = this.tableData.five
}
},
goToCom() {
window.location.href = ''
},
async getCardDetail(val, index) {
const cardId = localStorage.getItem('cardId')
const res = await getCard({
cardId: cardId
})
if (res != null) {
const authName = res.authName
if (authName != null) {
this.color = true
this.authName = authName
}
const cardContent = res.cardContent
const functContent = res.functContent
const EndAddress = localStorage.getItem('EndAddress')
this.avatar = EndAddress + '/cardImg/' + res.cardImg
if (cardContent != null) {
const obj = JSON.parse(cardContent)
this.tableData = obj
}
if (functContent != null) {
const objFunt = JSON.parse(functContent)
this.funData = objFunt
}
}
},
generateRandomPhoneNumber() {
const prefix = Math.floor(Math.random() * 90) + 10 // 生成三位数的前缀
const suffix = Math.floor(Math.random() * 9000) + 1000 // 生成四位数的后缀
return `1${prefix}****${suffix}`
},
// 在methods里面定义一个方法
getQueryString(variable) {
const index = window.location.href.indexOf('?') // 获取地址栏路径并进行分割
const query = window.location.href.substr(
index + 1,
window.location.href.length
)
const vars = query.split('&')
for (let i = 0; i < vars.length; i++) {
const pair = vars[i].split('=')
if (pair[0] === variable) {
return pair[1]
}
}
return false // 如果没有参数就返回false 值,就不会出现上边报错的情况了
}
},
async mounted() {
const cardId = localStorage.getItem('cardId')
const res = await getCardInfo({ cardId: cardId })
console.log(res)
this.cardINfo.cardContent = JSON.parse(res.cardContent)
console.log(this.cardINfo.cardContent)
this.headIma =
localStorage.getItem('EndAddress') + '/cardImg/' + res.cardImg
if (res.isHide === 1) {
this.cardINfo.cardContent[2] = 'www*****com'
this.cardINfo.cardContent[3] = this.generateRandomPhoneNumber()
this.cardINfo.cardContent[4] = '***@163.com'
}
},
computed: {
nameClass() {
return this.showFullText ? 'name expanded' : 'name'
}
}
}
</script>
<style scoped lang="scss">
a {
color: black;
}
.draggable-button {
/* ... */
position: fixed;
background-color: #abafb3;
color: white;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
user-select: none;
}
.address1 {
white-space: nowrap;
// margin-left: -2px;
}
.address {
display: flex;
flex: 1;
// font-size: 6px;
height: inherit;
margin-left: 5px;
width: 60vw;
word-wrap: break-word;
font-size: 12px;
margin-top: 0px;
padding: 0;
}
.block {
left: 23%;
position: relative;
top: 33vh;
}
.block1 {
left: 19%;
position: relative;
top: 33vh;
img {
width: 60vw;
}
}
.body {
font-family: 'Heiti SC';
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Heiti SC';
background-image: url('../../../static/bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.top {
width: 100vw;
height: 22vh;
display: flex;
margin-top: 1vh;
}
.middle {
width: 100vw;
height: 49vh;
display: flex;
flex-direction: column;
// background-color: green;
margin-top: 1vh;
/* justify-content: center; */
align-items: center;
}
.company-logo {
width: 80vw;
margin-left: -30px;
height: 10vh;
// border: 2px solid black;
.logo {
img {
width: 40%;
}
}
}
.main-content {
width: 88vw;
height: 34vh;
margin-top: 1vh;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
}
.main-top {
width: inherit;
height: 25vh;
display: flex;
flex-direction: column;
// background-color: blue;
}
.card-header {
width: inherit;
height: 10vh;
// background-color: aquamarine;
display: flex;
flex-direction: row;
.card-name {
width: 60vw;
height: inherit;
// background-color: blue;
.card-name-name {
font-size: 20px;
line-height: 10px;
padding-left: 20px;
letter-spacing: 10px;
font-weight: bold;
// padding-top: 0;
// padding-bottom: 0;
// margin-top: 0;
// margin-bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
height: 22px;
line-height: 22px;
width: 50vw;
}
.depart {
font-size: 12px;
line-height: 10px;
padding-left: 100px;
}
}
}
.card-icon {
width: inherit;
height: 5vh;
margin-top: 2vh;
// background-color: pink;
// display: flex;
flex-direction: row;
margin-left: -8px;
// justify-content: end;
img {
width: 80px;
margin-left: 71%;
margin-top: -6%;
}
}
.card-icon-icon {
width: 10vw;
height: inherit;
// background-color: azure;
margin-right: 6vw;
text-align: center;
// display: flex;
float: right;
// align-items: center;
margin-top: -4vh;
img {
width: 16px;
height: 16px;
}
}
.card-icon-icon1 {
width: 10vw;
height: inherit;
// background-color: azure;
margin-right: -10px;
text-align: center;
// display: flex;
float: right;
// align-items: center;
margin-top: -4vh;
img {
width: 16px;
height: 16px;
}
}
.card-avatar {
width: 30vw;
max-height: inherit;
border-radius: 100%;
// background-color: black;
margin-top: -7vh;
display: flex;
.command {
margin-top: 50px;
/* position: absolute; */
margin-left: -25px;
z-index: 1;
img {
height: 30px;
width: 30px;
}
}
}
.card-content {
width: inherit;
height: 10vh;
// background-color: rgb(255, 127, 255);
display: flex;
flex-direction: column;
align-items: center;
margin-top: -2vh;
}
.card-content {
.common {
width: 80vw;
height: 2vh;
margin-top: 0.5vh;
// background-color: coral;
display: flex;
img {
width: 16px;
height: 16px;
align-self: center;
padding-right: 5px;
}
.iphone {
width: 10px;
height: 10px;
}
p {
font-size: 12px;
// line-height: 0px;
align-self: center;
}
.common1 {
margin-left: 5px;
p {
font-size: 12px;
// line-height: 0px;
align-self: center;
}
}
}
}
.main-advertise {
width: inherit;
height: 7vh;
display: flex;
flex-direction: column;
justify-content: end;
img {
width: 45%;
padding-top: 1vh;
align-self: flex-end;
padding-right: 2vw;
}
}
.bottom {
width: 100vw;
height: 14.5vh;
display: flex;
// background-color: green;
margin-top: 18vh;
flex-direction: column;
}
.bottom-line {
width: inherit;
height: 2.5vh;
background-color: #0071bc;
}
.bottom-button {
width: inherit;
height: 9vh;
justify-content: center;
align-items: center;
display: flex;
flex-direction: row;
// background-color: purple;
}
.bottom-button {
div {
width: 50px;
height: 50px;
margin: 5px;
border-radius: 100%;
box-shadow: rgba(29, 31, 32, 0.2) 0px 8px 24px;
// background-color: black;
display: flex;
flex-direction: column;
img {
width: 30px;
height: 30px;
margin-top: 30px;
}
p {
font-size: 6px;
margin-top: 13px;
}
}
.one,
.two,
.three,
.four,
.five {
display: flex;
align-items: center;
justify-content: center;
}
.one {
p {
}
img {
}
}
.two {
p {
}
img {
}
}
.three {
img {
}
p {
}
}
.four {
img {
}
p {
}
}
.five {
img {
}
p {
}
}
}
</style>