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.
364 lines
8.2 KiB
364 lines
8.2 KiB
<template>
|
|
<view class="myData pad" id="app">
|
|
<topNavbar title=""></topNavbar>
|
|
<view class="topText">
|
|
<view class="h3">专属您的</view>
|
|
<view class="h4">学车数据</view>
|
|
</view>
|
|
<view class="card">
|
|
<view class="row">
|
|
<view class="leftCon">
|
|
<view class="icon">
|
|
<image src="@/static/images/userCenter/ic_jiaxiao.png" mode=""></image>
|
|
</view>
|
|
<view class="text">我的驾校</view>
|
|
</view>
|
|
<view class="value">翔力驾校</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="leftCon">
|
|
<view class="icon">
|
|
<image src="@/static/images/userCenter/ic_jiaolian.png" mode=""></image>
|
|
</view>
|
|
<view class="text">我的教练</view>
|
|
</view>
|
|
<view class="value">xxx</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="leftCon">
|
|
<view class="icon">
|
|
<image src="@/static/images/userCenter/ic_chexing.png" mode=""></image>
|
|
</view>
|
|
<view class="text">所学车型</view>
|
|
</view>
|
|
<view class="value">xxx</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="leftCon">
|
|
<view class="icon">
|
|
<image src="@/static/images/userCenter/ic_shijian.png" mode=""></image>
|
|
</view>
|
|
<view class="text">报名时间</view>
|
|
</view>
|
|
<view class="value">xxx</view>
|
|
</view>
|
|
</view>
|
|
<!-- 学驾共历时 -->
|
|
<view class="card">
|
|
<view class="chart_row">
|
|
<view class="leftText">
|
|
<view class="lab">学驾共历时</view>
|
|
<view class="val">33天</view>
|
|
</view>
|
|
<view class="rightChart">
|
|
<ringChart />
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 考试通过率 -->
|
|
<view class="card">
|
|
<view class="chart_row">
|
|
<view class="leftText" style="width: 200rpx;">
|
|
<view class="lab">考试通过率</view>
|
|
<view class="val">90%</view>
|
|
</view>
|
|
<view class="rightChart pad28">
|
|
<view class="blueBg">
|
|
<columnChart/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="flex-b">
|
|
<view class="count card">
|
|
<view class="lab">实操练习次数</view>
|
|
<view class="val">20次</view>
|
|
</view>
|
|
<view class="count card">
|
|
<view class="lab">模拟训练次数</view>
|
|
<view class="val">20次</view>
|
|
</view>
|
|
</view>
|
|
<view class="btnBorder" @click="destImgFn">立即分享</view>
|
|
<!-- <button @click="shareFn" open-type="share">立即分享</button> -->
|
|
<canvas canvas-id="canvas" style="width: 350px; height: 350px;" class="canvas">3333</canvas>
|
|
<view class="img" style="width: 300px; height: 300px;">
|
|
<image :src="shareImageUrl" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ringChart from './ringChart.vue'
|
|
import columnChart from './columnChart'
|
|
export default {
|
|
components: { ringChart, columnChart },
|
|
data() {
|
|
return {
|
|
shareImageUrl: ''
|
|
}
|
|
},
|
|
onReady() {
|
|
this.destImgFn()
|
|
},
|
|
|
|
methods: {
|
|
captureCanvas() {
|
|
// 获取 Canvas 组件实例
|
|
const canvas = uni.createCanvasContext('myCanvas', this);
|
|
|
|
// 绘制需要的内容
|
|
canvas.setFontSize(20);
|
|
canvas.fillText('Hello, Canvas!', 50, 50);
|
|
|
|
// 绘制完成后执行截屏操作
|
|
canvas.draw(true, () => {
|
|
uni.canvasToTempFilePath({
|
|
canvasId: 'myCanvas',
|
|
fileType: 'png',
|
|
success: (res) => {
|
|
console.log('截屏成功', res.tempFilePath);
|
|
},
|
|
fail: (err) => {
|
|
console.log('截屏失败', err);
|
|
}
|
|
}, this);
|
|
});
|
|
},
|
|
destImgFn() {
|
|
this.$nextTick(()=>{
|
|
// uni.canvasToTempFilePath({
|
|
// x: 0,
|
|
// y: 0,
|
|
// width: 350,
|
|
// height: 350,
|
|
// destWidth: 350,
|
|
// destHeight: 350,
|
|
// canvasId: 'canvas',
|
|
// success: function(res) {
|
|
// // 在H5平台下，tempFilePath 为 base64
|
|
// console.log(res.tempFilePath)
|
|
// }
|
|
// },this)
|
|
|
|
// return
|
|
let _this = this
|
|
uni.createSelectorQuery().select('#app').boundingClientRect((rect) => {
|
|
console.log(rect)
|
|
const context = uni.createCanvasContext('canvas')
|
|
context.draw(true, () => {
|
|
setTimeout(()=>{
|
|
uni.canvasToTempFilePath({
|
|
x: 0,
|
|
y: 0,
|
|
fileType:'png',
|
|
width: 200,
|
|
height: 200,
|
|
// destWidth: rect.width * uni.getSystemInfoSync().pixelRatio,
|
|
// destHeight: rect.height * uni.getSystemInfoSync().pixelRatio,
|
|
canvasId: 'canvas',
|
|
success: (res) => {
|
|
console.log('截图成功')
|
|
console.log(res)
|
|
uni.showToast({
|
|
title: '截图成功',
|
|
icon: 'none'
|
|
})
|
|
// uni.hideToast()
|
|
// 将截屏图片路径保存至storage或全局变量，以便后续分享使用
|
|
_this.shareImageUrl = res.tempFilePath
|
|
console.log(_this.shareImageUrl)
|
|
},
|
|
fail: (error) => {
|
|
console.log('截图失败')
|
|
console.log(error)
|
|
// uni.hideToast()
|
|
uni.showToast({
|
|
title: '截图失败',
|
|
icon: 'none'
|
|
})
|
|
},
|
|
})
|
|
},2000)
|
|
})
|
|
|
|
}).exec()
|
|
})
|
|
},
|
|
shareFn() {
|
|
let _this = this
|
|
// uni.share({
|
|
// provider: "weixin",
|
|
// scene: "WXSceneSession",
|
|
// type: 2,
|
|
// imageUrl: _this.shareImageUrl,
|
|
// success: function (res) {
|
|
// console.log("success:" + JSON.stringify(res));
|
|
// },
|
|
// fail: function (err) {
|
|
// console.log("fail:" + JSON.stringify(err));
|
|
// }
|
|
// });
|
|
uni.showShareMenu({
|
|
withShareTicket: true,
|
|
success: () => {
|
|
uni.showShareImageMenu({
|
|
path: _this.shareImageUrl,
|
|
success: (res) => {
|
|
console.log('分享成功', res)
|
|
},
|
|
fail: (error) => {
|
|
console.log('分享失败', error)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
|
|
},
|
|
// 在分享按钮的点击事件中调用分享API
|
|
onShareImageBtnClick() {
|
|
wx.showShareMenu({
|
|
withShareTicket: true,
|
|
success: () => {
|
|
wx.shareAppMessage({
|
|
imageUrl: '/image/share-image.jpg',
|
|
success: (res) => {
|
|
console.log('分享成功', res)
|
|
},
|
|
fail: (error) => {
|
|
console.log('分享失败', error)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.myData {
|
|
width: 100%;
|
|
background: url('http://192.168.1.20:81/zhili/image/20230818/409dca21dfec44eb8477e056ee23e437.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 {
|
|
padding: 0 24rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.row {
|
|
display: flex;
|
|
border-bottom: 2rpx solid #E8E9EC;
|
|
height: 102rpx;
|
|
align-items: center;
|
|
|
|
.leftCon {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 28rpx;
|
|
padding: 0 40rpx 0 12rpx;
|
|
}
|
|
}
|
|
|
|
.value {
|
|
font-size: 28rpx;
|
|
color: #1989FA;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.count {
|
|
width: 48%;
|
|
height: 196rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
text-align: center;
|
|
|
|
.lab {
|
|
margin: 36rpx 0 28rpx 0;
|
|
}
|
|
|
|
.val {
|
|
font-weight: 500;
|
|
font-size: 40rpx;
|
|
color: $themC;
|
|
}
|
|
}
|
|
|
|
|
|
.btnBorder {
|
|
width: 396rpx;
|
|
margin: 48rpx auto 0 auto;
|
|
}
|
|
}
|
|
|
|
.chart_row {
|
|
height: 300rpx;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
|
|
.leftText {
|
|
width: 270rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.lab {
|
|
margin: 0rpx 0 24rpx 0;
|
|
}
|
|
|
|
.val {
|
|
font-weight: 500;
|
|
font-size: 40rpx;
|
|
color: $themC;
|
|
}
|
|
}
|
|
|
|
.rightChart {
|
|
width: 0;
|
|
flex: 1;
|
|
&.pad28 {
|
|
padding: 28rpx 0;
|
|
}
|
|
.blueBg {
|
|
padding: 20rpx 0 10rpx 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #F2F8FF;
|
|
}
|
|
}
|
|
}
|
|
.img {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
</style>
|