From 663d2974b925e20601d4f077ed0fad4c4137eecf Mon Sep 17 00:00:00 2001
From: DESKTOP-CVS3R96\我恁爹 <11>
Date: Wed, 09 Nov 2022 05:37:37 +0800
Subject: [PATCH] 123123

---
 src/page/list/trading-list.vue |  794 +++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 files changed, 727 insertions(+), 67 deletions(-)

diff --git a/src/page/list/trading-list.vue b/src/page/list/trading-list.vue
index 402d7d7..f518010 100644
--- a/src/page/list/trading-list.vue
+++ b/src/page/list/trading-list.vue
@@ -11,20 +11,20 @@
                   <img src="../../assets/img/searchs.png" alt />
                 </div>
                 <div class="search_input">
-                  <input type="text" class="searchs" placeholder="输入品种名称/代码搜索" />
+                  <input type="text" class="searchs"  placeholder="输入品种名称/代码搜索" ref="search" id="sousuo" onkeyup="value=value.replace(/[^a-zA-Z0-9]/g,'')" v-model="gpcode"  @input="gpinput"/>
                 </div>
               </div>
             </div>
           </div>
           <div class="tab_class">
             <div class="scroll_tab">
-              <div class="tab_items" v-for="(item, index) in tabsClassArr" :key="index"
+              <div class="tab_items" v-for="(item, index) in tabsClassArr" :key="index" :class="index == 0 ? 'mrt' : ''"
                 @click="handleTabsItem(item, index)">
                 <span :class="tabsItemIndex === index ? 'active' : ''">{{ item.name }}</span>
               </div>
             </div>
           </div>
-          <div class="kai_mess">
+          <div class="kai_mess" v-show="isToken == ''" @click="$router.push('/login')">
             <div class="left_identity_img">
               <img src="../../assets/img/shenfen2.png" alt />
             </div>
@@ -46,38 +46,139 @@
               <span>{{ '涨跌幅' }}</span>
             </div>
           </div>
-          <div class="list">
-            <div class="list_items">
-              <div class="item" v-for="(item, index) in listArr" :key="index">
-                <div class="left_title">
-                  <div class="tp">
-                    <span class="collection" @click="handleCollectionClick(item)">
-                      <span class="shu"></span>
-                    </span>
-                    <span class="title_color">{{ tabsItemIndex == 3 ? item.futuresName : item.indexName }}</span>
-                  </div>
-                  <div class="bt">
-                    <span>{{ tabsItemIndex == 3 ? item.futuresCode : item.indexCode }}</span>
+          <div class="list" :class="isToken == '' ? 'listHeight' : 'listHeights'">
+            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
+              :immediate-check="false">
+              <div class="van-clearfix">
+                <div class="list_items">
+                  <div class="item" v-for="(item, index) in listArr" :key="index">
+                    <div class="left_title">
+                      <div class="tp">
+                        <span class="collection" @click="options(item)">
+                          <span class="shu" :class="item.isOption == '1' ? 'shublue' : ''"></span>
+                        </span>
+                        <span class="title_color">{{ tabsItemIndex == 3 ? item.futuresName : tabsItemIndex ==
+                            2 ? item.name : tabsItemIndex == 0 ? item.name : item.indexName
+                        }}</span>
+                      </div>
+                      <div class="bt">
+                        <span>{{ tabsItemIndex == 3 ? item.futuresCode : tabsItemIndex == 2 ? item.code : tabsItemIndex
+                            ==
+                            0 ? item.code : item.indexCode
+                        }}</span>
+                      </div>
+                    </div>
+                    <div class="center_price">
+                      <div class="tp">
+                        <span class="price_color" v-if="tabsItemIndex == 0 || tabsItemIndex == 2"
+                          :class="item.hcrate > 0 ? 'green' : 'red'">{{ item.nowPrice
+                          }}</span>
+                        <span class="price_color" v-else>{{ tabsItemIndex == 3 ? Number(item.nowPrice).toFixed(2) :
+                            item.currentPoint
+                        }}</span>
+                      </div>
+                      <div class="bt">
+                        <span v-if="tabsItemIndex == 3 || tabsItemIndex == 1">{{ '手续费:' + item.transFee }}</span>
+                        <span v-else>{{ item.today_min }}</span>
+                      </div>
+                    </div>
+                    <div class="right_bs">
+                      <div class="tp">
+                        <span class="price_color" v-if="tabsItemIndex == 0 || tabsItemIndex == 2"
+                          :class="item.hcrate > 0 ? 'green' : 'red'">{{ item.hcrate }}</span>
+                        <span class="price_color" v-if="tabsItemIndex == 1"
+                          :class="item.floatRate > 0 ? 'green' : 'red'">{{
+                              item.floatRate + '%'
+                          }}</span>
+                        <span class="price_color" v-if="tabsItemIndex == 3"
+                          :class="((item.nowPrice - item.lastClose) / item.lastClose * 100).toFixed(2) > 0 ? 'green' : 'red'">{{
+                              item.lastClose == "" ? 0.00 : ((Number(item.nowPrice) - Number(item.lastClose)) /
+                                Number(item.lastClose) * 100).toFixed(2) + '%'
+                          }}</span>
+                      </div>
+                      <div class="bt">
+                        <div v-if="tabsItemIndex != 1 && tabsItemIndex != 3">{{ item.stock_type.toUpperCase() }}</div>
+                        <!-- class="codeIcon" -->
+                      </div>
+                    </div>
                   </div>
                 </div>
-                <div class="center_price">
-                  <div class="tp">
-                    <span class="price_color">{{ tabsItemIndex == 3 ? Number(item.nowPrice).toFixed(2) : item.currentPoint
-                    }}</span>
-                  </div>
-                  <div class="bt">
-                    <span>{{ item.addTime | gettime }}</span>
-                  </div>
+              </div>
+            </van-list>
+
+          </div>
+        </div>
+        <div class="bottom_content" v-if="tabsIndex === 0">
+          <!-- 搜索框 -->
+          <div class="search">
+            <div class="search_content">
+              <div class="left_search">
+                <div class="search_img">
+                  <img src="../../assets/img/searchs.png" alt />
                 </div>
-                <div class="right_bs">
-                  <div class="tp">
-                    <span class="price_color">{{ tabsItemIndex == 3 ? item.coinRate : item.floatRate + '%' }}</span>
-                  </div>
-                  <div class="bt"></div>
+                <div class="search_input">
+                  <input type="text"  class="searchs" placeholder="输入品种名称/代码搜索"  onkeyup="value=value.replace(/[^a-zA-Z0-9]/g,'')" v-model="gpcodes"  @input="gpinputs" />
                 </div>
               </div>
             </div>
           </div>
+          <div class="list_title">
+            <div class="item_title varieties">
+              <span>{{ '品种' }}</span>
+            </div>
+            <div class="item_title latest_price">
+              <span>{{ '最新价' }}</span>
+            </div>
+            <div class="item_title applies">
+              <span>{{ '涨跌幅' }}</span>
+            </div>
+          </div>
+
+          <div class="list zxlist">
+            <van-list v-model="loadings" :finished="finisheds" finished-text="没有更多了" @load="onLoads"
+              :immediate-check="false">
+              <div class="van-clearfix">
+                <div class="list_items">
+                  <div class="item" v-for="(item, index) in listArrs" :key="item.indexCode">
+                    <div class="left_title">
+                      <div class="tp">
+                        <span class="collection" @click="optionszx(item)">
+                          <span class="shu" :class="item.isOption == '1' ? 'shublue' : ''"></span>
+                        </span>
+                        <span class="title_color">{{ item.stockName}}</span>
+                      </div>
+                      <div class="bt">
+                        <span>{{ item.stockCode}}</span>
+                      </div>
+                    </div>
+                    <div class="center_price">
+                      <div class="tp">
+
+                        <span class="price_color">{{item.nowPrice}}</span>
+                      </div>
+                      <div class="bt">
+
+                        <span>{{ item.addTime }}</span>
+                      </div>
+                    </div>
+                    <div class="right_bs">
+                      <div class="tp">
+
+                        <span class="price_color" :class="item.hcrate > 0 ? 'green' : 'red'">{{ item.hcrate }}</span>
+
+                      </div>
+                      <div class="bt">
+                        <!-- <div>{{ item.stock_type.toUpperCase() }}</div> -->
+                        <!-- class="codeIcon" -->
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </van-list>
+
+          </div>
+
         </div>
       </div>
     </div>
@@ -96,16 +197,135 @@
                 <span>{{ '余额' }}</span>
               </div>
               <div class="right">
-                <span>{{ '¥ 49,656.79' }}</span>
+                <span v-if="$store.state.userInfo.userAmt==undefined">¥0.00</span>
+                <span  v-if="$store.state.userInfo&&tabsItemIndex == 1" style="white-space: nowarp;" >{{ '¥' + $store.state.userInfo.userIndexAmt
+                }}</span>
+                <span  v-if="$store.state.userInfo.userAmt!=undefined&&tabsItemIndex == 0" style="white-space: nowarp;" >{{ '¥ ' + $store.state.userInfo.userAmt
+                }}</span>
+                <span  v-if="$store.state.userInfo.userAmt!=undefined&&tabsItemIndex == 2" style="white-space: nowarp;">{{ '¥ ' + $store.state.userInfo.userAmt
+                }}</span>
+                <span  v-if="$store.state.userInfo&&tabsItemIndex == 3" style="white-space: nowarp;">{{
+                    '¥' + $store.state.userInfo.userFuturesAmt
+                }}</span>
               </div>
               <div class="sanjiao">
-                <img src="../../assets/img/xiala.png" alt />
+                <img :class="dialogFlag ? 'xuanz' : ''" style="transition: all 0.5s;" src="../../assets/img/xiala.png"
+                  alt />
               </div>
             </div>
             <div class="bottom_balance">
               <div>
                 <span>{{ '可用余额' }}</span>
               </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="cards">
+        <div class="card_item">
+          <div class="tops_title">
+            <div><span>{{ '总资产' }}</span></div>
+          </div>
+          <div class="bottom_price">
+            <div>
+              <p v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
+                class="account">¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
+                    $store.state.userInfo.userIndexAmt).toFixed(2)
+                }}</p>
+              <p v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
+                class="account">¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
+                    $store.state.userInfo.userFuturesAmt).toFixed(2)
+                }}</p>
+              <p v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
+                class="account">¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt).toFixed(2) }}</p>
+              <p v-else-if="this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
+                class="account">¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
+                    $store.state.userInfo.userIndexAmt + $store.state.userInfo.userFuturesAmt).toFixed(2)
+                }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="card_item">
+          <div class="tops_title">
+            <div><span>{{ '强平线' }}</span></div>
+          </div>
+          <div class="bottom_price">
+            <div><span v-show="tabsItemIndex == 1">{{ $store.state.hide ? '****' :
+                Number(($store.state.userInfo.enableIndexAmt +
+                  $store.state.userInfo.allIndexFreezAmt) * indexSettingInfo.forceSellPercent).toFixed(2)
+            }}</span>
+              <span v-show="tabsItemIndex == 0">{{ $store.state.hide ? '****' : Number(($store.state.userInfo.enableAmt
+                  +
+                  $store.state.userInfo.allFreezAmt) * settingInfo.forceStopPercent).toFixed(2)
+              }} </span>
+              <span v-show="tabsItemIndex == 2">{{ $store.state.hide ? '****' : Number(($store.state.userInfo.enableAmt
+                  +
+                  $store.state.userInfo.allFreezAmt) * settingInfo.forceStopPercent).toFixed(2)
+              }} </span>
+              <span v-show="tabsItemIndex == 3">{{ $store.state.hide ? '****' :
+                  Number(($store.state.userInfo.enableFuturesAmt +
+                    $store.state.userInfo.allFuturesFreezAmt) * futuresSettingInfo.forceSellPercent).toFixed(2)
+              }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="card_item">
+          <div class="tops_title">
+            <div><span>{{ tabsItemIndex == 1 ? '指数' : tabsItemIndex == 0 ? '沪深' : tabsItemIndex == 2 ? '科创' :
+                tabsItemIndex ==
+                  3 ? '期货' : ''
+            }}</span><span>{{ '资产' }}</span></div>
+          </div>
+          <div class="bottom_price">
+            <div><span v-show="tabsItemIndex == 1">{{ '¥ ' + $store.state.userInfo.userIndexAmt }}</span>
+              <span v-show="tabsItemIndex == 0">{{ '¥ ' + $store.state.userInfo.userAmt }}</span>
+              <span v-show="tabsItemIndex == 2">{{ '¥ ' + $store.state.userInfo.userAmt }}</span>
+              <span v-show="tabsItemIndex == 3">{{ '¥ ' + $store.state.userInfo.userFuturesAmt }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="card_item">
+          <div class="tops_title">
+            <div><span>{{ '可用资金' }}</span></div>
+          </div>
+          <div class="bottom_price">
+            <div><span v-show="tabsItemIndex == 1">{{ '¥ ' + $store.state.userInfo.enableIndexAmt }}</span>
+              <span v-show="tabsItemIndex == 0">{{ '¥ ' + $store.state.userInfo.enableAmt }}</span>
+              <span v-show="tabsItemIndex == 2">{{ '¥ ' + $store.state.userInfo.enableAmt }}</span>
+              <span v-show="tabsItemIndex == 3">{{ '¥ ' + $store.state.userInfo.enableFuturesAmt }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="card_item">
+          <div class="tops_title">
+            <div><span>{{ '冻结保证金' }}</span></div>
+          </div>
+          <div class="bottom_price">
+            <div><span v-show="tabsItemIndex == 1">{{ '¥ ' + $store.state.userInfo.allIndexFreezAmt }}</span>
+              <span v-show="tabsItemIndex == 0">{{ '¥ ' + $store.state.userInfo.allFreezAmt }}</span>
+              <span v-show="tabsItemIndex == 2">{{ '¥ ' + $store.state.userInfo.allFreezAmt }}</span>
+              <span v-show="tabsItemIndex == 3">{{ '¥ ' + $store.state.userInfo.allFuturesFreezAmt }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="card_item">
+          <div class="tops_title">
+            <div><span>{{ '持仓总盈亏' }}</span></div>
+          </div>
+          <div class="bottom_price">
+            <div><span
+                :class="$store.state.userInfo.allIndexProfitAndLose > 0 ? ' red' : $store.state.userInfo.allIndexProfitAndLose < 0 ? ' green' : ''"
+                v-show="tabsItemIndex == 1">{{ '¥ ' + $store.state.userInfo.allIndexProfitAndLose }}</span>
+              <span
+                :class="$store.state.userInfo.allProfitAndLose > 0 ? ' red' : $store.state.userInfo.allProfitAndLose < 0 ? ' green' : ''"
+                v-show="tabsItemIndex == 0">{{ '¥ ' + $store.state.userInfo.allProfitAndLose }}</span>
+              <span
+                :class="$store.state.userInfo.allProfitAndLose > 0 ? ' red' : $store.state.userInfo.allProfitAndLose < 0 ? ' green' : ''"
+                v-show="tabsItemIndex == 2">{{ '¥ ' + $store.state.userInfo.allProfitAndLose }}</span>
+              <span
+                :class="$store.state.userInfo.allFuturesProfitAndLose > 0 ? 'red' : $store.state.userInfo.allFuturesProfitAndLose < 0 ? ' green' : ''"
+                v-show="tabsItemIndex == 3">{{ '¥ '+Number($store.state.userInfo.allFuturesProfitAndLose).toFixed(2)}}</span>
             </div>
           </div>
         </div>
@@ -129,19 +349,31 @@
       tabClassActive: 1,
       dialogFlag: false,
       pageNum: 1,
+      pageNums: 1,
       stockPlate: "",
       alertShow: false,
+      isToken: '',
       elType: "warning",
+      indexSettingInfo: {},
+      futuresSettingInfo: {},
+      settingInfo: {},
+      loading: false,
+      loadings: false,
+      finished: false,
+      finisheds: false,
+      gpcode: "",
+      gpcodes: "",
       texts: "",
       tabsClassArr: [
         {
-          name: "指数",
+          name: "沪深京",
           type: 0
         },
         {
-          name: "沪深",
+          name: "指数",
           type: 1
         },
+
         {
           name: "科创",
           type: 2
@@ -152,40 +384,213 @@
         }
       ],
       tabsItemIndex: 0,
-      listArr: []
+      listArr: [],
+      listArrs: [],
     };
   },
-  mounted() {
-    this.getListMarket();
+  
+  created() {
+    if(this.$route.query.type==1){
+      //选中sousuo输入框
+      this.$nextTick(() => {
+        this.$refs.search.focus();
+      })
+    }
+    
+    
+  },
 
+  mounted() {
+    this.loading=true;
+    this.getStock();
+    this.isToken = window.localStorage.getItem('USERTOKEN')
+    this.getUserInfo()
+    this.getIndexSettingInfo()
+    this.getSettingInfo()
+    this.getFuturesSetting()
   },
   methods: {
+    onLoad() {
+      this.pageNum++;
+      // 异步更新数据
+      // setTimeout 仅做示例,真实场景中一般为 ajax 请求
+      switch (this.tabsItemIndex) {
+        case 1:
+          this.loading = true;
+          this.getListMarket();
+          break;
+        case 0:
+          this.stockPlate = "";
+          this.loading = true;
+          this.getStock();
+          break;
+        case 2:
+          this.stockPlate = "科创";
+          this.loading = true;
+          this.getStocks();
+          break;
+        case 3:
+          this.loading = true;
+          this.getFutures();
+          break;
+      }
+
+      // 加载状态结束
+      // this.loading = false;
+
+      // 数据全部加载完成
+      // if (this.list.length >= 40) {
+      //   this.finished = true;
+      // }
+    },
+    gpinput() {
+      this.pageNum = 1;
+      this.listArr = [];
+      this.loading = true;
+      this.finished = false;
+      switch (this.tabsItemIndex) {
+            case 1:
+              
+              this.getListMarket();
+              break;
+            case 0:
+              this.stockPlate = "";
+              
+              this.getStock();
+              break;
+            case 2:
+              this.stockPlate = "科创";
+              
+              this.getStocks();
+              break;
+            case 3:
+              
+              this.getFutures();
+              break;
+          }
+    },
+    gpinputs() {
+      this.pageNums= 1;
+      this.listArrs = [];
+      this.loadings = true;
+      this.finisheds = false;
+      this.getMyList();
+    },
+    onLoads() {
+      this.pageNums++;
+      this.loadings = true;
+      this.getMyList();
+    },
     closeAlert() {
       this.alertShow = false;
     },
+    async getUserInfo() {
+      // 获取用户信息
+      //   let showcookie = this.getCookie('USER_TOKEN');
+      let data = await api.getUserInfo()
+      if (data.status === 0) {
+        // this.getProductSetting()
+        this.$store.state.userInfo = data.data
+      } else {
+        Toast(data.msg)
+      }
+      this.$store.state.user = this.user
+    },
+    async getIndexSettingInfo() {
+      // 网站设置信息 指数
+      let data = await api.getIndexSetting()
+      if (data.status === 0) {
+        // 成功
+        this.indexSettingInfo = data.data
+      } else {
+        Toast(data.msg)
+      }
+    },
+    async getFuturesSetting() {
+      // 网站设置信息 期货
+      let data = await api.getFuturesSetting()
+      if (data.status === 0) {
+        // 成功
+        this.futuresSettingInfo = data.data
+      } else {
+        Toast(data.msg)
+      }
+    },
+    async getSettingInfo() {
+      let data = await api.getSetting()
+      if (data.status === 0) {
+        // 成功
+        this.settingInfo = data.data
+      } else {
+        Toast(data.msg)
+      }
+    },
     async getListMarket() {
-
+      let val = {
+        pageNum: this.pageNum,
+        pageSize: 15,
+        
+      };
       // 获取指数列表
-      let result = await api.getListMarket()
+      let result = await api.getListMarket(val)
+      this.loading = false;
       if (result.status === 0) {
-        this.listArr = result.data
+       
+        if (this.tabsItemIndex == 1) {
+          this.listArr = result.data
+          this.finished = true;
+        }
+       
       } else {
         this.texts = result.msg;
         this.alertShow = true;
       }
     },
     async getStock() {
+      //沪深
       let opt = {
         pageNum: this.pageNum,
         pageSize: 15,
         stockPlate: this.stockPlate,
+        keyWords:this.gpcode,
       }
-      let data = await api.getListMarket(opt)
+      let data = await api.getStock(opt)
+      this.loading = false;
       if (data.status === 0) {
 
-        data.data.forEach(element => {
-          this.listArr.push(element)
-        })
+        if (data.data.list.length < 15) {
+          this.finished = true;
+        }
+        if (this.tabsItemIndex == 0) {
+          data.data.list.forEach(element => {
+            this.listArr.push(element)
+          })
+        }
+      } else {
+        this.texts = data.msg;
+        this.alertShow = true;
+      }
+    },
+    async getStocks() {
+      //科创
+      let opt = {
+        pageNum: this.pageNum,
+        pageSize: 15,
+        stockPlate: this.stockPlate,
+        keyWords:this.gpcode,
+      }
+      let data = await api.getStock(opt)
+      this.loading = false;
+      if (data.status === 0) {
+
+        if (data.data.list.length < 15) {
+          this.finished = true;
+        }
+        if (this.tabsItemIndex == 2) {
+          data.data.list.forEach(element => {
+            this.listArr.push(element)
+          })
+        }
       } else {
         this.texts = data.msg;
         this.alertShow = true;
@@ -198,37 +603,78 @@
         pageNum: this.pageNum,
         pageSize: 15
       }
-      let data = await api.getHomeFutures(opt)
+      let data = await api.getListFutures(opt)
+      this.loading = false;
+      if (data.data.length < 15) {
+        this.finished = true;
+      }
       if (data.status === 0) {
-        console.log(this.tabsItemIndex)
-        this.listArr = data.data
-        console.log("期货", this.listArr)
+        if (this.tabsItemIndex == 3) {
+          data.data.forEach(element => {
+            this.listArr.push(element)
+          })
+        }
       } else {
         this.texts = data.msg;
         this.alertShow = true;
       }
     },
+    async getMyList() {
+      this.loadings = true;
+      //获取自选列表
+      let opt = {
+        pageNum: this.pageNums,
+        pageSize: 15,
+        keyWords:this.gpcodes,
+      }
+      let data = await api.getMyList(opt)
+      this.loadings = false;
+      if (data.status == 0) {
+        data.data.list.forEach(element => {
+          this.listArrs.push(element)
+        })
+      }
+      if (data.data.list.length < 15) {
+        this.finisheds = true;
+      }
+    },
     handleTabsClick(item, index) {
       if (index == 0) {
-        this.$refs['topTitle'].style.height = '1.2821rem'
-        setTimeout(() => {
-          this.dialogFlag = false;
+        if (this.dialogFlag) {
+          this.$refs['topTitle'].style.height = '1.2821rem'
+          setTimeout(() => {
+            this.dialogFlag = false;
+
+            this.listArrs = [];
+            this.pageNums = 1;
+            this.finisheds = false;
+            this.tabsIndex = index;
+            this.getMyList();
+
+          }, 800);
+        } else {
+          this.listArrs = [];
+          this.pageNums = 1;
+          this.finisheds = false;
           this.tabsIndex = index;
-        }, 800);
+          this.getMyList();
+
+        }
       } else {
         this.tabsIndex = index;
       }
-
-
     },
     handleTabsItem(item, index) {
       this.tabsItemIndex = index;
+      this.pageNum = 1;
+      this.finished = false;
+      this.loading = true;
       switch (item.type) {
-        case 0:
+        case 1:
           this.listArr = [];
           this.getListMarket();
           break;
-        case 1:
+        case 0:
           this.stockPlate = ""
           this.listArr = [];
           this.getStock();
@@ -236,7 +682,7 @@
         case 2:
           this.stockPlate = "科创"
           this.listArr = [];
-          this.getStock();
+          this.getStocks();
           break;
         case 3:
           this.listArr = [];
@@ -244,12 +690,130 @@
           break;
       }
     },
+    async options(val) {
+      var codes = "";
+      switch (this.tabsItemIndex) {
+        case 0:
+          codes = val.code;
+          break;
+        case 1:
+          codes = val.indexGid;
+          break;
+        case 2:
+          codes = val.code;
+          break;
+        case 3:
+          codes = val.futuresGid;
+          break;
+        default:
+          break;
+      }
+      if (val.isOption == '1') {
+        let data = await api.delOption({ code: codes })
+        if (data.status === 0) {
+          switch (this.tabsItemIndex) {
+            case 1:
+              this.pageNum = 1;
+              this.listArr = [];
+              this.loading = true;
+              this.finished = false;
+              this.getListMarket();
+              break;
+            case 0:
+              this.stockPlate = "";
+              this.pageNum = 1;
+              this.loading = true;
+              this.listArr = [];
+              this.finished = false;
+              this.getStock();
+              break;
+            case 2:
+              this.stockPlate = "科创";
+              this.pageNum = 1;
+              this.loading = true;
+              this.listArr = [];
+              this.finished = false;
+              this.getStocks();
+              break;
+            case 3:
+              this.listArr = [];
+              this.loading = true;
+              this.pageNum = 1;
+              this.finished = false;
+              this.getFutures();
+              break;
+          }
+          this.refreshList()
+        } else {
+          console.log(data.msg)
+        }
+      } else {
+        let data = await api.addOption({ code: codes });
+        if (data.status === 0) {
+          switch (this.tabsItemIndex) {
+            case 1:
+              this.listArr = [];
+              this.pageNum = 1;
+              this.finished = false;
+              this.getListMarket();
+              break;
+            case 0:
+              this.stockPlate = ""
+              this.pageNum = 1;
+              this.finished = false;
+              this.listArr = [];
+              this.getStock();
+              break;
+            case 2:
+              this.stockPlate = "科创"
+              this.pageNum = 1;
+              this.finished = false;
+              this.listArr = [];
+              this.getStocks();
+              break;
+            case 3:
+              this.listArr = [];
+              this.pageNum = 1;
+              this.finished = false;
+              this.getFutures();
+              break;
+          }
+        } else {
+          console.log(data.msg)
+        }
+      }
+    },
+    async optionszx(val) {
+      
+        let data = await api.delOption({ code: val.stockGid })
+        if (data.status === 0) {
+          this.listArrs = [];
+          this.pageNums = 1;
+          this.finisheds = false;
+          this.getMyList()
+        } else {
+          console.log(data.msg)
+        }
+      
+    },
+    async refreshList() {
+      // 刷新指数
+      if (this.loading) {
+        return
+      }
+      let opt = {
+        pageNum: 1,
+        pageSize: this.currentNum
+      }
+      let data = await api.getListMarket(opt)
+      this.list = data.data
+    },
     handleCollectionClick(item) {
       item.collection = !item.collection;
     },
     openDialog() {
       if (!this.dialogFlag) {
-        this.$refs['topTitle'].style.height = '7rem'
+        this.$refs['topTitle'].style.height = '6.9rem'
       } else {
         this.$refs['topTitle'].style.height = '1.2821rem'
       }
@@ -314,7 +878,7 @@
     align-items: center;
     justify-content: center;
     padding: 0 0.3rem;
-
+    position: relative;
     .search_content {
       width: 100%;
       height: 90%;
@@ -373,7 +937,9 @@
   background: #fff;
   top: 0;
   z-index: 9999999;
-  transition: all 1s;
+  transition: all 0.5s;
+  overflow: hidden;
+  border-radius: 0 0 0.2rem 0.2rem;
 
   >div {
     width: 100%;
@@ -384,7 +950,7 @@
   }
 
   .tabs_title {
-    width: 23%;
+    width: 26%;
     height: 100%;
     display: flex;
   }
@@ -500,12 +1066,13 @@
 
 .list {
   width: 100%;
-  height: calc(100% - 1.2821rem - 1rem - 1.1538rem - 1.3333rem);
+
   overflow-x: auto;
   padding-bottom: 1.2821rem;
   padding: 0 0.3rem;
 
   .list_items {
+    margin-top: -0.5rem;
     width: 100%;
 
     >div {
@@ -552,7 +1119,7 @@
 .list_title {
   width: 100%;
   height: 1rem;
-  margin-top: 1.29rem;
+  margin-top: .29rem;
   padding: 0 0.3rem;
   color: #a1a2a4;
   display: flex;
@@ -576,7 +1143,7 @@
 }
 
 .price_color {
-  color: rgb(39, 171, 99);
+  //color: rgb(39, 171, 99);
   font-size: 0.4rem;
   font-weight: 600;
 }
@@ -636,7 +1203,7 @@
     height: 70%;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+   
 
     .left {
       width: 0.8rem;
@@ -648,7 +1215,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-left: 0.3rem;
+
 
       span {
         display: inline-block;
@@ -658,14 +1225,18 @@
     }
 
     .right {
-      width: calc(100% - 1.2rem);
+      width: auto;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: flex-end;
-
+      white-space: nowrap;
+      margin-left: 0.1rem;
+      margin-right: 0.1rem;
+      min-width: 1.9rem;
       span {
         font-weight: 600;
+        text-align: right;
       }
     }
   }
@@ -679,7 +1250,7 @@
     color: #acaeaf;
     transform: scale(0.9);
     margin-left: 0.2rem;
-    padding-right: 0.48rem;
+    padding-right: 0.68rem;
   }
 }
 
@@ -723,4 +1294,93 @@
 .shai.open {
   top: 4%;
 }
+
+.cards {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.card_item {
+  width: 48%;
+  height: 1.5385rem;
+  background: #f6f6f7;
+  border-radius: .2rem;
+  margin-top: 0.2rem;
+
+  .tops_title {
+    width: 100%;
+    height: 40%;
+    display: flex;
+    align-items: flex-end;
+    padding-left: .5rem;
+  }
+
+  .bottom_price {
+    width: 100%;
+    height: 60%;
+    display: flex;
+    align-items: center;
+    padding-left: .5rem;
+
+    span {
+      font-weight: 600;
+    }
+  }
+
+}
+
+.shublue {
+  background: #0263e2 !important;
+}
+
+.xuanz {
+  //旋转
+  transform: rotate(180deg);
+  transition: all 0.5s;
+}
+
+.red {
+  color: #ff0000;
+}
+
+.green {
+  color: #27ab63;
+}
+
+.mrt {
+  margin-right: 0.35rem;
+}
+
+.codeIcon {
+  width: 0.6rem;
+  height: 0.6rem;
+  background-color: #0263e2;
+  color: #fff;
+
+  border-radius: 0.05rem;
+  margin-left: 0.1rem;
+  //缩放
+  transform: scale(0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.listHeight {
+  height: calc(100% - 1.2821rem - 1rem - 1.1538rem - 1.3333rem);
+}
+
+.listHeights {
+  height: calc(100% - 1rem - 1.1538rem - 1.3333rem);
+}
+
+.zxlist {
+  height: calc(100% - 1rem - 1rem);
+  padding-bottom: 0.2rem;
+}
+
+/deep/.van-list__loading {
+  margin-top: 0.2rem;
+}
 </style>
\ No newline at end of file

--
Gitblit v1.9.3