CommunityApp/pagesM/pages/earn_details.vue

<template>
	<view class="dt-page">
		<view  class="container">
			<view class="goods-info" v-for="item,index in data.orderItems" :key="index">
				<image :src="item.thumbnail?item.thumbnail:''" mode="widthFix"></image>
				<view class="goods-right">
					<view class="goods-name">{{item.name}}</view>
					<view class="goods-spec">
						<text class="text">规格：<text v-for="child in item.specification" style="margin-left: 8upx;">{{child}}</text></text>
					</view>
					<view class="goods-bottom">
						<view>{{`￥${item.price}`}}</view>
						<view>{{`×${item.num}`}}</view>
					</view>
				</view>
			</view>
			<view class="order-info">
				<view class="item">
					<text class="item-title">订单状态</text>
					<text class="item-value">{{data.orderStatusTxt}}</text>
				</view>
				<view class="item">
					<text class="item-title">购买用户</text>
					<text class="item-value">{{data.buyUserName}}</text>
				</view>
				<view class="item">
					<text class="item-title">商品总价</text>
					<text class="item-value">{{data.orderAmt}}</text>
				</view>
				<view class="item">
					<text class="item-title">运费</text>
					<text class="item-value">{{data.orderFreight}}</text>
				</view>
				<view class="item">
					<text class="item-title">实付金额</text>
					<text class="item-value">{{data.orderAmtPaid}}</text>
				</view>
				<view class="item">
					<text class="item-title">佣金</text>
					<text class="item-value">{{data.commission}}</text>
				</view>
				<view class="item">
					<text class="item-title">订单编号</text>
					<text class="item-value">{{data.sn}}</text>
				</view>
				<view class="item">
					<text class="item-title">交易日期</text>
					<text class="item-value">{{data.createdDate}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import DtEmpty from '../comps/dt_empty.vue'
	export default {
		components:{
			DtEmpty
		},
		data() {
			return {
				id:null,
				data:null
			};
		},
		methods:{
			onLoadPage(options) {
			  this.id = options.id || null;
			  this.getData()
			},
			async getData(){
				let resp = await this.$api.getMyDistributionCommissionDetails({
					_isShowLoading: true,
					id:this.id,
				})
				this.data = resp
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dt-page{
		min-height: 100vh;
		.container{
			padding: 21upx;
			.goods-info{
				display: flex;
				padding: 24upx;
				margin-bottom: 21upx;
				background:rgba(255,255,255,1);
				box-shadow:0px 0px 10upx 0px rgba(21,20,80,0.07);
				border-radius:20upx;
				image{
					width:170upx;
					height:170upx;
					background:#f7f7f7;
					border-radius:10upx;
					display: block;
					margin-right: 24upx;
				}
				.goods-right{
					flex:1;
					.goods-name{
						height:60upx;
						line-height: 60upx;
						font-size:36upx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(51,51,51,1);
					}
					.goods-spec{
						.text{
							display: inline-block;
							height:38upx;
							line-height:38upx;
							background:rgba(238,238,238,1);
							border-radius:19upx;
							font-size:24upx;
							color:rgba(153,153,153,1);
							padding: 0 12upx;
						}
					}
					.goods-bottom{
						margin-top: 35upx;
						flex:1;
						display: flex;
						justify-content: space-between;
						view{
							height:19upx;
							font-size:24upx;
							font-family:PingFang SC;
							font-weight:400;
							color:rgba(232,46,46,1);
						}
					}
				}
			}
			.order-info{
				padding: 24upx;
				background:rgba(255,255,255,1);
				box-shadow:0upx 0upx 10upx 0upx rgba(21,20,80,0.07);
				border-radius:20upx;
				.item{
					display: flex;
					justify-content: space-between;
					line-height: 50upx;
					height: 50upx;
					.item-title{
						font-size:24upx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(51,51,51,1);
					}
					.item-value{
						font-size:24upx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(102,102,102,1);
						text-align: right;
					}
				}
			}
		}
	}
	
</style>