00

config/api.js

@@ -84,6 +84,8 @@ export const studentOwner = (params) => http.get('business/student-record/owner'
 export const studentList = (params) => http.get('business/student-record/page', {params}) 
 // 绑定教练
 export const studentBindCoach = (data) => http.post('business/student-record/bindCoach', data)
+ // 教练二维码生成
+ export const getQR = (data) => http.post('business/coach/sign/getQR', data)
 
 
 

pages/tabbar/mine/index.vue

@@ -69,7 +69,7 @@
 						// {text: '考场信息', icon: require('../../../static/images/coach/ic_changdi.png'), id: 4, url: '/pages/userCenter/examinInfo/examinInfo'},
 						{text: '学员评价', icon: require('../../../static/images/coach/ic_pingjia.png'), id: 5, url: '/pages/userCenter/studentComment/studentComment'},
 						{text: '教学数据', icon: require('../../../static/images/coach/ic_shuju.png'), id: 6, url: '/pages/userCenter/teachingData/teachingData'},
-						{text: '结算统计', icon: require('../../../static/images/coach/ic_daijiesuan.png'), id: 1, url: '/pages/tabbar/statistics/index'},
+						// {text: '结算统计', icon: require('../../../static/images/coach/ic_daijiesuan.png'), id: 1, url: '/pages/tabbar/statistics/index'},
 						// {text: '学员退款', icon: require('../../../static/images/coach/ic_tuikuan.png'), id: 7, url: '/pages/userCenter/refund/refund'},
 						
 					]

pages/userCenter/scanCode/scanCode - 副本.vue

@@ -0,0 +1,111 @@
+<template>
+	<view class="pageBgImg">
+		<topNavbar title="个人二维码"></topNavbar>
+		<view class="pad">
+			<view class="card">
+				<view class="refresh_row" @click="refresh">
+					<view class="text">刷新二维码</view>
+					<view class="icon">
+						<image src="@/static/images/index/ic_shuaxin.png" mode=""></image>
+					</view>
+				</view>
+				<view class="qcode">
+					<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
+				</view>
+			</view>
+			<view class="card">
+				<user-info/>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import UQRCode from 'uqrcodejs';
+	var qr = new UQRCode();
+	export default {
+		data() {
+			return {
+				timer: null
+			}
+		},
+		onShow() {
+			this.$nextTick(()=>{
+				this.refresh()
+			})
+			
+		},
+		// onHide() {
+		// 	console.log('清除了')
+		// 	clearTimeout(this.timer)
+		// 	this.timer = null
+			
+		// },
+		beforeDestroy() {
+			clearTimeout(this.timer)
+			this.timer = null
+			// this.refresh = null
+		},
+		methods: {
+			refresh() {
+				let {coachId, nickname, schoolId, tenantId, schoolName} =  this.vuex_userInfo.user
+				// 设置二维码内容
+				qr.data = JSON.stringify({
+							  coachId,
+							  schoolId,
+							  nickname: encodeURIComponent(nickname),
+							  timer: Date.now(),
+							  schoolName: encodeURIComponent(schoolName),
+				})
+						
+				// 设置二维码大小，必须与canvas设置的宽高一致
+				qr.size = 200;
+				qr.margin = 10;
+				qr.errorCorrectLevel = UQRCode.errorCorrectLevel.L
+				// 调用制作二维码方法
+				qr.make()
+				qr.foregroundImageSrc = require('./coach.png')
+				// 获取canvas上下文
+				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
+				// 设置uQRCode实例的canvas上下文
+				qr.canvasContext = canvasContext;
+				// 调用绘制方法将二维码图案绘制到canvas上
+				qr.drawCanvas();
+				this.timer = setTimeout(()=>{
+					console.log('刷新了')
+					this.refresh()
+				},1000*20)
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.qcode {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 50rpx 0;
+	}
+	.card {
+		padding: 28rpx;
+		margin-bottom: 24rpx;
+	}
+	.refresh_row {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		padding: 10rpx 0;
+		.text {
+			color: $themC;
+			font-size: 28rpx;
+		}
+		.icon {
+		  width: 24rpx;
+		  height: 24rpx;
+		  margin-left: 6rpx;
+		}
+	}
+</style>

pages/userCenter/scanCode/scanCode.vue

@@ -2,47 +2,88 @@
 	<view class="pageBgImg">
 		<topNavbar title="个人二维码"></topNavbar>
 		<view class="pad">
+			<view class="tabs">
+				<view class="tab" v-for="(item,index) in tabArr" :key="index" :class="{active: currentType==item.id}"
+					@click="changeTab(item)">{{ item.text }}</view>
+			</view>
 			<view class="card">
+				<view class="refresh_row" @click="refresh">
+					<view class="text">刷新二维码</view>
+					<view class="icon">
+						<image src="@/static/images/index/ic_shuaxin.png" mode=""></image>
+					</view>
+				</view>
 				<view class="qcode">
-					<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
+					<image :src="ossUrl" mode="widthFix"  style="width: 400rpx;height: 400rpx;"></image>
 				</view>
 			</view>
-			
-			<view class="card">
+			<!-- <view class="card">
 				<user-info/>
-			</view>
+			</view> -->
 		</view>
 	</view>
 </template>
 
 <script>
-	import UQRCode from 'uqrcodejs';
+	import { getQR } from '@/config/api.js'
 	export default {
-		onReady() {
-		  // 获取uQRCode实例
-		  var qr = new UQRCode();
-		  let {coachId, nickname, schoolId, tenantId} =  this.vuex_userInfo.user
-		  // 设置二维码内容
-		  qr.data = JSON.stringify({
-			  coachId,
-			  schoolId,
-			  nickname: encodeURIComponent(nickname),
-			  schoolName: encodeURIComponent('必须与canvas设置的宽高一致/设置二维码大小')
-		  })
+		data() {
+			return {
+				timer: null,
+				ossUrl: '',
+				currentType: 2,
+				tabArr: [
+					{text: '教练码', id: 1},
+					{text: '签到码', id: 2},
+					{text: '签退码', id: 3},
+				]
+			}
+		},
+		onShow() {
+			this.$nextTick(()=>{
+				this.refresh()
+			})
+			this.test()
+		},
+		onHide() {
+			console.log('清除了')
+			clearTimeout(this.timer)
+			this.timer = null
+		},
+		beforeDestroy() {
+			clearTimeout(this.timer)
+			this.timer = null
+			// this.refresh = null
+		},
+		methods: {
+			test() {
+				function newObj(name) {
+					this.name = name
+				}
+				let myname = new newObj('joe')
+				const dep = this.depClone(myname, newObj)
+				console.log(dep)
+			},
+			depClone(obj, fu) {
+				let protoType = fu.protoType
 				
-		  // 设置二维码大小，必须与canvas设置的宽高一致
-		  qr.size = 200;
-		  qr.margin = 10;
-		  qr.errorCorrectLevel = UQRCode.errorCorrectLevel.L
-		  // 调用制作二维码方法
-		  qr.make()
-		  qr.foregroundImageSrc = require('./coach.png')
-		  // 获取canvas上下文
-		  var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
-		  // 设置uQRCode实例的canvas上下文
-		  qr.canvasContext = canvasContext;
-		  // 调用绘制方法将二维码图案绘制到canvas上
-		  qr.drawCanvas();
+			},
+			changeTab(item) {
+				if(item.id==this.currentType) return
+				this.currentType = item.id
+				this.refresh()
+			},
+			async refresh() {
+				const {data: res} = await getQR({type: this.currentType})
+				this.ossUrl = res.ossUrl
+				clearTimeout(this.timer)
+				if(this.currentType!=1) {
+					this.timer = setTimeout(()=>{
+						console.log('刷新了')
+						this.refresh()
+					},1000*20)
+				}
+			}
 		}
 	}
 </script>
@@ -50,13 +91,50 @@
 <style lang="scss" scoped>
 	.qcode {
 		width: 100%;
-		height: 600rpx;
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		padding: 20rpx 0;
 	}
 	.card {
 		padding: 28rpx;
 		margin-bottom: 24rpx;
 	}
+	.refresh_row {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		padding: 10rpx 0;
+		.text {
+			color: $themC;
+			font-size: 28rpx;
+		}
+		.icon {
+		  width: 24rpx;
+		  height: 24rpx;
+		  margin-left: 6rpx;
+		}
+	}
+	
+	.tabs {
+		height: 72rpx;
+		background: #FFFFFF;
+		border-radius: 16rpx;
+		display: flex;
+		line-height: 72rpx;
+		text-align: center;
+		color: #ADADAD;
+		margin: 24rpx 0;
+		.tab {
+			flex: 1;
+			text-align: center;
+	
+			&.active {
+				background: rgba(25, 137, 250, 0.1);
+				border: 2rpx solid #1989FA;
+				color: $themC;
+				border-radius: 16rpx;
+			}
+		}
+	}
 </style>