zhwl-miniapp/pages/shop/addressList.vue

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