ylrz_scrm_uniapp/pages_course/studyCenter/orderList.vue

<template>
	<view>
		<scroll-view class="tabs" :scroll-x="true" scroll-with-animation  :scroll-into-view=" 'tab-' + scrollIntoView">
			<view 
			:id="'tab-' + index" 
			:class="index == active ? 'tabs-item active':'tabs-item'" 
			v-for="(item, index) in tabList" :key="index"
			@tap="handleTab(index)">{{item.name}}</view>
		</scroll-view>
		
		<mescroll-body ref="mescrollRef" style="background-color: #FAFAFA;" @init="mescrollInit"  top="0" bottom="0" :down="downOption" @down="downCallback" :up="upOption"
		 @up="upCallback" @emptyclick="emptyClick">
			 <view class="orderlist" v-for="(item, index) in dataList" :key="index">
				<view class="orderlist-item">
					<view class="orderlist-item-orderno">
						<view class="orderlist-item-num">订单号：{{item.orderCode}}</view>
						<view class="orderlist-item-status" :style="{color: item.status == 2 ? '#E69A22':''}">
							{{getStatus(item.status)}}
						</view>
					</view>
					<view class="orderlist-item-goodbox">
						<image class="orderlist-item-goods" :src="item.imgUrl" mode="aspectFill"></image>
						<view class="orderlist-item-info">
							<text class="textOne orderlist-item-name">{{item.courseName}}</text>
							<text class="textTwo orderlist-item-desc">{{item.videoName}}</text>
							<view class="orderlist-item-buyinfo">
								<text class="people">45708 人已购</text>
								<text>x1</text>
							</view>
						</view>
					</view>
					<view class="orderlist-item-price">
						订单金额：
						<text class="price-unit">￥</text>
						<text class="price-integer">{{item.payPrice||0.00}}</text>
						<!-- <text class="price-decimal">.00</text> -->
					</view>
				</view>
			</view>
	    </mescroll-body> 	
	
	
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import mescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue";
	import { getCourseOrderList} from '@/api/course' 
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				tabList: [
					{name: '全部'},
					{name: '待付款'},
					{name: '已付款'},
					{name: '退款中'},
				    {name: '已退款'}
				],
				active: 0,
				scrollIntoView: 0,
				status: 1,
				downOption: {   //下拉刷新
				    use:true,
				 	auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				totalNum:0,
				upOption: {   //上拉加载
				 	auto: false, // 不自动加载
				 	page: {
				 		num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				 		size: 10 // 每页数据的数量
				 	},
				 	noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 暂无数据 ~', // 提示
						btnText: '刷新重试',
						icon:"/static/images/icon_img_empty.png"
					}
				},
				dataList:[],
			}
		},
		onLoad(options) {
			this.active=options.status;
			this.status=options.status;
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				this.refreshPage();
			},
			/*上拉加载的回调*/
			upCallback(page) { 
				/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
				let params={};
				if(this.status>0){
				    params["status"]=this.status;
				}
				getCourseOrderList(params,page.num).then(res => {
						if(res.code==200){
							setTimeout(()=>{
								this.mescroll.endByPage(res.data.list.length, res.data.pages);
								if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
								this.dataList=this.dataList.concat(res.data.list); //追加新数据
								this.totalNum=res.data.total;
							},300);
						}else{
							this.mescroll.endByPage(0, 1); 
						}
					},
					rej => {}
				).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
				
			},
			refreshPage(){  
			    this.mescroll.hideTopBtn();
			    this.mescroll.resetUpScroll(true);
			},
			getStatus(status){
				let statusStr="";
				if(status==1){
					statusStr="待付款";
				}else if(status==2){
					statusStr="已付款";
				}
				else if(status==3){
					statusStr="退款中";
				}
				else{
					statusStr="已退款";
				}
				return statusStr;
			},
			handleTab(index) {
				if(this.active == index) return
				this.active = index;
				this.status=index;
				this.scrollIntoView = index
				this.refreshPage();
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.tabs {
		height: 100rpx;
		background: #FFFFFF;
		border-bottom: 1rpx solid #ECECEC;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #757575;
		white-space: nowrap;
		width: 100%;
		.tabs-item {
			display: inline-block;
			min-width: 64rpx;
			width: 20%;
			line-height: 100rpx;
			position: relative;
			text-align: center;
		}
		.active {
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
			&::after {
				content: "";
				width: 48rpx;
				height: 6rpx;
				background: #FF5C03;
				border-radius: 3rpx 3rpx 3rpx 3rpx;
				position: absolute;
				bottom: 2rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
	.orderlist {
		padding: 20rpx 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		&-item {
			padding: 30rpx 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			&-orderno {
				@include u-flex(row, center, space-between);
			}
			&-goodbox {
				margin-top: 26rpx;
				@include u-flex(row, flex-start, flex-start);
				flex: 1;
			}
			&-goods {
				flex-shrink: 0;
				width: 180rpx;
				height: 180rpx;
				margin-right: 26rpx;
			}
			&-info {
				flex: 1;
				overflow: hidden;
				display: flex;
				flex-direction: column
			}
			&-name {
				
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
			}
			&-desc {
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin-top: 8rpx;
				
			}
			&-buyinfo {
				margin-top: 18rpx;
				@include u-flex(row, center, space-between);
				.people {
					font-weight: 400;
					font-size: 22rpx;
					color: #E69A22;
				}
			}
			&-price {
				font-weight: 400;
				font-size: 24rpx;
				color: #757575;
				padding: 30rpx 0 4rpx 0;
			}
			.price-unit {
				font-family: Roboto, Roboto;
				font-weight: 600;
				font-size: 20rpx;
				color: #FF5C03;
			}
			.price-integer {
				font-family: Roboto, Roboto;
				font-weight: bold;
				font-size: 36rpx;
				color: #FF5C03;
			}
			.price-decimal {
				font-family: Roboto, Roboto;
				font-weight: bold;
				font-size: 26rpx;
				color: #FF5C03;
			}
		}
	}
</style>