jpcj-xcx/pages/user/order.vue

<template>
	<view>
		<van-tabs :active="active" @change="onChange" animated sticky>
			<van-tab title="近7日订单">
				<loadSke :loading='orderLoading'>
					<view class="order-item" v-for="(item,index) in orderList" :key='item' @click="goPage(`/pages/cinema/orderdes?outTradeNo=${item.outTradeNo}`)">
						<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>
				</loadSke>
			</van-tab>
			<van-tab title="历史订单">
				<loadSke :loading='orderLoading2'>
					<view class="order-item ios-bottom" v-for="(item,index) in orderList2" :key='item' @click="goPage(`/pages/cinema/orderdes?outTradeNo=${item.outTradeNo}`)">
						<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>
				</loadSke>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import {
		getOrderList
	} from '@/api/order.js'
	import {
		orderQuery
	} from '@/api/cinema.js'
	export default {
		data: () => ({
			active: 0,
			orderLoading: true,
			orderLoading2: true,
			orderList: {},
			orderList2: {}
		}),
		mounted() {
			this.init()
			this.init2()
			orderQuery({
				thirdOrderId: '12021053117040103901269463601171'
			})
		},
		methods: {
			async init() {
				let orderListRes = await getOrderList({
					days: 7,
					pageNum: 1,
					pageSize: 10
				})
				orderListRes.rows.map(val => {
					val.orderDataJson = JSON.parse(val.orderDataJson)
					return val
				})
				this.orderList = orderListRes.rows
				this.orderLoading = false
			},
			async init2() {
				let orderListRes = await getOrderList({
					pageNum: 1,
					pageSize: 10
				})
				orderListRes.rows.map(val => {
					val.orderDataJson = JSON.parse(val.orderDataJson)
					return val
				})
				this.orderList2 = orderListRes.rows
				this.orderLoading2 = false
			}
		}
	}
</script>

<style lang="scss">
	.ios-bottom{
		padding-bottom: calc(10px + env(safe-area-inset-bottom)/2);
	}
	.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>