八 order/order-list.vue

<template>
	<view class='order-list'>
		<u-tabs :list="list" :current='current' @click="tabsClick"></u-tabs>
		<view class='main'>
			<view 
				v-for='item in orderList' 
				:key='item.id'
				class='order-item'
				@click='details(item.id)'
			>
				<view class='item-goods'>
					<!-- <u--image :src='item.goodsList[0].brandLogo' lazyLoad></u--image> -->
					<image :src='item.goodsList[0].brandLogo'></image>
					<view>{{ item.goodsList[0].skuTitle }}</view>
					<text class='goods-price'>¥ {{ item.payPrice }}</text>
				</view>
				<view class='item-status'>
					<view>实付：¥{{ item.payPrice }}</view>
					{{ item }}
					<view v-if='item.status == 1 && item.deliveryStatus ==0 && item.isPay ==2'>
						待付款
					</view>
					<view v-if='item.status == 1 && item.deliveryStatus ==0 && item.isPay ==1'>
						待发货
					</view>
					<view v-if='item.status == 1 && item.deliveryStatus ==1 && item.isPay ==1'>
						待收货
					</view>
					<view v-if='item.status == 5'>
						已完成
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { orderPage } from '@/utils/api/order.js'
export default{
	data () {
		return {
			list:[
				{name: '全部'},
				{name: '待付款'}, 
				{name: '待发货'},
				{name: '待收货'}, 
				{name: '已完成'}
			],
			current:0, //当前tabs索引
			params:{   //订单参数
				current:1,
				size:4,
				isPay:'',
				deliveryStatus:'',
				status:''
			},
			orderList:[], //订单数据
			end:false
		}	
	},
	onLoad( e ) {
		if( e.id ){
			let index = parseInt( e.id );
			this.current = index;
			//切换对应tab数据
			this.switchTab( index );
		}
		//请求订单列表
		this.getOrderList();
	},
	//下啦刷新 ==> 主要要在pages.json中打开配置项
	onPullDownRefresh() {
	    console.log( 1 );
	},
	//上啦加载
	onReachBottom(){
		this.params.current++;
		this.getOrderList();
	},
	methods:{
		//获取订单列表
		async getOrderList(){
			let res = await orderPage( this.params );
			this.orderList = [...this.orderList,...res.data.records];
		},
		//切换状态
		switchTab( msg ){
			switch( msg ){
				case 0:
					this.params = {
						current:1,
						size:4,
					}
				break;
				case 1:
					this.params.isPay = '2';
					this.params.deliveryStatus = '0';
					this.params.status = '1'
				break;
				case 2:
					this.params.isPay = '1';
					this.params.deliveryStatus = '0';
					this.params.status = '1'
				break;
				case 3:
					this.params.isPay = '1';
					this.params.deliveryStatus = '1';
					this.params.status = '1'
				break;
				case 4:
					this.params.isPay = '1';
					this.params.deliveryStatus = '2';
					this.params.status = '5'
				break;
			}
		},
		//切换tab
		tabsClick( item ){
			this.orderList = [];
			let { index ,name } = item;
			this.current = index;
			this.switchTab( index );
			this.getOrderList();
		},
		//进去订单详情
		details( id ){
			uni.navigateTo({
				url:`/order/order-details?id=${ id }`
			})
		}
	}
}
</script>

<style>
.order-list{
	background-color:  #F6F7F9;
}
.order-item{
	width: 716px;
	height: 275rpx;
	background: #FFFFFF;
}
.main .order-item + .order-item{
	margin-top:23rpx;
}
.item-goods{
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 716rpx;
}
.item-goods image{
	width: 123rpx;
	height: 123rpx;
	margin-left:24prx;
	background: #FFFFFF;
	border-radius: 7rpx;
	border: 1px solid #707070;
}
.item-goods view{
	flex:1;
	font-size: 27rpx;
	font-family: Microsoft YaHei-Regular, Microsoft YaHei;
	font-weight: 400;
	overflow: hidden;
}
.item-goods .goods-price{
	width: 69rpx;
	margin-right:24rpx;
}
.item-status{
	width: 716rpx;
	display: flex;
	justify-content: space-between;
}
</style>