mnsx/user/page/recommend.vue

<template>
	<view class="recommend">
		<image src="../../static/img/rmbg.png" mode="" class="bg"></image>
		<image src="https://zccy.liuniu946.com/static/img/ewmbg1.png" mode="" class="ewmbg"></image>
		<view class="tit">
			充值
		</view>
		<view class="sotre-name">
			{{userInfo.store_info.name}}充值码 >
		</view>
		<view class="store-info">
			<image :src="userInfo.store_info.image" mode="" class="store-logo"></image>
			<view class="store-name">
				{{userInfo.store_info.name}}
			</view>
		</view>
		<view class="ewm-wrapper">
			<tki-qrcode :key="'?store_id='+userInfo.store_info.id + '&store_logo=' + userInfo.store_info.image + '&store_name=' + userInfo.store_info.name" cid="tki-qrcode-canvas" ref="qrcode"
				:val="'?store_id='+userInfo.store_info.id + '&store_logo=' + userInfo.store_info.image + '&store_name=' + userInfo.store_info.name" :size="426" unit="upx" background="#ffffff"
				foreground="#333333" pdground="#333333" icon="" :iconSize="0" :lv="3" :onval="true"
				:loadMake="true" :usingComponents="true" />
			<view class="ewm-tit">
				扫描二维码完成充值
			</view>
		</view>
		<view class="record-wrapper" @click="goCode">
			<view class="record-left">
				<image src="../../static/icon/recode.png" mode=""></image>
				充值记录
			</view>
			<view class="record-right">
				<image src="../../static/img/img39.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
		},
		onLoad() {
			console.log(this.userInfo)
		},
		methods: {
			goCode() {
				uni.navigateTo({
					url: '/user/page/recode'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #343434;
	}
	.recommend {
		height: 100%;
		width: 750rpx;
		
		position: relative;
		.store-info {
			width: 750rpx;
			height: 300rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 237rpx;
			.store-logo {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				background-color: #eee;
			}
			.store-name {
				padding-top: 20rpx;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
		.bg {
			width: 750rpx;
			height: 486rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
		.ewmbg {
			width: 671rpx;
			height: 966rpx;
			position: absolute;
			top: 237rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
		.tit {
			// display: inline-block;
			font-size: 40rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			position: absolute;
			top: 95rpx;
			left: 26rpx;
		}
		.sotre-name {
			font-size: 29rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.7);
			position: absolute;
			top: 160rpx;
			left: 28rpx;
			// line-height: 67px;
		}
		.ewm-wrapper {
			width: 429rpx;
			height: 426rpx;
			// background-color: red;
			position: absolute;
			top: 577rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
			.ewm-tit {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				position: absolute;
				text-align: center;
				bottom: -50rpx;
				left: 0;
				right: 0;
				margin: 0 auto;
			}
		}
		.record-wrapper {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			top: 1099rpx;
			padding: 0 72rpx;
			width: 750rpx;
			.record-left {
				display: flex;
				align-items: center;
			}
			image {
				width: 32rpx;
				height: 30rpx;
				margin-right: 11rpx;
			}
			.record-right {
				image {
					width: 12rpx;
					height: 21rpx;
					margin-right: 11rpx;
				}
			}
		}
	}
</style>