2023.11.29

riku

2023-11-29 9b09d13712c0c005891450a3bf4b6d848ec0ff37

 component/progress/progress.js

@@ -12,6 +12,8 @@
   */
  data: {
    progress_txt: '信用较差',
    progress_txt_color1: '#f1fefc',
    progress_txt_color2: '#b4f7ec',
    count: 0, // 设置 计数器 初始为0
    countTimer: null, // 设置 定时器 初始为null
    x: 100,
@@ -25,17 +27,30 @@

  observers: {
    'progress': function (progress) {
      if (progress >= 90) {
        this.setData({
          progress_txt: '信用优秀'
        })
      } else if (progress >= 60) {
        this.setData({
          progress_txt: '信用一般'
        })
      if (progress) {
        if (progress >= 90) {
          this.setData({
            progress_txt_color1: '#f2fff7',
            progress_txt_color2: '#96f3bd',
            progress_txt: '信用优秀'
          })
        } else if (progress >= 60) {
          this.setData({
            progress_txt_color1: '#f6f2e3',
            progress_txt_color2: '#f6e59f',
            progress_txt: '信用一般'
          })
        } else {
          this.setData({
            progress_txt_color1: '#fff6f6',
            progress_txt_color2: '#f29696',
            progress_txt: '信用较差'
          })
        }
      } else {
        this.setData({
          progress_txt: '信用较差'
          progress_txt_color1: '#f1fefc',
          progress_txt_color2: '#b4f7ec',
        })
      }
      this.drawProgressCircle(progress / 100)
@@ -79,7 +94,7 @@
      wx.createSelectorQuery().in(this)
        .select("#canvasProgressbg")
        .context(function (res) {
          console.log("节点实例：", res);
          // console.log("节点实例：", res);
          // 节点对应的 Canvas 实例。
          ctx = res.context;
          ctx.setLineWidth(8); // 设置圆环的宽度
@@ -95,7 +110,7 @@

          ctx.setStrokeStyle('#76ECD3');
          ctx.setFillStyle('#76ECD3')
          for (let i = 0; i <5; i++) {
          for (let i = 0; i < 5; i++) {
            var radian = Math.PI / 4 * i
            var x1 = x - Math.sin(radian) * (r - 10)
            var y1 = y + Math.cos(radian) * (r - 10)
@@ -114,7 +129,7 @@
              var text = i / 4 * 100 + ''
              var metrics = ctx.measureText(text)
              var w = metrics.width
              ctx.fillText(text, x3 - w / 2, y3+4)
              ctx.fillText(text, x3 - w / 2, y3 + 4)

            }
          }
@@ -136,13 +151,14 @@
      wx.createSelectorQuery().in(this)
        .select("#canvasProgress")
        .context(function (res) {
          console.log("节点实例：", res); // 节点对应的 Canvas 实例。
          // console.log("节点实例：", res); // 节点对应的 Canvas 实例。
          ctx = res.context;
          // 设置渐变
          var gradient = ctx.createLinearGradient(200, 100, 100, 200);
          gradient.addColorStop("0", "#76ECD3");
          gradient.addColorStop("0.5", "#76ECD3");
          gradient.addColorStop("1.0", "#76ECD3");
          var gradient = ctx.createLinearGradient(0, 0, 0, 200);
          gradient.addColorStop("0", "#96f3bd");
          gradient.addColorStop("0.1", "#f6e59f");
          gradient.addColorStop("0.4", "#f6e59f");
          gradient.addColorStop("1.0", "#f29696");

          ctx.setLineWidth(10);
          ctx.setStrokeStyle(gradient);