liveShop/pages/shop/earnings.vue

<template>
	<view class="center">
		<view class="top">
			<image class="bg" src="https://zhibo.liuniu946.com/img/earnings_bg.png" mode="scaleToFill"></image>
			<view class="shop-class">{{store_level == 1 ? '免费网店' : store_level == 2 ? '创业网店' : store_level == 3 ? '创业播主网店' : '播主店铺'}}</view>
			<view class="price">￥<text>{{ store_earnings || 0}}</text></view>
			<view class="text" @click="navto()">{{ store_name}} ></view>
		</view>
		<scroll-view scroll-y="true" >
			<!-- <empty v-if="List.length === 0"></empty> -->
			<template>
			<view class="item flex" v-for="(item,index) in List" :key="index">
				<view class="user flex">
					<view class="user_name flex">
						<view class="img"><image :src="item.avatar" mode="aspectFill"></image></view>
						<view class="name">{{ item.nickname }}</view>
					</view>
					<view class="type-item">
						{{ item.status_name }}
					</view>
				</view>
				<view class="order flex">
					<view class="order-left">
						<view class="order-bg"><image :src="item._info[0].cart_info.productInfo.image" mode="aspectFill"></image></view>
						<view class="order-text">
							<view class="order-name">{{ item._info[0].cart_info.productInfo.store_name }}</view>
							<view class="order-id">订单编号：{{ item.order_id}}</view>
							<view class="order-pifaPrice">原价：￥{{ item._info[0].cart_info.productInfo.ot_price}}</view>
						</view>
					</view>
					<view class="order-right">
						<view class="order-price">￥{{ item._info[0].cart_info.productInfo.price }}</view>
						<view class="number">x{{ item.total_num }}</view>
						<view class="order-relPrice">实付￥{{ item.pay_price }}</view>
					</view>
				</view>
				<view class="buttom flex">
					<view class="xiadanTime">下单时间：{{ item.add_time }}</view>
					<view v-if="item.status == 2 || item.status == 3" class="earning">收益:<text class="txt">￥{{ item.bill_info.number || '0'}} </text></view>
					<view v-else class="earning">预计收益:<text class="txt">￥{{ item.bill_info.number || '0'}}</text></view>
				</view>
			</view>
			</template>
		</scroll-view>
	</view>
</template>

<script>
import {  userinfo } from '@/api/user.js';
import { mapState, mapMutations } from 'vuex';
import { getStoreInfo } from '@/api/anchor.js';
import { getEarnings } from '@/api/order.js';
import empty from '@/components/empty';
export default {
	components: {
		empty,
	},
	data() {
		return {
			store_level: '',
			store_earnings: '',
			store_name: '',
			page: 1,
			limit: 10,
			loadingType: 'More',
			List: []
		}
	},
	computed: {
		...mapState(['userInfo']),
		//计算总收益
		addPrice() {
			
		}
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		async loadData(type = 'add',loading) {
			let obj = this;
			let data = {
				page: obj.page,
				limit: obj.limit,
			};
			if (type === 'add') {
				if (obj.loadingType === 'nomore') {
					return;
				}
				obj.loadingType = 'loading';
			} else {
				obj.loadingType = 'more';
			}
			if (type === 'refresh') {
				// 清空数组
				obj.page = 1;
			}
			getEarnings(data)
				.then(({ data }) => {
					console.log('-----',data.data);
					data.data.forEach((sj,index) => {
						obj.List.push(sj);
					})
					
					if (obj.limit == data.length) {
						obj.page++;
						obj.loadingType = 'more';
					} else {
						obj.loadingType = 'nomore';
					}
					if (type === 'refresh') {
						if (loading == 1) {
							uni.hideLoading();
						} else {
							uni.stopPullDownRefresh();
						}
					}
				})
				.catch(err => {
					console.log(err);
				});
				userinfo({}).then(({ data }) => {
					obj.store_level = data.store_info.type;
					obj.store_earnings = data.store_info.brokerage_price;
					obj.store_id = data.store_info.id;
					getStoreInfo({},this.store_id).then(({ data }) =>{
						obj.store_name = data.name
					})
				}).catch((e) => {
					console.log(e);
				});
		},
		navto(){
			uni.switchTab({
				url: '/pages/shop/shop'
			})
		}
	}
}
</script>

<style lang="scss">
page {
	height: 100%;
	background: #F1F1F1;
	margin: 0;
}
.top {
	height: 300rpx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	.bg {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
	.shop-class {
		position: absolute;
		right: 0;
		top: 34rpx;
		width: 173rpx;
		height: 48rpx;
		background: #FFDAD2;
		border-radius: 23rpx 0rpx 0rpx 23rpx;
		font-size: 24rpx;
		line-height: 48rpx;
		text-align: center;
		font-family: PingFang SC;
		color: #FF0000;
		z-index: 1;
	}
	.price{
		z-index: 1;
		width: 100%;
		text-align: center;
		margin-top: 100rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		font-size: 47rpx;
		text {
			font-size: 72rpx;
			
		}
	}
	.text{
		z-index: 1;
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFEFF;
	}
}

.item {
	flex-direction: column;
	background: #FFFFFF;
	height: 336rpx;
	width: 95%;
	border-radius: 10rpx;
	margin: 0 auto;
	margin-top: 15rpx;
	margin-bottom: 15rpx;

	.user {
		width: 100%;
		justify-content: space-between;
		padding: 20rpx 30rpx 0rpx 27rpx;
		.user_name{
			width: 100%;
			.img {
				width: 64rpx;
				height: 64rpx;
				background: #ffaa7f;
				border-radius: 50%;
				flex-shrink: 0;
				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
				}
			}
			.name{
				margin-left: 15rpx;
				width: 100%;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}
		.type-item {
			text-align: right;
			width: 20%;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}
	.order {
		width: 100%;
		justify-content: space-between;
		padding: 0 31rpx 0rpx 27rpx;
		.order-left {
			width: 100%;
			display: flex;
			.order-bg {
				width: 134rpx;
				height: 150rpx;
				image {
					width: 134rpx;
					height: 150rpx;
				}
			}
			.order-text{
				padding-left: 18rpx;
				.order-name {
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					width:340rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
				.order-id {
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					width:340rpx;
					// width: 100%;
					margin-top: 19rpx;
					font-size: 1rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
				.order-pifaPrice {
					margin-top: 24rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}
		.order-right {
			width: 30%;
			text-align: right;
			.order-prive {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #282828;
			}
			.number {
				color: #99A1AA;
			}
			.order-relPrice {
				margin-top: 40rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FF9090;
			}
		}
	}
	.buttom {
		width: 100%;
		justify-content: space-between;
		padding: 0 32rpx 26rpx 25rpx;
		.xiadanTime {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		.earning {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			.txt {
				color: #FF0000;
			}
		}
	}
}
</style>