浅念
269 lines
6.9 KiB
Vue
269 lines
6.9 KiB
Vue
<template>
|
|
<view>
|
|
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000"
|
|
backgroundColor="#fff" :statusBar="true" :title="$t('navbar.businesscard')"></uni-nav-bar>
|
|
<view class="card">
|
|
<view class="img_top" ref="poster" id="poster">
|
|
<view class="name">
|
|
<view class="left">
|
|
<view class="title">
|
|
<view class="leftbg"></view>
|
|
<view>{{userinfo.name}}</view>
|
|
</view>
|
|
<view class="ftitle">{{userinfo.position}}</view>
|
|
</view>
|
|
<view>
|
|
<image :src="imageSrc" mode="" crossOrigin="anonymous" ></image>
|
|
</view>
|
|
</view>
|
|
<view class="conts">
|
|
<view class="coles">
|
|
<image src="/static/image/mine/phone.png" mode=""></image>
|
|
<view class="">{{userinfo.mobile}}</view>
|
|
</view>
|
|
<view class="coles">
|
|
<image src="/static/image/mine/email.png" style="height:13px;" mode=""></image>
|
|
<view class="">{{userinfo.email}}</view>
|
|
</view>
|
|
<view class="coles">
|
|
<image src="/static/image/mine/addr.png" style="height:18px;width: 14px;" mode=""></image>
|
|
<view class="">{{userinfo.country_name}}</view>
|
|
</view>
|
|
<view class="coles">
|
|
<image src="/static/image/mine/word.png" style="height:16px;width: 16px;" mode=""></image>
|
|
<view class="">HTTPS://HESUCAR.COM</view>
|
|
</view>
|
|
<view class="coles">
|
|
<view class="">{{userinfo.company}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="code">
|
|
<image :src="imageSrcewm" mode="" crossOrigin="anonymous" ></image>
|
|
<view>{{userinfo.socialize==null||userinfo.socialize=='null'?'':userinfo.socialize}}</view>
|
|
</view>
|
|
<!-- <view class="code" :class=" activeImg === share_one ? 'code_one' : activeImg === share_two ? 'code_two' : activeImg === share_three ? 'code_three' : 'code_one'">
|
|
<qrcode-vue :value="codeUrl" :size="70"></qrcode-vue>
|
|
</view> -->
|
|
</view>
|
|
|
|
</view>
|
|
<view class="foot">
|
|
<button class="btn" @click="goDown">{{$t('download')}}</button>
|
|
</view>
|
|
<!-- 手机端预览容器 -->
|
|
<view v-if="showPreview" class="preview-mask" @click="showPreview = false">
|
|
<image :src="previewUrl" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { request,showToast } from '@/api/apiT.js'
|
|
import html2canvas from 'html2canvas';
|
|
export default {
|
|
data() {
|
|
return {
|
|
userinfo:{},
|
|
showPreview: false,
|
|
previewUrl: '',
|
|
imageSrc:'',
|
|
imageSrcewm:'',
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getinfo()
|
|
},
|
|
methods: {
|
|
leftClick(){
|
|
uni.navigateBack({})
|
|
},
|
|
getinfo(){
|
|
var that= this;
|
|
request({
|
|
url:'user/getInfo',
|
|
method:'get',
|
|
}).then(res => {
|
|
that.userinfo = res.data.data;
|
|
that.downloadImageToLocal(res.data.data.avatar_url,'imageSrc')
|
|
that.downloadImageToLocal(res.data.data.socialize_pic_url,'imageSrcewm')
|
|
|
|
})
|
|
},
|
|
async downloadImageToLocal(imageUrl,item) {
|
|
try {
|
|
// 1. 下载图片到临时路径
|
|
const { tempFilePath } = await new Promise((resolve, reject) => {
|
|
uni.downloadFile({
|
|
url: imageUrl,
|
|
success: resolve,
|
|
fail: reject,
|
|
});
|
|
});
|
|
|
|
// 2. 返回临时路径（可直接用于 <image> 显示）
|
|
// console.log('下载成功，临时路径:', tempFilePath);
|
|
if(item =='imageSrc'){
|
|
this.imageSrc = tempFilePath;
|
|
}else{
|
|
this.imageSrcewm = tempFilePath;
|
|
}
|
|
|
|
} catch (err) {
|
|
// console.error('下载失败:', err);
|
|
throw new Error('图片下载失败');
|
|
}
|
|
},
|
|
downloadImage(url, canvas) {
|
|
const filename1 = '_doc/' + new Date().getTime() + '.png' // url为时间戳命名方式
|
|
if (uni.getSystemInfoSync().platform === 'h5') {
|
|
// 创建一个隐藏的 <a> 标签
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = filename1;
|
|
// 触发点击事件
|
|
link.click();
|
|
}else {
|
|
canvas.toBlob((blob) => {
|
|
const blobUrl = URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = blobUrl;
|
|
link.download = filename1;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
URL.revokeObjectURL(blobUrl); // 释放内存
|
|
}, 'image/png');
|
|
}
|
|
},
|
|
goDown(){
|
|
const element = document.getElementById('poster');
|
|
var that= this
|
|
html2canvas(element, {
|
|
backgroundColor: '#f5f5f5', //海报的背景颜色
|
|
useCORS: true ,// 允许跨域
|
|
allowTaint: true, // 允许污染画布
|
|
scale: 2, // 提高清晰度
|
|
logging: false // 关闭日志（可选）
|
|
}).then(canvas => {
|
|
// canvas 其实就是我们所讲的res 的意思 返回报文的意思
|
|
let baseImg = canvas.toDataURL('image/png')
|
|
uni.showModal ({
|
|
title: this.$t('downmp'),
|
|
content: this.$t('downmpmsg'),
|
|
cancelText: this.$t('cancel'),
|
|
confirmText: this.$t('confirm'),
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
that.downloadImage(baseImg,canvas);
|
|
} else if (res.cancel) {
|
|
// console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.card{
|
|
padding:0px 15px;
|
|
margin-bottom: 75px;
|
|
}
|
|
.img_top{
|
|
background-image: url('/static/image/mine/cardbg.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
text-align: center;
|
|
position: relative;
|
|
width:100%;
|
|
height:1080rpx;
|
|
padding-top: 40rpx;
|
|
.leftbg{
|
|
width: 8px;
|
|
height: 34px;
|
|
background: #3C4169;
|
|
margin-right: 15px;
|
|
}
|
|
.name{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
margin: 0px 25px 0px 0px;
|
|
.left{
|
|
text-align: left;
|
|
}
|
|
.title{
|
|
color: #3C4169;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.ftitle{
|
|
color: #fff;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
margin-top: 20px;
|
|
background: #3C4169;
|
|
border-radius: 18px;
|
|
margin-left: 20px;
|
|
padding: 3px 15px;
|
|
display: inline-block;
|
|
}
|
|
image{
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.conts{
|
|
padding: 15px 25px 10px;
|
|
line-height: 32px;
|
|
color: #3C4169;
|
|
.coles{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
image{
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
.code{
|
|
// text-align: center;
|
|
padding:0px 15px;
|
|
width: 26%;
|
|
color: #3C4169;
|
|
font-size: 14px;
|
|
image{
|
|
width: 70px;
|
|
height: 70px;
|
|
}
|
|
}
|
|
}
|
|
.foot{
|
|
position: fixed;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
height: 75px;
|
|
background: #FFFFFF;
|
|
z-index: 1;
|
|
}
|
|
.btn{
|
|
background: linear-gradient(to right, #3471FF, #6776FF);
|
|
color: white;
|
|
border-radius: 50px;
|
|
width: 92%;
|
|
margin-bottom: 40px;
|
|
margin: 15px 4%;
|
|
font-size: 28rpx;
|
|
height: 88rpx;
|
|
line-height:88rpx;
|
|
}
|
|
</style>
|