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',
})
},
})