high-mini/pages/address/address.vue

<template>
	<view class="user-address backcor9 ">
		
		
		<scroll-view scroll-y="true" class="address-contain paading10" >
			<radio-group @change="radioChange">
			<view v-for="(item,index) in addressList" :key="item.id" class="border-8r paading10 backcolorfff marb10">
				<view class="user-msg border-b paddbotm5">
					<view class=" mart3 " >
						<text class="address-name">{{item.consignee}}</text>
						<text class=" margle10 ">{{item.phone}}</text>
					</view>
					<view class="color999 mart5" >
						地址:{{item.regionName +" " +item.address}}
					</view>
					
				</view>
				<view class="user-handle mart10">
					<view class="handle-left">
						<!-- <radio  :checked="item.whetherDefault" style="transform:scale(0.7)"  :value="item.id" color="#FF1A34" /> -->
						<radio  :checked="selectId == item.id" style="transform:scale(0.7)"  :value="item.id" color="#FF1A34" />
						<text  class=" margle">默认地址</text>
					</view>
					<view class="handle-right">
						<button type="primary" class="marRight10" plain="true" size="mini" @click="editAddress(item.id)">编辑</button>
						<button type="warn" plain="true" size="mini" @click="deleteAddress(item.id)">删除</button>
					</view>
				</view>
				
			</view>
			</radio-group>
			<noMore></noMore>
		</scroll-view>
		
		
		<view class="address-btn  fcorfff font16">
			<view class="add-btn" @click="addNewAddress">添加新地址</view>
			<view class="add-btn" @click="daoRu">导入系统地址</view>
		</view>
	</view>
</template>

<script>
	import noMore from '@/pages/classify/no-more/no-more.vue'
	import { getDeliveryAddressList,deleteAddress,updateDeliveryAddress } from '@/Utils/physicalObject.js'
	
	
	export default {
		components:{
			noMore,
			
		},
		data(){
			return{
				addressId:[
					111,222,333,444
				],
				selectId:0,
				addressList:[]
			}
		},
		onLoad(){
			this.initData()
		},
		methods:{
			initData(){
				this.selectId = 0;
				getDeliveryAddressList().then(res=>{
					if (res.return_code == '000000') {
										
						if(res.return_data.length>0){
						// console.log(res.return_data)
						this.addressList = res.return_data;
						this.addressList.map(item=>{
							if(item.whetherDefault){
								this.selectId = item.id;
							}
						})
						}
					
					}else{
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
					
				})
			},
			
			// 修改默认地址
			radioChange(e){
				
				let select =  e.detail.value
				let content =null;
				this.addressList.map(item=>{
					if(item.id == select){
						content = item;
					}
				})
				let params ={
					"id": content.id,
					"address": content.address,
					"consignee": content.consignee,
					"phone": content.phone,
					"regionId": content.regionId,
					"regionName":content.regionName,
					"whetherDefault": true
				}
				updateDeliveryAddress(params).then(res=>{
					let title ;
					
						if (res.return_code == '000000') {
							title = res.return_data;
							this.selectId = e.detail.value;
						}else{
							title = res.return_msg;
						}
						uni.showToast({
							title: title,
							icon: 'none',
							duration: 2000
						})		
				})		
			},
			editAddress(id){
				uni.navigateTo({
					url:"./addNewAddress/addNewAddress?id="+id
				})
			},
			deleteAddress(id){
				uni
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该地址吗?',
					success: function(res) {
						if (res.confirm) {
							let params={
								id:id
							}
							deleteAddress(params).then(res=>{
								let title ;
								if (res.return_code == '000000') {
										title = res.return_data;				
								}else{
									title = res.return_msg;
								}
								uni.showToast({
									title: title,
									icon: 'none',
									duration: 2000
								})		
								
								_this.initData();
								
							})
							
						} else if (res.cancel) {
				
							// console.log('用户点击取消');
						}
					}
				});
				
				
			},
			// 新增地址
			addNewAddress(){
				uni.navigateTo({
					url:"./addNewAddress/addNewAddress"
				})
			},
			// 导入系统地址
			daoRu(){
			 uni.chooseAddress({
					success: (res) => {
						console.log(res)
						var data = {
						    "name": res.userName || '',
						    "tel": res.telNumber || '',
						    "province": res.provinceName || '',
						    "city": res.cityName || '',
						    "county": res.countyName || '',
						    "address": res.detailInfo || ''
						};
						
						// 之后再发起一个添加地址的请求
						
					},
					fail: (err) => {
						
					}
				})
				
			
			}
		}
	}
</script>

<style lang="scss" scoped>

.border-b{
	border-bottom: 1px solid #f6f6f6;
}	

.user-address{
	height: 100vh;
	overflow: hidden;
	
	.address-contain{
		height: calc(100vh - 70px);
		width: calc(100% - 20px);
	}
	
	.user-handle{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.handle-right{
		vertical-align: middle;
	}
}



// 底部按钮
.address-btn{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50px;
	line-height: 50px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.add-btn{
		width:45%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 20px;
		&:first-of-type{
			background-color:#F6C133;
		}
		&:last-of-type{
			background-color: #3da7e7;
		}
		
	}
}

</style>