本文给大家带来的是微信小程序个人地址管理信息添加设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="container edit_wrap">
<form bindsubmit="submitForm" id="123">
<view class="form_group">
<text>姓名:</text>
<input type="text" placeholder="请输入预约姓名" placeholder-class="placeholder_style" name="data_name" value="{{data_name}}" />
</view>
<view class="form_group">
<text>电话:</text>
<input type="text" placeholder="请输入预约电话" placeholder-class="placeholder_style" name="data_phone" value="{{data_phone}}"/>
</view>
<view class="form_group">
<text></text>
<input type="text" class="sendmsg_input"/>
<button loading="{{loading}}">发送验证码</button>
</view>
<view class="form_group">
<text>省:</text>
<picker bindchange="bindProviPickerChange" value="{{proviIndex}}" range="{{province}}" name="data_province" value="{{data_province}}">
<view>{{province[proviIndex]}}</view>
</picker>
</view>
<view class="form_group">
<text>市:</text>
<picker bindchange="bindCityPickerChange" value="{{cityIndex}}" range="{{city}}" name="data_city" value="{{data_city}}">
<view>{{city[cityIndex]}}</view>
</picker>
</view>
<view class="form_group">
<text>地址:</text>
<input type="text" placeholder="请输入预约地址" placeholder-class="placeholder_style" name="data_addr" value="{{data_addr}}"/>
</view>
<button class="save_btn" formType="submit">保存</button>
<toast hidden="{{saveToastHidden}}" bindchange="hideToast">
保存成功
</toast>
</form>
</view>
|
二、wxss样式文件代码如下:
.edit_wrap{
font-size:30rpx;
padding:60rpx 0rpx 20rpx;
}
.form_group{
display: flex;
flex-direction: row;
justify-content:space-between;
margin:20rpx;
line-height: 60rpx;
}
.form_group text{
text-align: right;
width:100rpx;
}
.form_group input,
.form_group picker{
width:460rpx;
border:1px solid #ddd;
border-radius:8rpx;
height:60rpx;
line-height: 60rpx;
padding:0rpx 20rpx;
}
.form_group .sendmsg_input{
width:290rpx;
margin-right:14rpx;
}
.form_group button{
font-size:30rpx;
height:60rpx;
line-height: 60rpx;
border:1px dotted #fff;
background:white;
padding:0rpx;
margin:0rpx;
outline:none;
color:#000;
}
.placeholder_style{
font-family:'微软雅黑';
color:#adadad;
}
.save_btn{
width:600rpx;
background:#d24a58;
font-size: 32rpx;
color:#fff;
border-radius: 0rpx;
margin:40rpx 0rpx 10rpx;
}
|
三、js页面代码如下:
var myData = require("../../utils/data")
Page({
data:{
province:myData.provinceData(),
city:myData.cityData(),
proviIndex:0,
cityIndex:0,
saveToastHidden:true
},
onLoad:function(options){
var init = myData.searchAddrFromAddrs(options.addrid)
this.setData({
data_name:init.name,
data_phone:init.phone,
data_province:init.province,
data_city:init.city,
data_addr:init.addr
})
},
// 省份选择
bindProviPickerChange : function(e){
console.log('province picker发送选择改变,携带值为', e.detail.value)
this.setData({
proviIndex:e.detail.value
})
},
// 城市选择
bindCityPickerChange : function(e){
console.log('city picker发送选择改变,携带值为', e.detail.value)
this.setData({
cityIndex:e.detail.value
})
},
submitForm:function(e){
console.log('保存成功')
this.setData({
saveToastHidden:false
})
},
hideToast:function(){
this.setData({
saveToastHidden:true
})
}
})
|