小程序信息提交到云开发
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', }) }, })