微信小程序云开发上传数据到云数据库

实现功能：实现对数组数据的动态更改，并能通过for循环，上传一整组数据到云数据库

代码：

1.wxml代码

<view >
  <view>运动症状</view>  
  <view class="margin"> 
    <view wx:for="{{Motor_symptoms}}" wx:key="id" >
      <view>{{item.id}}.{{item.name}}</view>
      <picker class="input_border" bindchange="_onChange" value="{{item.yesOrno}}"  id="{{item.id}}" range="{{smoking_array}}">
        <view class="picker">
         {{smoking_array[item.yesOrno]}} 
        </view>
      </picker> 
    
      <block wx:if="{{item.yesOrno == 1}}" >
          <view class="samll_item"  >
            <view class="">
              <view>出现时间</view>
              <picker class="input_border" mode="date"  value="{{item.time}}" id="{{item.id}}" start="1900-01-01" bindchange="bindTimeChang">
                  {{item.time}}
              </picker> 
            </view>
            <view class="" wx:if="{{item.id==1}}">
              <view>部位</view>
              <input bindinput="bindPartsChange" type="text" class="input_border"/>  
            </view> 
          </view>
      </block>
    </view>
  </view>
</view>

2.js代码：

const db = wx.cloud.database()
Page({

  /**
   * 页面的初始数据
   */
  data: {
      index:0,
      smoking_array:['无','有'],
      Time_of_appearance:'2020.02.02',
    // 运动症状
    Motor_symptoms:[
      {id:1,name:'震颤' ,yesOrno:0, time:'0.0.0', Parts:''},
      {id:2,name:'僵硬' ,yesOrno:0, time:'0.0.0' },
      {id:3,name:'面部表情改变' ,yesOrno:0, time:'0.0.0' },
      {id:4,name:'灵活度障碍' ,yesOrno:0, time:'0.0.0' },
      {id:5,name:'书写过小症' ,yesOrno:0, time:'0.0.0' },
      {id:6,name:'虚弱' ,yesOrno:0, time:'0.0.0' },
      {id:7,name:'冻结' ,yesOrno:0, time:'0.0.0' },
      {id:8,name:'小步前冲' ,yesOrno:0, time:'0.0.0' },
      {id:9,name:'不摆臂' ,yesOrno:0, time:'0.0.0' },
      {id:10,name:'走路时有拖步' ,yesOrno:0, time:'0.0.0' },
      {id:11,name:'姿势平衡障碍' ,yesOrno:0, time:'0.0.0' },
      {id:12,name:'跌倒' ,yesOrno:0, time:'0.0.0' },
      {id:13,name:'步态缓慢' ,yesOrno:0, time:'0.0.0' },
      {id:14,name:'平衡失调' ,yesOrno:0, time:'0.0.0' },
      {id:15,name:'生活不能自理' ,yesOrno:0, time:'0.0.0' },
    ],
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

//获取数组中被改变元素的索引，将索引值对应的对象元素中的yesOrno置为1
_onChange: function (e) {
    console.log("传回数据",e);   
    var i = e.currentTarget.id;
    console.log("i=",i);   
    //若当前显示‘有’，触发事件后改为‘无’，若当前显示‘无’，则改为‘有’
    if (this.data.Motor_symptoms[i-1].yesOrno==0) {
      this.setData({
        [`Motor_symptoms[${i-1}].yesOrno`]:1
      })
    }
    else{
      this.setData({
        [`Motor_symptoms[${i-1}].yesOrno`]:0
      })
    }

  },
  // 改变出现时间
  bindTimeChang: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    //想获得索引号，必须在wxml页面传回tiem.id的数据
    var i = e.currentTarget.id;
    console.log("i=",i);
    this.setData({
      [`Motor_symptoms[${i-1}].time`]:e.detail.value
    })
  },
 //上传数据到云数据库
  submit_basic_data:function(){
    //提示信息
     wx.showLoading({
       title:'信息提交中'
     })



    for (let index = 0; index < this.data.Motor_symptoms.length; index++) {
      const element = this.data.Motor_symptoms[index];
      db.collection('Now_Symptoms').add({
      // data 字段表示需新增的 JSON 数据
         data: {
          now_symptoms:element.name,
          time      :element.time,     
        },         
        success: function(res) {
          wx.hideLoading({
              title:'信息提交成功'
          })

          wx.showToast({
            title:"成功",
            icon: 'success',
            image: '../image/惊讶.jpg',
            duration: 2000,
            mask: true
      })
        }
      
      })
    }

  },
 

3.wxss

/* pages/scale_now_Symptoms/scale_now_Symptoms.wxss */
/* pages/scale_Medical_history/scale_Medical_history.wxss */

page {
  padding-top: 54rpx;
  background-color: #f6f6f6;
  padding-bottom: 60rpx;
}
.margin{
  margin-left: 25rpx;
}

/* 大框 */
.single_item{
  /* 每一个大项目一个大框，项目名+【有】/【无】单独占一行
  其他所有的待选项放在一个小框内*/
  border-style:solid;
  border-width: 1rpx;
  border-color: rgb(0, 0, 0);
  margin-bottom: 10rpx;
  background-color: rgb(255, 255, 255);
 

}
.samll_item{ 
  /* 每个大项目包含的所有待填项放在一个框内 */
  background-color: rgb(250, 253, 253);
  box-shadow: 1px 1px 1px 1px rgba(34, 33, 33, 0.562);
  margin-left:200rpx;
  margin-right:100rpx ;
  margin-top: 20rpx;

}

.input_border{
  display: flex;
  height: 50rpx;
  width: 200rpx;
  box-shadow: 1px 1px 1px 1px rgba(34, 33, 33, 0.562);
  margin-right: 20rpx;
  margin-left: 25rpx;
  text-align: center;
  justify-content: center;
  
}



.wx_if_border{
  /* 边框浅黑 */
  
  outline-color: rgb(10, 10, 10);
  outline-width: 2rpx;

}
.text{
  font-size: small;
}

.in{
  font-size:small;
  height: 70rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;

}


.title {
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  font-size: 44rpx;
  margin-bottom: 40rpx;
  display: flex;
  justify-content: center;
}