first commit
This commit is contained in:
188
pages/shop/addressList.vue
Normal file
188
pages/shop/addressList.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<view class="uni-container">
|
||||
<u-navbar :autoBack="true" :bgColor="bgColor">
|
||||
<view slot='center' style="font-size: 36rpx; font-weight: bold;">收货地址</view>
|
||||
</u-navbar>
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :top="paddingTop + 'px'" :bottom="paddingBottom + 'px'">
|
||||
<view class="list_waper" v-if="list.length">
|
||||
<view v-for="(i, index) in list" :key="index" class="list">
|
||||
<view class="left-box" @click="activeAddressId(i)">
|
||||
<image class="img" src="https://common/address.png" mode=""></image>
|
||||
<view class="con-box">
|
||||
<view class="user">
|
||||
<view class="name">{{i.consignee}}，{{i.phone}}</view>
|
||||
<view class="tags" v-if="i.isDefault == 1">默认</view>
|
||||
</view>
|
||||
<view class="address">{{i.address}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-icon name="arrow-right" @click="goEdit(i)"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
<view class="bottom" :style="'padding-bottom: ' + safeAreaBottom + 'px'">
|
||||
<view class="bottom_waper">
|
||||
<view class="active" @click="addAddress">新建地址</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
||||
export default {
|
||||
mixins: [MescrollMixin],
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
safeAreaBottom: 0,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
bgColor: '#FBFBFB',
|
||||
downOption: { auto: false },
|
||||
list: []
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.id = options.id
|
||||
this.safeAreaBottom = this.$safeAreaBottom;
|
||||
this.paddingBottom = this.$safeAreaBottom + uni.upx2px(120);
|
||||
this.paddingTop = this.$paddingTop;
|
||||
},
|
||||
onShow () {
|
||||
this.mescroll && this.mescroll.resetUpScroll();
|
||||
},
|
||||
methods: {
|
||||
async upCallback (page) {
|
||||
let obj = { pageNum: page.num, pageSize: page.size };
|
||||
let info = await this.$shop.getUserInfoAddressListPage(obj);
|
||||
if(page.num == 1) this.list = [];
|
||||
console.log(info.rows)
|
||||
this.list = this.list.concat(info.rows);
|
||||
this.mescroll.endBySize(info.rows.length, info.total);
|
||||
},
|
||||
addAddress() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/shop/addressAdd'
|
||||
})
|
||||
},
|
||||
goEdit(i) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/shop/addressAdd?id=' + i.id
|
||||
})
|
||||
},
|
||||
activeAddressId(i) {
|
||||
let pages = getCurrentPages();
|
||||
let prevPage = pages[pages.length - 2];
|
||||
if (prevPage && prevPage.route == 'pages/tabbar/mine') {
|
||||
this.goEdit(i)
|
||||
} else {
|
||||
prevPage.$vm.setAddress(i);
|
||||
uni.navigateBack()
|
||||
// uni.setStorageSync('activeAddressId', i.id);
|
||||
// setTimeout(() => {
|
||||
// uni.navigateBack()
|
||||
// }, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uni-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #FBFBFB;
|
||||
|
||||
.list_waper{
|
||||
width: 100%; box-sizing: border-box; padding: 0 32rpx;
|
||||
.list{
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
.left-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
.img {
|
||||
width: 37rpx;
|
||||
height: 50rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.con-box {
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
.name {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.tags {
|
||||
margin-left: 24rpx;
|
||||
width: 56rpx;
|
||||
height: 30rpx;
|
||||
background: rgba(1,190,105,0.1);
|
||||
border-radius: 4rpx;
|
||||
text-align: center;
|
||||
line-height: 30rpx;
|
||||
font-weight: 500;
|
||||
font-size: 20rpx;
|
||||
color: #01BE69;
|
||||
}
|
||||
}
|
||||
.address {
|
||||
margin-top: 12rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
width: 500rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.uicon-arrow-right {
|
||||
color: #333333 !important;
|
||||
font-size: 30rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nodata {
|
||||
margin-top: 290rpx;
|
||||
text-align: center;
|
||||
.img {
|
||||
width: 600rpx;
|
||||
height: 550rpx;
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
.bottom_waper{
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 32rpx;
|
||||
.active {
|
||||
height: 80rpx;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
background: #01BE69;
|
||||
border-radius: 66rpx;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user