jpcj-xcx/pages/user/order.vue

<template>
	<view>
		<van-tabs :active="active" @change="onChange" animated>
			<van-tab title="近7日订单">
				<view class="order-item" v-for="(item,index) in orderList" :key='item' @click="goPage('/pages/cinema/orderdes')">
					<image class="img" :src="item.goodsPictureUrl"
					 mode="widthFix"></image>
					 <view class="des-box">
					 	<text>订单名称：{{item.orderDataJson.cinemaData.filmName}}</text>
					 	<text>订单日期：{{item.createTime}}</text>
					 	<text> </text>
					 	<text>订单价格：{{item.total/100}}</text>
					 </view>
					 <van-icon class='icon' name="arrow" />
				</view>
			</van-tab>
			<van-tab title="历史订单">
				<view class="order-item" v-for="(item,index) in 3" :key='item' @click="goPage('/pages/cinema/orderdes')">
					<image class="img" src="https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/%E7%94%B5%E5%BD%B1%E5%9B%BE.png"
					 mode="widthFix"></image>
					 <view class="des-box">
					 	<text>订单名称：指环王</text>
					 	<text>订单日期：2021年02月20日</text>
					 	<text>订单数量：2</text>
					 	<text>订单价格：79.9</text>
					 </view>
					 <van-icon class='icon' name="arrow" />
				</view>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import { getOrderList } from '@/api/order.js'
	export default {
		data: () => ({
			active: 0,
			orderList:{}
		}),
		mounted() {
			this.init()
		},
		methods:{
			async init(){
				let orderListRes =await getOrderList()
				console.log(orderListRes)
				orderListRes.rows.map(val=>{
					val.orderDataJson=JSON.parse(val.orderDataJson)
					return val
				})
				this.orderList=orderListRes.rows
			}
		}
	}
</script>

<style lang="scss">
	.order-item {
		background-color: #FFFFFF;
		margin-top: 10rpx;
		padding: 30rpx;
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
		position: relative;
		&:nth-child(1){
			margin-top: 20rpx;
		}
		
		.img {
			width: 112rpx;
			height: 156rpx;
			margin-right: 50rpx;
		}
		.des-box{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			text{
				font-size: 26rpx;
				font-weight: 400;
				color: #666666;
			}
			text:nth-child(2){
				color: #0F0404 !important;
			}
		}
		.icon{
			position: absolute;
			right: 30rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
</style>