baozhida-deliver-medicine-app/pages/order/addressBook.vue

<template>
	<!-- 地址簿 -->
	<view>
		<u-navbar title="地址簿" autoBack placeholder></u-navbar>
		<!-- <view class="card_ship">
			<view class="addres_title" :class="pickUpFlag ? 'pitch' : ''" @click="pickUp('sender')">寄件地址</view>
			<view class="line_title">|</view>
			<view class="addres_title" :class="!pickUpFlag ? 'pitch' : ''" @click="pickUp('consignee')">收件地址</view>
		</view> -->
		<u-sticky :customNavHeight="navbarHeight()">
			<view class="search_card">
				<u-search :showAction="false" v-model="keyword" @change="searchChange"
					placeholder="输入关键字快速查找"></u-search>
			</view>
		</u-sticky>
		<view class="address_book" v-if="list.length > 0">
			<view class="card_item_address" v-for="(item,index) in list" :key="index" @click="selectAddress(item)">
				<view class="address_border">
					<view class="head_title">
						<view class="title_name">{{item.name}}</view>
						<view class="title_name">{{item.phone}}</view>
					</view>
					<view class="title_address">{{item.address}}</view>
				</view>
				<view class="keepRight">
					<view class="flex_row" @click.stop="redact(item)">
						<u-icon name="edit-pen" color="#82848a" size="22" style="margin-right: 10rpx;"></u-icon>
						编辑
					</view>
					<view class="flex_row" @click.stop="delAddress(item)">
						<u-icon name="trash" color="#82848a" size="22" style="margin-right: 10rpx;"></u-icon>
						删除
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 20%;" v-else>
			<u-empty mode="address" text="暂无地址"></u-empty>
		</view>
		<view style="width: 100%;height: 150rpx;"></view>
		<view class="btn_print" @click="addAddress(pickUpFlag)">
			<u-button type="primary" text="新增地址" shape="circle"></u-button>
		</view>
		<u-modal :show="modalShow" showCancelButton :content='reminder' @confirm="confirm"
			@cancel="modalShow = false"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pickUpFlag: false,
				keyword: '',
				list: [],
				operationType: 'consignee',
				stateType: true,
				PageIndex: 1,
				PageSize: 10,
				modalShow: false,
				reminder: '您确定要删除该地址信息吗？',
				loadingMore: true,
				addressId: null,
			}
		},
		onReachBottom() {
			if (!this.loadingMore) {
				this.getList()
			}
		},
		onShow() {
			if (this.operationType) {
				this.PageIndex = 1
				this.list = []
				this.loadingMore = true
				this.getList()
			}
		},
		onLoad(value) {
			// if (value.type) {
			// 	if (value.type == 'sender') {
			// 		this.pickUpFlag = true
			// 	} else {
			// 		this.pickUpFlag = false
			// 	}
			// 	this.operationType = value.type
			// 	this.stateType = true
			// } else {
			// 	this.operationType = 'sender'
			// 	this.stateType = false
			// }
		},
		methods: {
			// 搜索
			searchChange(value) {
				this.PageIndex = 1
				this.list = []
				this.loadingMore = true
				this.getList()
			},
			getList() {
				this.loadingMore = true;
				this.$api.get('/api/address', {
					page: this.PageIndex,
					pageSize: this.PageSize,
					name: this.keyword,
					addressType: this.operationType,
				}).then(res => {
					if (res.code == 200) {
						const data = res.data.list
						if (this.loadingMore == true && data) {
							this.list = this.list.concat(data);
						}
						if (data.length < this.PageSize) {
							this.loadingMore = true
						} else {
							this.loadingMore = false
							this.PageIndex++
						}
					}
				})
			},
			pickUp(type) {
				this.PageIndex = 1
				this.list = []
				this.loadingMore = true
				this.operationType = type
				if (type == 'sender') {
					this.pickUpFlag = true
				} else if (type == 'consignee') {
					this.pickUpFlag = false
				}
				this.getList()
			},
			// 新增地址
			addAddress() {
				uni.navigateTo({
					url: '/pages/order/addAddress?type=' + this.operationType + '&newly=true'
				});
			},
			// 编辑
			redact(row) {
				uni.setStorageSync('currentAddress', row)
				uni.navigateTo({
					url: '/pages/order/addAddress?type=' + this.operationType + '&newly=false'
				});
			},
			// 删除
			delAddress(row) {
				this.modalShow = true
				this.addressId = row.id
			},
			// 确定删除
			confirm() {
				this.$api.delete('/api/address', {
					id: this.addressId,
				}).then(res => {
					if (res.code == 200) {
						this.modalShow = false
						uni.showLoading({
							icon: 'success',
							title: '删除成功'
						});
						this.PageIndex = 1
						this.list = []
						this.loadingMore = true
						this.getList()
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				})
			},
			// 选择地址
			selectAddress(row) {
				if (this.stateType) {
					uni.setStorageSync('selectAddress', row)
					uni.navigateBack({
						delta: 1
					});
				}
			},
			navbarHeight() {
				let systemInfo = uni.getSystemInfoSync();
				/* (750 / systemInfo.windowWidth) */
				/* 在uview navBar组件中有一个默认高度，当这个默认高度加上状态栏高度后就是吸顶的位置，由于这两者相加是px，所以最后还需要转为rpx */
				let topHeight = 0
				// #ifdef APP-PLUS
				topHeight = 44 + systemInfo.statusBarHeight;
				// #endif
				// #ifdef MP
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				topHeight = height + systemInfo.statusBarHeight
				// #endif
				/* 最后一步将px转为rpx */
				return topHeight * (750 / systemInfo.windowWidth) / 2
			},
		},
	}
</script>

<style lang="scss">
	.card_ship {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		background-color: #fff;
		padding: 20rpx 0rpx;
	}

	.line_title {
		color: #c8c9cc;
	}

	.addres_title {
		font-size: 30rpx;
		padding-bottom: 10rpx;
		border-bottom: 4rpx solid #fff;
	}

	.search_card {
		background-color: #fff;
		padding: 20rpx;
	}

	.pitch {
		font-weight: 500;
		color: #2979ff;
		border-bottom: 4rpx solid #2979ff;
	}

	.address_book {
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.card_item_address {
		margin: 0rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx 0rpx;
	}

	.address_border {
		padding: 0rpx 20rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #f4f4f5;
	}

	.head_title {
		display: flex;
		margin-bottom: 10rpx;
	}

	.title_address {
		font-size: 28rpx;
		color: #82848a;
	}

	.title_name {
		font-weight: 600;
		font-size: 32rpx;
		margin-left: 10rpx;
	}

	.keepRight {
		padding-top: 20rpx;
		padding-right: 20rpx;
		display: flex;
		justify-content: flex-end;
	}

	.flex_row {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		color: #82848a;
		font-size: 30rpx;
	}
</style>