点击订单跳抓到对应页面订单，并展示

之前第一次对接口，一些数据啥的也不怎么怎么处理，就用了最笨最笨的方法进行处理，下午的时候重新处理了一下数据
虽然不是很难，但是还是想重新梳理一下

1、我的页面展示部分（点击每一个item跳转到对应的位置并展示数据）

html部分

	<view class="order-wrapper">
		<view class="item" v-for="(item,index) in order" :key="index" @tap="toOrder(index)">
			<image src="../../static/logo.png" mode=""></image>
			<view class="word">{{item.txt}}</view>
		</view>
	</view>

js部分

	data() {
			return {
				order:[
					{txt:'全部订单'},
					{txt:'待付款'},
					{txt:'待使用'},
					{txt:'已完成'},
					{txt:'退款/ 售后'}
				]
			}
		},
		methods: {
			toOrder(index){
				console.log(index);
				uni.navigateTo({
					url:'../testOrder/testOrder?index=' + index
				})
			}
		}

css部分

.order-wrapper{
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
	}
	.item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 20%;
		align-items: center;
		position: relative;
	}
	
	.right-icon {
		width: 32rpx;
		height: 32rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid rgba(198, 165, 111, 1);
		border-radius: 50%;
		font-size: 20rpx;
		text-align: center;
		line-height: 32rpx;
		font-weight: bold;
		color: rgba(198, 165, 111, 1);
		position: absolute;
		margin-top: -35%;
		margin-left: 15%;
	}
	
	.item image {
		width: 38rpx;
		height: 39rpx;
	}
	
	.word {
		font-size: 12px;
		color: rgba(84, 84, 87, 1);
		margin-top: 30rpx;
	}

2、订单详细页面

html

	<view class="content">
		<view class="tab-content">
			<view class="tab-item" v-for="(item,indexs) in tabList" :key="indexs" @tap="clickTab(indexs)">
				{{item.txt}}
				<view class="line" v-if="isShow == indexs"></view>
			</view>
		</view>
		
		<view class="order-container">
			<view class="order-item" v-for="(item,index) in orderClassList" :key="index">
				<view class="name">
					<view>{{item.goods.shop_name}}</view>
					<view>status</view>
				</view>
				<view class="order-main">
					<image :src="item.goods.goodsphotoone.goods_photo" mode="aspectFill"></image>
					<view class="other-info">
						<view>{{item.goods.tltle_small}}</view>
						<view>{{item.xiadan_time}}</view>
						<view>
							<view>总价：</view>
							<view>￥{{item.nowprice}}</view>
						</view>
						<view>
							<view>验证码：</view>
							<view>{{item.valinum}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

js

		data() {
			return {
				isShow:0,
				tabList:[
					{txt:'全部'},
					{txt:'待付款'},
					{txt:'待使用'},
					{txt:'已完成'},
					{txt:'退款/售后'}
				],
				orderData:[],
				orderClassList:[],
				orderClass:0,
				tabIndex:0
			}
		},
		onLoad(option) {
			console.log(option);
			var tabIndex = option.index
			this.getOrderData()
			this.clickTab(tabIndex)
		},
		methods: {
			//点击上方tab
			clickTab(indexs){
				if(indexs != this.isShow){
					this.isShow = indexs
				}
				//order_class 0全部  1待付款  2待使用  3已完成  4退款中
				if(this.isShow == 0){
					this.orderClass = 0
				} else if (this.isShow == 1){
					this.isShow = 1
				} else if (this.isShow == 2){
					this.isShow = 2
				} else if (this.isShow == 3){
					this.isShow = 3
				} else {
					this.isShow = 4
				}
				console.log(indexs,this.isShow);
				this.http.httpRequest('/my_orders_list','post',{
					uid:40,
					order_class:this.isShow
				}).then((res) => {
					if(res.code == 1){
						console.log(res.data);
						this.orderClassList = res.data.list
						if(res.data.list.length == 0){
							uni.showToast({
								icon:'none',
								title:'暂无数据'
							})
						}
					} else {
						console.log(res);
					}
				})
			},
			//获取订单数据
			getOrderData(){
				this.http.httpRequest('/my_orders_list','post',{uid:40}).then((res) => {
					if(res.code == 1){
						this.orderData = res.data.list
						if(res.data.list.length == 0){
							uni.showToast({
								icon:'none',
								title:'暂无数据'
							})
						}
					} else {
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
				})
			}
		}

css

page{
	background-color: #f0f0f0;
}
.content{
	.tab-content{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 15rpx 0rpx 30rpx 0rpx;
		.tab-item{
			text-align: center;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			.line{
				width: 30rpx;
				height: 5rpx;
				background-color: #2F9BFE;
				position: absolute;
				bottom: 0;
				top: 45rpx;
			}
		}
	}
	
	.order-container{
		margin: 0 25rpx;
		.order-item{
			border-radius:10rpx;
			margin-bottom: 20rpx;
			background-color: #FFFFFF;
			padding: 21rpx 24rpx;
			.name{
				display: flex;
				justify-content: space-between;
				font-weight: bold;
				margin-bottom: 32rpx;
				view:first-child{
					font-size: 32rpx;
					width: 300rpx;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				view:last-child{
					font-size: 26rpx;
					color: #C6A56F;
				}
			}
			.order-main{
				display: flex;
				image{
					width:180rpx;
					height:179rpx;
					border-radius:10rpx
				}
				.other-info{
					margin-left: 30rpx;
					width: 445rpx;
					view:first-child{
						width: 350rpx;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
					view:first-child,view:nth-child(2){
						font-size: 24rpx;
						color: #999999;
						margin-bottom: 8rpx;
					}
					view:nth-child(3){
						display: flex;
						align-items: center;
						margin-bottom: 8rpx;
						view:first-child{
							font-size: 24rpx;
							color: #999999;
						}
						view:last-child{
							color: #C6A56F;
							font-weight: bold;
							font-size: 30rpx;
						}
					}
					view:last-child{
						display: flex;
						align-items: center;
						font-size: 24rpx;
						view:first-child{
							color: #999999;
						}
						view:last-child{
							color: #FF4F4F;
						}
					}
				}
			}
		}
	}
}