小程序-添加收货地址

<import src="../../template/baseNavigationBar.wxml"/>
<template is="navigationBar" data="{{...item}}"></template>
<view class="new_address">
<view class="address_msg">
    <view class="item_msg">收货人</view>
    <view class="section">
        <input placeholder="姓名" />
    </view>
</view>
<view class="address_msg">
    <view class="item_msg">联系电话</view>
    <view class="section">
        <input placeholder="手机或固话" />
    </view>
</view>
<view class="address_msg">
    <view class="item_msg">选择城市</view>
    <picker
            mode="region"
            bindchange="bindRegionChange"
            value="{{region}}"
            custom-item="{{customItem}}"
            style="flex: 1"
    >
        <view class="picker" style="height: 40rpx">
            {{region[0]}}{{region[1]}}{{region[2]}}
        </view>
    </picker>
</view>
<view class="address_msg">
    <view class="item_msg">收货地址</view>
    <view class="section">
        <input placeholder="请输入您的收货地址" />
    </view>
</view>
<view class="address_msg">
    <view class="item_msg">楼牌门号</view>
    <view class="section">
        <input placeholder="楼号/单元/门牌号" />
    </view>
</view>
<view class="keeps_address">保存地址</view>
</view>
@import "../../lib/style/iconfont.wxss";
@import "../../lib/style/base.wxss";
@import "../../lib/style/baseNavigationBar.wxss";
page {
    background-color: #f3f3f3;
}
.new_address {
    margin-top: 160rpx;
}
.address_msg {
    display: flex;
    align-items: center;
    background: white;
    padding: 20rpx;
    border-bottom: 2rpx solid #f3f3f3;
}
.address_msg:first-child {
    margin-top: 160rpx;
}
.address_msg:last-child {
    border-bottom: none;
}
.item_msg {
    width: 20%;
}
.keeps_address {
    width: 90%;
    margin: auto;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: white;
    color: #ad0e12;
    border-radius: 10rpx;
    margin-top: 20rpx;
    letter-spacing: 1px;
}

猜你喜欢

转载自blog.csdn.net/Acitylion/article/details/89551850