web-africa-h5/pages/user/electron-card/index.vue

536 lines
14 KiB
Vue
Raw Permalink Normal View History

2025-03-21 14:49:01 +08:00
<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>