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="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: {
						cancel: 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.status == 1){
							// 商家已扫码, 跳转至确认金额页
							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>