luoyangCoachApp/pages/userCenter/teachingData/teachingData.vue

<template>
	<view class="teachingDataBg" >
		<topNavbar title=" "></topNavbar>
		<view class="topText">
			<view class="h3">专属您的</view>
			<view class="h4">教学数据</view>
		</view>
		<view class="pad" id="app">
			<view class="card">
				<view class="top_row">
					<view class="topItem">
						<view class="lab">历史服务学员</view>
						<view class="val">{{info.historyStudentTotal}}人</view>
					</view>
					<view class="topItem">
						<view class="lab">结业人数</view>
						<view class="val">{{info.finishStudentTotal}}人</view>
					</view>
					<view class="topItem">
						<view class="lab">服务中人数</view>
						<view class="val">{{info.inServiceStudentTotal}}人</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="title">
			<view class="txt">结业率高达</view>
			<view class="num">{{info.finishRate?(info.finishRate*1).toFixed(2):0}}</view>
		</view>
		<view class="ul">
			<view class="li" v-if="info.finishSubjectOneTime">
				<view class="lab">科目一平均通过时间</view>
				<view class="val">{{info.finishSubjectOneTime}}天</view>
			</view>
			<view class="li">
				<view class="lab">科目二平均通过时间</view>
				<view class="val">{{info.finishSubjectTowTime ||'0'}}天</view>
			</view>
			<view class="li">
				<view class="lab">科目三平均通过时间</view>
				<view class="val">{{info.finishSubjectThreeTime || '0'}}天</view>
			</view>
			<view class="li" v-if="info.finishSubjectFourTime">
				<view class="lab">科目四平均通过时间</view>
				<view class="val">{{info.finishSubjectFourTime}}天</view>
			</view>
		</view>
		<view class="title">
			<view class="txt">平均拿证时间</view>
			<view class="num">{{info.averageFinishTime || '0'}}天</view>
		</view>
		<!-- <view class="btnBorder" @click="shareClick">立即分享</view>
		<canvas canvas-id="canvas" style="width: 300px; height: 300px;opacity: 0;" class="canvas">3333</canvas>
		<view class="img" style="width: 300px; height: 300px;">
			<image :src="shareImageUrl" mode=""></image>
		</view> -->
	</view>
</template>

<script>
	import { getDrivingLearningData } from '@/config/api.js'
	export default {
		data() {
			return {
				shareImageUrl: '',
				info: {}
			}
		},
		mounted() {
			this.getDrivingLearningDataFn()
			this.$nextTick(()=>{
				setTimeout(()=>{
					this.getCanvas()
				},2000)
			})
		},
		methods: {
			async getDrivingLearningDataFn() {
				const {data: res} = await getDrivingLearningData()
				this.info = res || {}
			},
			shareClick() {
				
			},
			getCanvas() {
				let _this = this
				// 获取 Canvas 组件实例
				const canvas = uni.createCanvasContext('canvas', this);
							    
				// 绘制需要的内容
				canvas.setFontSize(20);
				canvas.fillText('Hello, Canvas!', 50, 50);
							    
				// 绘制完成后执行截屏操作
				canvas.draw(true, () => {
				  uni.canvasToTempFilePath({
				    canvasId: 'canvas',
				    fileType: 'png',
				    success: (res) => {
				      console.log('截屏成功', res.tempFilePath);
					  _this.shareImageUrl = res.tempFilePath
					  // uni.previewImage({
					  // 	urls: [res.tempFilePath]
					  // })
					  uni.showShareMenu({
					    withShareTicket: true,
					    success: () => {
					      uni.showShareImageMenu({
					        path: _this.shareImageUrl,
					        success: (res) => {
					          console.log('分享成功', res)
					        },
					        fail: (error) => {
					          console.log('分享失败', error)
					        }
					      })
					    }
					  })
					  
				    },
				    fail: (err) => {
				      console.log('截屏失败', err);
				    }
				  }, this);
				});
				
			   } 
		}
	}
</script>

<style lang="scss" scoped>
	.teachingDataBg {
		width: 100%;
		background: url('../../../static/images/bigImg/teachdata.png') #f6f6f6 no-repeat;
		background-size: 100% 544rpx;
		min-height: 100vh;
		font-size: 28rpx;
		padding-bottom: 40rpx;
	  .topText {
	  	padding: 56rpx 34rpx 84rpx 34rpx;
	  	color: #fff;
	  	font-weight: 600;
	  
	  	.h3 {
	  		font-size: 42rpx;
	  	}
	  
	  	.h4 {
	  		font-size: 64rpx;
	  	}
	  }
	  .card {
	    .top_row {
			display: flex;
			height: 214rpx;
			margin-bottom: 14rpx;
	      .topItem {
			  flex: 1;
			  text-align: center;
	        .lab {
				font-size: 28rpx;
				color: #333;
				margin: 48rpx 0 24rpx 0;
	        }
	
	        .val {
				color: $themC;
				font-size: 40rpx;
				font-weight: 500;
	        }
	      }
	    }
	  }
	
	  .title {
		  display: flex;
		  align-items: center;
		  width: 100%;
		  height: 98rpx;
		  background: linear-gradient(188deg, #F6F6F6 0%, #80C1F6 100%, #80C1F6 100%);
		  margin-bottom: 40rpx;
		  color: #FFFFFF;
	    .txt {
			font-weight: 500;
			line-height: 56px;
			text-shadow: 0px 4px 6px #1274D6;
			font-size: 40rpx;
			margin: 0 40rpx 0 28rpx;
			font-weight: 500;
	    }
	
	    .num {
			font-size: 72rpx;
			text-shadow: 0px 4px 8px #084787;
	    }
	  }
	
	  .ul {
		  display: flex;
		  flex-wrap: wrap;
		  justify-content: space-between;
		  padding: 0 28rpx;
	    .li {
			width: 49%;
			text-align: center;
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 16rpx;
			height: 196rpx;
	      .lab {
			font-size: 28rpx;
			margin: 36rpx 0 26rpx 0;
	      }
	
	      .val {
			font-size: 40rpx;
			color: $themC;
	      }
	    }
	  }
	
	  .btnBorder {
			width: 396rpx;
			margin: 79rpx auto;
	  }
	}
</style>