142 lines
4.4 KiB
Vue
142 lines
4.4 KiB
Vue
<template>
|
|
<view>
|
|
<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="transparent">
|
|
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
|
<view style="padding-left: 15rpx;" @click="goBack()">
|
|
<text class="tn-icon-left" style="font-size: 40rpx;color: #000000;"></text>
|
|
</view>
|
|
<view
|
|
style="letter-spacing: 1px;font-size: 34rpx;text-align: center;width: 83%;font-weight: bold;color: #000000;">
|
|
<text>协会证书</text>
|
|
</view>
|
|
</view>
|
|
</tn-nav-bar>
|
|
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
|
<view style="padding:30rpx 80rpx;">
|
|
<l-painter ref="painter">
|
|
<l-painter-view>
|
|
<l-painter-text :text="info.nikename"
|
|
css="width: 100%;position:absolute;top:350rpx;text-align:center;color: #D82212; font-size: 70rpx; fontWeight: bold" />
|
|
<l-painter-text :text="info.number_of_sessions"
|
|
css="width: 100%;position:absolute;top:460rpx;text-align:center;color: #484848; font-size: 25rpx; fontWeight: bold" />
|
|
<l-painter-view css="position:absolute;top:630rpx;text-align:center;width: 100%;">
|
|
<l-painter-image src="/static/1001.png" css="object-fit: cover; height: 70rpx;" />
|
|
<l-painter-text :text="info.position_name"
|
|
css="color: #484848; font-size: 50rpx; fontWeight: bold" />
|
|
<l-painter-image src="/static/1002.png" css="object-fit: cover; height: 70rpx;" />
|
|
</l-painter-view>
|
|
<l-painter-text :text="info.year[0]"
|
|
css="position:absolute;top:735rpx;left:120rpx;color: #E4C777; font-size: 23rpx;" />
|
|
<l-painter-text :text="info.year[1]"
|
|
css="position:absolute;top:735rpx;right:120rpx;color: #E4C777; font-size: 23rpx;" />
|
|
<l-painter-view css="position:absolute;bottom:135rpx;text-align:center;width: 100%;">
|
|
<l-painter-image src="/static/tu23.png"
|
|
css="object-fit: cover; object-position: 50% 50%; width: 100rpx;" />
|
|
</l-painter-view>
|
|
<l-painter-text :text="info.membercode"
|
|
css="position:absolute;bottom:95rpx;color: #484848; font-size: 22rpx;width: 100%;text-align:center;" />
|
|
<l-painter-image src="/static/1000.jpg"
|
|
css="object-fit: cover; object-position: 50% 50%; width: 100%; height: 100%; " />
|
|
</l-painter-view>
|
|
</l-painter>
|
|
</view>
|
|
<view
|
|
style="position: fixed;bottom:0px;width: 100%;background-color: #FFFFFF;box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(186,189,199,0.2);padding:30rpx 30rpx 40rpx 30rpx;">
|
|
<view class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-center">
|
|
<view @click="dImg"
|
|
style="line-height: 80rpx;height: 80rpx;font-size: 32rpx;font-weight: bold;text-align: center;width: 80%;color: #ffffff;;background: #3056D3;border: 1rpx solid #3056D3;border-radius:90rpx;">
|
|
<text>保存图片</text>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
handleMembercode,
|
|
} from "@/util/api";
|
|
export default {
|
|
data() {
|
|
return {
|
|
topCurrent: 0,
|
|
info: {}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getHandleMembercode();
|
|
},
|
|
methods: {
|
|
getHandleMembercode() {
|
|
handleMembercode()
|
|
.then(res => {
|
|
var key = res.data;
|
|
key.position_name = this.spacedString(key.position_name);
|
|
//console.log(this.spacedString(key.position_name));
|
|
this.info = key;
|
|
console.log(res);
|
|
})
|
|
.catch(error => {
|
|
uni.showToast({
|
|
title: error,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
})
|
|
},
|
|
spacedString(originalString) {
|
|
let result = originalString.split('');
|
|
let key = '';
|
|
for (let i = 0; i < result.length; i++) {
|
|
if (i > 0) {
|
|
key += ' ';
|
|
}
|
|
key += result[i];
|
|
}
|
|
return key;
|
|
},
|
|
dImg() {
|
|
this.$refs.painter.canvasToTempFilePathSync({
|
|
// 在nvue里是jpeg
|
|
fileType: "png",
|
|
pathType: 'url',
|
|
quality: 1,
|
|
success: (res) => {
|
|
console.log(res.tempFilePath);
|
|
// 非H5 保存到相册
|
|
// H5 提示用户长按图另存
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: res.tempFilePath,
|
|
success: function() {
|
|
uni.showToast({
|
|
title: '保存成功！',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
},
|
|
fail: function(res) {
|
|
console.log(res);
|
|
}
|
|
});
|
|
},
|
|
});
|
|
},
|
|
goBack() {
|
|
if (getCurrentPages().length > 1) {
|
|
uni.navigateBack()
|
|
} else {
|
|
uni.redirectTo({
|
|
url: '/pages/index/index'
|
|
})
|
|
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style> |