web-app-v1/pages/address-manage/address-manage.vue

<template>
	<view class="address-manage">
		<custom-nav noback="noback" transparent="transparent" ref="ltm" title=" " />
		<view class="AddressTop">
			<view class="AddressTop-left">
				<image src="../../static/icon/search.png" class="AddressTop-left-search" />
				<input v-model="search_name" type="text" class="AddressTop-left-input" placeholder="请输入姓名或者手机号后四位" />
				<image v-if="search_name" src="../../static/icon/cha.png" class="AddressTop-left-clear"
					@click="search_name = '';toSearchAddress()" />
			</view>
			<view class="AddressTop-right" @click="toSearchAddress">查询</view>
		</view>
		<scroll-view v-if="list.length" class="AddressList" scroll-y="true">
			<view v-for="(item, index) in list" :key="index" class="AddressList-item"
				:class="address_index === index ? 'active' : ''" @click="address_index = index">
				<view class="AddressList-item-title">
					<text class="color spec">{{ item.con_name.slice(0,4) }}</text>
					<text class="color">{{ item.con_mobile }}</text>
				</view>
			<!-- 	<view v-if="item.nickname" class="AddressList-item-desc color">
					昵称：{{ item.nickname.slice(0, 6) }}/{{ item.phone }}
				</view> -->
				<view class="AddressList-item-info">
					<view class="info-text color">{{ item | getAddressString }}</view>
					<image src="../../static/icon/arrow.png" class="info-arrow"></image>
				</view>
				<view class="AddressList-item-set">
					<view class="set-control" @tap.stop="editAddress(index)">编辑</view>
					<view class="set-control" @tap.stop="delAddress(index)">删除</view>
					<view v-if="+item.type === 1" class="get-used">常用地址</view>
					<view v-if="+item.type === 0" class="set-used" @tap.stop="submitAddress(item)">设为常用</view>
				</view>
			</view>
			<view class="bottom"></view>
		</scroll-view>
		<view v-else class="noaddress">还没有地址呢</view>
		<view class="adress_bottom">
			<navigator url="../add-address/add-address" class="add-address big-btn new_address">新增地址</navigator>
			<view v-if="title === '选择地址'" @tap="chooseAddress" class="add-address big-btn bg">使用此地址</view>
		</view>
	</view>
</template>

<script>
	import {
		_API_AddressGet,
		_API_AddressDel,
		_API_AddressSearch,
		_API_AddressUpdata
	} from '@/apis/address.js'
	export default {
		data() {
			return {
				title: '地址管理',
				address_index: -1,
				search_name: ''
			}
		},
		computed: {
			list() {
				return this.$store.state.address.list
			}
		},
		created() { // 监听添加或者删除地址消息提示
			uni.$on('ADDRESS', msg => {
				uni.toast(msg)
			})
		},
		methods: {
			// 搜索地址
			toSearchAddress() {
				this.address_index = -1
				_API_AddressSearch({
					search_name: this.search_name
				}).then(res => {
					if (res.code === 200) {
						let list = res.data.list.map(item => ({
							con_name: item.username,
							con_mobile: item.mobile,
							province: item.province,
							city: item.city,
							area: item.town,
							address: item.address,
							level: +item.level,
							id: item.id,
							nickname: item.nickname
						}))
						this.$store.commit('address/GET_ADDRESS', list)
					}
				})
			},
			editAddress(index) { // 点击编辑地址
				uni.navigateTo({
					url: `../add-address/add-address?index=${String(index)}`
				})
			},
			delAddress(index) { // 点击删除地址
				uni.showModal({
					title: '提示',
					content: '确定要删除这个地址？',
					success: (res) => {
						if (res.confirm) {
							_API_AddressDel({
								id: this.list[index].id
							}).then(res => {
								this.$store.commit('address/DEL', index)
							})
						}
					}
				})
			},
			submitAddress(item) { // 设置为常用地址
				const address = {
					id: item.id,
					con_name: item.con_name,
					con_mobile: item.con_mobile,
					province: item.province,
					city: item.city,
					area: item.area,
					address: item.address,
					type: 1
				}
				uni.showModal({
					title: '提示',
					content: '确定要设置这个地址为常用地址？',
					success: (res) => {
						if (res.confirm) {
							_API_AddressUpdata(address).then(res => {
								if (res.code === 200) {
									// uni.navigateBack()
									uni.$emit('ADDRESS', '设置成功')
									setTimeout(() => {
										uni.showLoading({
											mask: true
										})
										_API_AddressGet().then(res => {
											this.$store.commit('address/GET_ADDRESS',
												res.data.list)
										})
									}, 333)
								} else {
									uni.showModal({
										content: res.message || '设置失败',
										showCancel: false
									})
								}
							})
						}
					}
				})
			},
			chooseAddress() { // 如果是选择地址
				// if (this.title === '选择地址') {
				if (this.address_index > -1) {
					this.$store.commit('address/CHOOSEADDRESS', this.address_index)
					uni.navigateBack()
				} else {
					uni.showModal({
						content: "你还没有选择地址",
						showCancel: false
					})
				}
				// }
				// return
			}
		},
		onShow() {
			setTimeout(() => {
				uni.showLoading({
					mask: true
				})
				_API_AddressGet().then(res => {
					this.$store.commit('address/GET_ADDRESS', res.data.list)
				})
			}, 333)
		},
		onLoad(opt) {
			if (opt.choose) { // 表示用户是从商品详情页或确认订单页进来的
				this.title = '选择地址'
			}
			// console.log(this.title)
		}
	}
</script>

<style lang="scss">
	.address-manage {
		@include page();
		display: flex;
		justify-content: space-between;
		flex-direction: column;

		.AddressTop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #ffffff;
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;

			&-left {
				flex: 1;
				overflow: hidden;
				margin-right: 30rpx;
				height: 80rpx;
				box-sizing: border-box;
				border: 1px solid #CCCCCC;
				border-radius: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 30rpx;

				&-search {
					display: block;
					width: 40rpx;
					height: 40rpx;
				}

				&-input {
					flex: 1;
					overflow: hidden;
					font-size: 28rpx;
					color: #333333;
					margin: 0 10rpx;
				}

				&-clear {
					display: block;
					width: 32rpx;
					height: 32rpx;
				}
			}

			&-right {
				width: 132rpx;
				height: 64rpx;
				border-radius: 64rpx;
				background: linear-gradient(to right, #F97C55, #F44545);
				color: #FFFFFF;
				font-size: 28rpx;
				text-align: center;
				line-height: 64rpx;
			}
		}

		.AddressList {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			flex: 1;
			overflow: hidden;

			// margin-bottom: 20rpx;
			&-item {
				width: 100%;
				padding: 30rpx;
				background: #ffffff;
				margin-bottom: 30rpx;
				position: relative;
				border-radius: 24rpx;

				&.active {
					background: linear-gradient(to right, #F97C55, #F44545);

					&-set {
						.set-used {
							background: #ffffff !important;
						}
					}

					.level {
						background: linear-gradient(203deg, #FBDCAC 0%, #FFEFD7 31%, #FFDCA5 55%, #FEEACB 90%, #F9D193 100%) !important;
						color: #F44545 !important;
					}

					.color {
						color: #ffffff !important;
					}
				}

				&-title {
					color: #999999;
					font-size: 28rpx;
					margin-bottom: 20rpx;

					.spec {
						color: #333333;
						font-size: 32rpx;
						margin-right: 20rpx;
					}
				}

				&-desc {
					color: #999999;
					font-size: 28rpx;
					margin-bottom: 30rpx;
				}

				&-info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 30rpx;
					margin-bottom: 30rpx;
					border-bottom: 1px solid #E9E9E9;

					.info-text {
						color: #333333;
						font-size: 28rpx;
						flex: 1;
						overflow: hidden;
						margin-right: 40rpx;
					}

					.info-arrow {
						display: block;
						width: 30rpx;
						height: 30rpx;
					}
				}

				&-set {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.get-used {
						color: #EA4A41;
						font-size: 24rpx;
						width: 136rpx;
						height: 50rpx;
						border-radius: 8rpx;
						background: #FFF4F3;
						text-align: center;
						line-height: 50rpx;
						margin-left: auto;
					}

					.set-used {
						color: #333;
						font-size: 24rpx;
						width: 136rpx;
						height: 50rpx;
						border-radius: 8rpx;
						background: #F8F8F8;
						text-align: center;
						line-height: 50rpx;
						margin-left: auto;
					}

					.set-control {
						color: #333333;
						font-size: 24rpx;
						width: 112rpx;
						height: 50rpx;
						border-radius: 50rpx;
						background: #F8F8F8;
						text-align: center;
						line-height: 50rpx;

						&:nth-of-type(1) {
							margin-right: 20rpx;
						}
					}
				}

				&-level {
					position: absolute;
					top: 30rpx;
					right: 30rpx;
					transform: translate(30rpx, 14rpx);
					width: 156rpx;
					height: 50rpx;
					border-top-left-radius: 50rpx;
					border-bottom-left-radius: 50rpx;
					background: linear-gradient(to right, #F97C55, #F44545);
					color: #FFFFFF;
					font-size: 24rpx;
					text-align: center;
					line-height: 50rpx;
				}
			}
		}

		.address_search {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12rpx 30rpx;
			box-sizing: border-box;
			color: #333333;
			background-color: #FFFFFF;
			margin-bottom: 1px;

			.address_search_main {
				width: calc(100% - 106rpx);
				background-color: #F2F4F5;
				height: 64rpx;
				padding: 0 22px;
				border-radius: 64rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&::before {
					content: "";
					display: block;
					width: 36rpx;
					height: 36rpx;
					background-image: url(../../static/icon/search.png);
					background-size: 100% 100%;
					margin-right: 26rpx;
				}

				.address_search_input {
					flex: 1;
				}
			}

			.address_search_btn {
				font-size: 32rpx;
				width: 80rpx;
			}
		}

		.content {
			.item {
				background: #FFFFFF;
				border-bottom: 20rpx solid $app-base-bg;
				box-sizing: border-box;
				padding: 0 30rpx;

				.fixed_title {
					height: 74rpx;
					line-height: 74rpx;
					color: #333333;
					font-size: 28rpx;
				}

				.item_main {
					padding: 18rpx 0;
					border-bottom: 1px solid #D7D7D7;

					.label {
						width: 120rpx;
						text-align: left;
					}

					.item_main_agent {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 30rpx;

						.item_agent_info {
							display: flex;
							align-items: center;
							justify-content: flex-start;
							color: #333333;
							font-size: 28rpx;
							width: calc(100% - 118rpx);
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.item_agent_level {
							color: #FFFFFF;
							font-size: 24rpx;
							background-color: #F76454;
							border-radius: 4rpx;
							height: 36rpx;
							line-height: 36rpx;
							width: 108rpx;
							text-align: center;
						}
					}

					.item_main_user {
						.item_main_user_left {
							display: flex;
							align-items: center;
							justify-content: flex-start;
						}

						.item_main_user_right {
							display: flex;
							align-items: center;
							justify-content: center;
							height: 42rpx;
							border-radius: 42rpx;
							background-color: #F76454;
							color: #FFFFFF;
							padding: 0 15rpx;
						}

						color: #333333;
						font-size: 28rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;
					}

					.item_main_address {
						width: 100%;
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.address_text {
							width: 100%;
							color: #999999;
							font-size: 28rpx;
							line-height: 38rpx;
						}
					}
				}

				.item_set_footer {
					height: 77rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #333333;
					font-size: 24rpx !important;

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

						&::before {
							content: "";
							display: block;
							width: 36rpx;
							height: 36rpx;
							box-sizing: border-box;
							border: 2rpx solid #F76454;
							text-align: center;
							line-height: 34rpx;
							border-radius: 50%;
							color: #FFFFFF;
							margin-right: 17rpx;
						}
					}

					.checked {
						&::before {
							content: "\2714";
							background-color: #F76454;
						}
					}

					.item_set_footer_right {
						.edit-del {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							height: 100%;
							width: 268rpx;
							color: $app-sec-text-color;
							justify-content: space-between;

							.edit,
							.del {
								flex: 1;
								height: 100%;
								text-align: center;

								&.del {
									text-align: right;
								}
							}
						}
					}
				}
			}

			.bottom {
				height: 88rpx;
			}
		}

		.noaddress {
			@include flex();
			height: 100%;
			color: $app-sec-text-color;
		}

		.add-address {
			left: 0;
			bottom: 0;
			margin: 0;
			width: 100%;
			position: fixed;
			border-radius: 0;
		}

		.bottom {
			height: 60rpx;
		}

		.adress_bottom {
			left: 0;
			bottom: 0;
			margin: 0;
			width: 100%;
			position: fixed;
			border-radius: 0;
			height: 88rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.add-address {
				flex: 1;
				height: 88rpx;
				position: relative;
				background: #F76454;
			}

			.new_address {
				border: none;
				background-color: #FFFFFF;
			}
		}

		.userLevel {
			font-size: 24rpx !important;
			color: #F76454;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
</style>