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.
351 lines
7.6 KiB
351 lines
7.6 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="userInfo.avatar"></image>
|
|
</view>
|
|
<view class="phone">{{ userInfo.mobile_replace }}</view>
|
|
</view>
|
|
<!-- <view class="card">
|
|
<text class="lf-iconfont icon-daifukuan"></text>
|
|
</view> -->
|
|
</view>
|
|
<view class="balance">余额 ¥{{ centerInfo.balance }}</view>
|
|
<block v-if="show_code">
|
|
<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>
|
|
</block>
|
|
</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: '',
|
|
color: '#000', // 条形码的颜色
|
|
bgColor: '#FFFFFF', // 背景色
|
|
width: 586, // 宽度
|
|
height: 210 // 高度
|
|
},
|
|
qrc: {
|
|
code: "",
|
|
size: 352, // 二维码大小
|
|
level: 4, //等级 0～4
|
|
bgColor: '#FFFFFF', //二维码背景色 默认白色
|
|
color: '#000000', //边框颜色支持渐变色
|
|
}
|
|
},
|
|
timer: null,
|
|
num: 120,
|
|
refresh: 120,
|
|
token: '',
|
|
userInfo: {},
|
|
centerInfo: {balance: 0},
|
|
show_code: false,
|
|
show_code_count: 0,
|
|
show_count: 0,
|
|
is_scan_code: false,
|
|
first_http: 0
|
|
}
|
|
},
|
|
onLoad(){
|
|
var token = this.$cookieStorage.get('user_token');
|
|
this.token = token;
|
|
this.getIsSetPayPwd();
|
|
this.getMeInfo();
|
|
this.getUcenter();
|
|
},
|
|
onShow(){
|
|
this.show_count++;
|
|
if(this.show_count > 1){
|
|
this.first_http = 0;
|
|
this.is_scan_code = false;
|
|
this.getIsSetPayPwd();
|
|
}
|
|
// 设置手机屏幕亮度
|
|
uni.getScreenBrightness({
|
|
success: (res) => {
|
|
this.brightness = res.value;
|
|
let value = res.value < 0.7 ? 0.7 : res.value;
|
|
uni.setScreenBrightness({
|
|
value: value
|
|
})
|
|
}
|
|
})
|
|
},
|
|
onHide(){
|
|
uni.setScreenBrightness({
|
|
value: this.brightness
|
|
})
|
|
},
|
|
onUnload(){
|
|
if(this.timer){
|
|
clearInterval(this.timer);
|
|
this.timer = null;
|
|
}
|
|
uni.setScreenBrightness({
|
|
value: this.brightness
|
|
})
|
|
},
|
|
methods: {
|
|
// 获取用户是否设置了支付密码
|
|
getIsSetPayPwd(){
|
|
this.$http.post({
|
|
api: 'api/user/isset_pay_pwd',
|
|
header: {
|
|
Authorization: this.token
|
|
}
|
|
}).then(res => {
|
|
console.log("====",res)
|
|
if(res.data.status){
|
|
this.refreshCode();
|
|
}else{
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: res.data.message,
|
|
showCancel: false,
|
|
confirmColor: '#1c8482',
|
|
confirmText: '去设置',
|
|
success: result => {
|
|
if(result.confirm){
|
|
this.$url('/pages/user/my/setPassword');
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 获取页面信息
|
|
getMeInfo(){
|
|
this.$http.get({
|
|
api: 'api/me',
|
|
header: {
|
|
Authorization: this.token
|
|
}
|
|
}).then(res => {
|
|
this.userInfo = res.data.data;
|
|
})
|
|
},
|
|
// 获取积分等信息
|
|
getUcenter(){
|
|
this.$http.get({
|
|
api: 'api/users/ucenter',
|
|
header: {
|
|
Authorization: this.token
|
|
}
|
|
}).then(res => {
|
|
this.centerInfo = res.data.data;
|
|
})
|
|
},
|
|
// 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.getPay();
|
|
this.timer = setInterval(() => {
|
|
this.num--;
|
|
if(this.num % 5 === 0){
|
|
this.getPay({silence: true});
|
|
}
|
|
if(this.num <= 0){
|
|
clearInterval(this.timer);
|
|
this.timer = null;
|
|
this.num = this.refresh;
|
|
this.refreshCode(); // 重新执行
|
|
}
|
|
}, 1000);
|
|
},
|
|
getPay(options = {}){
|
|
if(!options.silence){
|
|
if(this.show_code_count >= 1){
|
|
uni.showLoading({
|
|
title: '正在刷新'
|
|
})
|
|
}else{
|
|
uni.showLoading({
|
|
title: '正在拉取数据'
|
|
})
|
|
}
|
|
}
|
|
this.first_http++;
|
|
this.$http.get({
|
|
api: 'api/offline/get_pay',
|
|
data: {
|
|
refresh: this.first_http <= 1 ? 1 : 0
|
|
},
|
|
header: {
|
|
Authorization: this.token
|
|
}
|
|
}).then(res => {
|
|
if(res.data.code == 200){
|
|
let detail = res.data.data;
|
|
let u_id = this.userInfo.id;
|
|
if(!options.silence){
|
|
let str = JSON.stringify({
|
|
rand: detail.rand,
|
|
time: detail.time,
|
|
u_id: u_id
|
|
});
|
|
this.config.bar.code = str;
|
|
this.config.qrc.code = str;
|
|
this.show_code = true;
|
|
this.show_code_count++;
|
|
}
|
|
if(detail.clerk_id){
|
|
// 商家已扫码, 跳转至确认金额页
|
|
let amount = detail.amount;
|
|
let brand_id = detail.brand_id;
|
|
let clerk_id = detail.clerk_id;
|
|
let url = '/pages/aboutpay/confirmcash';
|
|
url += `?clerk_id=${clerk_id}`;
|
|
url += `&brand_id=${brand_id}`;
|
|
url += `&amount=${amount}`;
|
|
if(this.timer){
|
|
clearInterval(this.timer);
|
|
this.timer = null;
|
|
}
|
|
if(!this.is_scan_code){
|
|
this.$url(url);
|
|
}
|
|
this.is_scan_code = true;
|
|
}
|
|
}
|
|
if(!options.silence){
|
|
uni.hideLoading();
|
|
}
|
|
}).catch(err => {
|
|
if(!options.silence){
|
|
uni.hideLoading();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</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>
|