xusfood_client/center/addrlist.vue

<template>
	<view class="pages">
		<u-navbar
			title="收货地址"
			@leftClick="leftClick"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="page-wrap">
			<view class="full-btn" @click="newAddr">新增收货地址</view>
			<view class="addr u-flex" @click="editAddr(item)" v-for="item in 20" :key="item">
				<view class="icon-wrap" v-if="item==1">
					<u-icon size="36rpx" :name="staticUrl+'/img/arrows.png'"></u-icon>
				</view>
				<view class="info u-flex-1">
					<view class="up">
						<text>张晓霞</text>
						<text>182 ****2542</text>
						<text class="default" v-if="item==1">默认</text>
					</view>
					<view class="down">广东省广州市越秀区腾讯大厦32楼3002号</view>
				</view>
				<u-icon name="edit-pen" color="#333" size="20"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
			}
		},
		onShow() {		
		},
		onLoad() {

		},
		methods: {
			leftClick(e){
				console.log('leftClick',e);
			},
			newAddr(){
				uni.$u.route('/center/addrForm', {type: 'add'});
			},
			editAddr(item){
				uni.$u.route('/center/addrForm', {type: 'edit',id:item.id});
			}
		}
	}
</script>
<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
.addr{
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	.info{
		margin-left: 30rpx;
	}
	.up{
		margin-bottom: 10rpx;
		font-size: 32rpx;
		font-weight: 600;
		text{margin-right: 20rpx;}
		.default{
			padding: 5rpx 16rpx;
			border-radius: 4rpx;
			color: #FF3C3F;
			background-color: #FFECEC;
			font-size: 22rpx
		}
	}
	.down{
		font-size: 26rpx;
		color: #999;
	}
}
</style>