You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
199 lines
4.4 KiB
199 lines
4.4 KiB
<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>
|