shop-app/pages/order/list.vue

<!--
 * @Author: ch
 * @Date: 2022-03-22 10:58:24
 * @LastEditors: ch
 * @LastEditTime: 2022-04-29 23:02:22
 * @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.push('/')">去逛逛</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>
			<UiGoodsInfoMax v-for="item in item.products" :key="item.orderProductId" 
				:data="item" @click="$Router.push(`/orderDetail?id=${item.orderId}`)" />
			<view class="orders--total">
				<text class="orders--total__amount">合计</text>
				<UiMoney class="orders--total__amount" :money="item.totalAmount" float prefix suffix/>
				<text class="orders--total__pay ">应付</text>
				<UiMoney class="orders--total__pay" :money="item.totalAmount" float prefix suffix/>
			</view>

			<view class="orders--footer">
				<UiButton size="min" type="gradual"
					v-if="item.orderStatus === 1" @click="pay(item)">去支付</UiButton>
				<UiButton size="min" v-if="[2,3].includes(item.orderStatus)" 
					@click="$Router.push(`/orderDetail?id=${item.orderId}`)">查看详情</UiButton>
				<UiButton size="min" v-if="item.orderStatus >= 4" 
					@click="$Router.push(`/logisitcsInfo?orderId=${item.orderId}`)">查看物流</UiButton>
				<UiButton size="min" type="gradual" v-if="item.orderStatus === 4" @click="receive(item)">确认收货</UiButton>
				
			</view>
		</view>
		<u-loadmore :status="loadingStatus" v-if="loadingStatus === 'loading'"/>

		<BsPay :show.sync="payShow" :order="payOrder"></BsPay>
	</view>
</template>
<script>
import BsEmpty from '@/components/BsEmpty.vue';
import UiButton from '@/components/UiButton.vue';
import { ApiGetOrderList, ApiPutOrderReceive } from '@/common/api/order';
import BsPay from '../../components/BsPay.vue';
import UiGoodsInfo from '../../components/UiGoodsInfo.vue';
import UiGoodsInfoMax from '../../components/UiGoodsInfoMax.vue';
import UiMoney from '../../components/UiMoney.vue';

export default {
	components: { BsEmpty, UiButton, BsPay, UiGoodsInfo, UiGoodsInfoMax, UiMoney },
	data () {
		return {
			tabListData : [
				{key : '-1', name : '全部'},
				{key : '1', name : '待付款'},
				{key : '3', name : '待发货'},
				{key : '4', name : '待收货'}
				// {key : '6', name : '待评价'}
			],
			currentTabKey : this.$Route.query.tab || '-1',
			orderListData : [],
			loadingStatus : 'loading',
			pageIndex : 1,
			pageSize : 10,

			payShow : false,
			payOrder : null
		}
	},
	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.pageSize){
				this.loadingStatus = 'nomore';
			}
			this.orderListData = this.orderListData.concat(result.records);
		},
		/**
		 * 到底拉取下一页数据，并判断是否执行拉取
		 */
		next(){
			if(this.loadingStatus === 'nomore'){
				return false
			}
			this.pageIndex++;
			this.getOrderList();
		},
		/**
		 * 立即支付
		 */
		pay(item){
			this.payShow = true;
			this.payOrder = item;
		},

		/**
		 * 确认收货
		 */
		async receive(item){
			this.$msb.confirm({
				content : '确认已经收到货了吗？',
				confirm : async ()=>{
					const {error} = await ApiPutOrderReceive({
						orderId : item.orderId
					});
					if(error){
						uni.$toast(error.message);
						return false;
					}
					this.$Router.push('/orderSuccess')
				}
			})
			
		}
	}
	
}
</script>
<style lang="scss">
page {
	background: $color-grey1;
	overflow: hidden;
}
</style>
<style lang="scss" scoped>
.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;
		font-weight: bold;
	}
	&--status{
		font-size: $font-size-sm;
		color: $color-grey4;
		&__warn{
			color: $color-yellow3;
		}
	}

	&--total{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 30rpx;
	}
	&--footer{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 30rpx;
		
	}
}
/deep/{
	.orders--footer{
		.ui-btn{
			margin: 0 0 0 20rpx;
			width: 180rpx;
			padding: 0;
		}
	}
	.orders--total__amount,.orders--total__pay{
		font-size: $font-size-sm;
		text{
			font-size: 36rpx;
			font-weight: bold;
		}
		.ui-money--prefix{
			font-size: $font-size-sm;
		}
		.ui-money--suffix{
			font-size: $font-size-sm;
		}
	}
	.orders--total__amount {
		color: $color-grey4;
		text{
			color: $color-grey4;
		}
		.ui-money--suffix{
			margin-right: 20rpx;
		}
	}
}

</style>