shengqingqixie-wechat/pages/packageC/info/certificate.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>