ec.uniapp-master/pages/user/member/code.vue

<template>
	<view class="page">
		<lf-nav title="会员码" bgColor="transparent" :spreadOut="false" titleColor="#fff" :showIcon="true"></lf-nav>
		<view class="bg-viewleft"></view>
		<view class="bg-viewright"></view>
		<view class="content">
			<view class="top">
				<view class="lf-flex">
					<view class="avatar">
						<image src="https://picsum.photos/200"></image>
					</view>
					<view class="phone">182****5380</view>
				</view>
				<view class="card">
					<text class="lf-iconfont icon--1"></text>
				</view>
			</view>
			<view class="balance">余额 ¥1829.83</view>
			<view class="barcode">
				<lf-barcode :options="config.bar"></lf-barcode>
			</view>
			<view class="qrcode">
				<lf-qrcode :options="config.qrc"></lf-qrcode>
			</view>
			<view class="tips">{{ num }}s后自动刷新</view>
		</view>
	</view>
</template>

<script>
	import lfBarcode from '@/components/lf-code/lf-barcode.vue';
	import lfQrcode from '@/components/lf-code/lf-qrcode.vue';
	export default {
		components: {
			lfBarcode,
			lfQrcode
		},
		data(){
			return {
				config: {
					bar: {
						code: 'E01181016286106',
						color: '#000', // 条形码的颜色
						bgColor: '#FFFFFF', // 背景色
						width: 586, // 宽度
						height: 210 // 高度
					},
					qrc: {
						code: "https://weixin.qq.com/g/AwYAAHO3aO4zlasEij6bLsk4hlZd5XNFkkBmqyS55mLPFxmn5c9PaI1omqLhd24fABCD23333",
						size: 352, // 二维码大小
						level: 4, //等级 0～4
						bgColor: '#FFFFFF', //二维码背景色 默认白色
						// border: {
						// 	color: ['#8A2387', '#F27121'], //边框颜色支持渐变色
						// 	lineWidth: 3, //边框宽度
						// },
						// img: '/static/logo.png', //图片
						// iconSize: 40, //二维码图标的大小
						color: '#000000', //边框颜色支持渐变色
					}
				},
				timer: null,
				num: 90
			}
		},
		onLoad(){
			this.refreshCode();
		},
		onUnload(){
			if(this.timer){
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		methods: {
			// rpx 转 px
			rpxTransformPx(num){
				let systemInfo = uni.getSystemInfoSync();
				let pxWidth = num / 750 * systemInfo.windowWidth;
				return pxWidth;
			},
			// 刷新code
			refreshCode(){
				if(this.timer){
					clearInterval(this.timer);
					this.timer = null;
				}
				this.timer = setInterval(() => {
					this.num--;
					if(this.num <= 0){
						clearInterval(this.timer);
						this.timer = null;
						this.num = 90;
						this.refreshCode(); // 重新执行
					}
				}, 1000);
			}
		}
	}
</script>

<style>
	page{
		overflow: hidden;
	}
</style>
<style lang="scss" scoped="scoped">
	.page{
		width: 100vw;
		height: 100vh;
		background: linear-gradient(270deg, #187B7A 0%, #2FAAA7 100%, #22A2A0 100%);
		position: relative;
		overflow: hidden;
		.bg-viewleft{
			position: absolute;
			left: -100rpx;
			top: 59rpx;
			width: 585rpx;
			height: 585rpx;
			border-radius: 50%;
			background-color: rgba(255,255,255,0.04);
		}
		.bg-viewright{
			position: absolute;
			right: -38rpx;
			top: 102rpx;
			width: 127rpx;
			height: 127rpx;
			border-radius: 50%;
			background-color: rgba(255,255,255,0.04);
		}
		.content{
			position: absolute;
			top: 260rpx;
			left: calc(50% - 343rpx);
			width: 686rpx;
			height: 986rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			.top{
				display: flex;
				justify-content: space-between;
				padding: 0 40rpx;
				width: 100%;
				box-sizing: border-box;
				align-items: center;
				margin-top: -20rpx;
				.avatar{
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					background-color: #FFFFFF;
					box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(21, 113, 110, 0.2);
					border: 5rpx solid #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
					&>image{
						width: 148rpx;
						height: 148rpx;
						border-radius: 50%;
					}
				}
				.phone{
					font-size: 36rpx;
					font-weight: bold;
					color: #15716E;
				}
				.card{
					padding: 10rpx 20rpx;
					&>text{
						font-size: 40rpx;
						color: #15716E;
					}
				}
			}
			.balance{
				font-size: 32rpx;
				color: #555555;
				text-align: center;
				font-weight: bold;
				margin-top: 60rpx;
				line-height: 1;
			}
			.barcode, .qrcode{
				display: flex;
				justify-content: center;
				margin-top: 30rpx;
			}
			.tips{
				font-size: 24rpx;
				color: #777777;
				text-align: center;
				margin-top: 30rpx;
			}
		}
	}
</style>