vue-insagent-app/pages/tools/addStaff/codeDownload.vue

<template>
	<view :style="getHeight">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="content d-flex flex-column a-center j-center">
			<image src="/static/image/addStaff/face_sao.png" mode="widthFix" lazy-load style="width: 500upx;"></image>
			<image :src="recommendImg" mode="widthFix" lazy-load style="width: 450upx;"></image>
			<view>微信扫描二维码，即可下载！</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex"
	import QR from "@/common/wxqrcode.js"
	export default {
		data() {
			return {
				recommendImg: ""
			}
		},
		computed: {
			...mapState(['userInfo']),
			getHeight() {
				let height = uni.getSystemInfoSync().windowHeight;
				return `height: ${height}px;`;
			}
		},
		async onLoad() {
			var id = this.userInfo.sysUser.id;
			let pageRequest = {
				pageNum: 1,
				pageSize: 50,
				columnFilters: {
					apptype: {
						name: "apptype",
						value: "apk",
					},
					appid: {
						name: "appid",
						value: "__UNI__D4FE29A",
					}
				}
			};
			let getquote = await this.$http.post('/sysVersion/findPage', pageRequest);
			let url = getquote.data.content[0].path;
			this.recommendImg = QR.createQrCodeImg(url, {
				size: parseInt(200) //二维码大小  
			})
		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
		}
	}
</script>

<style>
	.content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -60%);
	}

	.content>image {
		margin-top: 30upx;
		margin-bottom: 30upx;
	}

	.content>view {
		width: 400upx;
		color: red;
		text-align: center;
	}
</style>