<!--pages/addressIndexMember/addressIndexMember.wxml-->
<block wx:for="{{address}}">
<view class="address">
<view class="namemobile">
<text class="name">收件人: <text class="common">{{item.name}}</text> </text>
<text class="mobile">电话:<text class="common">{{item.mobile}}</text></text>
</view>
<view class="country">
<text class="topic">
国家/省州/城市/邮编：
</text>
<text class="cou-detail">
{{item.country}}
</text>
<view class="detail">
<text class="topic">
收货地址:
</text>
<text class="de-detail">
{{item.detail}}
</text>
</view>
</view>
<view class="hr"></view>
<view class="bottom">
<view class="wrap">
<checkbox class="check" color="#f9364f" value="true" checked='{{item.default}}'/>
<text class="topic">默认地址{{item.default}}</text>
</view>
<view class="button-group">
<view class="edit">
<image src="../../images/member/addressEdit.png" class="img"></image>
<text class="action">编辑</text>
</view>
<view class="delete">
<image src="../../images/member/addressDelete.png" class="img"></image>
<text class="action">删除</text>
</view>
</view>
</view>
</view>
</block>
<view class="add-button">
<button class="btn" size="default" type="primary" style="background-color:#0398e7;">+添加新地址</button>
</view>
|
/* pages/addressIndexMember/addressIndexMember.wxss */
.address{
background-color:#ffffff;
margin:15px 0;
padding:10px;
}
.namemobile{
margin-bottom:5px;
}
.name{
font-weight:bold;
}
.mobile{
font-weight:bold;
float: right;
}
.country{
display:inline-block;
}
.cou-detail{
display:inline-block;
color:rgba(0,0,0,0.7);
}
.detail{
display:inline-block;
margin-bottom:15px;
}
.de-detail{
display: inline-block;
color:rgba(0,0,0,0.7);
}
.common{
color:rgba(0,0,0,0.7);
margin-left: 5px;
}
.topic{
display:inline-block;
}
/*bottom */
.bottom{
justify-content:space-between;
align-items:center;
display:flex;
}
.button-group{
float:right;
display: inline-block;
}
.edit{
display:inline-block;
}
.delete{
display:inline-block;
margin-left:10px;
}
.img{
height:15px;
width:15px;
}
.check{
display:inline-flex;
align-items:center;
}
.wrap{
display: inline-flex;
align-items: center;
}
.action{
margin-left: 5px;
}
.add-button{
margin-top:40px;
padding:0 20px;
}
.btn{
border-radius:20px;
}
|
// pages/addressIndexMember/addressIndexMember.js
Page({
/**
* 页面的初始数据
*/
data: {
address:[
{ 'name': "布兰奇MA", 'mobile': "18866880008", "country": "中国/广东省/东莞市/651156", "detail":"中国广东省东莞市解放库685号",'default':"true"},
{ 'name': "布兰奇MA", 'mobile': "18866880008", "country": "中国/广东省/东莞市/651156", "detail": "中国广东省东莞市解放库685号", 'default': "" },
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
模板简介：该模板名称为【微信小程序蓝色风格收件人地址信息列表页设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
