536 lines
14 KiB
Vue
536 lines
14 KiB
Vue
<template>
|
||
<!-- #ifdef APP-PLUS -->
|
||
<view class="ev-w-100vw">
|
||
<view @click="getElRect1('Poster1')" class="ev-m-32 ev-fr-s-c pt20">
|
||
<view class="card1 Poster1 d-c d-b-s pr">
|
||
<image crossorigin="anonymous" data-etype="image" :data-enode="info.img1" :src="info.img1" mode="aspectFit" class="card-bg Poster1"></image>
|
||
<image
|
||
v-if="detail.headPath"
|
||
crossorigin="anonymous"
|
||
data-etype="image"
|
||
:data-enode="detail.headPath"
|
||
:src="detail.headPath"
|
||
class="headPath Poster1"
|
||
mode="widthFix"
|
||
></image>
|
||
<view style="z-index: 1;">
|
||
<image crossorigin="anonymous" data-etype="image" :data-enode="info.img2" :src="info.img2" mode="widthFix" class="icon-img Poster1"></image>
|
||
<view :data-enode="$t('MN_T_1') + '：' + (detail.memberCode || '')" class="Poster1 mb20 pr" style="z-index: 1;color: rgb(255, 255, 0);">
|
||
{{ $t('MN_T_1') + '：' + (detail.memberCode || '') }}
|
||
</view>
|
||
<view :data-enode="$t('PER_DA_14') + '：' + (detail.memberName || '')" class="Poster1 mb20 pr white" style="z-index: 1;">
|
||
{{ $t('PER_DA_14') + '：' + (detail.memberName || '') }}
|
||
</view>
|
||
<view :data-enode="$t('PER_DA_15') + '：' + (detail.pkGradeVal || '')" class="Poster1 mb20 pr white" style="z-index: 1;">
|
||
{{ $t('PER_DA_15') + '：' + (detail.pkGradeVal || '') }}
|
||
</view>
|
||
<view :data-enode="$t('S_C_83') + '：' + (detail.pkCountryVal || '')" class="Poster1 mb20 pr white" style="z-index: 1;">
|
||
{{ $t('S_C_83') + '：' + (detail.pkCountryVal || '') }}
|
||
</view>
|
||
</view>
|
||
<view class="d-s-c">
|
||
<view :data-enode="$t('S_L_4') + '：'" class="Poster1 pr white" style="z-index: 1;">{{ $t('S_L_4') + '：' }}</view>
|
||
<view :data-enode="detail.countryCode || ''" class="Poster1 f28 ml10 pr white" style="z-index: 1;">{{ detail.countryCode || '' }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="card2 Poster1 d-c d-b-s pr">
|
||
<view class="d-s-c">
|
||
<view :data-enode="$t('PER_DA_18') + '：'" class="Poster1 white pr" style="z-index: 1">{{ $t('PER_DA_18') + '：' }}</view>
|
||
<view :data-enode="detail.globalCode || ''" class="Poster1 white pr ml10 f28" style="z-index: 1">{{ detail.globalCode || '' }}</view>
|
||
</view>
|
||
|
||
<!-- <image crossorigin="anonymous" data-etype="image" :data-enode="info.img2" :src="info.img2"
|
||
mode="widthFix" class="icon-img Poster1" style="margin-bottom: 0;flex-shrink: 0;"></image> -->
|
||
<image crossorigin="anonymous" data-etype="image" :data-enode="info.img1 || ''" :src="info.img1 || ''" mode="aspectFit" class="card-bg Poster1"></image>
|
||
<view class="awardsIcon-box d-c d-c-c">
|
||
<image
|
||
crossorigin="anonymous"
|
||
data-etype="image"
|
||
:data-enode="detail.awardsIcon || ''"
|
||
:src="detail.awardsIcon || ''"
|
||
mode="widthFix"
|
||
class="awardsIcon Poster1"
|
||
></image>
|
||
<!-- <view :data-enode="detail.pkAwardsVal || ''" class="Poster1 mt20 pr white">{{ detail.pkAwardsVal || '' }}</view> -->
|
||
<view :data-enode="detail.pkAwardsVal" class="Poster1 white" style="z-index: 1;">{{ detail.pkAwardsVal }}</view>
|
||
</view>
|
||
<view class="d-b-e ww100" style="height: 412rpx;">
|
||
<view>
|
||
<view :data-enode="$t('S_L_5') + '：' + (detail.registerTime || '')" class="Poster1 pr white" style="z-index: 1;">
|
||
{{ $t('S_L_5') + '：' + (detail.registerTime || '') }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<button class="normal-sub-btn mt20" @click="downImage('Poster1')">{{ $t('S_C_45') }}</button>
|
||
|
||
<Eposter width="750" height="1334" :list="list" backgroundColor="rgb(255, 255, 255)" @on-success="onSuccess" @on-error="onErrorFunc" ref="Eposter"></Eposter>
|
||
<!-- <image crossorigin="anonymous" class="ev-w-100vw" :src="posterImg" mode="widthFix"></image> -->
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef H5 -->
|
||
<view class="main">
|
||
<div id="myImage">
|
||
<view class="bg-card">
|
||
<image class="img" src="/static/bg/ele-user.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;">{{ $t('MN_T_1') }}:{{ userInfo.memberCode }}</view>
|
||
<div class="user">{{ $t('PER_DA_14') }}：{{ userInfo.memberName }}</div>
|
||
<div class="user">{{ $t('ENU_PER_TY_1') }}：{{ userInfo.pkGradeVal }}</div>
|
||
<div class="user">{{ $t('S_C_83') }}：{{ userInfo.pkCountryVal }}</div>
|
||
</div>
|
||
<div class="code">{{ $t('S_L_4') }}：{{ 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/bg/ele-user.png"></image>
|
||
<view class="content">
|
||
<view class="logo bh">
|
||
<!-- <image src="../../static/images/logo.png"></image> -->
|
||
{{ $t('PER_DA_18') }}：{{ userInfo.globalCode }}
|
||
</view>
|
||
</view>
|
||
<view class="logos">
|
||
<image crossorigin="" v-if="userInfos.awardsIcon" :src="userInfos.awardsIcon"></image>
|
||
<view class="award">{{ userInfo.pkAwardsVal }}</view>
|
||
</view>
|
||
<div class="code">{{ $t('S_L_5') }}：{{ datatime(userInfo.registerTime) }}</div>
|
||
<!-- <div class="time">
|
||
{{$t('S_L_5')}}：{{ datatime(userInfo.registerTime) }}
|
||
</div> -->
|
||
</view>
|
||
</div>
|
||
<u-button type="success" shape="circle" class="btn" @click="saveImage">{{ $t('S_C_45') }}</u-button>
|
||
<a id="link"></a>
|
||
<view style="height: 20rpx;"></view>
|
||
</view>
|
||
<!-- #endif -->
|
||
</template>
|
||
|
||
<script>
|
||
import Eposter from '@/components/evils-el-poster/Poster.vue';
|
||
import img1 from '@/static/bg/ele-user.png';
|
||
import img2 from '@/static/bg/ele-logo.png';
|
||
import html2canvas from 'html2canvas';
|
||
export default {
|
||
components: {
|
||
Eposter
|
||
},
|
||
data() {
|
||
return {
|
||
list: [],
|
||
info: {
|
||
img1: img1,
|
||
img2: img2,
|
||
name: '',
|
||
time: '',
|
||
desc: ''
|
||
},
|
||
detail: {
|
||
memberCode: '',
|
||
memberName: '',
|
||
registerTime: '',
|
||
pkCountry: 1,
|
||
pkCountryVal: '',
|
||
countryCircularIcon: '',
|
||
countrySquareIcon: '',
|
||
pkSettleCountry: 1,
|
||
pkSettleCountryVal: '',
|
||
settleCountryCircularIcon: '',
|
||
settleCountrySquareIcon: '',
|
||
pkGrade: 0,
|
||
pkGradeVal: '',
|
||
pkAwards: 0,
|
||
pkAwardsVal: '',
|
||
awardsIcon: '',
|
||
currencyIcon: '',
|
||
registerAuthority: 0,
|
||
registerFans: 1,
|
||
registerShare: 1,
|
||
headPath: '',
|
||
consumeAchieve: '',
|
||
payTime: '',
|
||
globalCode: '',
|
||
countryCode: ''
|
||
},
|
||
posterImg: '',
|
||
downImg: [],
|
||
userInfo: '',
|
||
userInfos: ''
|
||
};
|
||
},
|
||
computed: {},
|
||
onLoad() {
|
||
this.getData();
|
||
|
||
},
|
||
methods: {
|
||
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();
|
||
});
|
||
},
|
||
getCard(){
|
||
let self = this;
|
||
self._get('member/api/member/get-card', {}, res => {
|
||
self.userInfos.gradeIcon = 'data:image/png;base64,' + res.data.gradeIconStr;
|
||
self.userInfos.awardsIcon = 'data:image/png;base64,' + res.data.awardsIconStr;
|
||
});
|
||
},
|
||
getData() {
|
||
let self = this;
|
||
self._get('member/api/member/get-info', {}, res => {
|
||
// if (self.detail.headPath) {
|
||
// self.getImg(self.detail.headPath, 'headPath');
|
||
// }
|
||
// if (self.detail.awardsIcon) {
|
||
// self.getImg(self.detail.awardsIcon, 'awardsIcon');
|
||
// }
|
||
// self.detail.headPath = '/static/bg/card1.png';
|
||
// self.detail.awardsIcon = '/static/bg/card2.png';
|
||
|
||
// #ifndef H5
|
||
self.detail = res.data;
|
||
console.log(self.detail);
|
||
// #endif
|
||
// #ifdef H5
|
||
self.userInfos = res.data;
|
||
self.userInfo = res.data;
|
||
// if (res.data.gradeIconStr) {
|
||
// self.userInfos.gradeIconStr = 'data:image/png;base64,' + res.data.gradeIconStr;
|
||
// self.userInfos.gradeIconStr.replace(/[\r\n]/g, '');
|
||
// }
|
||
// if (res.data.awardsIconStr) {
|
||
// self.userInfos.awardsIconStr = 'data:image/png;base64,' + res.data.awardsIconStr;
|
||
// self.userInfos.awardsIconStr.replace(/[\r\n]/g, '');
|
||
// }
|
||
// #endif
|
||
// #ifdef H5
|
||
self.getCard();
|
||
// #endif
|
||
});
|
||
},
|
||
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;
|
||
},
|
||
getImg(url, name) {
|
||
uni.getImageInfo({
|
||
src: url,
|
||
success: res => {
|
||
console.log('res11111', res);
|
||
this.detail[name] = res.path;
|
||
},
|
||
fail: res => {
|
||
this.detail[name] = '';
|
||
uni.hideLoading();
|
||
console.log('res', res.errMsg);
|
||
}
|
||
});
|
||
},
|
||
downImage(elClass) {
|
||
this.$refs.Eposter.createForElRect(elClass, false);
|
||
},
|
||
getElRect1(elClass) {
|
||
this.$refs.Eposter.createForElRect(elClass, false);
|
||
},
|
||
onSuccess(val) {
|
||
console.log('success ');
|
||
this.posterImg = val;
|
||
this.downloadImg(this.posterImg);
|
||
},
|
||
startDownload(item) {
|
||
let listData = [];
|
||
listData = [item];
|
||
let self = this;
|
||
uni.showLoading({
|
||
title: self.$t('S_C_63')
|
||
});
|
||
self.downImg = [];
|
||
if (listData.length > 0) {
|
||
let n = 0;
|
||
listData.forEach((item, index) => {
|
||
console.log(listData);
|
||
uni.downloadFile({
|
||
//获得的临时地址
|
||
url: item,
|
||
success: res => {
|
||
n++;
|
||
console.log('获取url', res);
|
||
if (res.statusCode == 200) {
|
||
self.downImg = [...self.downImg, res.tempFilePath];
|
||
if (listData.length == n) {
|
||
uni.hideLoading();
|
||
self.downloadImg();
|
||
}
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
title: self.$t('w_0408')
|
||
});
|
||
console.log(res);
|
||
}
|
||
},
|
||
fail(err) {
|
||
n++;
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
title: self.$t('w_0408')
|
||
});
|
||
console.log(err);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
self.sharePop = true;
|
||
},
|
||
downloadImg() {
|
||
let self = this;
|
||
let n = 0;
|
||
uni.showLoading({
|
||
title: self.$t('w_0413')
|
||
});
|
||
self.downImg = [this.posterImg];
|
||
self.downImg.forEach((item, index) => {
|
||
// 图片保存到本地
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: item,
|
||
success(data) {
|
||
n++;
|
||
if (n == self.downImg.length) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: self.$t('w_0311'),
|
||
duration: 2000
|
||
});
|
||
uni.hideLoading();
|
||
}
|
||
},
|
||
fail(err) {
|
||
if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
|
||
uni.showToast({
|
||
title: self.$t('w_0412'),
|
||
icon: 'none',
|
||
duration: 1000
|
||
});
|
||
setTimeout(() => {
|
||
uni.openSetting();
|
||
}, 1000);
|
||
}
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
title: self.$t('w_0406')
|
||
});
|
||
return;
|
||
},
|
||
complete(res) {
|
||
console.log('complete');
|
||
}
|
||
});
|
||
});
|
||
},
|
||
onErrorFunc(err) {
|
||
console.log(`err`, err);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/* #ifndef H5 */
|
||
.card1 {
|
||
width: 665rpx;
|
||
height: 387rpx;
|
||
position: relative;
|
||
margin: 20rpx auto;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.card2 {
|
||
width: 665rpx;
|
||
height: 387rpx;
|
||
position: relative;
|
||
margin: 20rpx auto;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.icon-img {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 48rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.awardsIcon-box {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 5%;
|
||
z-index: 0;
|
||
}
|
||
|
||
.awardsIcon {
|
||
width: 222rpx;
|
||
}
|
||
|
||
.headPath {
|
||
width: 210rpx;
|
||
// height: 210rpx;
|
||
// border-radius: 15rpx;
|
||
position: absolute;
|
||
right: 24rpx;
|
||
top: 8rpx;
|
||
z-index: 0;
|
||
}
|
||
|
||
.card-bg {
|
||
width: 665rpx;
|
||
height: 387rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 0;
|
||
}
|
||
/* #endif */
|
||
/* #ifdef H5 */
|
||
.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;
|
||
image {
|
||
// 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: #fb3024;
|
||
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%;
|
||
}
|
||
}
|
||
/* #endif */
|
||
</style>
|