微信小程序个人地址编辑填写管理样式模板制作设计下载

制作好以后效果图如下：

一、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
        })
    }
    
})

模板简介：该模板名称为【微信小程序个人地址编辑填写管理样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。