BiKing/pages/contract/modules/drawer.vue

<template>
	<uni-popup ref="popupRef" type="left" @change="changePopup">

		<view class="drawer-box" :rise-fall="stocksColor">
			<view :style="{'width': '100%', 'height': `${statusBarHeight}px`}"></view>
			<view class="drawer-content">
				<view class="drawer-search">
					<view class="drawer-search-inp">
						<u-icon name="search" class="search-icon" color="#666" size="40"></u-icon>
						<input class="search-inp" v-model="searchName" placeholder-class="search-place" type="text"
							placeholder="搜索">
					</view>
				</view>
				<view class="drawer-tab">
					<view class="tab-box">
						<view @click.stop="tabIndex = 0 "
							:class="['tab-item' ,  tabIndex === 0 ? 'active-tab-item' : '']">
							自选
						</view>
						<view @click.stop="tabIndex = 1 "
							:class="['tab-item' ,  tabIndex === 1 ? 'active-tab-item' : '']">
							市场
						</view>
					</view>
					<!-- <u-icon name="edit-pen" class="search-icon" color="#666" size="24"></u-icon> -->
				</view>
				<swiper class="swiper-content" :current="tabIndex"
					:style="{'height': scrollHeight ? `${scrollHeight}px` : '' }">
					<swiper-item class="swiper-item-box">
						<uni-table class="table-box" emptyText="暂无更多数据">
							<!-- 表头行 -->
							<uni-tr>
								<uni-th>交易对</uni-th>
								<uni-th align="right">最新价</uni-th>
								<uni-th sortable align="right">日涨跌</uni-th>
							</uni-tr>
							<!-- 表格数据行 @click="setCurrency(item)" @row-click="rowclick(item)"-->
							<template v-for="(item , index) in contract_optional">
								<uni-tr v-if="setName(item)" :class="[$setColor(item.change)]"
									@clicktr="setCurrency(item)">
									<uni-td>
										<view class="name">
											<text class="name-text">{{ item.currency_name }}</text>
											<text
												class="name-tag">{{ item.legal_name ? `/${item.legal_name}` : '' }}</text>
										</view>
									</uni-td>
									<uni-td align="right">{{ item.now_price }}</uni-td>
									<uni-td class="color">{{ item.change }}%</uni-td>
								</uni-tr>
							</template>

						</uni-table>
					</swiper-item>
					<swiper-item>
						<u-list class="swiper-list" :style="{'height': scrollHeight ? `${scrollHeight}px` : '' }">
							<uni-table class="table-box" emptyText="暂无更多数据">
								<!-- 表头行 -->
								<uni-tr>
									<uni-th>交易对</uni-th>
									<uni-th align="right">最新价</uni-th>
									<uni-th align="right">日涨跌</uni-th>
								</uni-tr>
								<!-- 表格数据行 -->
								<template v-for="(item , index) in contract_marketAll">
									<uni-tr v-if="setName(item)" :class="[$setColor(item.change)]"
										@clicktr="setCurrency(item)">
										<uni-td>
											<view class="name">
												<text class="name-text">{{ item.currency_name }}</text>
												<text
													class="name-tag">{{ item.legal_name ? `/${item.legal_name}` : '' }}</text>
											</view>
										</uni-td>
										<uni-td align="right">{{ item.now_price }}</uni-td>
										<uni-td class="color">{{ item.change }}%</uni-td>
									</uni-tr>
								</template>

							</uni-table>
						</u-list>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
 
	import {
		getCurrencyMarket,
		setCurrencySuspend
	} from "@/utils/currency-market.js"
	export default {
		data() {
			return {
				tabIndex: 0,
				scrollHeight: 0,
				searchName: ''
			};
		},
		computed: {
			// maxPageHeight: state => state.app.maxPageHeight,
			// tabBarHeight: state => state.app.tabBarHeight,
			...mapGetters([
				'tabBarHeight',
				'maxPageHeight',
				'statusBarHeight',
				'stocksColor',
				'contract_optional',
				'contract_marketAll'
			]),
		},
		watch: {
			maxPageHeight: {
				handler(newH) {
					this.scrollHeight = this.maxPageHeight - this.tabBarHeight - this.statusBarHeight - uni.upx2px(200)
				},
				immediate: true
			},

		},
		created() {

		},
		mounted() {

			// this.$refs.popupRef.open()
			// noRefresh
		},
		methods: {
			setName(item) {
				if (this.searchName && item) {
					if (item.currency_name.indexOf(this.searchName) >= 0) {
						return true
					}
					return false

				}
				return true
			},
			aaa(item) {
				console.log('--22-', item)
			},
			setCurrency(item) {
				this.$store.commit('websocket/set_currency_val', item)
				this.close()
			},
			changePopup(obj) {
				if (obj.show) {
					getCurrencyMarket('contractDrawer')
				} else {
					setCurrencySuspend('contractDrawer')
				}
			},
			close() {
				this.$refs.popupRef.close();
			},
			open() {

				this.$nextTick(() => {
					this.$refs.popupRef.open();
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.drawer-box {
		width: 75vw;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.drawer-content {
			flex: 1;
			width: 100%;
			background-color: #fff;

			.drawer-search {
				padding: 20rpx $pages-padding 0;

				.drawer-search-inp {
					width: 100%;
					height: 70rpx;
					background-color: #ccc;
					border-radius: 35rpx;
					display: flex;
					align-items: center;
					padding: 0 20rpx;
					font-size: 28rpx;
					color: #1a1a1a;

					.search-place {
						font-size: 28rpx;
						color: #1a1a1a;

					}
				}
			}

			.drawer-tab {
				padding: 0 6rpx 0 $pages-padding;
				width: 100%;
				height: 90rpx;
				border-bottom: 1rpx solid #f2f2f2;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.tab-box {
					display: flex;
					align-items: stretch;
					height: 100%;

					.tab-item {
						margin-right: 40rpx;
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #808080;
						height: 100%;
						line-height: 90rpx;
					}

					.active-tab-item {
						position: relative;
						font-weight: 600;
						color: #20b482;

						&::before {
							content: '';
							position: absolute;
							left: 50%;
							bottom: 0;
							width: 80%;
							height: 2px;
							border-radius: 1px;
							background-color: #20b482;
							transform: translateX(-50%);
						}

					}
				}
			}

			.swiper-content,
			.swiper-item-box {
				width: 100%;
			}

			.table-box {
				width: 100%;

				.uni-table-tr {
					.uni-table-th {
						font-size: 24rpx;
						font-weight: 400;
						border-bottom: none;
					}

					.uni-table-td {
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 800;
						color: #1a1a1a;

						.name {
							.name-text {}

							.name-tag {
								font-size: 22rpx;
								font-weight: 300;
							}

						}

						&:nth-child(3n - 1) {}

						&:nth-child(3n) {
							color: #20b482;
						}
					}

					.uni-table-th,
					.uni-table-td {
						flex-shrink: 0;

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

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

						&:nth-child(3n) {
							flex: 2;
							padding-right: $pages-padding;
							text-align: right !important;
						}
					}
				}
			}


		}
	}

	.swiper-content {
		// background-color: red;
	}
</style>