微信小程序剩余名额圆形控件+时间戳格式化

效果图

wxml文件

<!-- 顶部固定窗口 -->
<view class="top"></view>
<!-- 中间的圆形控件卡片 -->
<view class="cards">
  <view class="card" wx:for="{{info_list}}" wx:key="id">
    <view class="card_left">
      <view class="card_header">{{item.name}}</view>
      <view class="card_time">{{item.dayName}} {{formatData(item.startTime)}}</view>
      <view class="card_college">{{item.collegeName}}</view>
      <view class="card_class_hour">{{item.classHours}}</view>
    </view>
    <view class="card_right">
      <canvas class="canvas_bg" id="canvas_bg" canvas-id="canvas_bg{{index}}"></canvas>
      <canvas class="canvas_dy" id="cnavas_dy" canvas-id="canvas_dy{{index}}"></canvas>
      <view class="canvas_text">
        <view>{{item.surplusNumber}}/{{item.totalNumber}}</view>
        <view>剩余人数</view>
      </view>
    </view>
  </view>
  <view class="canvas_box">
    
  </view>
</view>
<!-- 底部的固定卡片 -->
<view class="bottom"></view>

<wxs module="formatData">
  module.exports=function(value){
    
        var date = getDate(parseInt(value))
        var y = date.getFullYear()
        var MM = date.getMonth() + 1
        MM = MM < 10 ? ('0' + MM) : MM
        var d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        var h = date.getHours()
        h = h < 10 ? ('0' + h) : h
        var m = date.getMinutes()
        m = m < 10 ? ('0' + m) : m
        var s = date.getSeconds()
        s = s < 10 ? ('0' + s) : s
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
}
</wxs>

wxss文件

page{
  font-size: 26rpx;
}
.top{
  position: fixed;
  top: 0;
  width: 100vw;
  height: 120rpx;
  background-color: cornflowerblue;
  z-index: 99;
}
.cards{
  margin: 150rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80vw;
  height: 340rpx;
  margin: 30rpx 0;
  padding: 10rpx 30rpx;
  border: 1rpx solid black;
}
.card_left view{
  padding: 10rpx;
}
.card_header{
  width: 240rpx;
  font-size: 36rpx;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card_right{
  width: 200rpx;
  height: 200rpx;
  border: 1rpx solid black;
  position: relative;
}
.canvas_bg{
  width: 200rpx;
  height: 200rpx;
  position: absolute;

}
.canvas_dy{
  width: 200rpx;
  height: 200rpx;
  position: absolute;

}
.canvas_text{
  position: absolute;
  top: 60rpx;
  left:60rpx;
}
.bottom{
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 120rpx;
  background-color: cornflowerblue;
}

js文件

Page({
  data: {
    info_list: [
      { id: 1, name: "大学思想政治教育", dayName: "周一", startTime: "1586252933495", classHours: 4, collegeName: "建筑学院", surplusNumber: 10, totalNumber: 50 },
      { id: 2, name: "Vue.js从入门到项目实战", dayName: "周二", startTime: 1634193575521, classHours: 2, collegeName: "经济管理学院", surplusNumber: 20, totalNumber: 50 },
      { id: 3, name: "Java编程思想", dayName: "周三", startTime: 1634193575521, classHours: 4, collegeName: "建筑学院", surplusNumber: 30, totalNumber: 50 },
      { id: 4, name: "JavaScript与jQuery实战教程", dayName: "周四", startTime: 1634193575521, classHours: 1, collegeName: "新闻与传播学院", surplusNumber: 40, totalNumber: 50 }]
  },
  onLoad() {
    this.getInfo()
  },
  getInfo() {
    this.data.info_list.forEach((item, index) => {
      let query = wx.createSelectorQuery();
      query.select('#canvas_bg').boundingClientRect();
      query.exec((res) => {
        console.log(res[0].width, res[0].height);
        let canv = wx.createCanvasContext('canvas_bg' + index);
        canv.setLineWidth(res[0].width / 11);
        canv.setStrokeStyle('#EEEEEE')
        canv.setLineCap('round')
        canv.beginPath();
        canv.arc(res[0].width / 2, res[0].height / 2, res[0].width / 2.34, 0, 2 * Math.PI, true);
        canv.stroke();
        canv.draw();
        let canv1 = wx.createCanvasContext('canvas_dy' + index);
        canv1.setLineWidth(res[0].width / 11);
        canv1.setStrokeStyle('#2C70F8')
        canv1.setLineCap('round')
        canv1.beginPath();
        let n = item.surplusNumber
        let m = item.totalNumber
        canv1.arc(res[0].width / 2, res[0].height / 2, res[0].width / 2.34, -0.5 * Math.PI, -(n / m * 2 * Math.PI) - 0.5 * Math.PI, true);
        canv1.stroke();
        canv1.draw();
      })
    })

  }

})