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

<template>
	<view class="addr-box">
		<navigation-bar-vue title="地址管理" style="width: 100%;" background-color="#ffffff"
			title-color="#000000"></navigation-bar-vue>
		<view class="opt-box" v-if="!ifChoose">
			<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',ifChoose?'choose-height':'']">
			<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">{{ item.cityName }}</view>
						<view class="text">{{ item.detail }}</view>
						<view class="text little-2 item-flex">
							{{ item.name }} {{ item.tel }}
							<view v-if="item.isDefault=='1'" class="item-icon">默认</view>
						</view>
					</view>
					<view v-if="!ifChoose" class="item-opt" @click="toEdit(item.id)">
						<uni-icons type="compose" color="#565656" size="16"></uni-icons><text>编辑</text>
					</view>
					<view v-if="ifChoose" class="item-opt" @click="chooseItem(item)">
						<uni-icons type="paperplane" color="#565656" size="16"></uni-icons><text>选择</text>
					</view>
				</view>
				<view class="addr-item-opt" v-if="ifEdit">
					<view class="opt-button choose" @click="setDefaultCity(item.id)" v-if="item.isDefault!='1'">设为默认
					</view>
					<view class="opt-button" @click="toCopy(item.id)">复制</view>
					<view class="opt-button" @click="remove(item.id)">删除</view>
				</view>
			</view>
			<view style="text-align: center" v-if="dataList.length==0">
				<image class="" src="@/static/images/nothing.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import navigationBarVue from '@/components/navigation/navigationBar.vue';
	import {
		getUserAddress,
		setDefault,
		removeAddress
	} from '@/api/business/member.js'
	export default {
		components: {
			navigationBarVue
		},
		data() {
			return {

				ifEdit: false,
				queryParams: {
					pageNum: 1,
					pageSize: 10
				},
				total: 0,
				//下来刷新状态
				isTriggered: false,
				dataList: [],
				//是否是选择模式
				ifChoose: false,
			}
		},

		onShow() {
			this.initData();
		},
		methods: {
			/**初始化数据*/
			initData() {
				getUserAddress().then(res => {
					this.dataList = res.data
				}).catch((e) => {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},
			/**设为默认方法*/
			setDefaultCity(id) {
				setDefault({
					id: id
				}).then(res => {
					uni.showToast({
						icon: 'success',
						duration: 2000,
						title: '设置成功'
					});
					this.ifEdit = false
					this.initData()
				}).catch((e) => {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},

			/**删除地址*/
			remove(id) {
				removeAddress({
					id: id
				}).then(res => {
					uni.showToast({
						icon: 'success',
						duration: 2000,
						title: '删除成功'
					});
					this.ifEdit = false
					this.initData()
				}).catch((e) => {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},
			/**新增页面*/
			addNew() {
				this.$tab.navigateTo(`/pages/mine/addr/addr-detail`)
			},
			/**编辑页面*/
			toEdit(id) {
				this.$tab.navigateTo(`/pages/mine/addr/addr-detail?id=` + id)
			},
			/**
			 * 选择地址
			 * @param {Object} id
			 */
			chooseItem(item) {
				uni.$emit('updateAddr', item)
				uni.navigateBack()
			},
			/**复制*/
			toCopy(id) {
				this.$tab.navigateTo(`/pages/mine/addr/addr-detail?id=` + id + `&isCopy=1`)
			},

			/**
			 * 进入管理
			 */
			manager(flag) {
				this.ifEdit = flag
			},

		}
	}
</script>

<style lang="scss">
	.addr-box {
		padding-top: calc(90rpx + var(--status-bar-height));
		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-top: 1rpx solid #F2F2F2;
			border-bottom: 1rpx solid #F2F2F2;

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

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

		.choose-height {
			height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 91rpx) !important;
		}

		.addr-list-box {
			border-top: 1rpx solid #F2F2F2;
			height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 191rpx);
			overflow-y: scroll;
			padding: 0 30rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: start;

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