124 lines
3.1 KiB
Vue
124 lines
3.1 KiB
Vue
|
<template>
|
|||
|
|
<view class="progress_box">
|
|||
|
|
<canvas class="progress_bg" canvas-id="cpbg"></canvas>
|
|||
|
|
<canvas class="progress_bar" canvas-id="cpbar"></canvas>
|
|||
|
|
<view class="progress_txt">
|
|||
|
|
<view class="progress_info">{{ progress_txt }}%</view>
|
|||
|
|
<text class="progress_title">{{title}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
props:{
|
|||
|
|
progress_txt:{
|
|||
|
|
type: Number,
|
|||
|
|
default:0
|
|||
|
|
},
|
|||
|
|
title:{
|
|||
|
|
type:String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
width:{
|
|||
|
|
type:Number,
|
|||
|
|
defauit:''
|
|||
|
|
},
|
|||
|
|
height:{
|
|||
|
|
type:Number,
|
|||
|
|
defauit:''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted: function() {
|
|||
|
|
this.drawProgressbg();
|
|||
|
|
this.drawCircle(this.progress_txt); //参数为1-100
|
|||
|
|
this.style(this.width,this.height);
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
style:function(width,height){
|
|||
|
|
// console.log(width,height)
|
|||
|
|
// document.getElementById("cpbg").style.width = width+"px";
|
|||
|
|
// cpbgA.style.width = width+"px";
|
|||
|
|
// cpbgA.style.height = height+"px";
|
|||
|
|
// var cpbarA = document.getElementById("cpbar");
|
|||
|
|
// cpbarA.style.width = width+"px";
|
|||
|
|
// cpbarA.style.height = height+"px";
|
|||
|
|
},
|
|||
|
|
drawProgressbg: function() {
|
|||
|
|
// 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
|
|||
|
|
var ctx = uni.createCanvasContext('cpbg', this);
|
|||
|
|
ctx.setLineWidth(6); // 设置圆环的宽度
|
|||
|
|
ctx.setStrokeStyle('#E9E9E9'); // 设置圆环的颜色
|
|||
|
|
ctx.setLineCap('round'); // 设置圆环端点的形状
|
|||
|
|
ctx.beginPath(); //开始一个新的路径
|
|||
|
|
ctx.arc(110, 110, 70, 0.75 * Math.PI, 0.25 * Math.PI, false);
|
|||
|
|
//设置一个原点(110,110)，半径为100的圆的路径到当前路径
|
|||
|
|
ctx.stroke(); //对当前路径进行描边
|
|||
|
|
ctx.draw();
|
|||
|
|
},
|
|||
|
|
drawCircle: function(step) {
|
|||
|
|
var ctx = uni.createCanvasContext('cpbar', this);
|
|||
|
|
// 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
|
|||
|
|
var gradient = ctx.createLinearGradient(28, 55, 192, 55);
|
|||
|
|
gradient.addColorStop('0', '#009688');
|
|||
|
|
// gradient.addColorStop('1.0', '#FF3B1D');
|
|||
|
|
ctx.setLineWidth(6);
|
|||
|
|
ctx.setStrokeStyle(gradient);
|
|||
|
|
ctx.setLineCap('round');
|
|||
|
|
ctx.beginPath();
|
|||
|
|
// 参数step 为绘制的百分比
|
|||
|
|
step = 0.015 * step + 0.75;
|
|||
|
|
if (step >= 2) {
|
|||
|
|
step = step % 2;
|
|||
|
|
}
|
|||
|
|
ctx.arc(110, 110, 70, 0.75 * Math.PI, step * Math.PI, false);
|
|||
|
|
ctx.stroke();
|
|||
|
|
ctx.draw();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.progress_box {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.progress_bg {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 220px;
|
|||
|
|
height: 220px;
|
|||
|
|
}
|
|||
|
|
.progress_bar {
|
|||
|
|
width: 220px;
|
|||
|
|
height: 220px;
|
|||
|
|
}
|
|||
|
|
.progress_txt {
|
|||
|
|
position: absolute;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
.progress_info {
|
|||
|
|
font-size: 36upx;
|
|||
|
|
padding-left: 16upx;
|
|||
|
|
letter-spacing: 2upx;
|
|||
|
|
font-size: 52upx;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.progress_titleP{
|
|||
|
|
color: #BFBFBF;
|
|||
|
|
}
|
|||
|
|
.progress_dot {
|
|||
|
|
width: 16upx;
|
|||
|
|
height: 16upx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #fb9126;
|
|||
|
|
}
|
|||
|
|
</style>
|