初始化
This commit is contained in:
303
pages/address/address.vue
Normal file
303
pages/address/address.vue
Normal file
@@ -0,0 +1,303 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user