BiKing/pages/contract/modules/drawer.vue

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

		<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" 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="暂无更多数据" @selection-change="aaa">
							<!-- 表头行 -->
							<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 optional" >
								<uni-tr :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>
							 	<!-- 表格数据行 -->
							 	<uni-tr v-for="(item , index) in marketAll" :class="[$setColor(item.change)]" :key="`all_${index}`" @click.stop="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>
							 
							 </uni-table>
						</u-list>
					</swiper-item>
				</swiper>
				

			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
import { Api_getQuotationNew } from "@/api/index.js"
	export default {
		data() {
			return {
				tabIndex:0,
				scrollHeight:0,
			};
		},
		computed: {
			// maxPageHeight: state => state.app.maxPageHeight,
			// tabBarHeight: state => state.app.tabBarHeight,
			...mapGetters([
				'tabBarHeight',
				'maxPageHeight',
				'statusBarHeight',
				'stocksColor',
				'optional',
				'marketAll'
			]),
		},
		watch:{
			maxPageHeight:{
				handler(newH){
					this.scrollHeight = this.maxPageHeight - this.tabBarHeight - this.statusBarHeight - uni.upx2px(200)
				},
				immediate:true
			}
		},
		created() {
			this.$store.dispatch('websocket/getQuotationNew')
		},
		mounted() {
			
			// this.$refs.popupRef.open()
			 
		},
		methods: {
			aaa(item){
				console.log('--22-' , item)
			},
			setCurrency(item){
				console.log('--211-' , item)
				
				this.$store.commit('websocket/set_currency_val' , item)
				this.close()
			},
			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>