
<!--地址管理-->
<radio-group class="radio-group" bindchange="radioChange">
<view hidden="{{hiddenAddress}}" class="address" wx:for="{{address}}">
<view class="address-icon">
<radio checked="{{index==radioindex?true:false}}" value="{{index}}" />
</view>
<view class="address-detail">
<view class="address-name-phone">
<text class="address-name">{{item.name}}</text>
<text class="address-phone">{{item.phone}}</text>
</view>
<view class="address-info">{{item.province}}{{item.city}}{{item.town}}{{item.address}}</view>
<view class="address-edit">
<view>
<icon></icon>
<text hidden="{{index==radioindex?false:true}}">默认</text>
</view>
<view>
<text>编辑</text>
<text> | </text>
<text data-id="{{index}}" bindtap="delAddress">删除</text>
</view>
</view>
</view>
</view>
</radio-group>
<navigator url="../address">
<view hidden="{{hiddenAddress}}" class="add-address">
<image class="add-address-icon" src="#"></image>
<view>新增地址</view>
</view>
</navigator>
|
/*地址管理*/
page {
background-color: #efeff4;
font-size: 10pt;
-webkit-user-select: none;
user-select: none;
width: 100%;
overflow-x: hidden;
}
.address {
display: flex;
flex-wrap: wrap;
background-color: #fff;
margin-top: 1px;
padding: 30rpx;
margin: 30rpx 0;
}
.address-icon {
width: 100rpx;
}
.address-detail {
width: 590rpx;
}
.address-name-phone {
margin-bottom: 20rpx;
font-size: 11pt;
font-weight: 900;
}
.address-name{
margin-right: 20rpx;
}
.address-info {
margin-bottom: 30rpx;
}
.address-edit {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
border-top: 1px #efeff4 solid;
padding-top: 30rpx;
}
.add-address {
display: flex;
align-items: center;
margin-top: 20px;
padding: 18rpx;
background-color: #fff;
font-size: 11pt;
font-weight: 900;
}
.add-address-icon {
height: 20px;
width: 20px;
}
|
// pages/address/user-address/user-address.js
var app = getApp()
Page({
data: {
address: [],
radioindex: '',
},
onLoad: function (options) {
var that = this
// 页面初始化 options为页面跳转所带来的参数
var address = wx.getStorageSync('address')
var radioindex = wx.getStorageSync('radioindex')
var that = this
that.setData({
address: address,
radioindex: radioindex
})
if (!address) {
//获取物流地址
var addname = wx.getStorageSync('address')
var login = wx.getStorageSync('login')
wx.request({
url: `${app.globalData.API_URL}/address?id=` + login.mid,
data: {},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function (res) {
// success
console.log(res)
var addname = res.data[0]
var address = that.data.address
if (address == '') {
var address = []
}
address.push(addname)
that.setData({
address: address
})
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
}
},
radioChange: function (e) {
console.log(e)
var that = this
var login = wx.getStorageSync('login')
console.log(that.data.address[e.detail.value])
wx.setStorageSync('radioindex', e.detail.value)
wx.request({
url: `${app.globalData.API}/address`,
data: that.data.address[e.detail.value],
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function (res) {
// success
console.log(res)
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
this.onLoad()
},
onReady: function () {
// 页面渲染完成
},
delAddress: function (e) {
console.log(e.currentTarget.dataset.id);
var that = this;
var cardId = e.currentTarget.dataset.cardId;
wx.showModal({
title: '提示',
content: '你确认移除吗',
success: function(res) {
res.confirm && wx.request({
url: app.d.hostUrl + '/ztb/shopCartZBT/DeleteShopCart',
method:'post',
data: {
cartID: cardId,
},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function (res) {
//--init data
var data = res.data;
console.log(data);
//todo
if(data.result == 'ok'){
//that.data.productData.length =0;
that.loadProductData();
}
},
});
}
});
},
onShow: function () {
// 页面显示
},
onHide: function () {
// 页面隐藏
},
onUnload: function () {
// 页面关闭
}
})
|
模板简介:该模板名称为【微信小程序企业版地址管理新增地址页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。