pet-front-order/pages/personalCenter/address.vue

<template>
	<view class="personal-address">
		<view v-if="addressList.length>0" class="personal-address-list">			
			<view v-for="(item,index) in addressList" :key="index">
				<view class="personal-address-list-item">
					<view class="personal-address-info">
						<view class="personal-address-text">
							{{item.province == item.city ? item.province : ''}} 
							{{item.city}} 
							{{item.district}} 
							{{item.detailAddress}}
						</view>
						<view class="personal-address-people">
							<view>
								{{item.name}}
							</view>
							<view style="border: solid #7D8196 1px; margin: 0 10px; height: 12px;">	</view>
							<view>
								{{item.phoneHidden}}
							</view>
						</view>
					</view>
					<view class="personal-address-info-btns">
						<u-radio-group v-if="item.isDefault" v-model="value" >
							<u-radio activeColor="#ffbf60" name="默认地址" labelColor="#ffbf60" label="默认地址"></u-radio>
						</u-radio-group>
						<view class="" v-else></view>
						<view class="personal-address-info-btns-2">
							<view class="personal-address-info-btn" @click="editAddress(item)">
								<u-icon name="edit-pen" color="#7d8196" size="16" style="margin-right: 5px;"></u-icon>
								<view style="margin-left: 5px;">
									编辑 
								</view>
							</view>
							<view class="personal-address-info-btn" @click="deleteAddress(item)">
								<u-icon name="trash" color="#7d8196" size="16"></u-icon>
								<view style="margin-left: 5px;">
									删除
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view v-else class="personal-address-none">
			<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/address.png" alt="pet"  
			style="width: 243px;height: 147px;" mode="widthFix"/>
			<view class="personal-address-none-text">这里还没有您的地址,请点击添加吧~</view>
		</view>
		
		<view class="personal-address-add">
			<button class="personal-address-add-btn" @click="addAddress">添加地址</button>
		</view>
		
		<u-modal :show="showDel" @confirm="confirmDel" @cancel="cancelDel" ref="uModal" showCancelButton :asyncClose="true" :content='delContent'></u-modal>
	</view>
</template>

<script>
	import { getDictList } from "@/api/system/user.js"
	import { getAddressList,delAddress } from "@/api/system/address"
	export default{
		data(){
			return{
				addressList:[],
				value:"默认地址",
				show:false,
				showDel:false,
				delContent:'',
				deleteId:''
			}
		},
		onShow() {
			this.getAddressList();
		},
		onPullDownRefresh() {
			this.getAddressList();
		},
		mounted() {
			this.getAddressList();
		},
		methods:{
			getAddressList(){
				getAddressList({openId:this.openIdStr}).then(res=>{
					if(res&&res.content){
						this.addressList=res.content
						this.showDel = false;
					} 
				})
			},
			addAddress(){
				uni.navigateTo({
					url: `/pages/personalCenter/addressInfo?optionType=add`
				});
			}, 
			editAddress(item){
				uni.navigateTo({
					url: `/pages/personalCenter/addressInfo?optionType=edit&addressId=${item.id}`
				});			
			},
			deleteAddress(item){
				this.delContent = "确定要删除该地址吗?";
				this.showDel = true;
				this.deleteId=item.id;
			},
			confirmDel(){
				delAddress(this.deleteId).then(res=>{
					console.log(res);
					this.$modal.showToast('删除成功');
					this.getAddressList()
				})
			},
			cancelDel(){
				this.showDel = false;
				this.deleteId='';
			}
		}
	}
</script>

<style>
	::v-deep .wx-radio-input.wx-radio-input-checked {
		background-color: #ffbf60 !important;
		border-color: #ffbf60 !important;
	}
</style>
<style lang="scss">
	//选中之后的样式
	
	.personal-address{
		position: relative;
		height: 100%;
		padding-bottom: 90px;
		.personal-address-add{
			background-color: #FFFFFF;
			padding: 10px 20px 40px;
			width: 100%;
			height: 90px;
			position: fixed;
			bottom: 0;
			z-index: 100;
			display: flex;
			.personal-address-add-btn{
				width: 100%;
				border-radius: 6px;
				background: #FFB13F;
				font-size: 16px;
				color: #FFFFFF;
			}
		}
		
		.personal-address-list{
			.personal-address-list-add{
				width: 100%;
				height: 44px;
				background-color: #FFFFFF;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 15px;
				.personal-address-list-add-btn{
					font-size: 14px;
					color:#AAA;
					display: flex;
					align-items: center;
				}
				
			}
			.personal-address-list-item{
				margin: 10px 10px 0 10px;
				border-radius: 5px;
				padding: 20px 10px 10px;
				background-color: #FFF;
				.personal-address-info{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					flex-wrap: wrap;
					.personal-address-text{
						color: #333;
						font-size: 14px;
						font-weight: bold;
						width: 100%;
					}
					.personal-address-people{
						color: #7D8196;
						font-size: 14px;
						font-weight: 400;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin: 10px 0 10px;
					}
					
				}
				.personal-address-info-btns{
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					font-size: 14px;
					padding-top: 10px;
					border-top:solid 1px #efefef;
					
					.personal-address-info-btns-2{
						display: flex;
						justify-content: flex-end;
						align-items: flex-end;
						.personal-address-info-btn{
							display: flex;
							color: #7D8196;
							margin-left: 20px;
							align-items: flex-end;
						}
					}
				}
				
			}
			
		}
		.personal-address-none{
			display:flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 40%;
			.personal-address-none-text{
				color: #666;
				text-align: center;
				font-size: 14px;
				width: 100%;
				margin-top: 10px;
			}
		}
		
	}
	
</style>