shop-app/pages/order/list.vue

<!--
 * @Author: ch
 * @Date: 2022-03-22 10:58:24
 * @LastEditors: ch
 * @LastEditTime: 2022-04-09 15:03:53
 * @Description: file content
-->
<template>
	<view>
		<view class="tabs">
			<text :class="item.key === currentTabKey && 'tabs__active'" 
				v-for="item in tabListData" :key="item.key" @click="changeTab(item.key)">
				{{item.name}}</text>
		</view>
		<BsEmpty v-if="!orderListData.length && loadingStatus === 'nomore'" tips="暂无订单记录呢~" :icon="require('@/static/order/empty.png')">
			<ui-button slot="btn" type="line" @click="$Router('/')">去逛逛</ui-button>
		</BsEmpty>

		<view class="orders" v-for="item in orderListData" :key="item.orderId">
			<view class="orders--title">
				<text class="orders--name">官方自营</text>
				<text class="orders--status" :class="[1,3].includes(item.orderStatus) && 'orders--status__warn'">{{item.orderStatusDesc}}</text>
			</view>
			<view class="orders--item" v-for="i in item.products" :key="i.productId" @click="$Router.push(`/orderDetail?id=${item.orderId}`)">
				<image class="orders--item-image" mode="widthFix" :src="i.productImageUrl" />
				<view >
					<view class="orders--item-con">
						<text class="orders--item-title">{{i.productName}}</text>
						<text class="orders--item-pirce">￥{{i.realAmount}}</text>
					</view>
					<view class="orders--item-desc">
						<text>{{i.skuDescribe}}</text>
						<text class="orders--item-num">x{{i.quantity}}</text>
					</view>
				</view>
			</view>
			<view class="orders--total">
				<text>合计</text>
				<text class="orders--total__amount">￥{{item.totalAmount}}</text>
				<text class="orders--total__pay">应付</text>
				<text class="orders--total__amount orders--total__pay">￥{{item.payAmount}}</text>
			</view>
			<view class="orders--footer">
				<button class="orders--footer-btn orders--footer-btn__red" v-if="item.orderStatus === 1">去支付</button>
				<button class="orders--footer-btn" v-if="item.orderStatus === 2">查看详情</button>
				<button class="orders--footer-btn" v-if="[3,4,7].includes(item.orderStatus)">查看物流</button>
				<button class="orders--footer-btn orders--footer-btn__red"  v-if="item.orderStatus == 4">确认收货</button>
			</view>
		</view>
		<u-loadmore :status="loadingStatus" v-if="orderListData.length" />
	</view>
</template>
<script>
import BsEmpty from '@/components/BsEmpty.vue';
import UiButton from '@/components/UiButton.vue';
import { DictOrderStatus } from '@/common/dicts/order';
import { ApiGetOrderList } from '@/common/api/order';

export default {
	components: { BsEmpty, UiButton },
	data () {
		return {
			tabListData : [
				{key : '-1', name : '全部'},
				{key : '1', name : '待付款'},
				{key : '3', name : '待发货'},
				{key : '4', name : '待收货'},
				{key : '6', name : '待评价'}
			],
			currentTabKey : '-1',
			orderListData : [],
			loadingStatus : 'loading',
			pageIndex : 1,
			pageSize : 10
		}
	},
	onLoad(){
		this.getOrderList()
	},
	onReachBottom(){
		this.next()
	},
	methods: {
		/**
		 * 切换tab 拉取当前分类第一页数据
		 */
		changeTab(key){
			this.currentTabKey = key;
			this.pageIndex = 1;
			this.orderListData = [];
			this.getOrderList();
		},
		async getOrderList(){
			this.loadingStatus = 'loading';
			const {error, result} = await ApiGetOrderList({
				length : this.pageSize,
				pageIndex : this.pageIndex,
				orderStatus : this.currentTabKey > -1 ? this.currentTabKey : null
			});
			if(error){
				uni.$u.toast(error.message);
				return false;
			}
			// 标记是否为最后一页
			if(!result.records.length){
				this.loadingStatus = 'nomore';
			}
			this.orderListData = this.orderListData.concat(result.records);
		},
		/**
		 * 到底拉取下一页数据，并判断是否执行拉取
		 */
		next(){
			if(this.loadingStatus === 'nomore'){
				return false
			}
			this.pageIndex++;
			this.getOrderList();
		}
	}
	
}
</script>
<style lang="scss" scoped>
page{
	background: $color-grey1;
	overflow: hidden;
}
.tabs{
	height: 100rpx;
	background: $color-grey0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40rpx;
	font-size: $font-size-base;
	color: $color-grey5;
	&__active{
		color: $color-yellow3;
		position: relative;
		&::after{
			display: block;
			content: '';
			height: 4rpx;
			background: $color-yellow3;
			border-radius: 4rpx;
			position: absolute;
			bottom: -20rpx;
			left: 45%;
			width: 50%;
			transform: translateX(-50%);
		}
	}
}

.orders{
	background: $color-grey0;
	padding: 30rpx;
	margin: 20rpx 0;
	&--title{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	&--name{
		font-size: $font-size-lg;
		color: $color-grey6;
	}
	&--status{
		font-size: $font-size-sm;
		color: $color-grey4;
		&__warn{
			color: $color-yellow3;
		}
	}
	&--item{
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0 0;
	}

	&--item-image{
		width: 180rpx;
		height: 180rpx;
		margin-right: 30rpx;
	}
	&--item-con{
		width: 510rpx;
		display: flex;
		justify-content: space-between;
		font-size: $font-size-base;
		color: $color-grey6;
		line-height: 39rpx;
	}
	&--item-title{
		overflow:hidden; 
		text-overflow:ellipsis;
		display:-webkit-box; 
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2; 
	}
	&--item-pirce{
		font-size: 22rpx;
		margin-left: 60rpx;
	}
	&--item-desc{
		width: 510rpx;
		font-size: $font-size-sm;
		color: $color-grey4;
		margin-top: 20rpx;
		line-height: 39rpx;
		display: flex;
		justify-content: space-between;
	}
	&--item-num{
		font-size: $font-size-base;
		margin-left: 60rpx;
	}

	&--total{
		font-size: $font-size-sm;
		color: $color-grey4;
		display: flex;
		align-items: center;
		justify-content: end;
		margin-top: 30rpx;
		&__amount{
			font-size: $font-size-base;
			margin-right: 20rpx;
		}
		&__pay{
			color: $color-grey6;
		}
	}
	&--footer{
		display: flex;
		justify-content: end;
		align-items: center;
		margin-top: 30rpx;
		&-btn{
			height: 58rpx;
			line-height: 58rpx;
			border-radius: 30rpx;
			margin: 0 0 0 30rpx;
			border: 1px solid $color-grey6;
			color: $color-grey6;
			background: none;
			font-size: 26rpx;
			&__red{
				background: linear-gradient(270deg, $color-yellow2 0%, $color-yellow1 100%);
				color: $color-grey0;
				border: 0;
				height: 60rpx;
				line-height: 60rpx;
			}
		}
		
	}
}

	
// 空数据按钮

</style>