repo-frontend/src/view/accounts/UOrder.vue

<template>
	<div class="accounting">
		<secondaryHead :text="$t('zjde222')"></secondaryHead>
		<div class="bit-center-wrap">
			<div class="ag-top">
				<div class="zblx">{{$t('zjde223')}}</div>
				<div class="z-select">
					<el-select @change="getList" v-model="value" :placeholder="$t('tv.el_select_placeholder')">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
			</div>


			<div class="list-ag">
				<div class="lg-item lg-had">
					<div class="ld-item">{{$t('zhjs')}}</div>
					<div class="ld-item">{{$t('zjde223')}}</div>
					<div class="ld-item">{{$t('zjde224')}}</div>
					<div class="ld-item">{{$t('zjde225')}}</div>
					<div class="ld-item">{{$t('zjde226')}}</div>
					<div class="ld-item">{{$t('zjde227')}}</div>
					<div class="ld-item">{{$t("accountaEntrust.time")}}</div>
				</div>



				<div class="lg-item" v-for="(item,index) in list" :key="index">
					<div class="ld-item">
						<span class="lm-l">{{$t('zhjs')}}</span>
						<span class="lm-r">{{$t('sjzh')}}</span>
					</div>
					<div class="ld-item">
						<span class="lm-l">{{$t('zjde223')}}</span>
						<span class="lm-r"> {{item.info}}</span>
					</div>
					<div class="ld-item">
						<span class="lm-l">{{$t('zjde224')}}</span>
						<span class="lm-r">{{selx(item.balance_type)}}</span>
					</div>
					<div class="ld-item">
						<span class="lm-l">{{$t('zjde225')}}</span>
						<span class="lm-r">{{item.currency_name}}</span>
					</div>
					<div class="ld-item">
						<span class="lm-l">{{$t('zjde226')}}</span>
						<span class="lm-r">{{Number(item.value)}}</span>
					</div>
					<div class="ld-item">
						<span class="lm-l">{{$t('zjde227')}}</span>
						<span class="lm-r"> {{Number(item.after).toFixed(4)}}</span>
					</div>
					<div class="ld-item">
						<span class="lm-l">{{$t("accountaEntrust.time")}}</span>
						<span class="lm-r">{{item.created_time}}</span>
					</div>

				</div>
			</div>
			<div style="justify-content: center; margin: 2rem auto; color: #ccc; display: flex;" v-if="list.length==0">
				{{$t("zjde185")}}
			</div>
			<div style="display: flex; justify-content: center; margin: 2rem auto; ">
				<el-pagination @current-change="chanhepages" layout="prev, pager, next" background :total="count">
				</el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
	import secondaryHead from "@/components/secondaryHead";

	export default {
		components: {

			secondaryHead
		},
		name: "UOrder",
		data() {
			return {
				options: [{
						value: '6',
						label: this.$t('complete.all')
					}, {
						value: '2',
						label: this.$t('indexHeader.spot_trading')
					}, {
						value: '3',
						label: this.$t('homeContent.greenhorn_trade_module_fourth')
					}, {
						value: '4',
						label: this.$t('zjde37')
					}, {
						value: '5',
						label: this.$t('fiat.financial_account')
					},
					{
						value: '1',
						label: this.$t('fiat.fiat_account')
					},
				],
				value: '6',
				list: [],
				count: 0,
				pages: 1
			};
		},

		updated() {

		},
		methods: {

		},
		created() {
			this.getList()

		},
		mounted() {

		},
		methods: {
			// optChang(e){
			// 	console.log('e',e)

			// },
			chanhepages(e) {
				console.log('eee', e)
				this.pages = e
				this.getList()
			},
			selx(val) {
				let obj = this.options.filter(item => item.value == val)
				return obj.length > 0 ? obj[0].label : '--'
			},
			getList() {
				layer.load();
				this.$http({
					url: `/api/wallet/legal_log?type=${this.value}&limit=10&page=${this.pages}&lang=${window.localStorage.getItem('lang')}`,
					method: "get",
					headers: {
						'lang': window.localStorage.getItem('lang'),
						Authorization: localStorage.getItem("token")
					}
				}).then(e => {
					layer.closeAll()
					// this.data = e.data.message
					console.log('eee', e.data.message.list)
					this.list = e.data.message.list
					this.count = e.data.message.count
				})
			}
		},
		filters: {

		},
		computed: {

		}
	};
</script>
<style lang="scss">
	.accounting {
		width: 100%;

	}

	.ag-top {
		display: flex;
		align-items: center;
		font-size: 1rem;
	}

	.zblx {
		margin-right: 1rem;
	}

	.accounting .el-input__inner {
		border-color: #DCDFE6 !important;
		background-color: transparent !important;
		color: #666 !important;
	}

	.lg-item {
		display: flex;
		border-bottom: 1px solid #DCDFE6;
	}

	.ld-item {
		flex: 1;
		text-align: center;
		padding: 1rem 0;

		color: #333;
	}

	.list-ag {
		margin-top: 3rem;
	}

	.lg-had {
		color: #909399;
		background: #eee;
	}

	.lm-l {
		display: none;
	}

	.el-pager li {
		width: 30px;
	}

	@media screen and (max-width: 800px) {
		.lm-l {
			display: block;
		}

		.lg-had {
			display: none;
		}

		.ld-item {
			display: flex;
			align-items: center;
		}

		.lg-item {
			flex-direction: column;
		}

		.lm-l {
			width: 30%;
			text-align: left;
			color: #999;

		}
	}

	.day {
		.accounting .el-input__inner {
			border-color: #1f2634 !important;
			background-color: transparent !important;
			color: #FFF !important;
		}

		.lg-had {
			color: #FFF;
			background: #1c222c;
		}

		.lg-item {

			border-bottom: 1px solid #1f2634;
		}

		.ld-item {
			// border-bottom: 1px solid #1f2634;
			color: #fff;
		}

		.zblx {
			color: #fff;
		}

		.el-pagination.is-background .el-pager li {
			background-color: #1c222c;
			color: #FFF;

		}

		.el-pagination.is-background .btn-next,
		.el-pagination.is-background .btn-prev {
			background-color: #1c222c;
			color: #FFF;
		}

		.el-pagination.is-background .el-pager li:not(.disabled).active {
			background-color: #384253;
			color: #FFF;
		}
	}
</style>