jurong_circle_front_app/pages/my/shippingAddress.vue

<template>
	<view class="shipping-container">
		<u-navbar id="uNavbarId" back-text="收货地址" :back-text-style="navBarTitle"
			:background="{background: 'transparent' }" :border-bottom="false" back-icon-color="#000" title-color="#000">
			<template v-slot:right>
				<view class="right-menu">
					<view @click="handleManage">
						{{isManage?'取消':'管理'}}
					</view>
					<view v-if="isManage" class="u-m-l-10 del-text" @click="showDelModel">
						删除
					</view>
					<view class="u-m-l-10 add-text">
						新增地址
					</view>
				</view>
			</template>
		</u-navbar>
		<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'" @scrolltolower="loadData">
			<view class="data-list">
				<view class="data-item" v-for="item in dataList" @click="handleClick(item)">
					<view class="item-text">
						<view class="address u-m-b-18">
							{{item.province + item.city + item.district}}
						</view>
						<view class="specific-address u-m-b-18">
							{{item.detailed_address}}
						</view>
						<view class="info">
							<div class="u-m-r-20">{{item.receiver_name}}</div>
							<div class="u-m-r-20">{{item.receiver_phone}}</div>
							<span v-if="item.is_default" class="u-m-r-10">默认</span>
							<span class="u-m-r-10">{{item.label}}</span>
						</view>
					</view>
					<view class="item-icon">
						<image v-if="!isManage" style="width: 100%;height: 100%;" src="/static/icon/Edit.png" mode="">
						</image>
						<template v-else>
							<image v-if="!isIncludeId(item.id)" style="width: 100%;height: 100%;"
								src="/static/icon/chose.png" mode=""></image>
							<image v-else style="width: 100%;height: 100%;" src="/static/icon/chose-active.png" mode="">
							</image>
						</template>
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
		</scroll-view>

		<!-- 确认是否删除 -->
		<u-modal v-model="showDel" content="是否删除选中的地址" :show-cancel-button="true" @confirm="handleDel"></u-modal>
	</view>
</template>

<script setup lang="ts">
	import { computed, getCurrentInstance, onMounted, ref } from 'vue'
import { addressAPI } from '../../api/address'

	const navBarTitle = {
		fontWeight: '510',
		fontStyle: 'Medium',
		fontSize: '40rpx',
		lineHeight: '52px'
	}

	const isManage = ref(false)
	const showDel = ref(false)

	const handleManage = () => {
		if (isManage.value) {
			ids.value = []
		}
		isManage.value = !isManage.value
	}
	const showDelModel = () => {
		showDel.value = true
	}
	const handleDel = () => {
		// TODO 删除
	}

	const scrollHeight = ref(0)
	const instance = getCurrentInstance();
	const loadHeight = () => {
		uni.getSystemInfo({
			success(res) {
				let screenHeight = res.screenHeight
				uni.createSelectorQuery().in(instance.proxy).select("#uNavbarId").boundingClientRect((data : any) => {
					scrollHeight.value = screenHeight - data.height
				}).exec()
			}
		})
	}

	const defaultSize = 10
	const params = ref({
		page: 1,
		size: defaultSize,
		keyword: ''
	})
	const status = ref('loadmore')
	const maxPage = ref()
	const dataList = ref([])
	const loadData = () => {
		if (status.value == 'nomore') return
		addressAPI.getList(params.value).then(res => {
			console.log(res);
		}).finally(() => {
			uni.stopPullDownRefresh()
		})
	}

	const ids = ref([])
	const handleClick = (item : any) => {
		if (isManage.value) { // 开始管理
			ids.value.push(item.id)
		}
	}

	const isIncludeId = (id : any) => {
		return ids.value.includes(id);
	}

	onMounted(() => {
		loadHeight()
		loadData()
	})
</script>

<style scoped lang="scss">
	.shipping-container {
		width: 100%;
		height: 100vh;
		background: #E5ECFD;


		.right-menu {
			display: flex;
			margin-right: 24rpx;
			font-family: Work Sans;
			font-weight: 500;
			font-style: Medium;
			font-size: 32rpx;
			leading-trim: NONE;
			line-height: 100%;
			letter-spacing: -2%;

			.del-text {
				color: red;
			}

			.add-text {
				color: #305DEF;
			}
		}

		.data-list {
			.data-item {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 28rpx 22rpx;
				background: #F5F8FF;
				margin-bottom: 4rpx;
				align-items: center;

				.item-text {
					font-weight: 400;
					line-height: 100%;

					.address {
						font-size: 20rpx;
						color: #7B7E8F;
					}

					.specific-address {
						font-size: 26rpx;
					}

					.info {
						font-size: 24rpx;
						display: flex;
						align-items: center;

						span {
							padding: 2rpx 8rpx;
							font-size: 16rpx;
							background: #DADDEA;
							color: #305DEF;
							border-radius: 2rpx;
						}
					}
				}

				.item-icon {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>