<!--pages/MyIncome/MyIncome.wxml-->
<view class='forms'>
  <form bindsubmit='getForm'>
    <view class='getform'>
      <view>使用者名稱:
        <input type='text' name='username' placeholder='請輸入使用者名稱'/>
      </view>
      <view>年齡:
        <input type='text' name='age' placeholder='請輸入年齡'></input>
      </view>
      <view>性別:
        <input type='text' name='gender' placeholder='請輸入性別'></input>
      </view>
    </view>

    <view class="btn-area">
       <button formType="submit">Submit</button>
    </view>
  </form>

   <view class="btn-area">
       <button bindtap='getData'>Get</button>
    </view>
</view>
 

/* pages/MyIncome/MyIncome.wxss */
.btn-area{
    background-color: #e4e4e4;
    width: 30%;
    margin: auto; /*居中處理*/
    border-radius: 20rpx;
    margin-top: 10px;
  
  }

// pages/MyIncome/MyIncome.js
// pages/page_02/page_02.js
Page({

    /**
     * 頁面的初始資料
     */
    data: {
      username:"",
      age:0,
      gender:""
  
    },
  
    /**
     * 生命週期函式--監聽頁面載入
     */
    onl oad: function (options) {
  
    },
  
    /**
     * 生命週期函式--監聽頁面初次渲染完成
     */
    onReady: function () {
  
    },
  
    getForm:function(e){
      var formdata = e.detail.value;
      this.setData({
        "data.username":formdata.username,
        "data.age":formdata.age,
        "data.gender":formdata.gender
      })
      console.log("更新data",e)
    },
  
    getData:function(e){
      var getdata = this.data;
      const db = wx.cloud.database();
      db.collection("user_info").add({
        data:{
          username:getdata.data.username,
          age:getdata.data.age,
          gender:getdata.data.gender
        }
      }).then(res=>{
        console.log("新增至資料庫成功",res)
      }).catch(res=>{
        console.log("新增失敗",res)
      })
    }
  })