yixiang/pageC/address-list.vue

<template>
	<view class="content">
		<view class="box">
			<view class="address-item hflex acenter jbetween" v-for="(item,index) in list" :key="index">
				<view class="left vflex">
					<view class="address">{{item.province}}{{item.city}}{{item.area}}{{item.address}}</view>
					<view class="hflex acenter item-bottom">
						<text>{{item.name}}</text>
						<text class="mobile">{{item.mobile}}</text>
						<view class="default" v-if="item.is_default == 1">默认</view>
					</view> 
				</view>
				<image src="static/edit.png" mode="aspectFill" @click="edit(item)"></image>
			</view>
		</view>
		<view class="add">
			<view class="btn" @click="add">添加收货地址</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return{
				list: [],
				
			}
		},
		onLoad() {
		},
		onShow() {
			this.getlist()
		},
		methods: {
			add() {
				uni.navigateTo({
					url: '/pageC/address-add'
				})
			},
			edit(item) {
				uni.navigateTo({
					url: '/pageC/address-add?id=' + item.id
				})
			},
			getlist() {
				var _this = this
				$api.req({
					url: 'address',
					method: 'GET',
					data: {
						is_page: 0
					}
				}, function(res) {
					_this.list = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background: #F4F4F4;
		padding: 20rpx 28rpx;
		.add {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			background: #FFFFFF;
			padding: 12rpx 30rpx 66rpx;
			.btn {
				width: 690rpx;
				height: 88rpx;
				background: #00B0B0;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
			}
		}
		.box {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 20rpx 0;
			.address-item {
				padding: 28rpx 0 ;
				border-bottom: 1px solid #F1F7FE;
				.left {
					max-width: 578rpx;
					.address {
						font-size: 30rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #222222;
					}
					.item-bottom {
						padding: 14rpx 0 0;
						text:first-child {
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
						.mobile {
							font-size: 24rpx;
							font-family: JDZhengHT, JDZhengHT;
							font-weight: 300;
							color: #666666;
							padding: 0 16rpx 0 28rpx
						}
						.default {
							background: #57C3C2;
							border-radius: 4rpx;
							font-size: 18rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							padding: 2rpx 6rpx;
						}
					}
				}
				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
			.address-item:last-child {
				border: none;
			}
		}
		
	}
</style>