zh_order_food_xcx/pages-takeout/replace-take.vue

<template>
	<view class="replace-take-box iPhone-bottom flex-common-css box-border-box bgc-f">
		
		<view class="nav-box">
			<image class="bg-img" src="@/static/img/takeout/dq-bg.png" mode="scaleToFill"></image>
			<Nav :leftShow='false' :customNav='true' bgckgroundBox='transparent'>
				<template>
					<view slot="custom" class="align-items-center">
						<uni-icons type="left" size="20" @click="toBack()"></uni-icons>
						<view class="w-390 text-overflow-ellipsis-one fs-36 fw-400">代重庆邮电大学邮电大代重庆邮电大学邮电大</view>
					</view>
				</template>
			</Nav>
			<view :class="addressData.id?'bottom-124':''" class="address-box align-items-center box-border-box plr-24" @click="selectFun()">
				<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="openBuyCrad()">
			<view class="shop-buttom-money-1 flex-justify-space align-items-center">
				<image src="@/static/img/takeout/buy-icon.png" mode="scaleToFill"></image>
				<view class="shop-buttom-num fs-24 fc-f text-align-center">3</view>
				<view class="">
					<span class="fw-600 fs-24 fc-f">￥</span>
					<span class="fw-600 fs-44 fc-f">19.26</span>
				</view>
				<view class="shop-buttom-money-2 text-align-center fs-32 fc-f fw-600">去结算</view>
			</view>
		</view>
		
		
		
		<uni-popup ref="popupBuy" type="bottom" style="z-index: 200;">
			<view class="buy-card flex-index-css">
				<view class="buy-card-top box-border-box plr-32 flex-justify-space align-items-center">
					<view class="">
						<span class="fs-32 fc-3 mr-12">已选商品</span>
						<span class="fs-32 fc-9">(打包费<span class="fs-32 fc-FB3D03">8元</span>)</span>
					</view>
					<view class="fs-28 fw-400 fc-9 align-items-center">
						<view class="">
							<uni-icons type="trash" size="18" color="#999"></uni-icons>
						</view>
						<view class="fs-28 fw-400 fc-9">清空</view>
					</view>
				</view>
				<view class="scroll-view-css box-border-box p-32">
					<view class="buy-card-item display-flex" v-for="(item,i) in 5" :key="i">
						<image src="@/static/img/my/bg.png" mode="scaleToFill"></image>
						<view class="flex-1">
							<view class="w-514 text-overflow-ellipsis-one fs-34 fw-600 mb-12">[畅销款]奥尔1良烤肉牛油拌饭拌饭[畅销款]奥尔1良烤肉牛油拌饭拌饭</view>
							<view class="w-514 text-overflow-ellipsis-one fs-24 fw-400 fc-9 mb-18">不辣，加辣</view>
							
							<view class="flex-justify-space">
								<view class="">
									<span class="fs-24 fc-FB3D03 fw-400">￥</span>
									<span class="fs-40 fc-FB3D03 fw-b">3.99</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="shop-buttom-money box-border-box" @click="createOrder()">
					<view class="shop-buttom-money-1 flex-justify-space align-items-center">
						<image src="@/static/img/takeout/buy-icon.png" mode="scaleToFill"></image>
						<view class="shop-buttom-num fs-24 fc-f text-align-center">3</view>
						<view class="">
							<view class="">
								<span class="fw-600 fs-24 fc-f">￥</span>
								<span class="fw-600 fs-44 fc-f">19.26</span>
							</view>
						</view>
						<!-- <view class="fs-32 fw-600 fc-f mr-30">20元起送</view> -->
						<view class="shop-buttom-money-2 text-align-center fs-32 fc-f fw-600">去结算</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import tools from "@/service/tools";
	export default {
		data(){
			return{
				addressData:{
					id:'',
					name:'',
				},
			}
		},
		onLoad(e) {
			if(e.id){
				this.addressData.id = Number(e.id);
			}
		},
		methods:{
			toBack(){
				tools.leftClick()
			},
			selectFun(){
				uni.navigateTo({
					url:'pages-takeout/replace-mod/select-site?id=' + this.addressData.id
				})
			},
			openBuyCrad(){
				this.$refs.popupBuy.open()
			},
			createOrder(){
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.replace-take-box{
		.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;
		}
		.w-514{
			width: 514rpx;
		}
		.buy-card{
			z-index: 200;
			height: 828rpx;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			.buy-card-top{
				width: 100%;
				height: 92rpx;
				background: #FCF5DB;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
			}
			.buy-card-item{
				width: 100%;
				height: 176rpx;
				margin-bottom: 32rpx;
				image{
					width: 152rpx;
					height: 152rpx;
					border-radius: 12rpx;
					margin-right: 20rpx;
				}
			}
		}
		
		.h-120{
			height: 120rpx;
		}
		.h-60{
			height: 60rpx;
		}
		.w-474{
			width: 474rpx;
		}
		.w-390{
			width: 390rpx;
			margin-left: 38rpx;
		}
		.nav-box{
			height: 490rpx;
			position: relative;
			.bg-img{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 490rpx;
				// z-index: -1;
			}
			.bottom-124{
				bottom: -124rpx !important;
			}
			.address-box{
				z-index: 100;
				position: absolute;
				bottom: -64rpx;
				left: 24rpx;
				box-sizing: border-box;
				width: 702rpx;
				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;
				border-image: linear-gradient(167deg, rgba(255, 255, 255, 1), rgba(208, 236, 255, 0.61)) 2 2;
				.address-1{
					width: 100%;
					.qu-image{
						width: 40rpx;
						height: 49rpx;
						margin: 10rpx 10rpx 0 0;
					}
					
				}
				.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;
				}
			}
		}
		
		.shop-buttom-money{
			width: 100%;
			height: 140rpx;
			background: rgba(255,255,255,0.8);
			padding: 20rpx 24rpx;
			.shop-buttom-money-1{
				width: 100%;
				height: 100%;
				background: #333333;
				border-radius: 200rpx;
				box-sizing: border-box;
				padding-left: 136rpx;
				// padding-right: 32rpx;
				position: relative;
				image{
					position: absolute;
					bottom: 0;
					left: 8rpx;
					width: 128rpx;
					height: 128rpx;
				}
				.shop-buttom-num{
					width: 32rpx;
					height: 32rpx;
					line-height: 32rpx;
					background: #FB3D03;
					border-radius: 50%;
					position: absolute;
					top: 36rpx;
					left: 82rpx;
				}
				.shop-buttom-money-2{
					width: 200rpx;
					height: 100rpx;
					line-height: 100rpx;
					background: #41ABF5;
					border-radius: 0rpx 200rpx 200rpx 0rpx;
				}
			}
		}
		
		.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;
				}
			}
			
			.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;
			}
		}
		
	}
</style>