junzitang/pagesT/Distribution/NotRecorded.vue

<template>
	<view class="NotRecorded">
		<view class="top-money-view">
			<view class="money-num">{{ waitMoney || 0 }}</view>
			<view class="add-up-label">{{ text_set.commission_r || '待入账佣金' }}（元）</view>
		</view>
		<view class="order-list">
			<view v-for="(item, index) in orderList" :key="index" class="order-item" @click="goPage(`/pagesT/Distribution/DorderDetail?id=` + item.id)">
				<view class="clearfix order-no-view">
					<text class="float_left order-no-text">{{ $_utils.formatDate(item.createTime) }}</text>
					<text class="float_right order-status-text">
						{{ text_set.commission || '佣金' }}：
						<text class="rmb-ic">¥</text>
						<text class="price-num">{{ item.retMoney || 0 }}</text>
					</text>
				</view>
				<view class="goods-ul">
					<view class="goods-li clearfix" v-for="(it, gindex) in item.orderGoods" :key="gindex">
						<image class="goods-img float_left" :src="it.goodsImages" mode="aspectFit"></image>
						<view class="float_right goods-right">
							<view class="goods-name">{{ it.goodsName }}</view>
							<view class="goods-descrip">
								规格：
								<text style="padding-right: 6upx;">{{ it.unitName }}</text>
								<block v-for="(ip, indexSp) in it.specGroup" :key="indexSp">
									<text v-if="indexSp > 0">-</text>
									<text>{{ ip.specValueName }}</text>
								</block>
							</view>
							<view class="goods-price clearfix">
								<view class="float_left">
									<text class="price" style="color: fa3534">¥{{ it.price || 0 }}</text>
								</view>
								<view class="float_right">
									<text class="icon-jia">*</text>
									<text class="goods-num">{{ it.buyNum }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore v-if="orderList.length" :status="loading_status" />
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			loading_status: 'loadmore',
			orderList: [],
			text_set: {},
			isLoding: false,
			page: 1,
			pageSize: 10,
			pageTotal: 0,
			waitMoney: 0
		};
	},
	onLoad(options) {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#fb604e'
		});
		this.text_set = this.$store.state.distributionTextSet;
		if (this.text_set.commission_r) {
			uni.setNavigationBarTitle({
				title: this.text_set.commission_r || '待入账佣金'
			});
		}
		this.waitMoney = options.waitMoney || 0;
	},
	onShow() {
		this.getCommissionOrder();
	},
	onReachBottom() {
		if (this.pageTotal / this.pageSize > this.page) {
			this.page += 1;
			this.getOrderSelect();
		}
	},
	methods: {
		// 订单
		 getCommissionOrder() {
			this.loading_status = 'loading';
			this.$u.api.getCommissionOrder({
				page: this.page,
				pageSize: this.pageSize,
				orderStatus: [2, 3, 4]
			}).then(data=>{
				if (this.page === 1) {
					this.orderList = data.data;
				} else {
					this.orderList = this.orderList.concat(data.data);
				}
				this.pageTotal = data.pageTotal;
				this.loading_status =  this.$_utils.loadStatus(this.page, this.pageSize, this.pageTotal);
			});

		}
	}
};
</script>

<style lang="scss">
body {
	background: $page-color-base;
}
.top-money-view {
	background: #fb604e;
	padding: 50upx 0;
	text-align: center;
	.money-num {
		font-size: 64upx;
		color: #ffffff;
		padding-bottom: 20upx;
	}
	.add-up-label {
		color: #ffffff;
		opacity: 0.5;
		font-size: 24upx;
	}
}
.order-item {
	margin: 24upx 0;
	// padding: 0 30upx;
	background-color: #fff;
	border-bottom: 2upx solid #f5f5f5;
	.order-no-view {
		font-size: 24upx;
		padding: 24upx 30upx;
		color: #666;
		font-weight: 300;
		border-bottom: 1upx solid #eee;
		.order-status-text {
			font-weight: 400;
			color: #999;
			.rmb-ic {
				color: #fa3534;
				font-size: 22upx;
			}
			.price-num {
				color: #fa3534;
				font-size: 28upx;
				margin-left: 6upx;
			}
		}
	}
	.goods-li {
		// background: #fafafa;
		border-bottom: 1upx solid #eee;
		padding: 30upx 20upx;
		margin-bottom: 20upx;

		.goods-img {
			width: 180upx;
			height: 180upx;
		}

		.goods-right {
			width: 500upx;
			margin-left: 20upx;

			.goods-name {
				color: #333;
				font-size: 32upx;
				margin-bottom: 19upx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.goods-descrip {
				font-size: 22upx;
				color: #999;
				margin-bottom: 28upx;
				// font-weight: 300;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.goods-price {
				.price {
					color: $price-color;
					font-size: 40upx;
				}

				.sku {
					font-size: 22upx;
					font-weight: 300;
					color: #666;
				}

				.icon-jia {
					color: #666;
					font-size: 24upx;
				}

				.goods-num {
					font-size: 24upx;
				}
			}
		}
	}
	.goods-li:last-child {
		margin-bottom: 0;
		border-bottom: 0 none;
	}
}
</style>