zhongshen_project/addon/pc/source/os/pages/member/recharge_order.vue

<template>
	<div class="box">
		<div class="null-page" v-show="yes"></div>
		
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item :to="{ path: '/member/account' }">账户余额</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ path: '/member/recharge_list' }">充值套餐列表</el-breadcrumb-item>
					<el-breadcrumb-item>充值记录</el-breadcrumb-item>
				</el-breadcrumb>
			</div>

			<div v-loading="loading">
				<div class="order-list">
					<nav>
						<li>套餐名称</li>
						<li>面值</li>
						<li>购买价格</li>
						<li>赠送积分</li>
						<li>赠送成长值</li>
					</nav>

					<div class="list" v-if="orderList.length > 0">
						<div class="item" v-for="(orderItem, orderIndex) in orderList" :key="orderIndex">
							<div class="head">
								<span class="create-time">{{ $util.timeStampTurnTime(orderItem.create_time) }}</span>
								<span class="order-no">订单号：{{ orderItem.order_no }}</span>
							</div>
							<ul>
								<li>
									<div class="img-wrap"><el-image :src="$img(orderItem.cover_img)" fit="cover" @error="imageError(orderIndex)"></el-image></div>
									<div class="info-wrap">
										<h5 :title="orderItem.recharge_name">{{ orderItem.recharge_name }}</h5>
										<!-- <span>规格：规格值</span> -->
									</div>
								</li>
								<li>
									<span>￥{{ orderItem.face_value }}</span>
								</li>
								<li>
									<span>￥{{ orderItem.buy_price }}</span>
								</li>
								<li>
									<span>{{ orderItem.point }}</span>
								</li>
								<li>
									<span>{{ orderItem.growth }}</span>
								</li>
							</ul>
						</div>
					</div>
					<div v-else-if="!loading && orderList.length == 0" class="empty-wrap">暂无相关订单</div>
				</div>

				<div class="pager">
					<el-pagination 
						background
						:pager-count="5" 
						:total="total" 
						prev-text="上一页" 
						next-text="下一页" 
						:current-page.sync="currentPage" 
						:page-size.sync="pageSize" 
						@size-change="handlePageSizeChange" 
						@current-change="handleCurrentPageChange" 
						hide-on-single-page
					></el-pagination>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
	import { rechargeOrder } from "@/api/member/account"
	import { mapGetters } from 'vuex';

	export default {
		name: "recharge_list",
    layout: "member",
		components: {},
		data: () => {
			return {
				orderList: [],
				total: 0,
				currentPage: 1,
				pageSize: 10,
				loading: true,
				yes: true
			}
		},
		created() {
			this.getListData()
		},
		mounted() {
			let self = this;
			setTimeout(function() {
				self.yes = false
			}, 300)
		},
		computed: {
			...mapGetters(['defaultGoodsImage'])
		},
		methods: {
			handlePageSizeChange(size) {
				this.pageSize = size
				this.refresh()
			},
			handleCurrentPageChange(page) {
				this.currentPage = page
				this.refresh()
			},
			refresh() {
				this.loading = true
				this.getListData()
			},
			getListData() {
				rechargeOrder({
					page: this.currentPage,
					page_size: this.pageSize
				}).then(res => {
					if (res.code == 0 && res.data) {
						this.orderList = res.data.list;
					} else {
						this.$message.warning(res.message)
					}
					this.loading = false
				}).catch(err => {
					this.loading = false
				})
			},
			imageError(index) {
				this.orderList[index].cover_img = this.defaultGoodsImage;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		position: relative;
	}
	
	.null-page {
		width: 100%;
		height: 730px;
		background-color: #FFFFFF;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9;
	}
	
	.el-card.is-always-shadow,
	.el-card.is-hover-shadow:focus,
	.el-card.is-hover-shadow:hover {
		box-shadow: unset;
	}

	.el-card {
		border: 0;
	}

	.order-list {
		nav {
			overflow: hidden;
			padding: 10px;
			background: #fff;
			margin-bottom: 10px;
			border-bottom: 1px solid #eeeeee;

			li {
				float: left;

				&:nth-child(1) {
					width: 40%;
				}

				&:nth-child(2) {
					width: 15%;
				}

				&:nth-child(3) {
					width: 15%;
				}

				&:nth-child(4) {
					width: 15%;
				}

				&:nth-child(5) {
					width: 15%;
				}
			}
		}

		.list {
			.item {
				margin-bottom: 20px;
				border: 1px solid #eeeeee;
				border-top: 0;

				.head {
					padding: 8px 10px;
					background: #f7f7f7;
					font-size: 12px;

					.create-time {
						margin-right: 10px;
					}

					border-bottom: 1px solid #eeeeee;

					a {
						margin: 0 10px 0 20px;
					}

					.order-type {
						margin-left: 30px;
					}
				}
			}

			ul {
				background-color: #fff;
				padding: 10px;
				overflow: hidden;

				li {
					float: left;
					line-height: 60px;

					&:nth-child(1) {
						width: 40%;
						line-height: inherit;

						.img-wrap {
							width: 60px;
							height: 60px;
							float: left;
							margin-right: 10px;
							border-radius: 5px;
							overflow: hidden;
							
							.el-image {
								width: 100%;
								height: 100%;
							}
						}

						.info-wrap {
							margin-left: 70px;

							h5 {
								font-weight: normal;
								font-size: $ns-font-size-base;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
								margin-right: 10px;
							}
						}
					}

					&:nth-child(2) {
						width: 15%;
					}

					&:nth-child(3) {
						width: 15%;
					}

					&:nth-child(4) {
						width: 15%;
					}

					&:nth-child(5) {
						width: 15%;
					}
				}
			}
		}

		.empty-wrap {
			text-align: center;
			padding: 10px;
		}
	}
</style>