新增地址页面制作（收货地址）

order-app/src/pages.json

@@ -1,6 +1,11 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
+			"path": "pages/address/address",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		}, {
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": "首页"
@@ -28,17 +33,9 @@
 
 		},
 		{
-			"path" : "pages/detail/detail",
-			"style" : 
-			{
-				"navigationBarTitleText" : ""
-			}
-		},
-		{
-			"path" : "pages/address/address",
-			"style" : 
-			{
-				"navigationBarTitleText" : ""
+			"path": "pages/detail/detail",
+			"style": {
+				"navigationBarTitleText": ""
 			}
 		}
 	],
@@ -79,4 +76,4 @@
 			"text": "我的"
 		}]
 	}
-}
+}

order-app/src/pages/address/address.vue

@@ -0,0 +1,191 @@
+<template>
+	<view class="wrap">
+		<view class="top">
+			<view class="item">
+				<view class="left">收货人:</view>
+				<input type="text" placeholder-class="line" placeholder="请填写收货人姓名" />
+			</view>
+			<view class="item">
+				<view class="left">手机号码:</view>
+				<input type="text" placeholder-class="line" placeholder="请填写收货人手机号" />
+			</view>
+			<view class="item" @confirm='confirm' @tap="showRegionPicker">
+				<view class="left">所在地区:</view>
+				<input disabled style="width: 100%;" v-model="finalAddress" type="text" :placeholder-class="line"
+					placeholder="省市区县、乡镇等" />
+			</view>
+			<view class="item address">
+				<view class="left">详细地址:</view>
+				<textarea type="text" placeholder-class="line" placeholder="街道、楼牌等" />
+			</view>
+
+		</view>
+		<view class="bottom">
+			<view class="default">
+				<view class="left">
+					<view class="set">设置默认地址</view>
+					<view class="tips">提醒：每次下单会默认推荐该地址</view>
+				</view>
+				<view class="right">
+					<switch color="red" @change="setDefault" />
+				</view>
+			</view>
+		</view>
+		<u-picker v-model="show" mode="region" ref="uPicker" @confirm="confirm"></u-picker>
+		<u-button :custom-style="customStyle" type="warning">提交</u-button>
+	</view>
+</template>
+
+<script setup>
+	import {
+		reactive,
+		ref
+	} from 'vue'
+	const customStyle = reactive({
+		margin: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
+	})
+	const finalAddress = ref('')
+	const show = ref(false)
+
+	const setDefault = () => {}
+
+	const showRegionPicker = () => {
+		show.value = true;
+	}
+
+	const confirm = (e) => {
+		console.log(e)
+		finalAddress.value = e.province.name + '/' + e.city.name + '/' + e.area.name
+		console.log(finalAddress.value)
+	}
+	const changeAddress = () => {
+
+	}
+</script>
+
+<style lang="scss" scoped>
+	:deep(.line) {
+		color: $u-light-color;
+		font-size: 28rpx;
+	}
+
+	.wrap {
+		background-color: #f2f2f2;
+
+		.top {
+			background-color: #ffffff;
+			border-top: solid 2rpx $u-border-color;
+			padding: 22rpx;
+
+			.item {
+				display: flex;
+				font-size: 32rpx;
+				line-height: 100rpx;
+				align-items: center;
+				border-bottom: solid 2rpx $u-border-color;
+
+				.left {
+					width: 180rpx;
+				}
+
+				input {
+					text-align: left;
+				}
+			}
+
+			.address {
+				padding: 20rpx 0;
+
+				textarea {
+					// width: 100%;
+					height: 150rpx;
+					background-color: #f7f7f7;
+					line-height: 60rpx;
+					margin: 40rpx auto;
+					padding: 20rpx;
+				}
+			}
+
+			.site-clipboard {
+				padding-right: 40rpx;
+
+				textarea {
+					// width: 100%;
+					height: 150rpx;
+					background-color: #f7f7f7;
+					line-height: 60rpx;
+					margin: 40rpx auto;
+					padding: 20rpx;
+				}
+
+				.clipboard {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					font-size: 26rpx;
+					color: $u-tips-color;
+					height: 80rpx;
+
+					.icon {
+						margin-top: 6rpx;
+						margin-left: 10rpx;
+					}
+				}
+			}
+		}
+
+		.bottom {
+			margin-top: 20rpx;
+			padding: 40rpx;
+			padding-right: 0;
+			background-color: #ffffff;
+			font-size: 28rpx;
+
+			.tag {
+				display: flex;
+
+				.left {
+					width: 160rpx;
+				}
+
+				.right {
+					display: flex;
+					flex-wrap: wrap;
+
+					.tags {
+						width: 140rpx;
+						padding: 16rpx 8rpx;
+						border: solid 2rpx $u-border-color;
+						text-align: center;
+						border-radius: 50rpx;
+						margin: 0 10rpx 20rpx;
+						display: flex;
+						font-size: 28rpx;
+						align-items: center;
+						justify-content: center;
+						color: $u-content-color;
+						line-height: 1;
+					}
+
+					.plus {
+						//padding: 10rpx 0;
+					}
+				}
+			}
+
+			.default {
+				// margin-top: 50rpx;
+				display: flex;
+				justify-content: space-between;
+				border-bottom: solid 2rpx $u-border-color;
+				line-height: 64rpx;
+
+				.tips {
+					font-size: 24rpx;
+				}
+
+				.right {}
+			}
+		}
+	}
+</style>