web-zk-h5/pages/memberCard/index.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>