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>
|