Skip to content

严立 / mini-shimao

Go to a project
Commit 7165ac61 by TengFengLian
Options

收货地址列表、添加、删除

parent a8a533de
Inline Side-by-side
Showing with 669 additions and 0 deletions
pages/mine/address-list/address-list.js 0 → 100644
let App = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
imageBase: App.globalData.appImageBase,
addressList:[],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.getAddressList()
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
/**
* 地址编辑操作
* @param {event} event
*/
onAddressEdit: function (event) {
let index = event.currentTarget.dataset.index
let param = {
type: "edit",
detail: this.data.addressList[index],
}
wx.navigateTo({
url: '../address-operate/address-operate?param='+JSON.stringify(param),
})
},
/**
* 地址添加操作
* @function
* @param {object} - funcEvent
* @returns
*/
onAddressAdd: function (event) {
let param = {
type: "add",
}
wx.navigateTo({
url: '../address-operate/address-operate?param='+JSON.stringify(param),
})
},
/**
* 获取收货地址
*/
getAddressList: function () {
let that = this
App.request({
url: 'v3/shippingAddress/getAddressList',
}).then((response) => {
console.log(response)
if (response.code == 200) {
response.data.forEach(item => {
item['showAddress'] = item.area.replace(/,/g,'') + item.address
})
that.setData({
addressList: response.data
})
} else {
App.ui.showToast({
iconType: 'error',
title: response.message,
duration: 3000
})
}
}).catch((response) => {
App.ui.showToast({
iconType: 'error',
title: response.message,
duration: 3000
})
})
}
})
\ No newline at end of file
pages/mine/address-list/address-list.json 0 → 100644
{
"usingComponents": {}
}
\ No newline at end of file
pages/mine/address-list/address-list.wxml 0 → 100644
<m-toast></m-toast>
<m-nav titleText="收货地址"></m-nav>
<view class="container">
<view class="list" wx:if="{{addressList.length > 0}}">
<block wx:for="{{addressList}}" wx:key="index">
<view class="address row ac cb" bindtap="onService">
<view>
<text class="name">{{item.name}}</text>
<text class="phone">{{item.mobile}}</text>
<text class="tag" wx:if="{{item.defaultFlag*1 == 1}}">默认</text>
<view class="address-text">
<text>{{item.showAddress}}</text>
</view>
</view>
<image src="{{imageBase + 'icon/edit-1.png'}}" bindtap="onAddressEdit" data-index="{{index}}"></image>
</view>
</block>
</view>
<view class="empty" wx:else>
<text >暂无收货地址</text>
</view>
</view>
<m-button-bottom text="﹢添加新地址" bindclick="onAddressAdd"></m-button-bottom>
pages/mine/address-list/address-list.wxss 0 → 100644
.container {
min-height: 85vh;
background-color: #F8F8FA;
}
.list {
width: 750rpx;
height: 100%;
}
.address {
width: 670rpx;
margin: 48rpx 40rpx;
padding: 32rpx;
background-color: #fff;
border-radius: 4rpx;
}
.address > view {
width: 560rpx;
}
.address > image {
width: 40rpx;
height: 40rpx;
margin-top: 10rpx;
}
.name {
font-size: 36rpx;
font-weight: 400;
margin-right: 12rpx;
}
.phone {
font-size: 26rpx;
font-weight: 400;
margin-right: 12rpx;
color: #A8A8AA;
}
.tag {
font-size: 22rpx;
font-weight: 400;
padding: 2rpx 10rpx;
color: #FFFFFF;
background-color: #88C5E0;
}
.address-text {
font-size: 26rpx;
font-weight: 400;
margin-top: 10rpx;
}
.empty {
height: 80vh;
padding-top: 35vh;
color: #999CA2;
}
pages/mine/address-operate/address-operate.js 0 → 100644
let App = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
navTitle: '添加收货地址', // 导航标题
operate: 'add', // add：添加操作；edit: 修改操作；默认添加
imageBase: App.globalData.appImageBase,
name: '',
phone: '',
region: ['福建省', '厦门市', '思明区'],
address: '', // 详细地址
isDefault: true, // 是否默认地址
nameError: false,
phoneError: false,
addressError:false,
},
/**
* 生命周期函数--监听页面加载
* options 参数设置
* ① {param: "{"type":"edit","detail":{"area":"福建省,厦门市,思明区","add…6b8bfdd6531f7f306","showAddress":"福建省厦门市思明区001"}}"}
* ② {param: "{"type":"add"}"}
*/
onLoad: function (options) {
// 编辑地址判断其它情况为添加地址
if (options) {
let param = JSON.parse(options.param)
if (param.type === 'edit') {
this.setData({
navTitle: '编辑收货地址',
operate: 'edit',
id: param.detail.id,
name: param.detail.name,
phone: param.detail.mobile,
region: param.detail.area.split(','),
address: param.detail.address,
isDefault: param.detail.defaultFlag*1 == 1
})
}
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
/**
* 文本输入
* @param {event} event
*/
onInputBlur: function (event) {
console.log(event.detail)
let id = event.detail.id
let value = event.detail.value
if (id === 'name') {
this.setData({
name: value,
nameError: (value.length == 0)
})
} else if (id === 'phone') {
this.setData({
phone: value,
phoneError: (value.length == 0)
})
} else if (id === 'address') {
this.setData({
address: value,
addressError: (value.length == 0)
})
}
},
/**
* 省市区选择
* @param {event} event
*/
onRegionChange: function (event) {
// console.log('picker发送选择改变，携带值为', event.detail.value)
this.setData({
region: event.detail.value
})
},
/**
* 设置是否为默认地址
* @param {event}} event
*/
onSwitchChange: function (event) {
// console.log(event.detail)
this.setData({
isDefault: event.detail.value
})
},
/**
* 保存地址
* @param {event} event
*/
onSubmit: function (event) {
if (this.data.name.length == 0 ||
this.data.phone.length == 0 ||
this.data.address.length == 0) {
this.setData({
nameError: (this.data.name.length == 0),
phoneError: (this.data.phone.length == 0),
addressError: (this.data.address.length == 0),
})
return
}
let regionStr = this.data.region.join(',')
let param = {
name: this.data.name,
mobile: this.data.phone,
area: regionStr,
address: this.data.address,
defaultFlag: this.data.isDefault?1:0,
}
if (this.data.operate === 'edit') {
param['id'] = this.data.id
}
App.ui.showToast({
'iconType': 'loading',
'title': '提交中',
'duration': 60000
})
App.request({
url: 'v3/shippingAddress/saveAddress',
params: param
}).then((response) => {
console.log(response)
if (response.code == 200) {
App.ui.showToast({
iconType: 'success',
title: '提交成功',
duration: 2000
})
setTimeout(()=>{
wx.navigateBack()
}, 2000)
} else {
App.ui.showToast({
iconType: 'error',
title: response.message,
duration: 2000
})
}
})
},
/**
* 删除地址
* @param {event} event
*/
onDelete: function (event) {
App.ui.showDialog({
type: 'confirm',
title: '提示',
content: '是否确认删除地址',
cancel: '取消',
confirm: '删除',
success: () => {
App.ui.showToast({
'iconType': 'loading',
'title': '处理中',
'duration': 60000
})
App.wxRequest({
url: 'v3/shippingAddress/del',
data: {
'id': this.data.id,
},
success: (response) => {
App.ui.showToast({
iconType: 'success',
title: '删除成功',
duration: 2000
})
setTimeout(()=>{
wx.navigateBack()
}, 2000)
}
})
},
fail: () => { },
})
}
})
\ No newline at end of file
pages/mine/address-operate/address-operate.json 0 → 100644
{
"usingComponents": {}
}
\ No newline at end of file
pages/mine/address-operate/address-operate.wxml 0 → 100644
<m-toast></m-toast>
<m-dialog></m-dialog>
<m-nav titleText="{{navTitle}}"></m-nav>
<view class="container">
<view class="address_info">
<view class="address_item bottom_line">
<view class="row ac">
<text class="title">收货人</text>
<m-input
inputId="name"
className="address_item_input row ac"
value="{{name}}"
placeholder="请输入"
maxlength="20"
bindblur="onInputBlur">
</m-input>
</view>
<text class="text_error" wx:if="{{nameError}}">请填写收货人</text>
</view>
<view class="address_item bottom_line">
<view class="row ac">
<text class="title">手机号</text>
<m-input
inputId="phone"
className="address_item_input row ac"
value="{{phone}}"
placeholder="请输入"
maxlength="11"
type="number"
bindblur="onInputBlur">
</m-input>
</view>
<text class="text_error" wx:if="{{phoneError}}">请填写手机号</text>
</view>
<view class="address_item row ac bottom_line">
<text class="title">所在地区</text>
<picker
class="address_item_picker"
mode="region"
bindchange="onRegionChange"
value="{{region}}">
<view class="row ac cb">
<view>{{region[0]}}{{region[1]}}{{region[2]}}</view>
<image class="arrow-more" src="{{imageBase + 'icon/arrow-r-2.png'}}"></image>
</view>
</picker>
</view>
<view class="address_item">
<view class="row ac">
<text class="title">详细地址</text>
<m-input
inputId="address"
className="address_item_input"
value="{{address}}"
placeholder="如街道、门牌号、小区、楼栋号等"
maxlength="30"
bindblur="onInputBlur">
</m-input>
</view>
<text class="text_error" wx:if="{{addressError}}">请填写详细地址</text>
</view>
</view>
<view class="address_info top30rpx">
<view class="address_item row ac cb" >
<text class="title">设为默认地址</text>
<switch checked="{{isDefault}}" bindchange="onSwitchChange"></switch>
</view>
</view>
<button class="button row con-c align-c top40rpx" bindtap="onSubmit">保存</button>
<button wx:if="{{operate === 'edit'}}" class="button-delete row con-c align-c" bindtap="onDelete">删除收货地址</button>
</view>
\ No newline at end of file
pages/mine/address-operate/address-operate.wxss 0 → 100644
.container {
min-height: 90vh;
background-color: #F8F8FA;
}
.bottom_line {
border-bottom: 1px #F8F8FA solid;
}
.top30rpx {
margin-top: 30rpx;
}
.top40rpx {
margin-top: 40rpx;
}
.address_info {
width: 750rpx;
padding: 0 40rpx;
background-color: #FFFFFF;
}
.address_item {
width: 670rpx;
min-height: 90rpx;
padding: 28rpx 0;
}
.title {
min-width: 150rpx;
font-size: 30rpx;
font-weight: 400;
color: #15191F;
}
.text_error {
font-size: 23rpx;
font-weight: 400;
color: #E15A66;
}
.address_item_input {
min-height: 42rpx;
width: 500rpx;
margin-left: 20rpx;
/* text-align: right; */
font-size: 30rpx;
font-weight: 400;
line-height: 42rpx;
color: #15191F;
}
.address_item_picker {
margin-left: 20rpx;
width: 500rpx;
font-size: 30rpx;
font-weight: 400;
line-height: 42rpx;
color: #15191F;
}
.address_item_switch {
color: aqua;
}
.button {
width: 670rpx;
height: 96rpx;
margin-bottom: 40rpx;
background: #86C5E1;
border-radius: 2px;
font-size: 30rpx;
font-weight: 500;
color: #ffffff;
line-height: 42rpx;
}
.button-delete {
font-size: 30rpx;
font-weight: 500;
color: rgb(233, 70, 83);
line-height: 44rpx;
}
.wx-switch-input {
width: 102rpx !important;
height: 62rpx !important;
background: #86C5E1 !important;
border: #86C5E1 !important;
}
.wx-switch-input::before {
width: 100rpx !important;
height: 62rpx !important;
border: 1px solid #86C5E1;
}
.wx-switch-input::after {
width: 62rpx !important;
height: 62rpx !important;
}
\ No newline at end of file
pages/mine/info/info.js
let App = getApp() let App = getApp()
Page({ Page({
data: { data: {
imageBase: App.globalData.appImageBase,
birthdayLimit: App.modular.miment().format('YYYY-MM-DD'), birthdayLimit: App.modular.miment().format('YYYY-MM-DD'),
genderList: [ genderList: [
{ id: 1, name: '男' }, { id: 1, name: '男' },
...@@ -125,5 +126,17 @@ Page({ ...@@ -125,5 +126,17 @@ Page({
wx.setStorageSync('userInfo', this.data.userInfo) wx.setStorageSync('userInfo', this.data.userInfo)
} }
}) })
},
/**
* 收货地址
* @function
* @param {object} - funcEvent
* @returns
*/
onAddressList: function(event) {
wx.navigateTo({
url: '../address-list/address-list',
})
} }
}) })
\ No newline at end of file
pages/mine/info/info.wxml
...@@ -47,6 +47,10 @@ ...@@ -47,6 +47,10 @@
<text>手机号</text> <text>手机号</text>
<view class="info_item_tip">{{userInfo.phoneHide}}</view> <view class="info_item_tip">{{userInfo.phoneHide}}</view>
</view> </view>
<view class="info_item row cb ac" bindtap="onAddressList">
<text>收货地址</text>
<image class="arrow-more" src="{{imageBase + 'icon/arrow-r-2.png'}}"></image>
</view>
</view> </view>
</view> </view>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment