设置功能用来保存用户的基本信息,比如电话地址等,便于用户购买商品时将这些信息保存到数据库的订单表中,
从而为发货环节提供收货信息,setting.wxml代码如下:
1 <!--pages/member/setting.wxml--> 2 <view class="container"> 3 4 <view class="memberInfo1"> 5 <form class="form1" bindsubmit="formSubmit"> 6 <text class="text1">昵称:</text> 7 <input class="input1" name="name" type="text" /> 8 <text class="text1">电话:</text> 9 <input class="input1" name="tel" type="text" /> 10 <text class="text1">收货地址:</text> 11 <input class="input1" name="addr" type="text" /> 12 <text class="text1">邮件:</text> 13 <input class="input1" name="mail" type="text" /> 14 <button class="button1" formType="submit">保存</button> 15 </form> 16 </view> 17 18 </view>
对应的wxss文件如下:
1 .memberInfo1 2 { 3 width: 96%; 4 box-sizing: border-box; 5 } 6 .form1{ 7 width: 100%; 8 } 9 .input1 10 { 11 height:80rpx; 12 background-color: #f0f0f0; 13 padding-left: 10rpx; 14 } 15 16 .button1 17 { 18 margin-top: 60rpx; 19 height: 80rpx; 20 line-height: 80rpx; 21 }
页面定义了几个输入控件供用户输入数据,在button中定义了一个submit类型的按钮,
用户点保存按钮时触发form的bindsubmit事件,页面执行对应的formSubmit函数,代码如下:
1 formSubmit: function (options) { 2 let formobj = options.detail.value; 3 let name = formobj.name; 4 let tel = formobj.tel; 5 let addr = formobj.addr; 6 let mail = formobj.mail; 7 8 wx.request({ 9 url: 'http://www.tm.com/webapi/memberinfo', 10 data:{ 11 'name':name, 12 'tel':tel, 13 'addr':addr, 14 'mail':mail, 15 }, 16 method:'POST', 17 success:function(){ 18 wx.showToast({ 19 title: '保存成功!', 20 }) 21 } 22 }) 23 },
在此函数中用let formobj = options.detail.value;获取form中各控件的值集合,然后传递到Web服务器,
服务端保存到数据库后返回到小程序,最后提示用户保存成功。