xusfood_client/center/paycode.vue

<template>
	<view class="pages">
		<u-navbar
			title="会员码"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<img class="bg" :src="staticUrl+'/img/paycode-bg.png'" alt="">
		<view class="content">
			<view class="avatar-wrap">
				<u-avatar :src="vuex_member_info.avatar||staticUrl+'/img/avatar.png'" size="138rpx"></u-avatar>
			</view>
			<view class="name">{{vuex_member_info.name}}</view>
			<img class="qrcode-bg" :src="staticUrl+'/img/qrcode-bg.png'" alt="">
			<!-- <img class="qrcode" :src="staticUrl+'/img/paycode-bg.png'" alt=""> -->
			<view class="tip u-flex u-row-center">
				<img class="refresh-ico" :src="staticUrl+'/img/refresh.png'" alt="">
				<text>会员码每30秒自动更新，请在店内消费使用</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				params:{
					
				}
				
			}
		},
		onShow() {
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
.bg{
	position: fixed;
	width: 100%;
	height: 100vh;
	height: -webkit-fill-available;
	left: 0;
	bottom: 0;
	z-index: -1;
}
.content{
	position: relative;
	text-align: center;
	background-color: #fff;
	border-radius: 8rpx;
	margin: 150rpx 20rpx 0;
	padding: 90rpx 50rpx 80rpx;
}
.avatar-wrap{
	position: absolute;
	left: 50%;
	top: -69rpx;
	transform: translateX(-69rpx);
	background-color: #fff;
	padding: 11rpx;
	border-radius: 50%;
}
.name{
	font-size: 32rpx;
	font-weight: 600;
	color: #333333;
	line-height: 45rpx;
	margin-bottom: 40rpx;
}
.qrcode{
	position: absolute;
	top: 211rpx;
	left: 102rpx;
	width: 506rpx;
	height: 506rpx;
}
.tip{
	margin-top: 40rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	line-height: 33rpx;
	.refresh-ico{
		width: 27rpx;
		height: 27rpx;
		margin-right: 10rpx;
	}
}
</style>