yzf/pages/index/pledge.vue

<template>
	<view class="all">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
		
					<!-- 订单列表 -->
					<view @click="goToOrderDetail(item)" v-for="(item, index) in tabItem.orderList" :key="index" class="order-item">
						<view class="i-top b-b">
							<text class="time">{{ item._add_time }}</text>
							<text class="state" :style="{ color: item.stateTipColor }">{{ item._status._title }}</text>
							<text v-if="item.status === 4" class="del-btn iconfont icondelete" @click="deleteOrder(index)"></text>
						</view>
		
						<scroll-view v-if="item.cartInfo.length > 1" class="goods-box" scroll-x>
							<view v-for="(goodsItem, goodsIndex) in item.cartInfo" :key="goodsIndex" class="goods-item">
								<image class="goods-img" :src="goodsItem.productInfo.image" mode="aspectFill"></image>
							</view>
						</scroll-view>
						<!-- <view v-if="item.cartInfo.length === 1" class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.cartInfo" :key="goodsIndex">
							<image class="goods-img" :src="goodsItem.productInfo.image" mode="aspectFill"></image>
							<view class="right">
								<text class="title clamp">{{ goodsItem.productInfo.store_name }}</text>
								<text class="attr-box">{{ goodsItem.attrInfo ? goodsItem.attrInfo.suk : '' }} x {{ goodsItem.cart_num }}</text>
								<text class="price">{{ moneyNum(goodsItem.productInfo.price)}}</text>
							</view>
						</view> -->
						<view class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.cartInfo" :key="goodsIndex">
							<image class="goods-img" :src="goodsItem.productInfo.image" mode="scaleToFill"></image>
							<view class="right">
								<view class="flex-start">
									<text class="title clamp">{{ goodsItem.productInfo.store_name }}</text>
									<text class="price">{{ goodsItem.productInfo.price|moneyNum }}</text>
								</view>
								<view class="row flex">
									<text class="row_title">{{ goodsItem.productInfo.attrInfo ? goodsItem.productInfo.attrInfo.suk : '' }}</text>
									<text class="attr-box"> x {{ goodsItem.cart_num }}</text>
								</view>
							</view>
						</view>
		
						<view class="price-box">
							共
							<text class="num">{{ item.cartInfo.length }}</text>
							件商品 邮费
							<text class="price">{{ moneyNum(item.pay_postage)}}</text>
							实付款
							<text class="price">{{ moneyNum(item.pay_price)}}</text>
						</view>
						<view class="action-box b-t" v-if="item.status != 5">
							<button v-if="item._status._title == '未支付'" class="action-btn" @click.stop="cancelOrder(item)">取消订单</button>
							<button v-if="item._status._title == '未支付'" @click.stop="orderPay(item)" class="action-btn recom">立即支付</button>
							<button v-if="item._status._title == '待评价'" class="action-btn">评价</button>
							<button v-if="item._status._title == '待收货'" @click.stop="orderTake(item, index)" class="action-btn">确认收货</button>
							<button v-if="item._status._title == '未发货'" class="action-btn" @click.stop="orderRefund(item)">申请退款</button>
						</view>
					</view>
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState('user', ['hasLogin'])
		},
		data() {
			return {
			tabCurrentIndex: 0,
			navList: [
				{
					state: 0,
					text: '待付款',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 1,
					text: '待发货',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 2,
					text: '待收货',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 3,
					text: '待评价',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 4,
					text: '已完成',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				}
			]
		}
		},
		
		onNavigationBarButtonTap(res){
			console.log(res,['res']);
		},
		onLoad() {
			this.loadData()
		},
		onReachBottom() {
			this.loadData()
		},
		methods: {
			nav(url) {
				if (!this.hasLogin) {
					// 保存地址
					saveUrl();
					// 登录拦截
					interceptor();
				} else {
					uni.navigateTo({
						url
					});
				}
			},
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (navItem.loadingType === 'noMore') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				navItem.loadingType = 'loading';
			
				orderList({
					type: state,
					page: navItem.page,
					limit: navItem.limit
				})
					.then(({ data }) => {
						let arr = data.map(e => {
							let b = this.orderStateExp(e.status);
							e.stateTip = b.stateTip;
							e.stateTipColor = b.stateTipColor;
							return e;
						});
						navItem.orderList = navItem.orderList.concat(arr);
						// console.log(navItem.orderList);
						navItem.page++;
						if (navItem.limit == data.length) {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'more';
							return;
						} else {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'noMore';
						}
						uni.hideLoading();
						this.$set(navItem, 'loaded', true);
					})
					.catch(e => {
						console.log(e);
					});
			},
		}
	};
</script>

<style lang="scss">
	.all {
		width: 750rpx;
		height: 100%;
		background-color: #051137;
		padding-top: var(--status-bar-height);
	}
</style>