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>
|