197 lines
4.5 KiB
Vue
197 lines
4.5 KiB
Vue
<template>
|
||
<view class="address-list">
|
||
<view class="rf-list" v-if="addressList.length > 0">
|
||
<view
|
||
class="rf-list-item"
|
||
v-for="(item, index) in addressList"
|
||
:key="index"
|
||
@tap="checkAddress(item)"
|
||
>
|
||
<view
|
||
class="mid"
|
||
@longtap="deleteAddress(item.id)"
|
||
>
|
||
<view class="address-box">
|
||
<text v-if="parseInt(item.isDefault, 10) === 1" class="tag" :class="'text-' + themeColor.name"
|
||
>默认</text
|
||
>
|
||
<text class="address in1line"
|
||
>{{ item.address }} {{ item.detailAddress }}</text
|
||
>
|
||
</view>
|
||
<view class="u-box">
|
||
<text class="name">{{ item.name }}</text>
|
||
<text class="mobile">{{ item.mobile }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<text
|
||
class="iconfont iconbianji"
|
||
@tap.stop="addAddress('edit', item.id)"
|
||
></text>
|
||
</view>
|
||
</view>
|
||
<text v-if="addressList.length > 0" class="tips" :class="'text-' + themeColor.name">
|
||
提示:长按可删除当前收货地址。最多只能存在一个默认地址。
|
||
</text>
|
||
<rf-load-more v-if="addressList.length > 0" :status="loadingType" />
|
||
</view>
|
||
<view class="add-btn-wrapper">
|
||
<button class="add-btn" :class="'bg-' + themeColor.name" @tap="addAddress('add')">新增地址</button>
|
||
</view>
|
||
<rf-empty
|
||
:info="`暂无收货地址,请添加地址`"
|
||
v-if="addressList.length === 0 && !loading"
|
||
></rf-empty>
|
||
<!--加载动画-->
|
||
<rfLoading isFullScreen :active="loading"></rfLoading>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
/**
|
||
* @des 收货地址列表
|
||
*
|
||
* @author 237524947@qq.com
|
||
* @date 2020-03-10 18:00
|
||
* @copyright 2019
|
||
*/
|
||
import { addressDelete, addressList } from '@/api/userInfo';
|
||
import rfLoadMore from '@/components/rf-load-more/rf-load-more';
|
||
export default {
|
||
components: {
|
||
rfLoadMore
|
||
},
|
||
data() {
|
||
return {
|
||
timeOutEvent: 0,
|
||
source: 0,
|
||
pageNum :0,
|
||
loadingType: 'more',
|
||
addressList: [],
|
||
loading: true
|
||
};
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
this.pageNum = 0;
|
||
this.addressList = [];
|
||
this.getAddressList('refresh');
|
||
},
|
||
// 加载更多
|
||
onReachBottom() {
|
||
if (this.loadingType === 'nomore') return;
|
||
this.pageNum++
|
||
this.getAddressList();
|
||
},
|
||
onLoad(option) {
|
||
this.source = option.source;
|
||
},
|
||
onShow() {
|
||
this.initData();
|
||
},
|
||
methods: {
|
||
deleteAddress(id) {
|
||
uni.showModal({
|
||
content: '确定要删除该收货地址吗',
|
||
success: e => {
|
||
if (e.confirm) {
|
||
this.handleAddressDelete(id);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件
|
||
goTouchEnd() {
|
||
clearTimeout(this.timeOutEvent);
|
||
},
|
||
// 如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按
|
||
goTouchMove() {
|
||
clearTimeout(this.timeOutEvent); // 清除定时器
|
||
this.timeOutEvent = 0;
|
||
},
|
||
// 删除地址
|
||
async handleAddressDelete(id) {
|
||
await this.$http.delete(`${addressDelete}?id=${id}`).then(() => {
|
||
this.pageNum = 0;
|
||
this.addressList.length = 0;
|
||
this.getAddressList();
|
||
});
|
||
},
|
||
// 数据初始化
|
||
initData() {
|
||
this.pageNum = 0;
|
||
this.addressList.length = 0;
|
||
this.getAddressList();
|
||
},
|
||
// 获取收货地址列表
|
||
async getAddressList(type) {
|
||
await this.$http
|
||
.get(`${addressList}`, {
|
||
pageNum: this.pageNum
|
||
})
|
||
.then(r => {
|
||
this.loading = false;
|
||
if (type === 'refresh') {
|
||
uni.stopPullDownRefresh();
|
||
}
|
||
this.loadingType = r.length === 10 ? 'more' : 'nomore';
|
||
this.addressList = [...this.addressList, ...r];
|
||
})
|
||
.catch(() => {
|
||
this.loading = false;
|
||
if (type === 'refresh') {
|
||
uni.stopPullDownRefresh();
|
||
}
|
||
});
|
||
},
|
||
// 选择地址
|
||
checkAddress(item) {
|
||
|
||
if (parseInt(this.source, 10) === 1) {
|
||
// this.$mHelper.prePage()获取上一页实例,在App.vue定义
|
||
this.$mHelper.prePage().addressData = item;
|
||
this.$mRouter.back();
|
||
}
|
||
},
|
||
// 跳转添加地址页面
|
||
addAddress(type, id) {
|
||
this.$mRouter.push({
|
||
route: `/pages/user/address/manage?type=${type}&id=${id}`
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $page-color-base;
|
||
}
|
||
.address-list {
|
||
position: relative;
|
||
.address-box {
|
||
display: flex;
|
||
align-items: center;
|
||
.tag {
|
||
font-size: 24upx;
|
||
margin-right: 4upx;
|
||
border: 1px solid;
|
||
border-radius: 4upx;
|
||
padding: 0 4upx;
|
||
}
|
||
.address {
|
||
font-size: 30upx;
|
||
color: $font-color-dark;
|
||
}
|
||
}
|
||
.u-box {
|
||
font-size: 28upx;
|
||
color: $font-color-light;
|
||
margin-top: 16upx;
|
||
|
||
.name {
|
||
margin-right: 30upx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|