lanan-old/lanan-master-uniapp/subInspectionPages/orderList/orderList.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== '' ">
				<u-empty mode="list">
				</u-empty>

			</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>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				gindex: 0,
				arrtap: [{
						text: '全部'
					},
					{
						text: '待支付'
					},
					{
						text: '待使用'
					},

					{
						text: '待评价'
					},
				],
				arrbox: [
					// {text:'待支付',id:1},
					// {text:'待评价',id:2},

				]
			}
		},

		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;
		padding-top: 45px;
		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: 25%;
		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>