dl/pages/merchant/money.vue

<template>
	<view class="center">
		<empty v-if="list.length === 0"></empty>
		<view v-for="(item, index) in list" :key="index" class="order-item">
			<view class="i-top b-b">
				<text class="time">{{ item.order_id }}</text>
			</view>
			<view class="main">
				<view class="main-item flex">
					<view class="main-left">充值用户</view>
					<view class="main-right">{{ item.nickname }}</view>
				</view>
				<view class="main-item flex">
					<view class="main-left">充值金额</view>
					<view class="main-right">{{ item.price }}</view>
				</view>
				<view class="main-item flex">
					<view class="main-left">充值时间</view>
					<view class="main-right">{{ item.pay_time }}</view>
				</view>
				<view class="main-item flex" v-if="item.integral != 0">
					<view class="main-left">积分抵扣</view>
					<view class="main-right">{{ item.integral }}</view>
				</view>
				<view class="main-item flex" v-if="item.barter_integral != 0">
					<view class="main-left">钱抵扣</view>
					<view class="main-right">{{ item.barter_integral }}</view>
				</view>
			</view>
			<view class="price-box">
				共
				<text class="price">{{ item.price }}</text>
				实付款
				<text class="price">{{ item.pay_price }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { getTime } from '@/utils/rocessor.js';
import { order } from '@/api/shop.js';
import empty from '@/components/empty';
export default {
	components: {
		empty
	},
	data() {
		return {
			list: [],
			id: ''
		};
	},
	onLoad(opt) {
		this.id = opt.id;
		this.loadData();
	},
	methods: {
		loadData() {
			order({ store_id: this.id, page: 1, limit: 1000 }).then(({ data }) => {
				data.forEach(e => {
					e.pay_time = getTime(e.pay_time);
				});
				this.list = data;
			});
		}
	}
};
</script>

<style lang="scss">
page,
.center {
	background: #eee;
	height: 100%;
}
.order-item {
	display: flex;
	flex-direction: column;
	background: #fff;
	padding: 0 20rpx;
	margin: 16rpx auto 0;
	width: 690rpx;
	border-radius: 20rpx;
	.i-top {
		display: flex;
		align-items: center;
		height: 80rpx;
		padding-right: 30rpx;
		font-size: $font-base;
		color: $font-color-dark;
		position: relative;
		.time {
			flex: 1;
		}
		.state {
			color: $base-color;
		}
		.del-btn {
			padding: 10rpx 0 10rpx 36rpx;
			font-size: $font-lg;
			color: $font-color-light;
			position: relative;
			&:after {
				content: '';
				width: 0;
				height: 30rpx;
				border-left: 1px solid $border-color-dark;
				position: absolute;
				left: 20rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
	.main {
		margin: 20rpx 0;
		border-bottom: 1px solid #f6f7f9;
		font-size: $font-sm + 4rpx;
		color: $font-color-light;
		.main-item {
			padding: 10rpx 0;
		}
	}
	.price-box {
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		padding: 20rpx 30rpx;
		font-size: $font-sm + 2rpx;
		color: $font-color-light;
		.num {
			margin: 0 8rpx;
			color: $font-color-dark;
		}
		.price {
			font-size: $font-lg;
			color: $font-color-dark;
			&:before {
				content: '￥';
				font-size: $font-sm;
				margin: 0 2rpx 0 8rpx;
			}
		}
	}
}
</style>