guanmao-wxapp/pages/mine/mallCode.vue

<template>
	<view class="app-container">
		<view class="card-container">
			<view class="top">
				<view class="title">请扫描进入商城</view>
				<view class="main">
					<image src="/static/bg_logo.png" class="mall"></image>
					<image :src="qrCode" class="code"></image>
					<view class="btn" @tap="save()">保存二维码</view>
				</view>
				<view class="info">
					<view class="name">{{configInfo.minAppName}}</view>
					<view class="text">小程序二维码</view>
				</view>
			</view>
			<view class="bottom">
				<image :src="configInfo.minLogo2" mode="heightFix"></image>
			</view>
		</view>
		<view class="tips">扫一扫二维码，进入商城小程序</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	
	export default {
		data() {
			return {
				configInfo: uni.getStorageSync('configInfo'),
				qrCode: '',
			}
		},
		computed:{
			...mapState(['userInfo', 'isLogin', 'userId']),
		},
		
		onLoad() {
			this.getDetail();
		},
		
		methods: {
			// 获取个人信息
			getDetail() {
				this.$axios({
					url: '/user/qrcode/bind',
					method: 'get',
					params: {
						userId: this.userId
					}
				}).then(res => {
					this.qrCode = res.data;
				})
			},
			
			// 保存图片
			save() {
				uni.downloadFile({
				    url: this.qrCode,
				    success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								this.$successToast('保存成功');
							}
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.app-container {
		background: #F4F2F2;
		padding: 40rpx 40rpx 0;
		box-sizing: border-box;
	}
	.tips {
		font-size: 28rpx;
		line-height: 28rpx;
		color: #999999;
		text-align: center;
		margin: 60rpx 0 20rpx;
	}
	.card-container {
		width: 670rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: -20px 0px 40px 20px rgba(155,155,155,0.30); 
		overflow: hidden;
		.top {
			background: #F65759;
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 800rpx;
			.title {
				font-family: 'PingFang SC';
				font-size: 50rpx;
				color: #FFFFFF;
				line-height: 160rpx;
			}
			.main {
				position: relative;
				display: flex;
				margin-top: 20rpx;
				.mall {
					width: 600rpx;
					height: 600rpx;
					display: block;
				}
				.code {
					width: 360rpx;
					height: 360rpx;
					display: block;
					position: absolute;
					top: 0;
					left: 120rpx;
					border-radius: 5rpx;
				}
				.btn {
					width: 160rpx;
					height: 48rpx;
					display: block;
					position: absolute;
					top: 400rpx;
					left: 220rpx;
					border-radius: 5rpx;
					border: 1px solid #ffffff;
					line-height: 48rpx;
					text-align: center;
					font-size: 24rpx;
					color: #FFFFFF;
					opacity: .8;
				}
			}
			.info {
				width: 600rpx;
				text-align: right;
				margin-top: -100rpx;
				.name {
					font-size: 36rpx;
					color: #FFFFFF;
					height: 36rpx;
					line-height: 36rpx;
				}
				.text {
					font-size: 28rpx;
					color: #FFFFFF;
					height: 28rpx;
					line-height: 28rpx;
					margin-top: 20rpx;
				}
			}
		}
		.bottom {
			height: 140rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				height: 60rpx;
				display: block;
			}
		}
	}
</style>