<script>
	export default {
			components: {},
			data() {
				return {
					candidates1: ['河北省', '山西省',
					'辽宁省', '吉林省',
					'江苏省', '安徽省',
					'黑龙江省', '浙江省',
					'福建省', '江西省',
					'山东省', '河南省',
					'湖北省', '湖南省',
					'广东省', '海南省',
					'贵州省', '四川省',
					'云南省', '陕西省',
					'甘肃省', '青海省',
					'台湾省', '内蒙古自治区',
					'广西壮族自治区', '西藏自治区',
					'宁夏回族自治区', '新疆维吾尔自治区',
					'北京市', '天津市',
					'上海市', '重庆市',
					'香港特别行政区', '澳门特别行政区'],
					candidates2: ['石家庄市', '唐山市',
					'秦皇岛市', '邯郸市',
					'邢台市', '保定市',
					'张家口市', '承德市',
					'沧州市', '廊坊市',
					'衡水市', '辛集市',
					'定州市'],
					candidates3: ['长安区', '桥西区',
					'新华区', '裕华区',
					'井陉矿区', '藁城区',
					'鹿泉区', '栾城区'],
				}
			}
		}
</script>

<template>
	<!-- 地址页面 -->
  <view>
	   <div class="address-form">
	          <form id="addressForm">
	              <label for="name">收货人姓名：</label>
	              <input type="text" id="name" name="name" required>
	  
	              <label for="phone">联系电话：</label>
	              <input type="tel" id="phone" name="phone" required>
	  
	              <label for="province">省份：</label>
				  <uni-combox :border="false" :candidates="candidates1" placeholder="请选择省份"></uni-combox>
	  
	              <label for="city">城市：</label>
	              <uni-combox :border="false" :candidates="candidates2" placeholder="请选择城市"></uni-combox>
	  
	              <label for="district">区县：</label>
	             <uni-combox :border="false" :candidates="candidates3" placeholder="请选择区县"></uni-combox>
	  
	              <label for="addressDetail">详细地址：</label>
	              <input type="text" id="addressDetail" name="addressDetail" required>
	          </form>
	      </div>
    <view class="add-btn">
      <navigator url="">保存地址</navigator>
    </view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
}
.address-form {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    max-width: 600px;
    margin: auto;
}
label {
    display: block;
    margin-bottom: 5px;
}
input, select {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.add-btn {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #9abbd9;
}
</style>
