lunhan/water/water-drinking-uniapp.git

			@@ -1,21 +1,75 @@
			<script setup>
			import{ ref } from 'vue'
			function navTo(){
			uni.navigateTo({
			url:'/pages/preSendWater/index'
			})
			}
			const isComplete = ref(false)
			const isActive = ref({borderBottom:`3px solid #226AC9`})
			function swatch(val){
			if((val == 1 && !isComplete.value) \|\| (val == 2 && isComplete.value)){
			}else if(val == 1){
			isComplete.value = false
			}else if(val == 2){
			isComplete.value = true
			}
			}
			//待配送
			const deliverList = ref([
			{count:'20',num:'132123123',addre1:'测试1',addre2:'测试2',time:'16：00-18：00'},
			{count:'20',num:'132123123',addre1:'测试1',addre2:'测试2',time:'16：00-18：00'},
			{count:'20',num:'132123123',addre1:'测试1',addre2:'测试2',time:'16：00-18：00'},
			])
			//已完成
			const completeList = ref([1,2,3])
			</script>
			<template>
			<view class="container">
			<navbar title = '送水到家'></navbar>
			<view class="content">
			<view class="nav-container">
			<view class="nav">
			<view class="nav-title">
			<view class="title-one" @click="navTo()">立即预约</view>
			<view class="title-text">待配送</view>
			<view class="title-text">已完成</view>
			<view class="title-text" @click="swatch(1)" :style="!isComplete ? isActive : {}">待配送</view>
			<view class="title-text" @click="swatch(2)" :style="isComplete ? isActive : {} ">已完成</view>
			</view>
			<view class="main1"></view>
			</view>
			<view v-if='!isComplete' class="main-deliving">
			<block v-for="(item,index) in deliverList" :key='index'>
			<view class="item">
			<view class="item-top">
			<view class="top-left">
			<text>{{item.count}}</text>
			<text>桶</text>
			</view>
			<text class="top-right">订单编号：{{item.num}}</text>
			</view>
			<view class="item-content">
			<view class="item-one">
			<view class="item-color1">取</view>
			<text>{{item.addre1}}</text>
			</view>
			<view class="line"></view>
			<view class="item-one">
			<view class="item-color2">送</view>
			<text>{{item.addre2}}</text>
			</view>
			<view class="line"></view>
			<view class="item-one">
			<view class="item-color3">达</view>
			<text>预计今天{{item.time}}送达</text>
			</view>
			</view>
			</view>
			</block>
			</view>
			<view v-else class="main-complete">
			<block v-for="(item,index) in completeList" :key='index'>
			<view class="item">

			</view>
			</block>
			</view>
			</view>
			</view>
			@@ -29,7 +83,7 @@
			width: 100%;
			height:calc(100vh - 176rpx);
			background:linear-gradient(to top,#FFFFFF,#E8EFFF);
			.nav-container{
			.nav{
			height: 160rpx;
			width:100%;
			padding: 20rpx 0;
			@@ -63,11 +117,100 @@
			height:88rpx;
			text-align: center;
			line-height:88rpx;
			border-bottom:6rpx solid #226AC9;
			}
			}
			}

			.main-deliving{
			height:calc(100% - 320rpx);
			width:100%;
			padding:32rpx;
			overflow:scroll;
			box-sizing: border-box;
			.item{
			width:100%;
			height:420rpx;
			background-color: #FFF;
			margin-bottom:20rpx;
			border-radius:24rpx;
			.item-top{
			width:100%;
			height:88rpx;
			border-bottom:2rpx solid #DFDFDF;
			display:flex;
			justify-content: space-between;
			align-items: center;
			.top-left{
			margin-left:52rpx;
			font-weight: 300;
			font-size: 28rpx;
			color: #000000;
			text:first-child{
			color: #FF3400;
			}
			}
			.top-right{
			margin-right:22rpx;
			font-weight: 300;
			font-size: 24rpx;
			color: #4D4D4D;
			}
			}
			.item-content{
			width:100%;
			height:330rpx;
			padding:50rpx 46rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.item-one{
			display: flex;
			align-items: center;
			view{
			width:52rpx;
			height:52rpx;
			text-align: center;
			line-height:52rpx;
			border-radius:50%;
			color:#fff;
			font-size:24rpx;
			margin-right:32rpx;
			}
			text{
			font-size:28rpx;
			}
			.item-color1{
			background-color: #189Df5;
			}
			.item-color2{
			background-color: #32CB65;
			}
			.item-color3{
			background-color: #DCDCDC;
			}
			}
			.line{
			height:40rpx;
			width:2rpx;
			background-color: #707070;
			margin-left:25rpx;
			}
			}
			}
			}
			.main-complete{
			height:calc(100% - 320rpx);
			width:100%;
			padding:32rpx;
			overflow:scroll;
			box-sizing: border-box;
			.item{
			width:100%;
			height:420rpx;
			background-color: #FFF;
			margin-bottom:20rpx;
			border-radius:24rpx;
			}
			}
			}
			}
			</style>