<template>
	<view>
		<view class="width100 height90 headsbg backcorfff" @click="jumpupadess('add')">
			<view class="height20"></view>
			<view class="width90 height40 alijus font15 fcor666 border1co6">
				<image mode="widthFix" class="icon30 marRight20" src="../static/imgs/plus.png"></image>添加新地址
			</view>
		</view>

		<view class="list width90 mart15" v-for="(item, index) in addressList" :key="index"
			:class="chageid == item?'afterlist':'list'" @click="changemaddress(item)">
			<view class="wrapper">
				<view class="address-box width90 paddtop15">
					<text class="address">但是放松放松放松的方式发顺丰沙发上是方式地方但是放松方式扶 门牌号</text>
				</view>
				<view class="u-box width90 mart10 paddbotm15">
					<text class="name">名称</text>
					<text class="mobile">15583658692</text>
				</view>
			</view>
			<image src="../static/imgs/upte.png" mode="widthFix" class="icon15 marRight20"
				@click.stop="jumpupadess('edit')"></image>
		</view>
		<view class="height70"></view>
		<view class="width100 height50 dispost font15 fotct" @click="jumpshop()">确认</view>
		
		<view class="width100 foot-cs"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList: [1, 2, 3, 4],
				chageid: '' //选中的地址
			}
		},
		methods: {
			//跳转地址
			jumpupadess(item) {
				uni.navigateTo({
					url: '../update-address/update-address?type=' + item
				})
			},
			//选择地址
			changemaddress(item) {
				if (this.chageid == item) {
					this.chageid = '';
					return;
				}
				this.chageid = item;
			},
			//跳转商品
			jumpshop() {
				if (!this.chageid) {
					uni.showToast({
						title: '请选择配送地址',
						duration: 2000,
						icon: 'none'
					})
					return;
				}
				uni.navigateTo({
					url: '../menu-list/menu-list'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.headsbg {
		border-radius: 0 0 30px 30px;
	}

	.border1co6 {
		border: 1px solid #999999;
		border-radius: 50rpx;
	}

	.icon15 {
		width: 15px;
	}

	.icon30 {
		width: 25px;
	}

	.list {
		border-radius: 15px;
		display: flex;
		align-items: center;
		background: #fff;
		position: relative;
	}

	.afterlist {
		border-radius: 15px;
		display: flex;
		align-items: center;
		background: #fff;
		position: relative;
		border: 1px solid #c32a20;
	}

	.wrapper {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.address-box {
		display: flex;
		align-items: center;

		.tag {
			font-size: 24upx;
			color: #999999;
			margin-right: 10upx;
			background: #fffafb;
			border: 1px solid #ffb4c7;
			border-radius: 4upx;
			padding: 4upx 10upx;
			line-height: 1;
		}

		.address {
			font-size: 28upx;
			color: #333333;
		}
	}

	.u-box {
		font-size: 26upx;
		color: #999999;
		margin-top: 16upx;

		.name {
			margin-right: 30upx;
		}
	}

	.dispost {
		position: fixed;
		background-color: #c32a20;
		bottom: 0px;
		border-radius: 15px 15px 0px 0px;
		color: #fff;
	}
	.foot-cs{
		
	}
</style>
