303 lines
7.2 KiB
Vue
303 lines
7.2 KiB
Vue
<template>
|
|
<view class="address">
|
|
<u-navbar title="地址簿" autoBack bg-color="#fff0e7" placeholder></u-navbar>
|
|
<view class="tabs-wrap">
|
|
<u-tabs
|
|
:list="tabList"
|
|
:current="currentType"
|
|
lineColor="#E39B46"
|
|
lineHeight="12rpx"
|
|
:activeStyle="{
|
|
color: '#333333',
|
|
fontSize: '26rpx',
|
|
fontWeight: 'bold'
|
|
}"
|
|
:inactiveStyle="{
|
|
color: '#333333',
|
|
fontSize: '26rpx',
|
|
}"
|
|
@click="changeTab"
|
|
>
|
|
</u-tabs>
|
|
</view>
|
|
<view class="address-list">
|
|
<scroll-view :scroll-y="true" style="height: 100%;" @scrolltolower="loadMoreData">
|
|
<view class="address-item"
|
|
@click="selectAddres(item)"
|
|
v-for="item in currentAddrList"
|
|
:key="item.id">
|
|
<!-- <view class="item-title">
|
|
{{ item.type === 0 ? '收件地址' : '寄件地址' }}
|
|
</view> -->
|
|
<view class="address-item-name">
|
|
<view class="name">{{ item.name }}</view>
|
|
<view class="nation"></view>
|
|
<view class="time">{{ item.phone }}</view>
|
|
</view>
|
|
<view class="address-item-text">
|
|
{{ item.address }}
|
|
</view>
|
|
<view class="address-item-ft">
|
|
<view></view>
|
|
<view class="address-item-ft-right">
|
|
<view class="address-item-ft-right-item" @click.stop="editAddress(item)">
|
|
<svg width="16" height="16" viewBox="0 0 48 48" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M42 26V40C42 41.1046 41.1046 42 40 42H8C6.89543 42 6 41.1046 6 40V8C6 6.89543 6.89543 6 8 6L22 6"
|
|
stroke="#ababab" stroke-width="4" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M16 26.7199V34H21.3172L42 13.3081L34.6951 6L14 26.7199Z" fill="none"
|
|
stroke="#ababab" stroke-width="4" stroke-linejoin="round" />
|
|
</svg>
|
|
<text>编辑地址</text>
|
|
</view>
|
|
<view class="address-item-ft-right-item" @click.stop="confirmDelete(item)">
|
|
<svg width="16" height="16" viewBox="0 0 48 48" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M9 10V44H39V10H9Z" fill="none" stroke="#ababab" stroke-width="4"
|
|
stroke-linejoin="round" />
|
|
<path d="M20 20V33" stroke="#ababab" stroke-width="4" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M28 20V33" stroke="#ababab" stroke-width="4" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M4 10H44" stroke="#ababab" stroke-width="4" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M16 10L19.289 4H28.7771L32 10H16Z" fill="none" stroke="#ababab"
|
|
stroke-width="4" stroke-linejoin="round" />
|
|
</svg>
|
|
<text>删除地址</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<u-modal
|
|
showCancelButton
|
|
:show="show"
|
|
:title="title"
|
|
:content="content"
|
|
:cancelText="cancelText"
|
|
:confirmText="confirmText"
|
|
confirmColor="#E08745"
|
|
@cancel="show = false"
|
|
@confirm="deleteAddr"
|
|
>
|
|
</u-modal>
|
|
</view>
|
|
<view class="address-footer">
|
|
<u-button class="u-button" :plain="false" icon="plus-circle" @click="addAddress">添加地址</u-button>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getAddressList, delAddress } from '@/request/yyf.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabList: [
|
|
{ name: '收件地址', type: 0 },
|
|
{ name: '寄件地址', type: 1 },
|
|
],
|
|
checkboxValue: [],
|
|
show: false,
|
|
title: "警告",
|
|
content: "确认删除该地址吗？",
|
|
confirmText: "确认",
|
|
cancelText: "取消",
|
|
delId: '',
|
|
addrList: {
|
|
0: [],
|
|
1: [],
|
|
},
|
|
params: {
|
|
0: { page: 1 },
|
|
1: { page: 1 },
|
|
},
|
|
total: {
|
|
0: { total: 0 },
|
|
1: { total: 0 },
|
|
},
|
|
currentType: 0
|
|
}
|
|
},
|
|
computed: {
|
|
currentAddrList() {
|
|
return this.addrList[this.currentType]
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.queryData();
|
|
|
|
uni.$on('refresh', ()=> {
|
|
this.refreshData();
|
|
})
|
|
},
|
|
methods: {
|
|
leftClick() {
|
|
this.$router.replace('/pages/mine/mine');
|
|
},
|
|
addAddress() {
|
|
this.$Router.push('/pages/addAddr/addAddr');
|
|
},
|
|
editAddress(item) {
|
|
this.$Router.push({
|
|
path: '/pages/addAddr/addAddr',
|
|
query: {
|
|
...item
|
|
}
|
|
});
|
|
},
|
|
selectAddres(data) {
|
|
const eventChannel = this.getOpenerEventChannel();
|
|
eventChannel.emit('selectAddres', {
|
|
data
|
|
});
|
|
uni.navigateBack()
|
|
},
|
|
confirmDelete({ id }) {
|
|
this.delId = id;
|
|
this.show = true;
|
|
},
|
|
async deleteAddr() {
|
|
try{
|
|
const { data } = await delAddress({
|
|
id: this.delId
|
|
})
|
|
if(data.code === 1) {
|
|
this.show = false;
|
|
uni.$u.toast('删除成功');
|
|
this.refreshData();
|
|
} else {
|
|
throw data.msg;
|
|
}
|
|
}catch(e){
|
|
//TODO handle the exception
|
|
uni.$u.toast(e);
|
|
}
|
|
},
|
|
changeTab({ index, type }) {
|
|
if(type === this.currentType) {
|
|
return
|
|
}
|
|
this.currentType = index;
|
|
this.orderType = type;
|
|
if(this.addrList[this.currentType].length <= 0) {
|
|
this.queryData();
|
|
}
|
|
},
|
|
// 刷新
|
|
refreshData() {
|
|
this.addrList[this.currentType] = [];
|
|
this.params[this.currentType].page = 1;
|
|
this.queryData();
|
|
},
|
|
async queryData() {
|
|
const { data } = await getAddressList({
|
|
...this.params[this.currentType],
|
|
type: this.currentType,
|
|
order: 'desc'
|
|
})
|
|
if(data.code === 1) {
|
|
this.total[this.currentType].total = data.data.total;
|
|
this.addrList[this.currentType].push(...data.data.data);
|
|
}
|
|
},
|
|
loadMoreData() {
|
|
if(this.total[this.currentType].total > this.addrList[this.currentType].length) {
|
|
this.params[this.currentType].page += 1;
|
|
this.queryData();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.address {
|
|
box-sizing: border-box;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 30rpx 40rpx;
|
|
|
|
.address-list {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
background: linear-gradient(to bottom right, #fdebe6, #f7f7f7);
|
|
|
|
.address-item {
|
|
margin: 15rpx 0;
|
|
padding: 50rpx 40rpx;
|
|
background-color: #fff;
|
|
border-radius: 40rpx;
|
|
|
|
.item-title {
|
|
padding-bottom: 40rpx;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.address-item-name {
|
|
display: flex;
|
|
font-size: 32rpx;
|
|
font-family: OPPOSans-bold, OPPOSans;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
|
|
.nation {
|
|
padding: 0 10rpx;
|
|
}
|
|
}
|
|
|
|
.address-item-text {
|
|
padding: 10rpx 0 50rpx;
|
|
font-size: 24rpx;
|
|
font-family: OPPOSans-Medium, OPPOSans;
|
|
font-weight: 500;
|
|
color: #ababab;
|
|
}
|
|
|
|
.address-item-ft {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.address-item-ft-right {
|
|
display: flex;
|
|
|
|
&-item {
|
|
padding-left: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
text {
|
|
padding-left: 5rpx;
|
|
color: #ababab;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.address-footer {
|
|
padding-top: 30rpx;
|
|
|
|
.u-button {
|
|
height: 98rpx;
|
|
border: 3rpx solid #FFE3D6;
|
|
background: transparent;
|
|
border-radius: 12rpx;
|
|
font-size: 30rpx;
|
|
line-height: 30rpx;
|
|
font-family: OPPOSans-Medium, OPPOSans;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |