BiKing/components/marketplace/marketplace.vue

<template>
	<uni-table class="table-box" emptyText="暂无更多数据">
		<!-- 表头行 -->
		<uni-tr>
			<uni-th>
				<view class="table-th">
					交易对
				</view>
			</uni-th>
			<uni-th>
				<view class="table-th table-th-title" @click.stop="alterRankRule('newPrice')">
					<text>最新价</text>
					<view class="title-arrows">
						<image class="arrows-icon" :src="rankRuleNum === 1 ? activeRankRuleIcon : rankRuleIcon"
							mode="aspectFit"></image>
						<image class="arrows-icon" :src="rankRuleNum === 2 ? activeRankRuleIcon : rankRuleIcon"
							mode="aspectFit"></image>
					</view>
				</view>
			</uni-th>
			<uni-th>
				<view class="table-th table-th-title" @click.stop="alterRankRule(`rankRule`)">
					<text>日涨跌</text>
					<view class="title-arrows">
						<image class="arrows-icon" :src="rankRuleNum === 3 ? activeRankRuleIcon : rankRuleIcon"
							mode="aspectFit"></image>
						<image class="arrows-icon" :src="rankRuleNum === 4 ? activeRankRuleIcon : rankRuleIcon"
							mode="aspectFit"></image>
					</view>
				</view>
			</uni-th>
		</uni-tr>
		<!-- 表格数据行 -->
		<!-- 	<view class="" v-for="item in marketplaceList">
			
		</view> -->
		<uni-tr v-for="val in listArr" :rise-fall="stocksColor">
			<uni-td>
				<view class="table-title">
					<view class="title">
						<text>{{ val.currency_name }}</text>
						<text class="title-sub">{{ val.legal_name ? `/${val.legal_name}` : '' }}</text>
					</view>
					<view class="title-num">
						24H额：{{ val.volume }}m
					</view>
				</view>
			</uni-td>
			<uni-td>
				<view class="title">
					<view class="">
						{{ val.now_price }}
					</view>
					<view class="title-num">
						<text class="iconfont">&#xe615;</text> {{ val.volume }}
					</view>
				</view>
			</uni-td>
			<uni-td :class="['table-right' , $setColor(val.change)]">
				<view class="table-btn bgcolor">
					{{ val.change }}%
				</view>
			</uni-td>
		</uni-tr>
	</uni-table>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: "marketplace",
		props: {
			marketplaceList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				manageArr:[],
				listArr: [],
				rankRuleNum: 0,
				rankRuleIcon: require("@/static/images/jiantou.png"),
				activeRankRuleIcon: require("@/static/images/jiantou_01.png")
			};
		},
		computed: {
			...mapGetters([
				'stocksColor'
			]),
		},
		watch: {
			marketplaceList: {
				handler(newArr , oldArr) {
					this.manageArr = JSON.parse(JSON.stringify(newArr))
					this.alterRankRule()
				},
				deep: true
			}
		},
		methods: {
			alterRankRule(rankRule) {
				if (rankRule) {
					// newPrice , rankRule
					if (rankRule === 'newPrice') {
						switch (this.rankRuleNum) {
							case 0:
							case 3:
							case 4:
								this.rankRuleNum = 1;
								break;
							case 1:
								this.rankRuleNum = 2;
								break;
							default:
								this.rankRuleNum = 0
						}
					}
					if (rankRule === 'rankRule') {
						switch (this.rankRuleNum) {
							case 0:
							case 1:
							case 2:
								this.rankRuleNum = 3;
								break;
							case 3:
								this.rankRuleNum = 4;
								break;
							default:
								this.rankRuleNum = 0
						}
					}
				};
				this.setRankList();

			},
			setRankList() {
				switch (this.rankRuleNum) {
					case 1:
						this.manageArr.sort((x, y) => {
							return (x.now_price - y.now_price)
						});
						break;
					case 2:
						this.manageArr.sort((x, y) => {
							return (y.now_price - x.now_price)
						});
						break;
					case 3:
						this.manageArr.sort((x, y) => {
							return (x.change - y.change)
						});
						break;
					case 4:
						this.manageArr.sort((x, y) => {
							return (y.change - x.change)
						});
						break;
					default:
						this.manageArr = JSON.parse(JSON.stringify(this.marketplaceList))
				};
				this.listArr = JSON.parse(JSON.stringify(this.manageArr))
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table-box {
		::v-deep .uni-table-tr {
			display: flex;

			.uni-table-th,
			.uni-table-td {
				padding: 0;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;

				&:nth-child(3n - 2) {
					padding-left: $pages-padding;
					flex: 4;
				}

				&:nth-child(3n - 1) {
					text-align: right !important;
					flex: 3;
				}

				&:nth-child(3n) {
					flex: 3;
					padding-right: $pages-padding;
				}

				// &:nth-child()
			}

			.table-th {
				padding-top: 20rpx;
				padding-bottom: 10rpx;
			}

			.uni-table-th {
				font-size: 22rpx;
				border-bottom: none;

				.table-th-title {
					width: 100%;
					display: flex;
					justify-content: flex-end;

					.title-arrows {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-end;
						padding-left: 3px;

						.arrows-icon {
							width: 18rpx;
							height: 18rpx;

							&:first-child {
								transform: rotate(180deg);
								margin-bottom: -4rpx;
							}

							&:last-child {
								margin-top: -4rpx;
							}
						}

					}
				}

			}

			.uni-table-td {
				padding-top: 20rpx;
				padding-bottom: 20rpx;

				.table-title {
					width: 100%;
					line-height: 1.2;

				}

				.title {
					line-height: 1.2;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;

					.title-sub {
						font-size: 24rpx;
						font-weight: 400;
					}
				}

				.title-num {
					padding-top: 18rpx;
					font-size: 24rpx;
					color: #9f9c9c;

					.iconfont {
						font-size: 22rpx;
					}
				}

				// <view class="table-title">
				// 	<view class="title">
				// 		<text>BTC</text>
				// 		<text class="title-sub">/USDT</text>
				// 	</view>
				// 	<view class="title-num">
				// 		24H额：476.62m
				// 	</view>
				// </view>
				// 	&:nth-child(3n - 2) {
				// 		padding-left: $pages-padding;
				// 	}

				// 	&:nth-child(3n) {
				// 		padding-right: $pages-padding;
				// 		background-color: yellow;
				// 		text-align: right;
				// 	}

				// &:nth-child()
			}


			.table-btn {
				// 138
				width: 138rpx;
				height: 60rpx;
				border-radius: 6rpx;
				color: #fff;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: center;
				line-height: 60rpx;
				font-size: 26rpx;
				// margin-left: calc(100% - 138rpx);
			}
		}

		.table-right {
			display: flex;
			justify-content: flex-end;
			flex-direction: row;
			align-items: flex-end;

		}
	}
</style>