dl_uniapp/pages/mine/addr/addr-list.vue

<template>
	<view class="addr-box">
		<view class="opt-box">
			<view v-if="!ifEdit" class="item-dom" @click="manager(true)"><uni-icons type="bars" color="#FC1F3E"
					size="16"></uni-icons><text>管理</text></view>
			<view v-if="!ifEdit" class="item-dom" @click="addNew()">
				<uni-icons type="plusempty" color="#FC1F3E" size="16"></uni-icons>
				<text>新增地址</text>
			</view>
			<view v-if="ifEdit" class="item-dom" @click="manager(false)"><uni-icons type="closeempty" color="#FC1F3E"
					size="16"></uni-icons><text>退出管理</text></view>
		</view>
		<view class="addr-list-box">
			<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="onReachBottomCus" refresher-enabled
				@refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
				<view v-for="(item,index) in dataList" class="addr-item-box">
					<view class="addr-item-top">
						<view class="item-info">
							<view class="text little-1">广东省 深圳市 宝安区 新安街道</view>
							<view class="text">宝安中心区画像年华A栋</view>
							<view class="text little-2 item-flex">
								网二 17777777777 <view v-if="item.isDefault=='1'" class="item-icon">默认</view>
							</view>
						</view>
						<view class="item-opt">
							<uni-icons type="compose" color="#565656" size="16"></uni-icons><text>编辑</text>
						</view>
					</view>
					<view class="addr-item-opt" v-if="ifEdit">
						<view class="opt-button choose" v-if="item.isDefault!='1'">设为默认</view>
						<view class="opt-button">复制</view>
						<view class="opt-button">删除</view>
					</view>
				</view>
				<view style="text-align: center" v-if="dataList.length==0">
					<image class="" src="@/static/images/nothing.png"></image>
				</view>
			</scroll-view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ifEdit: false,
				queryParams: {
					pageNum: 1,
					pageSize: 10
				},
				total: 0,
				//下来刷新状态
				isTriggered: false,
				dataList: [{
					id: null,
					tel: "",
					name: "",
					city: "",
					detail: "",
					isDefault: "1",
				}, {
					id: null,
					tel: "",
					name: "",
					city: "",
					detail: "",
					isDefault: "0",
				}, {
					id: null,
					tel: "",
					name: "",
					city: "",
					detail: "",
					isDefault: "0",
				}]
			}
		},
		methods: {
			addNew() {
				this.$tab.navigateTo(`/pages/mine/addr/addr-detail`)
			},
			/**
			 * 进入管理
			 */
			manager(flag) {
				this.ifEdit = flag
			},
			/**
			 * 上滑加载数据
			 */
			onReachBottomCus() {
				//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
				if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
					toast("没有更多数据了")
					return
				}
				//页码+1,调用获取数据的方法获取第二页数据
				this.queryParams.pageNum++
			},
			/**
			 * 下拉刷新数据
			 */
			onRefresherrefresh() {
				this.isTriggered = true
				this.queryParams.pageNum = 1
				this.total = 0
			},
		}
	}
</script>

<style lang="scss">
	.addr-box {
		border-top: 1rpx solid #F4F4F4;
		background-color: white;
		width: 100%;
		color: #363636;
		font-size: 32rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: self-start;
		justify-content: center;
		position: relative;

		.opt-box {
			width: 100%;
			display: flex;
			color: #FC1F3E;
			padding: 25rpx;
			align-items: center;
			justify-content: center;
			border-bottom: 1rpx solid #F2F2F2;

			.item-dom {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					margin-left: 10rpx;
				}
			}
		}

		.addr-list-box {
			height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 57rpx);
			padding: 0 30rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.addr-item-box {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #F2F2F2;

				.addr-item-top {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					.item-info {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: self-start;
						justify-content: center;

						.text {
							padding: 5rpx;
						}

						.little-1 {
							color: #929292;
							font-size: 24rpx;
						}

						.little-2 {
							color: #363636;
							font-size: 24rpx;
						}

						.item-flex {
							display: flex;
							align-items: center;
							justify-content: center;

							.item-icon {
								font-size: 18rpx;
								margin-left: 10rpx;
								border-radius: 10rpx;
								padding: 3rpx 18rpx;
								background-color: #FEE8EB;
								color: #FC3753;
							}
						}
					}

					.item-opt {
						font-size: 26rpx;
						width: 100rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						text {
							padding-left: 5rpx;
						}
					}
				}

				.addr-item-opt {
					width: 100%;
					padding-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.opt-button {
						margin: 0 15rpx;
						font-size: 26rpx;
						color: #363636;
						background-color: #E2E2E2;
						border-radius: 20rpx;
						padding: 10rpx 30rpx;
					}

					.choose {
						background-color: #FEE8EB;
						color: #FC3753;
					}
				}
			}
		}

	}
</style>