xusfood_h5/center/paycode.vue

<template>
	<view class="pages">
		<u-navbar
			title="推广码"
			:placeholder="true"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="content">
			<img class="qrCode" :src="details.qrCode" alt="">
			<view class="tip">仅限消费者注册使用</view>
			<text class="save" @click="save">保存本地</text>
		</view>
	</view>
</template>

<script>
	import {downloadImage} from '@/utils/downloadImage.js';
	export default {
		components:{
			
		},
		data() {
			return {
				id:'',
				staticUrl:this.$commonConfig.staticUrl,
				details:{}
			}
		},
		onShow() {
		},
		onLoad(page) {
			console.log('page',page);
			this.id = page.id;
			this.getPageData()
		},
		onUnload() {
		},
		onReady() {
		},
		methods: {
			getPageData(){
				this.$u.api.shopById({id:this.id}).then(res=>{
					this.details = res.data;
					// console.log('getPageData',this.details);
				}).catch(err=>{
					console.log('getPageData',err);
				})
			},
			save(){
				downloadImage(this.details.qrCode, this.details.name);
			}
		}
	}
</script>
<style>
page{
	background-color: #005223;
}
</style>
<style lang="scss" scoped>
.content{
	text-align: center;
	margin: 90rpx 45rpx 24rpx;
	background: #FFFFFF;
	border-radius: 8rpx;
	padding: 100rpx 20rpx;
	box-sizing: border-box;
	.qrCode{
		width: 250px;
		height: 250px;
	}
	.tip{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		margin-bottom: 40rpx;
	}
	.save{
		padding: 25rpx 98rpx;
		font-size: 26rpx;
		font-weight: 600;
		color: #FFFFFF;
		background-color: #00A447;
		border-radius: 4rpx;
	}
}
</style>