微信小程序表单
跟朋友做了一个量衣定制的小程序页面,做了主要是采集用户的身体数据,分享给大家,复制代码过去即可使用!
效果:
代码:
wxml:
<view class='baseInfo'>
<text>基本信息</text>
</view>
<form bindsubmit="formSubmit">
<view class='list'>
<view class='name'>
<text>姓名</text>
<input name="name" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的姓名'></input>
</view>
<view class='sex'>
<text>性别</text>
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for="{{sex}}" wx:key="index">
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group>
</view>
<view class='phone'>
<text>年龄(岁)</text>
<input name="nl" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的年龄'></input>
</view>
<view class='phone'>
<text>身高(CM)</text>
<input name="sg" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你身高'></input>
</view>
<view class='phone'>
<text>体重(KG)</text>
<input name="tz" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的体重'></input>
</view>
<view class='baseInfo'>
<text>身体信息</text>
</view>
<view class='baseInfo'>
<text>上身:</text>
</view>
<view class='phone'>
<text>领围(CM)</text>
<input name="lw" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的领围(CM)'></input>
</view>
<view class='phone'>
<text>肩宽(CM)</text>
<input name="jk" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的肩宽(CM)'></input>
</view>
<view class='phone'>
<text>胸围(CM)</text>
<input name="xw" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的胸围(CM)'></input>
</view>
<view class='phone'>
<text>中腰(CM)</text>
<input name="zy" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的中腰(CM)'></input>
</view>
<view class='phone'>
<text>袖长(CM)</text>
<input name="xc" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的袖长(CM)'></input>
</view>
<view class='baseInfo'>
<text>下身:</text>
</view>
<view class='phone'>
<text>腰围(CM)</text>
<input name="yw" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的腰围(CM)'></input>
</view>
<view class='phone'>
<text>臀围(CM)</text>
<input name="tw" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的臀围(CM)'></input>
</view>
<view class='phone'>
<text>横档(CM)</text>
<input name="hd" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的横档(CM)'></input>
</view>
<view class='phone'>
<text>裤长(CM)</text>
<input name="kc" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的裤长(CM)'></input>
</view>
</view>
<button form-type='submit'>保存</button>
</form>
<!-- 模态框 -->
<modal class="modal" title='要保存的信息' hidden="{{modalHidden}}" bindcancel='modalCancel' bindconfirm='modalConfirm'>
<view>姓名:{{information.name}}</view>
<view>姓别:{{userSex}}</view>
<view>年龄:{{information.nl}}</view>
<view>身高:{{information.sg}}</view>
<view>体重:{{information.tz}}</view>
</modal>
<!-- /模态框 -->
wxss:
page{
background: #eee;
}
.baseInfo{
padding:20rpx 10rpx;
}
.baseInfo text{
font-size: 28rpx;
color: #6f6f6f;
}
.list{
color: #6f6f6f;
font-size: 32rpx;
}
.name,.sex,.phone,.info{
background: #fff;
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
padding: 20rpx;
border-bottom: 1rpx solid #eee;
}
.name input,.phone input,.info input{
text-align:right;
}
.sex{
background: #fff;
}
.radio radio{
margin-left: 30rpx;
}
button{
background-color: #FE6702;
color: #fff;
width: 100%;
}
.modal view{
text-align: center;
}
js:
Page({
/**
* 页面的初始数据
*/
data: {
touxiang: 'https://manager.diandianxc.com/diandianxc/mrtx.png',
icon_r: 'https://manager.diandianxc.com/mine/enter.png',
sex:[
{name:'0',value:'男',checked:'true'},
{name:'1',value:'女'}
],
isSex:"0",
information:[],
userSex:'',
modalHidden:true
},
//单选按钮发生变化
radioChange(e){
console.log(e.detail.value);
var sexName=this.data.isSex
this.setData({
isSex:e.detail.value
})
},
//表单提交
formSubmit(e){
console.log(e.detail.value);
var userSex=this.data.isSex==0?'男':'女';
var information= e.detail.value;
console.log(userSex);
this.setData({
information: e.detail.value,
userSex,
modalHidden:false
});
},
//模态框取消
modalCancel(){
wx.showToast({
title: '取消提交',
icon:'none'
})
this.setData({
modalHidden:true,
})
},
//模态框确定
modalConfirm:function(e) {
this.setData({
})
wx.showToast({
title: '提交成功',
icon:'success'
})
this.setData({
modalHidden: true
})
},
onLoad: function (options) {
}
})