小程序信息提交到云开发

1页面编写

<view class="content">  
  <view class="demo-text-1" >*</view>  
  <view class="demo-text-2" > 姓名：</view>  
  <view class="demo-text-3" ><input placeholder="请输入姓名" bindinput="getname" > </input>  </view>  
   <view class="demo-text-4" > </view> 
</view>

<view class="content">  
  <view class="demo-text-1" >*</view>  
  <view class="demo-text-2" >电话：</view>  
  <view class="demo-text-3" ><input placeholder="请输入电话" bindinput="getphone"> </input>  </view>  
   <view class="demo-text-4" > </view> 
</view>

<view class="content">  
  <view class="demo-text-1" >*</view>  
  <view class="demo-text-2" > 身份证：</view>  
  <view class="demo-text-3" ><input placeholder="请输入身份证号码" bindinput="getsfz"> </input>  </view>  
   <view class="demo-text-4" > </view> 
</view>

<view class="content">  
  <view class="demo-text-1" >*</view>  
  <view class="demo-text-2" > 部门：</view>  
  <view class="demo-text-3" >
  
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  <text >{{bumeng}}</text>
  </picker>
 
   </view>  
   <view class="demo-text-4" > </view> 
</view>

<view class="content">  
  <view class="demo-text-1" >*</view>  
  <view class="demo-text-2" > 体温：</view>  
  <view class="demo-text-3" ><input placeholder="请输入体温" bindinput="gettiwen"> </input>  </view>  
   <view class="demo-text-4" > </view> 
</view>

<view class="content">  
  <view class="demo-text-1" >*</view>  
  <view class="demo-text-2" > 位置：</view>  
  <view class="demo-text-3" >
  <text bindtap="getUserLocation" >{{address}}</text>
   </view>  
  <view class="demo-text-4" >


  <button class="imgtb"style="background-image:url(https://7179-qyww-umgn9-1301480214.tcb.qcloud.la/img/marker_red.png?sign=4c58fdb6ffde9ef6045dba095df1b78e&t=1583974406);"  bindtap="getditu" plain="true"></button>

  </view> 

</view>

  <view class="content xzi">  
默认同意<text bindtap="getuserxieyi">《用户服务协议》</text>及<text bindtap="getuseryinsi">《隐私政策》</text>
  </view>

  <view class="content">  
<button type="primary" bindtap="tijiao">提交</button>
  </view>

　　2.参考样式

.content{  
  display: flex;  
  flex-direction: row;  
  width: 100%;
  padding: 20rpx;
}

.demo-text-1{
  flex:0.5;
  text-align:right;
  color: red;
}
.demo-text-2{
  flex:2;
  text-align:justify;
   text-align-last:left;
}
.demo-text-3{
  flex:6;
  text-align:justify;
   text-align-last:left;
}
.demo-text-4{
  flex:1.5;
  width: 10px;
  text-align:left;
  
}
button.imgtb{
  height: 40rpx;
  width: 40rpx;
  border:none;
  background-image:"../img/marker_red.png" ;
  background-repeat:no-repeat;
  background-size: 40rpx 40rpx;
  background-position:10%;


}
.xzi{
  font-size: smaller;
}

　　3.实现

//index.js
//获取应用实例
const app = getApp();

// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
 
// 实例化API核心类
var demo = new QQMapWX({
  key: 'VBOBZ-SUWEW-RJJRP-RLWYN-GJPYZ-3VBYF' // 必填 

});

Page({
  data: {
    array: ['红色', '橙色', '黄色', '绿色', '青色', '蓝色', '紫色'],
    bumeng:'请选择部门',
    bumengid:'',
    address:'点击获取位置信息',
    name:'',phone:'',sfz:'',tiwen:''
  },
   // 单列选择器
   bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value);//index为数组点击确定后选择的item索引
    this.setData({
      bumengid:e.detail.value,
     

    })
    let bumengid=this.data.bumengid
    console.log("取出bumengid的值", bumengid)
    if(bumengid=='0'){
      this.setData({
        bumeng:'红色'
      })
      let bumeng=this.data.bumeng
      console.log("为0的时候", bumeng)
    }
    else if(bumengid=='1'){
      this.setData({
        bumeng:'橙色'
      })
    }
    else if(bumengid=='2'){
      this.setData({
        bumeng:'黄色'
      })
    }else if(bumengid=='3'){
      this.setData({
        bumeng:'绿色'
      })
    }else if(bumengid=='4'){
      this.setData({
        bumeng:'青色'
      })
    }else if(bumengid=='5'){
      this.setData({
        bumeng:'蓝色'
      })
    }else if(bumengid=='6'){
      this.setData({
        bumeng:'紫色'
      })
    }
 
  },
  getditu:function(e){
    var me = this;
    // 地理位置
  wx.getLocation({
    type: 'wgs84',
    success(res) {
      console.log(res)
      const latitude = res.latitude
      const longitude = res.longitude
      const speed = res.speed
      const accuracy = res.accuracy
      // 调用接口转换成具体位置
      demo.reverseGeocoder({
        location: {
          latitude: res.latitude,
          longitude: res.longitude
        },
        success: function (res) {
          console.log('位置获取成功',res.result)
          me.setData({
            address:res.result.address
          })
          
        },
        fail: function (res) {
          console.log(res);
        },
 
      })
    }
  })

  },
   /**
   *获取用户当前地理位置
   */
  getUserLocation() {
    var that = this
    wx.chooseLocation({
      success: function (res) {
        console.log(res)
        that.setData({
          latitude2: res.latitude,
          longitude2: res.longitude,
          name: res.name,
          address: res.address
        })
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })

  },
 
  getname:function(event){
    this.setData({
      name:event.detail.value
    })
  },
  getphone:function(event){
    this.setData({
      phone:event.detail.value
    })
  },
  getsfz:function(event){
    this.setData({
      sfz:event.detail.value
    })
  },
  gettiwen:function(event){
    this.setData({
      tiwen:event.detail.value
    })
  },
  tijiao:function(e){
    let name=this.data.name
    let phone=this.data.phone
    let sfz=this.data.sfz
    let tiwen=this.data.tiwen
    let bumeng=this.data.bumeng
    let address=this.data.address
    let bumengid=this.data.bumengid
    console.log("点击了提交")
    console.log("name", name)
    console.log("phone", phone)
    console.log('sfz',sfz)
    console.log('tiwen',tiwen)
    console.log('bumeng',bumeng)
    console.log('bumengid',bumengid)
    console.log("weizhi",address)

    //校验
    if(name.length<2){
      wx.showToast({
        icon:"none",
        title: '姓名至少2位!',
      })
      return
    }if(phone.length!=11){
      wx.showToast({
        icon:"none",
        title: '电话号码不正确!',
      })
      return
    }if(sfz.length!=18){
      wx.showToast({
        icon:"none",
        title: '身份证号码不正确!',
      })
      return
    }if(bumengid==""){
      wx.showToast({
        icon:"none",
        title: '部门不能为空!',
      })
      return
    }if(tiwen.length==0){
      wx.showToast({
        icon:"none",
        title: '体温不能为空!',
      })
      return
    }
    //信息提交数据库
    wx.cloud.database().collection('dengji').add({
      data:{
        name:name,
        phone:phone,
        sfz:sfz,
        tiwen:tiwen,
        bumengid:bumengid,
        address:address
      },
      success(res){
        console.log('提交成功',res)
        wx.showToast({
          title: '成功',
        }),
        wx.navigateTo({
          url: '../success/success',
        })

      },
      fail(res){
        console.log('提交失败',res)
      }
    })




  },
  getuserxieyi:function(enent){
    wx.navigateTo({
      // url: '../userxieyi/userxieyi',
      url: '../yinsi/yinsi',
    })
  },
  getuseryinsi:function(enent){
    wx.navigateTo({
      url: '../yinsi/yinsi',
    })
  },

})