pillow_customize_app/pages/pages_zhentou/myPage/address.vue

<template>
	<view class="add_box">
		<view class="address_box" >
			<view class="address_item" v-for="item in addressData" :key="item.name">
				<view class="top_box">
					<view class="top_item">
						<view class="top">
							<span class="name_txt">{{item.name}}</span>
							<span class="phone_txt">{{item.phone}}</span>
						</view>
						<view class="bottom">
							{{item.address}}
						</view>
					</view>
					<view class="edit_box">
						<view class="img_box">
							<image class="img" src="../../../static/image/edit.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="bottom_item">
					<view v-if="item.status == 0" class="no_checked"></view>
					<view  v-if="item.status == 1" class="checked">
						<p class="item"></p>
					</view>
					<p class="no_default"  v-if="item.status == 0">设为默认</p>
					<p  v-if="item.status == 1" class="default_txt">默认地址</p>
				</view>
			</view>
		</view>
		<view class="btn_box">
			<p class="btn">添加新地址</p>
		</view>
		<!-- <uni-load-more iconType="circle" :status="status" @clickLoadMore="loadMore"
			:content-text="contentText"></uni-load-more> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgPrefix: getApp().globalData.imgPrefix,
				addressData: [
					{name:'张三',phone:'15612345678',address:'山东省青岛市市北区大港街道大港三路8号铁路住宅小区6号楼6单元666室',status:1},
					{name:'张三',phone:'15612345678',address:'山东省青岛市市北区大港街道大港三路8号铁路住宅小区6号楼6单元666室',status:0},
				],
				current: 0,
				size: 10,
				hasMore: true,
				status: '',
				contentText: {
					contentdown: "点击查看更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了",
				}
			}
		},
		onLoad() {
			let userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.userInfo = JSON.parse(userInfo);
				if (this.userInfo.id != undefined) {
					this.loadMore();
				}
			}
		},
		methods: {
			//加载更多
			loadMore() {
				console.log('loadmore')
				if (this.hasMore) {
					this.current = this.current + 1;
					this.staus = 'loading';
					uni.request({
						url: getApp().globalData.baseUrl + '/address/list?userId=' + this.userInfo.id + '&current=' + this
							.current + '&size=' + this.size,
						method: 'GET',
						success: (res) => {
							if (res.data.code == 200) {
								this.addressData = this.addressData.concat(res.data.data.records);
								if (res.data.data.records.length == 0 || res.data.data.total < this.size) {
									this.hasMore = false;
									this.status = 'nomore';
								} else {
									this.status = 'more';
								}
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}
						},
					})
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.add_box {
		width: 100%;
		height: 100%;

		.address_box {
			height: 82%;
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			margin: 0 auto;
			margin-top: 30rpx;

			.address_item {
				width: 100%;
				height: 255rpx;
				border-bottom: 1rpx solid #F2F2F2;
				display: flex;
				flex-direction: column;
				
				.bottom_item{
					width: 100%;
					height: 25%;
					display: flex;
					align-items: center;
					.no_checked{
						width: 28rpx;
						height: 28rpx;
						background: #FFFFFF;
						border: 1rpx solid #666666;
						border-radius: 50%;
						margin: 0 30rpx;
					}
					
					.checked{
						width: 28rpx;
						height: 28rpx;
						background: #FFFFFF;
						border: 1rpx solid #D73232;
						border-radius: 50%;
						margin: 0 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						
						.item{
							width: 16rpx;
							height: 16rpx;
							background: #D73232;
							border-radius: 50%;
						}
					}
					
					.default_txt{
						font-size: 22rpx;
						color: #D73232;
					}
					.no_default{
						color: #B8B8B8;
						font-size: 22rpx;
					}
				}
				
				.top_box{
					width: 100%;
					height: 75%;
					display: flex;
					.top_item{
						width: 85%;
						margin-left: 30rpx;
						.top{
							margin-top: 30rpx;
							display: flex;
							height: 40rpx;
							align-items: flex-end;
							
							.name_txt{
								font-size: 28rpx;
								color: #333;
								font-weight: bold;
							}
							
							.phone_txt{
								font-size: 22rpx;
								color: #999;
								margin-left: 20rpx;
							}
						}
						
						.bottom {
							width: 484rpx;
							height: 74rpx;
							font-size: 26rpx;
							color: #333;
							margin-top: 20rpx;
							line-height: 40rpx;
						}
					}
				}
				.edit_box{
					height: 100%;
					display: flex;
					align-items: center;
					
					.img_box{
						width: 44rpx;
						height: 44rpx;
					}
					
					.img{
						width: 100%;
						height: 100%;
					}
				}
				
			}
		}
		.btn_box{
			width: 100%;
			height: 150rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: center;
			
			.btn{
				width: 690rpx;
				height: 78rpx;
				background: #D73232;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 28rpx;
				margin-top: 30rpx;
			}
		}
	}
</style>