|
|
|
|
<!-- 2020年2月15日14:57:57 完成 -->
|
|
|
|
|
<template>
|
|
|
|
|
<view style="min-height: calc(100vh);background-color: #F2F3F4;">
|
|
|
|
|
<view class="edgeInsetTop"></view>
|
|
|
|
|
<wanl-empty v-if="addressList.length === 0 && status !== 'loading'" text="还没添加任何地址"/>
|
|
|
|
|
<!-- <view style="padding:0 24rpx;">
|
|
|
|
|
<view class="cu-list menu-avatar">
|
|
|
|
|
<view class="cu-item" :class="modalName == 'move-box-' + index ? 'move-cur' : ''"
|
|
|
|
|
v-if="addressList" v-for="(item, index) in addressList" :key="item.id"
|
|
|
|
|
@tap="checkAddress(item)" @touchstart="ListTouchStart"
|
|
|
|
|
@touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
|
|
|
|
|
<view class="cu-avatar round lg" style="background-color: #fe6600;">{{ item.name.substring(0, 1) }}</view>
|
|
|
|
|
<view class="content">
|
|
|
|
|
<view>
|
|
|
|
|
<text class="wanl-pip margin-right-sm text-lg">{{ item.name }}</text>
|
|
|
|
|
<text class="wanl-gray-light text-sm">{{ item.mobile }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="text-sm wanl-pip text-cut-2" style="line-height: 1.3;">
|
|
|
|
|
<text class="wlIcon-dizhi text-red margin-right-xs" v-if="item.default == 1"></text>
|
|
|
|
|
{{ item.province }} {{ item.city }} {{ item.district }} {{ item.address }}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="action" @tap.stop="addAddress('edit', item)"><text class="wlIcon-xiugaioryijian text-xl"></text></view>
|
|
|
|
|
<view class="move">
|
|
|
|
|
<view class="bg-grey" @tap.stop="addAddress('edit', item)">编辑</view>
|
|
|
|
|
<view class="bg-red" @tap.stop="delAddress(item.id, index)">删除</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<wanl-empty text="没有找到任何地址" src="address_default3x" v-else/>
|
|
|
|
|
</view>
|
|
|
|
|
</view> -->
|
|
|
|
|
<view style="padding:0 24rpx;">
|
|
|
|
|
<view class="cu-list menu-avatar">
|
|
|
|
|
<view class="addrItem" :class="modalName == 'move-box-' + index ? 'move-cur' : ''"
|
|
|
|
|
v-if="addressList" v-for="(item, index) in addressList" :key="item.id" >
|
|
|
|
|
<view class="topAddr">
|
|
|
|
|
<view class="cu-avatar round lg" style="background-color: #fe6600;">{{ item.name.substring(0, 1) }}</view>
|
|
|
|
|
<view class="content">
|
|
|
|
|
<view>
|
|
|
|
|
<text class="name">{{ item.name }}</text>
|
|
|
|
|
<text class="mobile">{{ item.mobile }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="text-sm wanl-pip text-cut-2 descAddr" style="line-height: 1.3;">
|
|
|
|
|
<!-- <text class="wlIcon-dizhi text-red margin-right-xs" v-if="item.default == 1"></text> -->
|
|
|
|
|
|
|
|
|
|
{{ item.province }} {{ item.city }} {{ item.district }} {{ item.address }}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- <view class="action" @tap.stop="addAddress('edit', item)">
|
|
|
|
|
<text class="wlIcon-xiugaioryijian text-xl"></text>
|
|
|
|
|
</view> -->
|
|
|
|
|
<div class="toolBox">
|
|
|
|
|
<u-checkbox v-model="item.default" activeColor="#EB6100" @change="setDefaultAddr($event,item)"
|
|
|
|
|
shape="circle" :checked="item.default == 1?true:false" label="设为默认"></u-checkbox>
|
|
|
|
|
<div class="toolItem">
|
|
|
|
|
<view @tap.stop="addAddress('edit', item)">
|
|
|
|
|
<image src="../../../static/images/img/editIcon.png" mode=""></image>
|
|
|
|
|
<text>编辑</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view style="margin-left:40rpx;" @tap.stop="delAddress(item.id, index)">
|
|
|
|
|
<image src="../../../static/images/img/deleteIcon.png" mode=""></image>
|
|
|
|
|
<text>删除</text>
|
|
|
|
|
</view>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <view class="move">
|
|
|
|
|
<view class="bg-grey" @tap.stop="addAddress('edit', item)">编辑</view>
|
|
|
|
|
<view class="bg-red" @tap.stop="delAddress(item.id, index)">删除</view>
|
|
|
|
|
</view> -->
|
|
|
|
|
</view>
|
|
|
|
|
<wanl-empty text="没有找到任何地址" src="address_default3x" v-else/>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<uni-load-more :status="status" :content-text="contentText" />
|
|
|
|
|
<view class="edgeInsetBottom"></view>
|
|
|
|
|
<view class="wanlian cu-bar tabbar foot flex flex-direction">
|
|
|
|
|
<button @tap="addAddress('add')" class="addBtn">添加地址+</button>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
source: 0,
|
|
|
|
|
order_id: 0,
|
|
|
|
|
addressList: [],
|
|
|
|
|
modalName: null,
|
|
|
|
|
listTouchStart: 0,
|
|
|
|
|
listTouchDirection: null,
|
|
|
|
|
//上拉下拉
|
|
|
|
|
total: 0, //数据量
|
|
|
|
|
current_page: 1, //当前页码
|
|
|
|
|
last_page: 1 ,//总页码
|
|
|
|
|
status: 'loading',
|
|
|
|
|
contentText: {
|
|
|
|
|
contentdown: ' ',
|
|
|
|
|
contentrefresh: '正在加载..',
|
|
|
|
|
contentnomore: ''
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
// 监听下拉刷新
|
|
|
|
|
onPullDownRefresh() {
|
|
|
|
|
this.current_page = 1;
|
|
|
|
|
this.reload = true;
|
|
|
|
|
this.loadData();
|
|
|
|
|
},
|
|
|
|
|
// 监听上拉加载
|
|
|
|
|
onReachBottom() {
|
|
|
|
|
//判断是否最后一页
|
|
|
|
|
if(this.current_page >= this.last_page){
|
|
|
|
|
this.status = 'noMore';
|
|
|
|
|
}else{
|
|
|
|
|
this.current_page = this.current_page + 1; //页码+1
|
|
|
|
|
this.status = 'loading';
|
|
|
|
|
this.loadData(true);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onLoad(option) {
|
|
|
|
|
this.source = option.source;
|
|
|
|
|
this.order_id = option.order_id;
|
|
|
|
|
this.loadData();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
setDefaultAddr(val,item){
|
|
|
|
|
if(val){
|
|
|
|
|
item.default = '1'
|
|
|
|
|
}else{
|
|
|
|
|
item.default = '0'
|
|
|
|
|
}
|
|
|
|
|
this.refreshList(item,'edit')
|
|
|
|
|
},
|
|
|
|
|
async loadData(reload, refresh) {
|
|
|
|
|
await uni.request({
|
|
|
|
|
url: '/wanlshop/address/getaddress',
|
|
|
|
|
data:{
|
|
|
|
|
page: reload?(this.current_page):1
|
|
|
|
|
},
|
|
|
|
|
success: res => {
|
|
|
|
|
if(reload){
|
|
|
|
|
this.addressList = this.addressList.concat(res.data.data);
|
|
|
|
|
}else{
|
|
|
|
|
this.addressList = res.data.data;
|
|
|
|
|
uni.stopPullDownRefresh();
|
|
|
|
|
}
|
|
|
|
|
this.total = res.data.total; //数据量
|
|
|
|
|
this.current_page = res.data.current_page; //当前页码
|
|
|
|
|
this.last_page = res.data.last_page; //总页码
|
|
|
|
|
this.status = res.data.total == 0 ? 'noMore':'more';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 删除
|
|
|
|
|
async delAddress(id, key) {
|
|
|
|
|
this.$delete(this.addressList, key); //vue方法
|
|
|
|
|
await uni.request({
|
|
|
|
|
url: '/wanlshop/address/deladdress',
|
|
|
|
|
method: 'POST',
|
|
|
|
|
data: { id: id }
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
//添加或修改成功之后回调
|
|
|
|
|
async refreshList(data, type) {
|
|
|
|
|
await uni.request({
|
|
|
|
|
url: '/wanlshop/address/address',
|
|
|
|
|
method: 'POST',
|
|
|
|
|
data: {data: data,type: type},
|
|
|
|
|
success: (res) => {
|
|
|
|
|
this.loadData(false,true);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
//选择地址
|
|
|
|
|
checkAddress(item) {
|
|
|
|
|
if (this.source == 1) {
|
|
|
|
|
this.$wanlshop.prePage().loadData(item.id);
|
|
|
|
|
this.$wanlshop.back(1);
|
|
|
|
|
}else if(this.source == 2){ //我的订单修改地址 地址ID 返回订单ID
|
|
|
|
|
this.$wanlshop.prePage().refreshList(item.id, this.order_id);
|
|
|
|
|
this.$wanlshop.back(1);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 新增地址
|
|
|
|
|
addAddress(type, item) {
|
|
|
|
|
this.$wanlshop.to(`/pages/user/address/addressManage?type=${type}&data=${JSON.stringify(item)}`);
|
|
|
|
|
},
|
|
|
|
|
// ListTouch触摸开始
|
|
|
|
|
ListTouchStart(e) {
|
|
|
|
|
this.listTouchStart = e.touches[0].pageX;
|
|
|
|
|
},
|
|
|
|
|
// ListTouch计算方向
|
|
|
|
|
ListTouchMove(e) {
|
|
|
|
|
this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left';
|
|
|
|
|
},
|
|
|
|
|
// ListTouch计算滚动
|
|
|
|
|
ListTouchEnd(e) {
|
|
|
|
|
if (this.listTouchDirection == 'left') {
|
|
|
|
|
this.modalName = e.currentTarget.dataset.target;
|
|
|
|
|
} else {
|
|
|
|
|
this.modalName = null;
|
|
|
|
|
}
|
|
|
|
|
this.listTouchDirection = null;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
.cu-avatar.lg {
|
|
|
|
|
width: 60rpx;
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
}
|
|
|
|
|
.cu-list.menu-avatar>.addrItem{
|
|
|
|
|
/* height: 160rpx; */
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
margin-top:20rpx;
|
|
|
|
|
|
|
|
|
|
.topAddr{
|
|
|
|
|
padding:30rpx 20rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-bottom: 1px solid #EAEAEA;
|
|
|
|
|
.content{
|
|
|
|
|
margin-left:20rpx;
|
|
|
|
|
.name{
|
|
|
|
|
|
|
|
|
|
font-family: Alibaba PuHuiTi;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
color: #222222;
|
|
|
|
|
}
|
|
|
|
|
.mobile{
|
|
|
|
|
margin-left:80rpx;
|
|
|
|
|
font-family: Alibaba PuHuiTi;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
color: #222222;
|
|
|
|
|
}
|
|
|
|
|
.descAddr{
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #999999;
|
|
|
|
|
margin-top:23rpx;
|
|
|
|
|
line-height: 44rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wanlian.cu-bar.tabbar {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
/* .wanlian.cu-bar.tabbar .cu-btn {
|
|
|
|
|
width: calc(100% - 50rpx);
|
|
|
|
|
} */
|
|
|
|
|
.wanlian.cu-bar.tabbar .cu-btn.lg {
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
height: 86rpx;
|
|
|
|
|
}
|
|
|
|
|
.addBtn{
|
|
|
|
|
background: #EB6100;
|
|
|
|
|
border-radius: 45px;
|
|
|
|
|
padding:30rpx 0;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-family: Alibaba PuHuiTi;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
width: calc(100% - 50rpx);
|
|
|
|
|
height: 100%;
|
|
|
|
|
/* line-height: 100%; */
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
.toolBox{
|
|
|
|
|
padding: 30rpx 20rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.toolItem{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
&>view{
|
|
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
image{
|
|
|
|
|
width:32rpx;
|
|
|
|
|
height:32rpx;
|
|
|
|
|
}
|
|
|
|
|
text{
|
|
|
|
|
margin-left:11rpx;
|
|
|
|
|
font-family: Alibaba PuHuiTi;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
color: #222222;
|
|
|
|
|
margin-left:11rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
