jiuyiUniapp/shop/pages/user/address/address.vue

197 lines
4.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>