260 lines
5.8 KiB
Vue
260 lines
5.8 KiB
Vue
|
||
<template>
|
||
<view class="main">
|
||
<div id="myImage">
|
||
<view class="bg-card">
|
||
<image class="img" src="../../static/images/card-bg.png"></image>
|
||
<view class="content">
|
||
<view class="logo">
|
||
<image src="../../static/images/logo.png"></image>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
<view class="user-bottom">
|
||
<!-- <view class="user-atatar">
|
||
<image :src="userInfo.headPath"></image>
|
||
</view> -->
|
||
|
||
</view>
|
||
<div class="user-infos">
|
||
<view class="user" style="color: #ffff00;"> {{'会员编号'}}:{{ userInfo.memberCode }}</view>
|
||
<div class="user">{{'姓名'}}：{{ userInfo.memberName }}</div>
|
||
<div class="user">{{'等级'}}：{{ userInfo.pkGradeVal }}</div>
|
||
<div class="user">{{'国家'}}：{{ userInfo.pkCountryVal }}</div>
|
||
</div>
|
||
<div class="code">
|
||
{{'国家编码'}}：{{ userInfo.countryCode }}
|
||
</div>
|
||
|
||
<div class="logo-img" v-if="userInfo.headPath">
|
||
<img :src="userInfo.headPath" />
|
||
|
||
</div>
|
||
</view>
|
||
<view class="bg-card">
|
||
<image class="img" src="../../static/images/card-bg.png"></image>
|
||
<view class="content">
|
||
<view class="logo bh">
|
||
<!-- <image src="../../static/images/logo.png"></image> -->
|
||
{{'全球编号'}}：{{ userInfo.globalCode }}
|
||
</view>
|
||
|
||
|
||
</view>
|
||
<view class="logos">
|
||
<img v-if="userInfos.awardsIcon"
|
||
:src="userInfos.awardsIcon" />
|
||
<view class="award">{{ userInfo.pkAwardsVal }}</view>
|
||
</view>
|
||
<div class="code">
|
||
{{'注册时间'}}：{{ datatime(userInfo.registerTime) }}
|
||
</div>
|
||
<!-- <div class="time">
|
||
{{'注册时间'}}：{{ datatime(userInfo.registerTime) }}
|
||
</div> -->
|
||
</view>
|
||
</div>
|
||
<u-button type="success"
|
||
shape="circle"
|
||
class="btn"
|
||
@click="saveImage"
|
||
>{{'下载图片'}}</u-button>
|
||
<a id="link"></a>
|
||
<view style="height: 20rpx;"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as api from '@/config/login.js'
|
||
import { setToken } from '@/config/auth.js'
|
||
import store from '@/store'
|
||
import html2canvas from 'html2canvas'
|
||
export default {
|
||
data() {
|
||
return {
|
||
userInfo:'',
|
||
userInfos:'',
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getInfo()
|
||
this.getCardInfo()
|
||
},
|
||
methods: {
|
||
getCardInfo() {
|
||
api.getCard().then((res)=>{
|
||
this.userInfos = res.data;
|
||
if(res.data.gradeIconStr){
|
||
this.userInfos.gradeIconStr = 'data:image/png;base64,'+res.data.gradeIconStr
|
||
this.userInfos.gradeIconStr.replace(/[\r\n]/g, "")
|
||
}
|
||
if(res.data.awardsIconStr){
|
||
this.userInfos.awardsIconStr = 'data:image/png;base64,' +res.data.awardsIconStr
|
||
this.userInfos.awardsIconStr.replace(/[\r\n]/g, "")
|
||
}
|
||
|
||
})
|
||
},
|
||
datatime(value) {
|
||
var data = new Date(value)
|
||
const month =
|
||
data.getMonth() < 9 ? '0' + (data.getMonth() + 1) : data.getMonth() + 1
|
||
var date = data.getDate() <= 9 ? '0' + data.getDate() : data.getDate()
|
||
let dates = data.getFullYear() + '-' + month + '-' + date
|
||
return dates
|
||
},
|
||
getInfo(){
|
||
api.getInfo().then(res => {
|
||
if (res) {
|
||
this.userInfo = res.data
|
||
}
|
||
}).catch(error => {
|
||
reject(error)
|
||
})
|
||
},
|
||
saveImage() {
|
||
const options = {
|
||
backgroundColor: null, // null或transparent可将canvas背景设置为透明
|
||
}
|
||
html2canvas(document.querySelector('#myImage'), options).then(
|
||
(canvas) => {
|
||
const image = canvas
|
||
.toDataURL('image/png')
|
||
.replace('image/png', 'image/octet-stream')
|
||
const link = document.getElementById('link')
|
||
link.setAttribute('download', '电子会员卡.png')
|
||
link.setAttribute(
|
||
'href',
|
||
canvas
|
||
.toDataURL('image/png')
|
||
.replace('image/png', 'image/octet-stream')
|
||
)
|
||
link.click()
|
||
}
|
||
)
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.user{
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.user-infos{
|
||
position: absolute;
|
||
top: 80rpx;
|
||
left: 20rpx;
|
||
}
|
||
.logo-img{
|
||
position: absolute;
|
||
z-index: 1;
|
||
right: 50rpx;
|
||
top: 30rpx;
|
||
img{
|
||
width: 216rpx;
|
||
// height: 276rpx;
|
||
}
|
||
}
|
||
.logos{
|
||
right: 20%;
|
||
top: 10%;
|
||
position: absolute;
|
||
img{
|
||
// margin-top: -95rpx;
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
}
|
||
.award{
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.time{
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
position: absolute;
|
||
bottom: 20rpx;
|
||
right: 20rpx;
|
||
}
|
||
.code{
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
position: absolute;
|
||
bottom: 20rpx;
|
||
left: 20rpx;
|
||
}
|
||
page{
|
||
background-color: #f2f2f2;
|
||
}
|
||
.user-info{
|
||
margin-left: 20rpx;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
}
|
||
.user-bottom{
|
||
position: absolute;
|
||
bottom: 30rpx;
|
||
display: flex;
|
||
left: 30rpx;
|
||
width: 100%;
|
||
}
|
||
.cardNum{
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
}
|
||
.logo{
|
||
image{
|
||
width:50rpx;
|
||
height: 35rpx;
|
||
margin:20rpx 0 0 20rpx;
|
||
}
|
||
|
||
}
|
||
.bh{
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
padding: 20rpx;
|
||
}
|
||
.content{
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.logo{
|
||
position: absolute;
|
||
}
|
||
.bg-card{
|
||
position: relative;
|
||
width: 690rpx;
|
||
height: 410rpx;
|
||
margin: 30rpx auto;
|
||
.img{
|
||
position: absolute;
|
||
width: 690rpx;
|
||
height: 410rpx;
|
||
}
|
||
}
|
||
.btn{
|
||
background-color: #005BAC;
|
||
border: none;
|
||
height: 92rpx;
|
||
line-height: 92rpx;
|
||
font-size:30rpx;
|
||
margin: 40rpx auto;
|
||
width: 690rpx;
|
||
}
|
||
.user-atatar{
|
||
image{
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
</style> |