zh_order_food_xcx/pages-buy/dry-clean.vue

<template>
	<view class="dry-clean-box iPhone-bottom flex-common-css box-border-box">
		<Nav title='干洗'></Nav>
		<view class="head-box box-border-box p-24 flex-justify-space">
			<image src="@/static/img/my/lqzx-bg.png" mode=""></image>
			<view class="flex-1">
				<view class="display-flex mb-16">
					<view class="w410 fs-40 fw-600">干洗店干洗店干洗111干 干洗店干洗店</view>
					<view class="fs-28 fw-400 fc-41ABF5" @click="selectsShop()">【切换门店】</view>
				</view>
				<view class="display-flex">
					<view class="w410 fs-26 fw-400 fc-9">兴科大道252号兴科大道252号兴科大道252号</view>
					<view class="text-align-center" style="margin-left: auto;">
						<view class="">
							<uni-icons type="location" size="20"></uni-icons>
						</view>
						<view class="fs-26 fc-9">1km</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="box-border-box p-24">
			<view class="sy-box flex-justify-space box-border-box p-16">
				<view class="align-items-center">
					<uni-icons type="help" size="20" color="#666"></uni-icons>
					<view class="fc-6 fs-28 ml-10">使用需知</view>
				</view>
				<image src="@/static/img/toRight.png" mode=""></image>
			</view>
		</view>
		
		
		<view class="common-view-css bgc-f" style="overflow: hidden;">
			<Menu style="height: 100%;"></Menu>
		</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="">
					<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="shop-buttom-money-2 text-align-center fc-f fs-32 fw-600">去结算</view>
			</view>
		</view>
		
		
		
		<uni-popup ref="popupBuy" type="bottom">
			<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-40">[畅销款]奥尔1良烤肉牛油拌饭拌饭[畅销款]奥尔1良烤肉牛油拌饭拌饭</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="shop-buttom-money-2 text-align-center fs-32 fc-f fw-600" @click="toConfirmOrder()">去结算</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Menu from './dry-mod/menu.vue';
	import tools from "@/service/tools";
	export default {
		components:{Menu},
		data(){
			return{
				
			}
		},
		onLoad() {
			
		},
		methods:{
			selectsShop(){
				uni.navigateTo({
					url:'/pages-buy/dry-mod/select-shop'
				})
			},
			openBuyCrad(){
				this.$refs.popupBuy.open()
			},
			createOrder(){
				
			},
		},
	}
</script>

<style scoped lang="scss">
	.dry-clean-box{
		background-color: #fff;
		.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;
		}
		.w410{
			width: 410rpx;
		}
		.head-box{
			background-color: #fff;
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(51,51,51,0.06);
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 8rpx;
				margin-right: 18rpx;
			}
		}
		.sy-box{
			width: 100%;
			height: 60rpx;
			background: #F2F2F2;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			image{
				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;
				}
			}
		}
		.buy-card{
			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;
				}
			}
		}
	}
</style>