no message

pages-takeout/replace-mod/select-site.vue

@@ -0,0 +1,15 @@
+<template>
+	<view class="">
+
+	</view>
+</template>
+
+<script>
+	export default {
+		
+	}
+</script>
+
+<style scoped lang="scss">
+
+</style>

pages-takeout/replace-take.vue

@@ -11,20 +11,61 @@
 					</view>
 				</template>
 			</Nav>
-			<view class="address-box align-items-center box-border-box plr-24">
-				<view class="address-1 flex-justify-space align-items-center">
+			<view :class="addressData.id?'bottom-124':''" class="address-box align-items-center box-border-box plr-24">
+				<view v-if="!addressData.id" class="address-1 flex-justify-space align-items-center">
 					<view class="align-items-center">
 						<image class="qu-image" src="@/static/img/takeout/qu-icon.png" mode=""></image>
 						<view class="fw-600 fs-40">请选择站点</view>
 					</view>
 					<image class="address-box-right" src="@/static/img/toRight.png" mode=""></image>
 				</view>
+				<view v-else class="address-2 flex-justify-space align-items-center">
+					<view class="display-flex">
+						<image class="address-img mr-20" src="@/static/img/my/bg.png" mode="scaleToFill"></image>
+						<view class="">
+							<view class="w-474 fs-40 fw-600 mb-4">菜鸟驿站</view>
+							<view class="w-474 fw-400 fs-26 fc-9">兴科大道252号兴科大道252号兴科大道252号</view>
+						</view>
+					</view>
+					<image class="address-box-right" src="@/static/img/toRight.png" mode=""></image>
+				</view>
 			</view>
 		</view>
 		
 		
 		<view class="scroll-view-css list-box box-border-box plr-24">
+			<view class="mb-32" :class="addressData.id?'h-120':'h-60'"></view>
+			
+			<view class="list-box-b mb-48">
+				<view class="fs-36 fw-600 mb-22">快递类型</view>
+				<view class="list-item flex-justify-space" v-for="(item,i) in 6" :key="i">
+					<image src="@/static/img/my/bg.png" mode="scaleToFill"></image>
+					<view class="flex-1 ">
+						<view class="fs-32 fw-600 mb-4">小件(轻薄衣物，小1111111物品11) 1小件(轻薄衣物，小1111111物品11) 1</view>
+						<view class="fs-24 fw-400 mb-4 fc-9">规格规格规格规格规格</view>
+						<view class="fs-24 fw-400 mb-4 fc-9">销量2801</view>
+						<view class="flex-justify-space">
+							<view class="">
+								<span class="fw-4 fc-FB3D03 fs-24">￥</span>
+								<span class="fw-b fc-FB3D03 fs-40">3.9</span>
+								<span class="fw-400 fc-9 fs-24">/份</span>
+							</view>
+							<view class="display-flex align-items-center">
+								<view class="right-only-right-red fw-500 text-align-center fs-36 fc-f">-</view>
+								<view class="right-only-right-2 text-align-center fs-28 fw-400">1</view>
+								<view class="right-only-right-add fw-500 text-align-center fs-36 fc-f">+</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
 			
+			<view class="">
+				<view class="fs-36 fw-600 mb-22">取件码（6）</view>
+				<view class="mb-20" v-for="(item,i) in 6" :key="i">
+					<input class="input-num" type="text" placeholder="未输入取件码" placeholder-class="input-p">
+				</view>
+			</view>
 		</view>
 		
 		<view class="shop-buttom-money box-border-box" @click="createOrder()">
@@ -45,6 +86,17 @@
 <script>
 	import tools from "@/service/tools";
 	export default {
+		data(){
+			return{
+				addressData:{
+					id:'',
+					name:'',
+				},
+			}
+		},
+		onShow() {
+			
+		},
 		methods:{
 			toBack(){
 				tools.leftClick()
@@ -58,6 +110,15 @@
 
 <style scoped lang="scss">
 	.replace-take-box{
+		.h-120{
+			height: 120rpx;
+		}
+		.h-60{
+			height: 60rpx;
+		}
+		.w-474{
+			width: 474rpx;
+		}
 		.w-390{
 			width: 390rpx;
 			margin-left: 38rpx;
@@ -73,6 +134,9 @@
 				height: 490rpx;
 				// z-index: -1;
 			}
+			.bottom-124{
+				bottom: -124rpx !important;
+			}
 			.address-box{
 				z-index: 100;
 				position: absolute;
@@ -80,7 +144,7 @@
 				left: 24rpx;
 				box-sizing: border-box;
 				width: 702rpx;
-				height: 136rpx;
+				min-height: 136rpx;
 				background: linear-gradient( 182deg, #F1F9FF 0%, #FFFFFF 100%);
 				box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(172,210,235,0.19);
 				border-radius: 20rpx;
@@ -92,12 +156,21 @@
 						height: 49rpx;
 						margin: 10rpx 10rpx 0 0;
 					}
-					.address-box-right{
-						width: 32rpx;
-						height: 32rpx;
-					}
+					
+				}
+				.address-2{
+					box-sizing: border-box;
+					padding:32rpx 0;
+				}
+				.address-img{
+					width: 100rpx;
+					height: 100rpx;
+					border-radius: 8rpx;
+				}
+				.address-box-right{
+					width: 32rpx;
+					height: 32rpx;
 				}
-				
 			}
 		}
 		
@@ -143,7 +216,53 @@
 		}
 		
 		.list-box{
-			
+			.list-box-b{
+				border-bottom: 1rpx solid #f9f9f9;
+			}
+			.list-item{
+				width: 100%;
+				min-height: 200rpx;
+				margin-bottom: 50rpx;
+				
+				image{
+					width: 200rpx;
+					height: 200rpx;
+					border-radius: 20rpx;
+					margin-right: 20rpx;
+				}
+			}
+			.right-only-right-red{
+				width: 44rpx;
+				height: 44rpx;
+				line-height: 40rpx;
+				border-radius: 12rpx;
+				border: 1rpx solid #41ABF5;
+				color: #41ABF5;
+			}
+			.right-only-right-add{
+				width: 44rpx;
+				height: 44rpx;
+				line-height: 40rpx;
+				background: linear-gradient( 117deg, #57CAFF 0%, #41ABF5 100%);
+				border-radius: 12rpx;
+			}
+			.right-only-right-2{
+				min-width: 50rpx;
+			}
+			.input-num{
+				width: 100%;
+				height: 92rpx;
+				box-sizing: border-box;
+				padding: 0 24rpx;
+				background: #F6F6F6;
+				border-radius: 20rpx;
+				font-size: 32rpx;
+			}
+			.input-p{
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #FB3D03;
+			}
 		}
 		
 	}