微信小程序健身记录管理

于 2022-06-27 11:22:15 发布
阅读量491 收藏 2
点赞数
分类专栏： 前端 文章标签： 微信小程序 前端 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AnalogElectronic/article/details/125480451
版权

健身记录 统计分析 云函数 数据库查询 用户交互
关键词由CSDN通过智能技术生成

先演示
在这里插入图片描述
在这里插入图片描述
上代码
index.wxml

<view class="bj">

<view class="header1">
  {{'健身汇总  累计健身次数'+queryResult.length+'次'}}
</view>

<view class="huizong" value="{{cntInfo}}" range="{{array}}">
{{cntInfo.cnt0==0?'':array[0]+cntInfo.cnt0+'个  '}}
{{cntInfo.cnt1==0?'':array[1]+cntInfo.cnt1+'个  '}}
{{cntInfo.cnt2==0?'':array[2]+cntInfo.cnt2+'个  '}}
{{cntInfo.cnt3==0?'':array[3]+cntInfo.cnt3+'个  '}}
{{cntInfo.cnt4==0?'':array[4]+cntInfo.cnt4+'个  '}}
{{cntInfo.cnt5==0?'':array[5]+cntInfo.cnt5+'个  '}}
{{cntInfo.cnt6==0?'':array[6]+cntInfo.cnt6+'个  '}}
{{cntInfo.cnt7==0?'':array[7]+cntInfo.cnt7+'个  '}}
{{cntInfo.cnt8==0?'':array[8]+cntInfo.cnt8+'个  '}}
{{cntInfo.cnt9==0?'':array[9]+cntInfo.cnt9+'个  '}}
{{cntInfo.cnt10==0?'':array[10]+cntInfo.cnt10+'个  '}}
{{cntInfo.cnt11==0?'':array[11]+cntInfo.cnt11+'个  '}}
{{cntInfo.cnt12==0?'':array[12]+cntInfo.cnt12+'公里  '}}
{{cntInfo.cnt13==0?'':array[13]+cntInfo.cnt13+'米  '}}
{{cntInfo.cnt14==0?'':array[14]+cntInfo.cnt14+'分钟  '}}



</view>


<label bindtap="toExample" class="header1">健身记录</label> 
<label class="reset" bindtap="reset">重置查询条件</label>
<view class="section" style="z-index: 999;">
  <form catchreset="formReset">
    <picker mode="selector" bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      健身类型：{{index==null?'~':array[index]}}  
    </view>
  </picker>
  <picker mode="date" fields="month" bindchange="bindMultiPickerChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
      健身时间：{{queryParam.date==null?'~':queryParam.date}}
    </view>
  </picker>
  <!-- <button style="margin: 30rpx 0" formType="reset">Reset</button> -->
</form>
</view>
<image class="add" src="../../image/icon-add.png" bindtap="add"/>
<view class="container"  wx:for="{{queryResult}}" wx:key="_id">
  <view class="card">
  <view>健身类型：{{array[item.fit_type]}}</view>
  <view>个数/分钟：{{item.cnt}}</view>
  <view>健身日期：{{item.fit_date}}</view>
  </view>
</view>


</view>

index.js

//index.js
const app = getApp()

Page({
  data: {
    queryResult:[],
    cntInfo:{},
    array: ['仰卧起坐','俯卧撑','引体向上','自重深蹲','俯身W抬头','窄距俯卧撑','屈腿两头起','5kg哑铃','站立扭腰','单车推拉','反转上杠','跳绳','跑步','游泳','平板支撑','握力器'],
    index: null,
    queryParam:{}
  },

  onLoad: function() {
    if (!wx.cloud) {
      wx.redirectTo({
        url: '../chooseLib/chooseLib',
      })
      return
    }
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true,
      })
    }

    // 调用云函数
    wx.cloud.callFunction({
      name: 'findFitRecordList',
      data: {
      },
      success: res => {
        var cnt0 = 0;
        var cnt1 = 0;
        var cnt2 = 0;
        var cnt3 = 0;
        var cnt4 = 0;
        var cnt5 = 0;
        var cnt6 = 0;
        var cnt7 = 0;
        var cnt8 = 0;
        var cnt9 = 0;
        var cnt10 = 0;
        var cnt11 = 0;
        var cnt12 = 0;
        var cnt13 = 0;
        var cnt14 = 0;


        for(var i=0;i<res.result.data.length;i++){
          var obj = res.result.data[i];
          const cnt = new Number(obj.cnt);
          switch(obj.fit_type){
            case "0":cnt0+=cnt;break;
            case "1":cnt1+=cnt;break;
            case "2":cnt2+=cnt;break;
            case "3":cnt3+=cnt;break;
            case "4":cnt4+=cnt;break;
            case "5":cnt5+=cnt;break;
            case "6":cnt6+=cnt;break;
            case "7":cnt7+=cnt;break;
            case "8":cnt8+=cnt;break;
            case "9":cnt9+=cnt;break;
            case "10":cnt10+=cnt;break;
            case "11":cnt11+=cnt;break;
            case "12":cnt12+=cnt;break;
            case "13":cnt13+=cnt;break;
            case "14":cnt14+=cnt;break;
            default:break;
          }
        }
        var centInfo = {};
        centInfo['cnt0'] = cnt0;
        centInfo['cnt1'] = cnt1;
        centInfo['cnt2'] = cnt2;
        centInfo['cnt3'] = cnt3;
        centInfo['cnt4'] = cnt4;
        centInfo['cnt5'] = cnt5;
        centInfo['cnt6'] = cnt6;
        centInfo['cnt7'] = cnt7;
        centInfo['cnt8'] = cnt8;
        centInfo['cnt9'] = cnt9;
        centInfo['cnt10'] = cnt10;
        centInfo['cnt11'] = cnt11;
        centInfo['cnt12'] = cnt12;
        centInfo['cnt13'] = cnt13;
        centInfo['cnt14'] = cnt14;


        this.setData({
          queryResult: res.result.data,
          cntInfo:centInfo,
        });
        console.log('[数据库] [查询记录] 成功: ', res.result.data)
      },
      fail: err => {
        console.error('[云函数] [add] 调用失败', err)
      }
    })
  },

  getUserProfile() {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          avatarUrl: res.userInfo.avatarUrl,
          userInfo: res.userInfo,
          hasUserInfo: true,
        })
      }
    })
  },

  onGetUserInfo: function(e) {
    if (!this.data.logged && e.detail.userInfo) {
      this.setData({
        logged: true,
        avatarUrl: e.detail.userInfo.avatarUrl,
        userInfo: e.detail.userInfo,
        hasUserInfo: true,
      })
    }
  },

  formSubmit(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },

  add(){
    wx.navigateTo({
      url: '../page07/index',
    })
  },
  toExample(){
    wx.navigateTo({
      url: '../example/index',
    })
  },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    var param = this.data.queryParam;
    param['type'] = e.detail.value;
    this.setData({
      index: e.detail.value,
      queryParam:param
    })
    console.log(this.data.queryParam);
    const queryParam  = this.data.queryParam;
    const db = wx.cloud.database()
    let q = db.collection('fitness_record');
    q = q.where({fit_type: queryParam.type});
    q.get({
      success: res => {
        var cnt0 = 0;
        var cnt1 = 0;
        var cnt2 = 0;
        var cnt3 = 0;
        var cnt4 = 0;
        var cnt5 = 0;
        var cnt6 = 0;
        var cnt7 = 0;
        var cnt8 = 0;
        var cnt9 = 0;
        var cnt10 = 0;
        var cnt11 = 0;
        var cnt12 = 0;
        var cnt13 = 0;
        var cnt14 = 0;


        for(var i=0;i<res.data.length;i++){
          var obj = res.data[i];
          const cnt = new Number(obj.cnt);
          switch(obj.fit_type){
            case "0":cnt0+=cnt;break;
            case "1":cnt1+=cnt;break;
            case "2":cnt2+=cnt;break;
            case "3":cnt3+=cnt;break;
            case "4":cnt4+=cnt;break;
            case "5":cnt5+=cnt;break;
            case "6":cnt6+=cnt;break;
            case "7":cnt7+=cnt;break;
            case "8":cnt8+=cnt;break;
            case "9":cnt9+=cnt;break;
            case "10":cnt10+=cnt;break;
            case "11":cnt11+=cnt;break;
            case "12":cnt12+=cnt;break;
            case "13":cnt13+=cnt;break;
            case "14":cnt14+=cnt;break;
            default:break;
          }
        }
        var centInfo = {};
        centInfo['cnt0'] = cnt0;
        centInfo['cnt1'] = cnt1;
        centInfo['cnt2'] = cnt2;
        centInfo['cnt3'] = cnt3;
        centInfo['cnt4'] = cnt4;
        centInfo['cnt5'] = cnt5;
        centInfo['cnt6'] = cnt6;
        centInfo['cnt7'] = cnt7;
        centInfo['cnt8'] = cnt8;
        centInfo['cnt9'] = cnt9;
        centInfo['cnt10'] = cnt10;
        centInfo['cnt11'] = cnt11;
        centInfo['cnt12'] = cnt12;
        centInfo['cnt13'] = cnt13;
        centInfo['cnt14'] = cnt14;


        this.setData({
          queryResult: res.data,
          cntInfo:centInfo,
        });
        console.log('[数据库] [查询记录] 成功: ', res.data)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查询记录失败'
        })
        console.error('[数据库] [查询记录] 失败：', err)
      }
    })
  },
  bindMultiPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value);
    const date =e.detail.value;
    var param = {...this.data.queryParam};
    param['date'] = e.detail.value;
    this.setData({
      queryParam: param
    });
    console.log(this.data.queryParam);
    const queryParam  = this.data.queryParam;
    const db = wx.cloud.database()
    let q = db.collection('fitness_record');
      q = q.where({fit_date: db.RegExp({
        regexp:queryParam.date,
        options:'i'
      })});
    q.get({
      success: res => {
        var cnt0 = 0;
        var cnt1 = 0;
        var cnt2 = 0;
        var cnt3 = 0;
        var cnt4 = 0;
        var cnt5 = 0;
        var cnt6 = 0;
        var cnt7 = 0;
        var cnt8 = 0;
        var cnt9 = 0;
        var cnt10 = 0;
        var cnt11 = 0;
        var cnt12 = 0;
        var cnt13 = 0;
        var cnt14 = 0;


        for(var i=0;i<res.data.length;i++){
          var obj = res.data[i];
          const cnt = new Number(obj.cnt);
          switch(obj.fit_type){
            case "0":cnt0+=cnt;break;
            case "1":cnt1+=cnt;break;
            case "2":cnt2+=cnt;break;
            case "3":cnt3+=cnt;break;
            case "4":cnt4+=cnt;break;
            case "5":cnt5+=cnt;break;
            case "6":cnt6+=cnt;break;
            case "7":cnt7+=cnt;break;
            case "8":cnt8+=cnt;break;
            case "9":cnt9+=cnt;break;
            case "10":cnt10+=cnt;break;
            case "11":cnt11+=cnt;break;
            case "12":cnt12+=cnt;break;
            case "13":cnt13+=cnt;break;
            case "14":cnt14+=cnt;break;
            default:break;
          }
        }
        var centInfo = {};
        centInfo['cnt0'] = cnt0;
        centInfo['cnt1'] = cnt1;
        centInfo['cnt2'] = cnt2;
        centInfo['cnt3'] = cnt3;
        centInfo['cnt4'] = cnt4;
        centInfo['cnt5'] = cnt5;
        centInfo['cnt6'] = cnt6;
        centInfo['cnt7'] = cnt7;
        centInfo['cnt8'] = cnt8;
        centInfo['cnt9'] = cnt9;
        centInfo['cnt10'] = cnt10;
        centInfo['cnt11'] = cnt11;
        centInfo['cnt12'] = cnt12;
        centInfo['cnt13'] = cnt13;
        centInfo['cnt14'] = cnt14;


        this.setData({
          queryResult: res.data,
          cntInfo:centInfo,
        });
        console.log('[数据库] [查询记录] 成功: ', res.data)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查询记录失败'
        })
        console.error('[数据库] [查询记录] 失败：', err)
      }
    })
  },

  reset(e) {
    this.setData({
      queryParam: {},
      index: null
    })
    this.onLoad()
  },
})

index.wxss

.touxiang{
  margin: 5px 5px 0 5px;
  width:25%;
  height: 85px;
}

.header1{
  color :white;
}

.biaoqian{
  position: relative;
  display: inline-block;
  width:70%;
}

.card{
  border:solid 1px rgb(2, 152, 252);
  width:60%;
  border-radius: 10px;
  margin-top: 5px;
  padding: 5px;
  font-size: smaller;
  color :white;
}

.card label{
  display: inline-block;
  margin-right: 18px;
  margin-bottom: 2px;
  font-size: smaller;
  color: cornflowerblue;
  padding: 1.5px;
  border-radius: 5px;
  border: 1px solid grey;
}

.add{
  position: fixed;
  width:60px;
  height: 60px;
  top: 560px;
  right: 20px;
  z-index: 99;
}

.picker{
  margin-left: 20%;
  margin-top: 15px;
  color: white;
  display: block;
}

.reset{
  text-decoration: underline;
  color: blue;
  font-size: small;
  text-decoration: underline;
}

.huizong{
  border:solid 1px rgb(146, 170, 243);
  width:90%;
  margin: auto;
  padding: 5px;
  color :white;
  font-size: smaller;
}

.jjjj{
  background-image: "../../image/banner1.png";
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background-size: cover;
  background-repeat: no-repeat;
}

.head-bg{
  width: 750rpx;
  height: 540rpx;
  background-image: url('cloud://cloud1-3g5utaj4877a8e8c.636c-cloud1-3g5utaj4877a8e8c-1305331371/4545.jpeg');
  background-size: 100% 100%;
}

.bj{
  background-image: url('http://pic1.win4000.com/m00/bc/2b/879cf9baf95098d1478ee37193630104.jpg');
  background-size: 100%;
}
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值