xc-app/pages/mine/boxOrder.vue

<template>
	<view class="order-page">
		<HeaderCom></HeaderCom>
		<scroll-view class="scroll-list-view" scroll-y="true" scroll-with-animation @scrolltolower="scrolltolower">
			<view v-if="list.length === 0" style="padding-top: 200rpx;">
				<empty></empty>
			</view>
			<view class="list" v-for="(item,index) in list" :key="index" @click.stop="goDetail(item)">
				<view class="header">
					<view class="time">{{item.createdAt}}</view>
					<view class="status">{{statusObj[item.status]}}({{sourceObj[item.source]}})</view>
				</view>
				<view class="detail">
					<view class="shop">
						<image :src="item.coverResource.url" mode="aspectFit" class="shop-icon"></image>
					</view>
					<view class="content">
						<view class="info">
							<view class="name">{{item.name}}</view>
							<view class="type">{{priceTypeObj[item.type]}}</view>
						</view>
						<view class="price">¥ {{Number(item.totalAmount)}}</view>
					</view>
				</view>
			</view>
			<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
		</scroll-view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/mine/boxOrder"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import { boxOrderListApi } from '@/API/index.js'
	import HeaderCom from '@/pages/components/header.vue'
	export default{
	mixins: [myMixins],
		data(){
			return{
				priceTypeObj: {
					SINGLE: "一发入魂",
					TRIPLE: "欧气三连",
					PENTA: "霸气五连",
					NINE:'九连抽'
				},
				tabList:[
					{label:"全部",value:''},
					{label:"待发货",value:'WAITING_FOR_SHIPMENT'},
					{label:"待收货",value:'WAITING_FOR_RECEIPT'},
					{label:"已完成",value:'COMPLETED'},
				],
				tabIndex:0,
				list:[],
				type:'',
				page:1,
				statusObj:{
					"WAITING_FOR_PAYMENT":"待付款",
					"WAITING_FOR_SHIPMENT":"待发货",
					"SHIPPED":"已发货",
					"WAITING_FOR_RECEIPT":"待收货",
					"RECEIVED":"已收货",
					"COMPLETED":"已完成",
					"CANCELED":"已取消",
					"REFUNDED":"已退款",
					"RECOVERED":"已回收"
				  },
				  height:'0rpx',
				  total:0,
				  sourceObj:{
				  	NORMAL:'盲盒购买', ROOKIE:'新手盲盒', PREFERENTIAL_DAY:'每日优惠',SPECIAL_PRICE:'薅羊毛',ACTIVITY:'活动盲盒',NINE:'九连抽',PERIOD:'周期盲盒'
				    },
			}
		},
		components:{HeaderCom},
		onLoad(opation){
			this.type = opation.type
			this.tabList.forEach((item,index) => {
				if(item.value === this.type){
					this.tabIndex = index
				}
			})
			this.getOrderList()
		},
		methods:{
			goBack(){
				uni.switchTab({
					url:`/pages/mine/index`
				})
			},
			getOrderList(){
				uni.showLoading()
				boxOrderListApi({page:this.page,size:10}).then(res => {
					uni.hideLoading()
					this.total = res.data.total
					if(this.page > 1){
						this.list = [...this.list,...res.data.content]
					}else{
						this.list = res.data.content
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			tabCk(index){
				this.page = 1
				this.tabIndex = index
				this.getOrderList()
			},
			scrolltolower(){
				if(this.total == this.list.length){
					return
				}
				this.page += 1
				this.getOrderList()
			},
			goDetail(item){
				uni.navigateTo({
					url:`/pages/mine/orderBoxDetail?id=${item.id}`
				})
			},
			againProduct(item){
				uni.navigateTo({
					url:`/pages/shop/detail?id=${item.productId}`
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.order-page{
		padding: 112rpx 32rpx 0 32rpx;
		.scroll-list-view{
			height: calc(100vh - 112rpx);
			.list{
				width: 686rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				margin-bottom: 24rpx;
				padding-bottom: 24rpx;
				.header{
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 80rpx;
					padding: 0 24rpx;
					.time{
						font-size: 24rpx;
						color: #999999;
					}
					.status{
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
					}
				}
				.detail{
					display: flex;
					align-items: center;
					padding: 0 24rpx;
					.shop{
						width: 160rpx;
						height: 160rpx;
						border-radius: 34rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-image: url('@/static/new/shop-bg.png');
						background-size: contain;
						// background-repeat: no-repeat;
						.shop-icon{
							width: 142rpx;
							height: 132rpx;
						}
					}
					.content{
						margin-left: 24rpx;
						.info{
							display: flex;
							align-items: center;
							.name{
								font-weight: 500;
								font-size: 28rpx;
								color: #000000;
							}
							.type{
								display: flex;
								align-items: center;
								
								height: 32rpx;
								border-radius: 4rpx;
								border: 2rpx solid #99CCFF;
								margin-left: 14rpx;
								font-weight: bold;
								font-size: 20rpx;
								color: #0080FF;
								padding: 0 12rpx;
							}
						}
						.price{
							font-weight: bold;
							font-size: 32rpx;
							color: #000000;
							margin-top: 44rpx;
						}
					}
				}
			}
		}
	}
</style>