123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307 |
- <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="暂无更多数据" @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 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 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 { Api_getQuotationNew } from "@/api/index.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',
- 'optional',
- '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){
- console.log(1)
- 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){
- console.log('changePopup = ' , obj)
- if(obj.show){
- this.$store.dispatch('websocket/getQuotationNew')
- }else{
- this.$store.commit('websocket/set_currencySuspend' , false)
- }
- },
- 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>
|