cqcarbonwxapp/pages/usercenter/certificateList/certificate/certificate.vue

<template>
	<view class="content">
		<web-view v-if="info.url" class="web-view" :src="info.url"></web-view>
		<view class="btns">
			<!-- <button class="my-btn" @click="$api.goto('/pages/home/home', '', true)">首页</button> -->
			<!-- <button class="my-btn" type="gradient" @tap="$api.goto('/pages/usercenter/certificateList/certificateList')">我的证书</button> -->
			<!--#ifdef H5-->
			<!-- <button class="my-btn" type="gradient" @tap="share" v-show="$api.clientType.isWeiXin">分享证书</button> -->
			<!--#endif-->
		</view>
		<!--#ifdef H5-->
		<!-- <view v-show="showShare" class="share-bg" @tap="showShareFun"></view> -->
		<!--#endif-->
	</view>
</template>

<script>
export default {
	data() {
		return {
			info: {
				url: ''
			},
			//#ifdef H5
			showShare:false,
			//#endif
		};
	},
	onLoad(e) {
		const data = this.$api.getE();
		this.info = Object.assign(this.info, data);
		//自定义证书ID字段  orderId
		//通过订单id获取证书信息
		uni.showLoading({
			title: '正在获取证书信息'
		});
		this.$api
			.$http({
				url: '/wap/order/getCredentialByOrderId',
				data: {
					orderId: data.orderId
				}
			})
			.then(res => {
				const info = res.data instanceof Object ? res.data : {};
				this.info = Object.assign(this.info, res.data);
				if (res.code == 0) {
					//更新缓存信息
					uni.setStorageSync(data.orderId, info);
					//调用生成
					this.info.url = '/static/html2canvas/index.html?key=' + data.orderId;
				} else {
					uni.hideLoading();
				}
			});
	},
	//标题栏按钮监听
	onNavigationBarButtonTap(e) {
		this.$api.gohome(e);
	},
	methods: {
		//#ifdef H5
		showShareFun(){
			this.showShare = !this.showShare;
		},
		share() {
			//显示菜单
			this.$wxApi.showMenu();
			this.showShareFun();
			//注册分享数据
			this.$wxApi.share({
				orderId: this.info.orderId
			});
		}
		//#endif
	}
};
</script>

<style lang="scss">
.content {
	.btns {
		position: absolute;
		top: 88%;
		width: 100%;
		display: flex;
		z-index: 1;
		button {
			flex: 1;
			margin: 0 10% 10% 10%;
		}
	}
}
.web-view {
	box-sizing: border-box;
}
.share-bg{
	position: fixed;
	z-index: 998;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	background: rgba(0,0,0,.7);
	box-sizing: border-box;
	&::after{
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		// background: url(../../../../static/img/share-bg.png) no-repeat top right;
		background-size: 80% auto;
	}
}
</style>