cbz/page_shop/pages/address/list.vue

<template>
	<view class="content">
		<view class="list" v-if="pageList.length > 0">
			<block v-for="(item,index) in pageList" :key="index">
				<view class="item">
					<view class="hflex acenter">
						<view class="item_name">{{item.name}}</view>
						<view class="item_phone">{{item.phone}}</view>
					</view>
					<view class="item_addr">{{item.province}} {{item.city}} {{item.area}} {{item.address}}</view>
					<view class="hflex acenter jbetween item_bottom">
						<view class="hflex acenter" @click="setDefault(item.id)">
							<image v-if="item.type == 1" src="/static/images/shop/checked.png" class="item_icon"></image>
							<image v-else src="/static/images/shop/check.png" class="item_icon"></image>
							<view class="item_phone">设为默认地址</view>
						</view>
						<view class="hflex acenter">
							<view class="hflex acenter" @click="edit(index)" style="padding-right: 28rpx;">
								<image src="/static/images/shop/icon_edit.png" class="item_icon"></image>
								<view class="icon_text">编辑</view>
							</view>
							<view class="hflex acenter" @click="detele(item.id)">
								<image src="/static/images/shop/icon_detele.png" class="item_icon"></image>
								<view class="icon_text">删除</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view> 
		<view v-else class="vflex acenter jcenter" style="margin-top: 302rpx;">
			<image class="no_img" src="/static/images/shop/no_addr.png"></image>
			<view class="no_text">暂无地址，请去添加地址</view>
		</view>
		<view class="bottom">
			<view  v-if="pageList.length > 0" class="bottom_btn" @click="add">添加收货地址</view>
			<view  v-else class="bottom_btn" @click="add">+新增收货地址</view>
		</view>
		<u-modal :show="del_show" title="确定要删除该地址吗？" :showConfirmButton="false">
			<view class="model hflex acenter jbetween">
				<view class="model_left hflex acenter jcenter" @click="close">取消</view>
				<view class="model_right hflex acenter jcenter" @click="sure">确认</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				pageList: [],
				del_show: false,
				del_id: ''
			}
		},
		onLoad() {
			that = this
			
		},
		onShow() {
			that.getAddress()
		},
		methods: {
			// 获取地址列表
			getAddress() {
				$api.req({
					url: '/data/api.User/address_list'
				}, function(res) {
					if(res.code == 1) {
						that.pageList = res.data.data
					}
				})
			},
			// 选择默认地址
			setDefault(id) {
				for(var i=0;i<that.pageList.length;i++) {
					if(id == that.pageList[i].id) {
						console.log(i);
						that.$set(that.pageList[i],'is_default',1)
					} else {
						that.$set(that.pageList[i],'is_default',0)
					}
				}
			},
			// 添加地址
			add() {
				$api.jump('/page_shop/pages/address/add')
			},
			// 删除地址
			detele(id) {
				that.del_show = true
				that.del_id = id
			},
			edit(index) {
				$api.jump('/page_shop/pages/address/add?index=' + index)
			},
			close() {
				that.del_show = false
			},
			// 确定删除地址
			sure() {
				$api.req({
					url: '/data/api.User/del_address',
					data: {
						id: that.del_id
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
						that.getAddress()
						that.close()
					}
				})
			}
			
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F4F4F4;
		.list {
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			.item {
				margin-top: 20rpx;
				background: #FFFFFF;
				border-radius: 12px;
				box-sizing: border-box;
				padding: 24rpx 20rpx;
				.item_name {
					font-size: 28rpx;
					font-weight: 500;
					color: #222222;
					line-height: 40rpx;
					padding-right: 16rpx;
				}
				.item_phone {
					font-size: 22rpx;
					font-weight: 400;
					color: #999999;
					line-height: 32rpx;
				}
				.item_addr {
					font-size: 24rpx;
					font-weight: 400;
					color: #444444;
					line-height: 34rpx;
					padding: 12rpx 0 20rpx;
				}
				.item_bottom {
					padding: 16rpx 0 0;
					border-top: 1rpx solid #F1F7FE;
					.item_icon {
						width: 24rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}
					.icon_text {
						font-size: 20rpx;
						font-weight: 400;
						color: #777777;
						line-height: 28rpx;
					} 
				}
				
			}
			.item:nth-last-child(1) {
				margin-bottom: 186rpx;
			}
		}
		.no_img {
			width: 200rpx;
			height: 200rpx;
		}
		.no_text {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
			margin-top: 40rpx;
		}
		.bottom {
			width: 100%;
			z-index: 9;
			position: fixed;
			bottom: 0;
			height: 166rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 8rpx 40rpx 74rpx;
			.bottom_btn {
				width: 100%;
				height: 84rpx;
				background: #506DFF;
				border-radius: 42rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 84rpx;
			}
			
		}
		.model {
			width: 100%;
			margin-top: 78rpx;
			.model_left {
				width: 220rpx;
				height: 76rpx;
				border-radius: 38rpx;
				border: 1px solid #506DFF;
				font-size: 32rpx;
				font-weight: 400;
				color: #506DFF;
				line-height: 44rpx;
			}
			.model_right {
				width: 220rpx;
				height: 76rpx;
				border-radius: 38rpx;
				background: #506DFF;
				font-size: 32rpx;
				font-weight: 400;
				color: #fff;
				line-height: 44rpx;
			}
		}
	}
</style>