104 lines
2.8 KiB
Vue
104 lines
2.8 KiB
Vue
<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>
|