<!--pages/user/address.wxml-->
<view class="p_all bg_white mt10 font_12">
<view wx:for="{{addressList}}" class="df">
<!--<radio-group name="radio-group" >
<label>
<radio class="mt8" value="radio1" checked="true"/>
</label>
</radio-group>-->
<checkbox-group bindchange="checkboxgroupBindchange" class="mt8">
<checkbox value="checkbox1"></checkbox>
</checkbox-group>
<view class="df_1 c6">
<view class="l_h20">{{item.Receiver}}<text class="fl_r mr10">{{item.PhoneNum}}</text></view>
<view class="l_h20">地址：{{item.Region}}{{item.DetailAddress}}</view>
</view>
</view>
</view>
<view class="p_all bg_white mt10 font_14">
<view class="bbe mt10">
<input class="inputStyle" name="input" name="name" bindinput="setConsigneeName" placeholder="收货人姓名:" value="{{consigneeName}}"/>
</view>
<view class="bbe mt10">
<input class="inputStyle" name="input" name="mobile" bindinput="setConsigneePhone" placeholder="收货人电话:" value="{{consigneePhone}}"/>
</view>
<view class="bbe mt10">
<input class="inputStyle" name="input" name="mobile" bindinput="setConsigneeArea" placeholder="收货人地域:" value="{{consigneeArea}}"/>
</view>
<view class="mt10">
<input class="inputStyle" name="input" name="address" bindinput="setConsigneeAddress" placeholder="收货人地址:" value="{{consigneeAddress}}"/>
</view>
</view>
<view class="p_all mt20">
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="addAddress"> 添加地址 </button>
</view>
|
/* pages/user/address.wxss */
.item .cp_photo{
width: 60px;
height: 60px;
overflow: hidden;
border-radius: 3px;
margin-right: 10px;
}
.item .cp_photo image{
width: 60px;
height: 60px;
}
.gm_ovh_2h{
line-height:25px;
height: 50px;
margin:0;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
font-size: 16px;
}
.gm_ovh_1h{
line-height:25px;
height: 25px;
margin:0;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
font-size: 16px;
}
.h10_hui{
height: 10px;
width: 100%;
background: #eee;
}
.min_60{
min-height: 60px;
}
.w100{ width: 100%}
.iconWarn{
vertical-align:top;padding-right:2px;
}
.iconClear{
float:right;
padding-top: 5px;
padding-left: 10px;
padding-right:10px;
margin-top:-36px;
height: 28px;
}
.inputStyle{
height: 36px;
line-height: 36px;
padding-left: 2px;
width:80%;
}
.tips{
margin-bottom:10px;
}
.x_right{
width:16px;
height: 18px;
display:inline-block;
vertical-align: middle;
float: right;
}
.zhifu{
background: #fff;
margin-bottom: 1px;
padding: 4%;
width: 92%;
font-size: 14px;
color: #666;
}
.font_20{
font-size: 20px;
font-weight: bold;
}
.xx_pay_submit{
margin-top: 10px;
}
.gms_view{
width: 100%;
display: inline-block;
text-align: right;
}
.gms_view navigator{
border: 1px solid #ddd;
width: 22px;
height: 22px;
border-radius: 50%;
color: #666;
font-size: 12px;
text-align: center;
line-height: 22px;
float: right;
font-weight: bold;
}
.gms_view input{
background: #fff;
border: 1px solid #ddd;
border-radius: 2px;
font-size: 12px;
width: 30px;
margin: 0 5px;
text-align: center;
color: #999;
float: right;
}
.df{
padding: 10px 10px;
border:1px solid #eee
}
.l_h20{
padding: 5px 0;
}
.mt8{
margin-top: 19px;
border-radius:50%
}
.df_1 c6{
padding-left: 5px
}
|
// pages/user/address.js
var common = require("../../utils/common.js");
var app = getApp();
Page({
data: {
"consigneeName": "",
"consigneePhone": "",
"consigneeArea": "",
"consigneeAddress": "",
"saveAddressResult":"",
"addressList": []
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
this.initAddressPage();
},
onReady: function () {
// 页面渲染完成
},
onShow: function () {
// 页面显示
},
onHide: function () {
// 页面隐藏
},
onUnload: function () {
// 页面关闭
},
/**
* 初始化页面数据
*/
initAddressPage: function () {
this.getAddressList();
this.initInputData();
},
/**
* 初始化输入框数据，清空
*/
initInputData: function () {
this.setData({
consigneeName: "",
consigneePhone: "",
consigneeArea: "",
consigneeAddress: ""
})
},
/**
* 获取收货地址列表，并填入页面数据
*/
getAddressList: function () {
var that = this;
var uri = "/ztb/addressZBT/List";
var dataMap = {
userId: app.d.userId
}
var method = "post";
var successCallback = function (response) {
that.initAddressList(response.data.data);
};
common.sentHttpRequestToServer(uri, dataMap, method, successCallback);
},
/**
* 初始化收货地址列表数据
*/
initAddressList: function(dataList){
this.setData({
addressList: dataList
})
},
/**
* 监听控件事件，修改收货人姓名数据
*/
setConsigneeName: function (event) {
this.setData({
consigneeName: event.detail.value
})
},
/**
* 监听控件事件，修改收货人电话数据
*/
setConsigneePhone: function (event) {
this.setData({
consigneePhone: event.detail.value
})
},
/**
* 监听控件事件，修改收货人地域数据
*/
setConsigneeArea: function (event) {
this.setData({
consigneeArea: event.detail.value
})
},
/**
* 监听控件时间，修改收货人地址数据
*/
setConsigneeAddress: function (event) {
this.setData({
consigneeAddress: event.detail.value
})
},
/**
* 添加收货地址并进行非空判断
*/
addAddress: function (event) {
if (common.isStringEmpty(this.data.consigneeName)) {
return;
}
if (common.isStringEmpty(this.data.consigneePhone)) {
return;
}
if (common.isStringEmpty(this.data.consigneeArea)) {
return;
}
if (common.isStringEmpty(this.data.consigneeAddress)) {
return;
}
this.saveAddressData();
},
/**
* 调用接口保存收货地址数据
*/
saveAddressData: function () {
var that = this;
var uri = "/ztb/addressZBT/Add";
var dataMap = {
userId: app.d.userId,
Receiver: this.data.consigneeName,
PhoneNum: this.data.consigneePhone,
Region: this.data.consigneeArea,
DetailAddress: this.data.consigneeAddress
};
var method = "post";
var successCallback = function (response) {
common.toastSuccess();
that.initAddressPage();
};
common.sentHttpRequestToServer(uri, dataMap, method, successCallback);
}
})
|
模板简介：该模板名称为【微信小程序企业版简洁红色收货人地址信息填写设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
