medicine-xcx/pages/my/address/address.vue

<template>
	<view class="address h-100">
		<view class="address-container" v-if="addressData.length">
			<view 
				class="address-container-item flex align-center justify-between m-b-20" 
				v-for="(item,index) in addressData" 
				:key="index"
				@click="selectAddress(item)"
			>	
				<view class="nameOne_box">
					<text class="nameOne">{{item.name.substr(0,1)}}</text>
				</view>
				<view class="flex-1 m-r-30">
					<view class="flex align-center">
						<text class="font-36 m-r-60" style="font-weight: bold;">{{item.name}}</text>
						<text class="text-grey font-32">{{item.phone}}</text>
					</view>
					<view class="m-b-4 address_box">
						<view class="icon_box m-r-20" v-if="item.defaultFlag">
							<u-tag text="默认" mode="dark" size="mini" v-if="item.defaultFlag"/>
						</view>
						<text class="font-30 m-r-20">{{item.shippingAddress}}</text>
						<text class="text-black font-30">{{item.addressDetail}}</text>
					</view>
				</view>
				<com-view  @click="toEdit(item)" v-if="type !== 'select'">
					<view class="address-container-item-edit flex align-center justify-end">
						<u-icon name="edit-pen" color="#000" size="50"></u-icon>
					</view>
				</com-view>
			</view>
		</view>
		<view class="vw-100 h-100" v-if="!addressData.length">
			<u-empty icon-size="430" text="没有收货地址" :src="IMG_URL + 'address-empty.png'"></u-empty>
		</view>
		<view class="address-footer position-fixed flex align-center justify-center">
			<u-button type="primary" shape="circle" @click="toAdd" class="font-size-34">新增收货地址</u-button>
		</view>
	</view>
</template>

<script>
	import { IMG_URL } from '@/env.js'
	export default{
		data(){
			return{
				IMG_URL,
				value:'',
				params:{
					pageNo:1,
					pageSize:10
				},
				addressData:[],
				type: '',
				url: ''   //从哪里来
			}
		},
		
		onLoad(options) {
			let pages_url = getCurrentPages();
			this.url = pages_url[0].route;		
			if (options.type) this.type = options.type
			
			// 删除地址
			uni.$on('delAddress', params => {
				let idx = this.addressData.find(item => params.id === item.id)
				this.addressData.splice(idx, 1)
			})
			// 新增地址
			uni.$on('addAddress', () => {
				this.getAddressList()
			})
			// 编辑地址
			uni.$on('editAddress', params => {
				let idx = this.addressData.find(item => params.id === item.id)
				this.addressData.splice(idx, 1, {...this.addressData[idx], ...params})
			})
			
		},
		onShow() {
			this.getAddressList()
		},
		onUnload() {
			uni.$off('delAddress')
			uni.$off('addAddress')
			uni.$off('editAddress')
			// 获取倒退的页面
			uni.switchTab({
				url: this.url
			})
		},
		
		methods: {
			selectAddress (item) {
				if (this.type === 'select') {
					console.log(item)
					// uni.$emit('SELECT_ADDRESS', item)
					let params = {
						...item,
						type: 'user'
					}
					this.$store.commit('set_location', params)
					uni.navigateBack({
						delta: 1
					})
				}else {
					// 从首页进入 选择地址
					this.type === 'select_home'
					let params = {
						...item,
					}
					this.$store.commit('set_location', params)
					uni.navigateBack({
						delta: 3
					})
				}
			},
			toEdit(item) {
				// 编辑地址
				const info = JSON.stringify(item)
				console.log(encodeURIComponent(info))
				uni.navigateTo({
					url: `/pages/my/address/addressEdit?type=edit&title=编辑地址&info=${encodeURIComponent(info)}`
				})
			},
			getAddressList() {
				const params = this.params
				uni.showLoading();
				this.$api('getAddressList', params).then(res => {
					let { code, result, message } = res
					uni.hideLoading();
					if(code == 200) {
						this.addressData = result.records;
						console.log( code, result, message)
					}else{
						this.$Toast(message)
					}
				}).catch(err => {
					this.$Toast(err.message)
				})
			},
			toAdd () {
				// &info={}
				this.$tools.navigateTo({
					url: '/pages/my/address/addressEdit?type=add&title=新增地址'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.nameOne_box{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 100rpx;
		font-size: 43rpx;
		font-weight: bold;
		color: #fff;
		margin-right: 20rpx;
		background-color: rgba(12,133,255,.6);
		
	}
	.address_box{
		float: left;
		.icon_box{
			display: inline-block;
		}
	}
	.list-box{
		width: 750upx;
	}
	.u-radio-group{
		width: 100%;
	}
	.item{
		margin: 32upx;
		border: 1upx solid #707070;
		padding: 20upx;
		border-radius: 10upx;
		position: relative;
		width: 100%;
		.delete{
			position: absolute;
			right: 20upx;
			top: 20upx;
		}
		.header-box{
			display: flex;
			align-items: center;
			text{
				margin-left: 12upx;
				font-size: 26upx;
			}
			.phone-box{
				margin-left: 20upx;
			}
			.nickname{
				font-size: 28upx;
				font-weight: bold;
				color: #000000;
			}
			.tel{
				color: #707070;
				margin-left: 4upx;
			}
		}
		.content-box{
			padding: 20upx 10upx;
			display: flex;
			font-size: 28upx;
			color: #707070;
			text{
				margin-left: 8upx;
			}
		}
		.bottom-box{
			padding:10upx 10upx 10upx 10upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26upx;
			.text-orange-dark{
				color: #FFA206;
				font-size: 26upx;
			}
		}
	}
	.function-box{
		position: fixed;
		bottom: 0upx;
		left: 0upx;
		height: 150upx;
		width: 750upx;
		display: flex;
		align-items: center;
		justify-content: center;
		.create{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 670upx;
			height: 95upx;
			background-color: #000000;
			color: #FFFFFF;
		}
	}
	
	.address {
		padding-bottom: 120rpx;
		&-container {
			height: 100%;
			background: #fff;
			padding: 30rpx;
			
			&-item {
				border-bottom: 2rpx solid #f1f1f1;
				padding-bottom: 20rpx;
				&-edit {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
		&-footer {
			height: 120rpx;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
			/deep/.u-btn {
				width: 600rpx;
				height: 80rpx;
			}
		}
	}
</style>