xingmingyi_applet/pagesA/mall/order.vue

<template>
	<view class="content">
		<u-sticky>
			<view class="navbar dfsb"><u-tabs :list="goodList" :current="tabcur" :activeStyle="{color:'#87C477'}" @click="tabType"></u-tabs></view>
			<view class="navbarTwo dfsb">
				<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.name }}</view>
			</view>
		</u-sticky>
		<!-- 订单列表 -->
		<view class="box">
			<navigator :url="'./orderInfo?id=' + item.id + '&tabcur=' + tabcur" v-for="(item, index) in orderList" :key="index" class="order-item bb">
				<view class="ordtitle dfsb">
					<text class="prosecond flex1">{{ item.status_name }}</text>
				</view>
				<block v-if="tabcur == 0">
					<view v-for="(ite, ind) in item.comments" class="shopshead dfsb">
						<image :src="ite.goods_img" mode=""></image>
						<view class="shopsInfo dffd">
							<view class="oneelli">{{ ite.goods_name }}</view>
							<view class="attr textgrey">{{ ite.sku_val }}</view> 
							<view class="allInfo dfsb prosecond">
								{{ ite.goods_price || 0.0 }}
								<text class="textgrey fontsm">x{{ ite.goods_num }}</text>
							</view> 
						</view>
					</view>
				</block>
				<block v-if="tabcur != 0">
					<view class="shopshead dfsb">
						<image :src="item.goods_img" mode=""></image>
						<view class="shopsInfo dffd">
							<view class="oneelli">{{ item.goods_name }}</view>
							<view class="attr textgrey">{{ item.sku_val }}</view>
							<view class="allInfo dfsb prosecond">
								{{ item.goods_price || 0.0 }}
								<text class="textgrey fontsm">x{{ item.num||item.goods_num }}</text>
							</view>
						</view>
					</view>
				</block>
				<view class="other dfsb">
					<text>总计</text>
					<text>{{ item.goods_total }}</text>
				</view>
				<view class="btns dffs">
					<view v-if="item.status == 1" @tap.stop="sureOrd(item, 0)" class="cancle">取消</view>
					<view v-if="item.status > 1 && item.status < 5 && tabcur == 0" @tap.stop="sureOrd(item, 3)" class="cancle">售后</view>
					<view v-if="item.status == 1" @tap.stop="sureOrd(item, 1)" class="clickbtn">去付款</view>
					<view v-if="item.status == 3" @tap.stop="sureOrd(item, 2)" class="clickbtn">确认收货</view>
					<!-- <view v-if="item.status > 2 && item.status < 5" @tap.stop="sureOrd(item, 4)" class="clickbtn">查看物流</view> -->
				</view>
			</navigator>
			<view class="nodata" v-if="orderList.length < 1"><u-empty icon-size="200" text="还没有订单哦" mode="order"></u-empty></view>
		</view>
	</view>
</template>

<script>
import { mixin } from './mixin.js';
export default {
	mixins: [mixin],
	data() {
		return {
			tabcur: 0,
			tabCurrentIndex: 0, //1 代付款 2 待发货 3 待收货 4 已完成 0全部
			goodList: [{ name: '普通订单' }, { name: '拼团订单' }, { name: '秒杀订单' }],
			navList: [
				{
					state: 5,
					name: '全部'
				},
				{
					state: 1,
					name: '待付款'
				},
				{
					state: 2,
					name: '待发货'
				},
				{
					state: 3,
					name: '待收货'
				},
				{
					state: 4,
					name: '已完成'
				}
			],
			orderList: [
				// {
				// 	id: 1,
				// 	num: 2,
				// 	goods_img: '',
				// 	goods_name: '山东烟台黄元帅苹果 奶油富士 黄金帅香蕉粉面苹果 新鲜水果可刮泥',
				// 	price: 44,
				// 	status: 0
				// },
			],
			selItem: '', // 选中item

			loadType: 'loadmore',
			page: 1,
			limit: 10
		};
	},
	onLoad(opt) {
		this.tabCurrentIndex = Number(opt.state);
		// this.loadData();
	},
	onShow() {
		this.orderList = [];
		this.page = 1;
		this.loadData();
	},

	onPullDownRefresh() {
		this.page = 1;
		this.orderList = [];
		this.loadData();
		setTimeout(res => {
			uni.stopPullDownRefresh();
		}, 1000);
	},

	onReachBottom() {
		if (this.loadType == 'nomore') return;
		this.loadType = 'loadmore';
		this.page = ++this.page;
		this.loadData();
	},

	methods: {
		tabType(e) {
			console.log(e);
			this.tabcur = e.index;
			console.log(this.tabCurrentIndex);
			this.orderList = [];
			this.page = 1;
			this.loadData();
		},
		//获取订单列表
		loadData(source) {
			this.loadType = 'loadmore';
			this.$api
				.request('orders/my_order_lists', {
					type: Number(this.tabcur + 1),
					status: this.tabCurrentIndex || 0,
					page: this.page,
					limit: this.limit
				})
				.then(data => {
					if (data.code == '200') {
						this.orderList = this.orderList.concat(data.data);
						if (data.data.length < this.limit) {
							this.loadType = 'nomore';
							return;
						}
					} else {
						this.$api.toast(data.msg);
					}
				})
				.catch(function(error) {
					console.log(error);
				});
		},

		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
			this.page = 1;
			this.orderList = [];
			this.loadData();
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	// height: 100%;
	// padding-top: 60rpx;
	background-color: #f5f5f5;
	.swiper-box {
		width: 100%;
		min-height: 100vh;
		// min-height: 100rpx;
	}
}
.tab-content {
	.list-scroll-content {
		height: 100%;
	}
	.moredata {
		height: 50rpx;
	}
}

.navbar {
	// position: fixed;
	// width: 100%;
	// top: 0rpx;
	// /* #ifdef H5 */
	// top: 44px;
	// /* #endif */
	// left: 0rpx;
	// display: flex;
	height: 100rpx;
	background-color: #fff;
	// z-index: 10;
}
.navbarTwo {
	padding: 0 30rpx;
	background-color: #fff;
	.current {
		color: $prosecond;
	}
}

.uni-swiper-item {
	height: auto;
}
.list-scroll-content {
	padding: 0 30rpx;
	background: #fff;
}
.box {
	background-color: #fff;
	padding: 30rpx;
}
.order-item {
	display: flex;
	flex-direction: column;
	padding: 30rpx 0;
	.ordtitle {
		image {
			width: 40rpx;
			height: 40rpx;
		}
		text {
			text-align: right;
			// &:nth-of-type(1) {
			// 	font-size: 32rpx;
			// 	font-family: PingFangSC-Semibold, PingFang SC;
			// 	font-weight: 600;
			// 	line-height: 44rpx;
			// 	flex: 1;
			// 	margin: 0 10rpx;
			// }
		}
	}
	.shopshead {
		height: 170rpx;
		margin: 13rpx 0 26rpx;
		image {
			width: 170rpx;
			height: 100%;
			margin-right: 20rpx;
		}

		.shopsInfo {
			width: 502rpx;
			flex: 1;
			height: 100%;
			align-items: flex-start;
			justify-content: space-between;
			.oneelli {
				width: 100%;
				line-height: 40rpx;
			}
			.attr {
				font-size: 26rpx;
			}
			.allInfo {
				width: 100%;
				font-size: 26rpx;
			}
		}
	}
	.btns {
		justify-content: flex-end;
		.clickbtn,
		.cancle {
			width: 156rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			border-radius: 4rpx;
			margin: 0;
			margin-left: 30rpx;
			background: transparent;
			border: 1rpx solid #979797;
			color: #979797;
			text-align: center;
		}
	}
}
.other {
	margin-bottom: 20rpx;
	text,
	input {
		font-size: 28rpx;
	}
	input {
		flex: 1;
		margin-left: 10rpx;
	}
}
.tuiBox {
	margin: 30rpx;
	border: 1rpx solid #f5f5f5;
	height: 60rpx;
	padding: 10rpx;
	line-height: 60rpx;
}
</style>