huazhiyu/pages/fenxiao/fansOrder.vue

<template>
	<view class="page">
		
		<view class="totalContent">
			<view class="totalitem">
				<view class="price">
					<text>￥</text>
					<text class="num">{{info.total_fans_order_amount}}</text>
				</view>
				<view class="descText">
					订单总金额
				</view>
			</view>
			<view class="totalitem" style="border-left:1px solid #fff;">
				<view class="price">
					
					<text class="num">{{info.today_fans_order_num}}</text>
				</view>
				<view class="descText">
					订单数
				</view>
			</view>
		</view>
		<!--  -->
		<view class="order-list">
			<view class="list" v-for="(item,index) in tableData" :key="index">
				<view class="title-status">
					<view class="title">
						<text>订单号：{{item.order_sn}}</text>
					</view>
					<view class="status">
						<text>{{item.status==0?'付款确认':item.status==1?'收款确认':item.status==3?'投诉':''}}</text>
					</view>
				</view>
				<view class="goods-list">
					<view class="goods">
						<view class="thumb">
							<image :src="item.order_goods[0]?item.order_goods[0].goods_image:''" mode="aspectFit"></image>
						</view>
						<view class="item">
							<view class="goods-name">
								<text class="two-omit">{{item.order_goods[0]?item.order_goods[0].goods_name:''}}</text>
							</view>
							<view class="priceBox">
								<view class="goods-price">
									<text class="min">￥{{item.order_goods[0]?item.order_goods[0].goods_price:''}}</text>
								</view>
								<view class="yongjin">
									佣金：￥{{item.commission_amount}}
								</view>
							</view>
							
						</view>
					</view>
				</view>
				<view class="status-btn">
					<view class="btn">
						<text>归属人：{{item.seller.nickname}}</text>
					</view>
					<view class="btn">
						<text>购买人：{{item.buyer.nickname}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="empty" v-show="tableData.length==0">
			<image src="../../static/image/mescroll-empty.png" mode="widthFix"></image>
			<view class="emptyText">
				暂无数据
			</view>
		</view>
		
	</view>
</template>

<script>
	import {getUserFansOrderStatistic,getUserFansOrderList} from '@/common/api.js'
	export default {
		data() {
			return {
				info:{
					today_fans_order_num:0,
					total_fans_order_amount:0
				},
				page:1,
				limit:10,
				tableData:[],
				total:0,
			};
		},
		methods:{
			getInfo(){
				getUserFansOrderStatistic().then(res=>{
					this.info = Object.assign({},this.info,res.data)
					
				})
			},
			getList(val){
				let params={
					page:this.page,
					limit:this.limit,
				}
				getUserFansOrderList(params).then(res=>{
					
					if(val){
						this.tableData.push(...res.data.data)
					}else{
						this.tableData = res.data.data;
						this.total = res.data.total
					}
				})
			},
		
		},
		onReachBottom() {
			if(this.tableData.length<this.total){
				this.page++;
				this.getList('over')
			}
			
		},
		mounted(){
			this.getInfo()
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
.page{
	padding-bottom:30rpx;
}
.totalContent{
	
	height: 160rpx;
	background: url('../../static/image/total-bg.png');
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 6px;
	overflow: hidden;
	position: relative;
	// width:94%;
	// margin:20rpx auto 0 auto;
	display: flex;
	padding:40rpx 0;
	margin:20rpx 24rpx;
	.totalitem{
		flex:1;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.price{
			display: flex;
			align-items: center;
			justify-content: center;
			text{
				font-size: 30rpx;
				color:#fff;
			}
			.num{
				font-size: 48rpx;
			}
		}
		.descText{
			text-align: center;
			font-size: 28rpx;
			color:#fff;
		}
	}
}
.empty{
	text-align: center;
	image{
		width:50%;
		height:auto
	}
	.emptyText{
		text-align: center;
		margin-top:20rpx;
		color:#aaa;
	}
}
/* 订单列表 */
.order-list{
	margin: 10px 12px;
	.list{
		padding: 0 24rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.title-status{
			display: flex;
			align-items: center;
			justify-content: space-between;
		    padding:20rpx 0;
			.title{
				display: flex;
				align-items: center;
				// padding:10rpx 0;
				text{
					font-size: 26rpx;
					color: gray;
				}
			}
			.status{
				display: flex;
				align-items: center;
				text{
					font-size: 26rpx;
					color: $base;
				}
			}
		}
		.goods-list{
			.goods{
				display: flex;
				align-items: center;
				width: 100%;
				height: 170rpx;
				.thumb{
					display: flex;
					align-items: center;
					width: 30%;
					height: 100%;
					image{
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
					}
				}
				.item{
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					padding: 10rpx 0;
					height: 100%;
					margin-left:20rpx;
					width: 100%;
					.goods-name{
						text{
							font-size: 26rpx;
							color: #9f751f;
						}
					}
					.priceBox{
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					.goods-price{
						display: flex;
						align-items: center;
						justify-content: space-between;
						text{
							color: #222222;
						}
						.min{
							font-size: 26rpx;
						}
						
					}
					.yongjin{
						color:$base
					}
				}
			}
		}
		.status-btn{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			// height: 80rpx;
			border-top:1px solid #eaeaea;
			.btn{
				padding: 15rpx 0rpx;
				text{
					font-size: 26rpx;
					color: gray;
				}
			}
			
		}
	}
}
</style>