<template>
	<view class="flex-col page">
	  <view class="flex-col list">
	    <view class="flex-col list-item mt-9" v-for="(item, index) in address" :key="index">
	      <view class="flex-row justify-between items-center">
	        <view class="flex-row items-center">
	          <text class="font">{{ item.name }}</text>
	          <text class="font_2 ml-9">{{ item.phone }}</text>
	          <view class="flex-col justify-start items-center shrink-0 text-wrapper ml-9">
	            <text class="text">默认</text>
	          </view>
	        </view>
	        <view class="flex-row">
	          <image
	            class="image"
	            :src="detele"
	          />
	          <image
	            class="ml-12 image"
	            :src="update"
	          />
	        </view>
	      </view>
	      <view class="mt-10 flex-col items-start">
	        <text class="font_3">{{ item.address }}</text>
	        <!-- <text class="mt-2 font_3"></text> -->
	      </view>
	    </view>
	  </view>
	  <view class="flex-col justify-start items-center section mt-455">
	    <view class="flex-col justify-start items-center text-wrapper_2" @click="jump"><text class="font text_2">新增地址</text></view>
	  </view>
	</view>
</template>

<script setup> 
	import {ref} from 'vue'
	import detele from '@/pages/Shopping-cart/address/img/delete.png';
	import update from '@/pages/Shopping-cart/address/img/update.png';
	
	const address = ref([
		{
			"name" : "张三",
			"phone" : "15888610253",
			"address" : "黑龙江省哈尔滨市呼兰区学院路街道288号哈尔滨华德学院  //测试换行"
		},
		{
			"name" : "张三",
			"phone" : "15888610253",
			"address" : "黑龙江省哈尔滨市呼兰区学院路街道288号哈尔滨华德学院  //测试换行"
		},
		{
			"name" : "张三",
			"phone" : "15888610253",
			"address" : "黑龙江省哈尔滨市呼兰区学院路街道288号哈尔滨华德学院  //测试换行"
		},
		{
			"name" : "张三",
			"phone" : "15888610253",
			"address" : "黑龙江省哈尔滨市呼兰区学院路街道288号哈尔滨华德学院  //测试换行"
		},
		{
			"name" : "张三",
			"phone" : "15888610253",
			"address" : "黑龙江省哈尔滨市呼兰区学院路街道288号哈尔滨华德学院  //测试换行"
		},
		{
			"name" : "张三",
			"phone" : "15888610253",
			"address" : "黑龙江省哈尔滨市呼兰区学院路街道288号哈尔滨华德学院  //测试换行"
		},
		{
			"name" : "张三",
			"phone" : "15888610253",
			"address" : "黑龙江省哈尔滨市呼兰区学院路街道288号哈尔滨华德学院  //测试换行"
		},
		{
			"name" : "张三",
			"phone" : "15888610253",
			"address" : "黑龙江省哈尔滨市呼兰区学院路街道288号哈尔滨华德学院  //测试换行"
		}
	])
	const jump =()=> {
		uni.navigateTo({
			url: '../../../pages/Shopping-cart/newaddress_Info/newaddress_Info'
		})
	}
</script>

<style lang="scss" scoped>
	.mt-9 {
	  margin-top: 17.18rpx;
	}
	.ml-9 {
	  margin-left: 17.18rpx;
	}
	.mt-455 {
	  margin-top: 868.32rpx;
	}
	.page {
	  padding-top: 20.99rpx;
	  background-color: #fffaf0;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	  height: 100vh;
	  // overflow: hidden;
	}
	.list {
	  padding: 0 20.99rpx;
	}
	.list-item {
	  padding: 30.53rpx 15.27rpx 30.53rpx 22.9rpx;
	  background-color: #ffffff;
	  border-radius: 9.54rpx;
	  border-left: solid 1.91rpx #818181;
	  border-right: solid 1.91rpx #818181;
	  border-top: solid 1.91rpx #818181;
	  border-bottom: solid 1.91rpx #818181;
	}
	.list-item:first-child {
	  margin-top: 0;
	}
	.font {
	  font-size: 30.53rpx;
	  font-family: Open Sans;
	  line-height: 27.67rpx;
	  color: #323232;
	}
	.font_2 {
	  font-size: 30.53rpx;
	  font-family: Open Sans;
	  line-height: 22.44rpx;
	  color: #323232;
	}
	.text-wrapper {
	  background-color: #ffbe55;
	  border-radius: 9.54rpx;
	  width: 70.61rpx;
	  height: 32.44rpx;
	}
	.text {
	  color: #ffffff;
	  font-size: 22.9rpx;
	  font-family: Open Sans;
	  line-height: 21.07rpx;
	  padding-top: 5rpx;
	}
	.image {
	  border-radius: 9.54rpx;
	  width: 40.08rpx;
	  height: 40.08rpx;
	}
	.font_3 {
	  font-size: 26.72rpx;
	  font-family: Open Sans;
	  line-height: 32.44rpx;
	  color: #818181;
	}
	.section {
	  // padding: 17.18rpx 0;
	  background-color: #ffffff;
	}
	.text-wrapper_2 {
	  position: fixed;
	  bottom: 25rpx;
	  padding: 26.72rpx 0;
	  background-color: #ffa948;
	  border-radius: 47.71rpx;
	  width: 629.77rpx;
	}
	.text_2 {
	  color: #ffffff;
	  line-height: 28.24rpx;
	}
	@import url(../../../common/css/global.css);
</style> 