<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">长按保存图片</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 { getQueryVariable } from '@/common/utils/util.js'

	export default {
		data() {
			return {
				configInfo: {},
				qrCode: '',
			}
		},

		async onLoad() {
      this.configInfo = await this.$getConfigInfo();
			this.getDetail();
		},

		methods: {
			// 获取个人信息
			getDetail() {
        var appid = getQueryVariable('appid') || getQueryVariable('appId');
				this.$api.get('/goods/qrcode', {
					url: `${process.env.VUE_APP_HREF}/pages/index/index?appid=${appid}&serviceId=${this.$store.state.user.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: $theme-color;
			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 {
					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>
