meishidaQS/pages/order/Myorderlist.vue

<template>
	<view>
		<customNav :shownav="true" :title="$t('order.wodedingdan')" tinColor="#006AFF" jiantou="0" titledetl=''></customNav>
		<view class="toptalbar">
			<view v-for="(item,index) in tableList">
				<text :class="index==toptableindex?'tableLab tableselect':'tableLab'" :style="" @click="tableselct(item.value,index)">{{item.text}}</text>
			</view>
		</view>
		<view class="">
			<myorderItem style="width: 100%;" :orderObj="dataList"></myorderItem>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableList:[],
				toptableindex:0,
				dataList:[]
			}
		},
		onLoad() {
			this.tableList=[
				{ value: 0, text: this.$t('order.ridingdan') },
				{ value: 1, text: this.$t('order.yuedingdan')},
			];
			this.dataList=[
				{ date:this.$t('order.jintian'), dateds:'' },
				{ date: this.$t('order.zuotian'), dateds:'07-13'},
				{ date:this.$t('order.benyue'), dateds:'07-1'+this.$t('order.zhi')+'07-13' },
				{ date: '6'+this.$t('order.yue'), dateds:''},
			];
			
		},
		methods: {
			tableselct(id,index){
				this.toptableindex=index;
				//this.state = id;
				//this.getorderList(1,id);
			},
		}
	}
</script>

<style>
	
	.toptalbar{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content:flex-start;
		align-items:center;
		background-color:white;
		padding-top: 30rpx;
		height: 70rpx;
		padding-left: 6rpx;
		padding-right: 12rpx;
	}
	.tableLab{
		width: 20%;
		text-align:center;
		margin-left: 50rpx;
		margin-right: 50rpx;
		font-size: 26rpx;
		color: dimgray;
		
	}
	.tableselect{
		border-bottom-width: 6rpx;
		border-bottom-style:solid;
		border-bottom-color:#006AFF;
		color: #006AFF;
		font-size: 32rpx;
	}
</style>