lanan-old/detection-business/pages/my/ordermanage.vue

<!-- 订单管理 -->
<template>
	<view class="content">
		<view style="width: 100%; height: 45px;"></view>
		<view class="top-heder">
			<view class="t-left" @click="getfan()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<view class="t-input">
				<uni-icons type="search" color="#BCBCBC" size="22"></uni-icons>
				<input type="text" v-model="goodsTitle" placeholder="搜索商品.....">
			</view>
			<view class="sou" @click="getindex()">搜索</view>
		</view>
		<view class="tap">
			<view class="tap-box" v-for="(item,index) in tapList" :key="index" @click="tapqh(index)">
				<view class="xhuihui" :class="{'xzhei':tapindex == index}">{{item.text}}</view>
				<view class="gang" v-if="tapindex == index"></view>
			</view>
		</view>
		
		<view class="mub">
			<view class="top-ail" >
					<view class="m-box" v-for="(item,index) in 2" :key="index"> 
						
						<view class="m-top">
							<view class="top-left">
								<view class="dhei">审车-7座越野</view>
								<text class="xhui">接待员：284109865096707</text>
							</view>
							<view class="top-right">
								<image src="../../static/detection/teel.png" mode=""></image>
							</view>
						</view>
						<view class="on-input">
							<uni-icons type="person" color="#999999" size="16"></uni-icons>
							<text>客户：</text>
							<text>客户名称</text>
						</view>
						<view class="on-input">
							<uni-icons type="phone" color="#999999" size="16"></uni-icons>
							<text>客户：</text>
							<text>客户电话</text>
						</view>
						<view class="on-input">
							<uni-icons type="map" color="#999999" size="16"></uni-icons>
							<text>车辆信息：</text>
							<text>预约人名称</text>
						</view>
						<view class="on-input">
							<uni-icons type="more" color="#999999" size="16"></uni-icons>
							<text>车牌号：</text>
							<text>预约人名称</text>
						</view>
						<view class="bottom-di">
							
							<text>实付金额：</text>
							<text class="ju">￥299</text>
						</view>
						
					</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import config from '@/config'
	import request from '../../utils/request';
	export default {
		data() {
			return {
				goodsTitle:'',
				tapindex:0,
				tapList:[
					{text:"进行中"},
					
					{text:"已完成"},
					
				]
				}
			},
			methods:{
				tapqh(index){
					this.tapindex = index
				}
			}
	}
</script>

<style  scoped lang="scss">
.content {
		box-sizing: border-box;
		width: 100%;
		height: calc(100vh);
		background: white;
	}
	
	.top-heder{
		width: 100%;
		height: 46px;
		background: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 5px 15px;
	}
	.t-left{
		width: 10%;
	}
	.t-input{
		width: 75%;
		height: 36px;
		background: #F0F0F0;
		border-radius: 50px;
		box-sizing: border-box;
		padding: 0 15px;
		display: flex;
		align-items: center;
		
	}
	.top-ail{
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		background-color: #F4F4F4;
		
	}

	.mub{
		background-color: #F4F4F4;
		height: calc(100vh);
	}
	.tap{
		width: 100%;
		height: 44px;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.tap-box{
		width: 50%;
		
	}
	.xhuihui{
		width: 100%;
		text-align: center;
		font-size: 16px;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #666666;
	}
	.gang{
		width: 24px;
		height: 4px;
		background: #0D2E8D;
		border-radius: 4px ;
		margin: 2px auto;
	}
	.xzhei{
	
		font-weight: bold !important;
		color: #333333 !important;
	}
	.m-box{
	
		background: #FFFFFF;
		border-radius: 8px ;
		box-sizing: border-box;
		padding: 15px 10px;
		margin: 10px auto;
		
	}
	.m-top{
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 15px;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.top-left{
		
	}
	.top-right{
		width: 33px;
		height: 33px;
		border-radius: 50%;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
		}
		
	}
	.dhei{
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 5px;
	}
	.xhui{
		font-size: 15px;
		font-weight: 400;
		color: #999999;
	}
	.on-input{
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 15px;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin-bottom:10px;
		margin-top: 10px;
		// justify-content: space-between;
	}
	.bottom-di{
		padding-top: 10px;
		box-sizing: border-box;
		border-top:1px solid #EEEEEE;
	}
	.ju{
		font-size: 24px;
	
		font-weight: 600;
		color: #FF571A;
	}
</style>