jhlapp/pages/index/WxCode.vue

<template>
	<view style="display: flex;justify-content: center;">
		<view class="wx_code">
			<view class="wx_code_name">
				<view class="ellipsis">{{ enterpriseInfo.enterpriseName }}</view>
				<view class="user-name">{{ userInfo.name }}</view>
			</view>
			<view class="wx_code_scan"><image :src="QrSrc" mode="aspectFit" /></view>
			<view class="wx_code_tips"><text>扫一扫，立即使用小程序商城</text></view>
		</view>
		<view class="save-btn" @click="downloadFile">保存小程序码</view>
	</view>
</template>

<script>
import webUrl from '../../common/config.js';
export default {
	data() {
		return {
			QrSrc: ''
		};
	},
	computed: {
		userInfo() {
			return this.$store.state.userInfo;
		},
		enterpriseInfo() {
			return this.$store.state.enterprise;
		}
	},
	onLoad() {
		this.createwxaqrcode();
	},
	methods: {
		async createwxaqrcode() {
			let pathS = 'pages/index/index';
			this.$u.api
				.createwxaqrcode({
					path: pathS,
					params: this.userInfo.staffId + '_'
				})
				.then(res => {
					this.QrSrc = res.data.indexOf('https') > -1 ? res.data : webUrl.QRC_SRC + res.data;
				});
		},
		downloadFile() {
			uni.showLoading({
				title: '正在保存'
			});
			uni.downloadFile({
				url: this.QrSrc,
				success: res => {
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								});
							},
							fail: function() {
								uni.showToast({
									title: '保存失败，请稍后重试',
									icon: 'none'
								});
							}
						});
					}
				},
				fail: err => {
					uni.showToast({
						title: '保存失败，请稍后重试',
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.save-btn {
	width: 680upx;
	position: fixed;
	bottom: 30upx;
	left: 50%;
	transform: translateX(-50%);
	line-height: 80upx;
	text-align: center;
	color: #ffffff;
	background: $uni-color-primary;
	height: 80upx;
	border-radius: 8upx;
}
.wx_code {
	width: 660upx;
	background-color: #fff;
	margin-top: 160upx;
	border-radius: 10upx;

	.wx_code_name {
		margin: 50upx 0 40upx 50upx;
		font-size: 32upx;
		.user-name {
			font-size: 28upx;
			color: #666666;
			padding-top: 6upx;
		}
	}

	.wx_code_scan {
		width: 540upx;
		height: 540upx;
		margin: 0 auto;
	}

	.wx_code_scan image {
		width: 540upx;
		height: 540upx;
	}

	.wx_code_tips {
		margin: 50upx 0;
		font-size: 24upx;
		color: #999999;
		text-align: center;
	}
}
</style>