detection-user/pages/rescue/historylist.vue

<!-- 历史订单列表-->

<template>
	<view class="content">
		<view class="top-icon" >
			<view class="h-text" @click="getback()">返回</view>
			<view class="s-input">
				<uni-icons type="search" color=" #999999" size="16"></uni-icons>
				<input type="text" placeholder="搜索我的订单">
			</view>
			<view class="h-text">搜索</view>
		</view>
		<view class="top-tap">
			<view class="tap-box" :class="{'cc' : gindex == index }" v-for="(item,index) in arrtap" :key="index" @click="getindex(index)">
				<view style="margin-bottom: 4px;">{{item.text}}</view>
				<view class="gang" v-if="index == gindex"></view>
			</view>
		</view>
		<view class="dil">
			<view class="ques" v-if="arrbox== '' ">
				<image src="http://www.nuoyunr.com/lananRsc/quesheng.png" mode=""></image>
			</view>
			
			<view class="d-box" v-for="(item,index) in arrbox " :key="index">
				<view class="d-y-top">搭电</view>
				<view class="t-right">
					<view class="bq" v-if="item.id == 1">
						<text>待支付</text>
					</view>
					<view class="bq2" v-if="item.id == 2">
						<text>待评价</text>
					</view>
				</view>
				<view class="d-left">
					<text>目的地</text>
				</view>
				<view class="t-left">
					<text>订单编号：121212</text>
				</view>
				<view class="x-left">
					<view class="">下单时间：2023-07-15</view>
					<view class="hong">￥65</view>
				</view>
			</view>
			
			
		<view style="width: 100%; height: 60px;"></view>
		</view>
		
		<tabBar></tabBar>
	</view>
</template>

<script>
	import tabBar from'../../components/tabBar/tabBar.vue'
	import request from '../../utils/request';
	export default{
		data(){
			return{
				gindex:0,
				arrtap:[
					{text:'全部'},
					{text:'救援中'},
					{text:'待支付'},
					{text:'待取车'},
					{text:'待评价'},
				],
				arrbox:[
				// {text:'待支付',id:1},
				// {text:'待评价',id:2},
			
				]
			}
		},
		components:{
			tabBar,
		},
		methods:{
			getback(){
			uni.navigateBack({
					delta:1,
				})	
			},
			getindex(index){
				this.gindex = index
			}
		}
		
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		height: calc(100vh);
	background-color: #F6F6F6;
		box-sizing: border-box;
		padding-top: 45px;
	}
	.top-icon{
		box-sizing: border-box;
		width: 100%;
		
		padding: 5px 14px;
		background: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
	
	}
	.dil{
		background-color: #F6F6F6;
		box-sizing: border-box;
		padding: 15px 12px; 
	}
	.h-text{
		font-size: 14px;
		font-weight: 400;
		color: #999999;
	}
	.s-input{
		width: 78%;
		height: 30px;
		background: #F3F3F3;
		border-radius: 50px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 0px 10px;
		input{
			margin-left: 5px;
			width: 80%;
			font-size: 14px;
			color: #999999;
		}
	}
	.top-tap{
		width: 100%;
		background: white;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-top: 5px;
	}
	.tap-box{
		width: 20%;
		font-size: 15px;
		font-weight: 400;
		color: #666666;
		text-align: center;
	}
	.gang{
		width: 80%;
		height: 5px;
		margin: 0 auto;
		border-radius: 12px;
		background: linear-gradient(87deg, #B6E1FF 0%, #339DFF 100%);
	}
	.d-box{
		width: 100%;
		// height: 100px;
		background: white;
		border-radius: 10px;
		margin-bottom: 15px;
		box-sizing: border-box;
		padding: 8px;
		position: relative;
		overflow: hidden;
	}
	.d-y-top{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 40px;
		height: 20px;
		border-radius: 0px 0px 6px 0px;
		background-color: #339DFF;
		color: white;
		font-size: 12px;
		text-align: center;
	}
	.t-right{
		width: 100%;
		display: flex;
		justify-content: flex-end;
		.bq{
			width: 55px;
			height: 20px;
			background: #FFD7D7;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 400;
			color: #FF4C4C;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.bq2{
			width: 55px;
			height: 20px;
			background: #CDE2FF;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 400;
			color: #3289FF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.d-left{
		margin-left: 10px;
		display: flex;
		font-size: 16px;
		font-weight: bold;
		color: #666666;
		margin-bottom: 10px;
	}
	.t-left{
		margin-left: 10px;
		display: flex;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-bottom: 5px;
	}
	.x-left{
			margin-left: 10px;
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
	}
	.cc{
		font-weight: bold;
	}
	.hong{
		font-size: 16px;
		font-weight: 400;
		color: #F85021;
	}
	.ques{
		margin: 0px auto;
		margin-top: 40px;
		width: 80%;
		image{
			width: 100%;
		}
	}
</style>