修改 图表是否显示交易按钮

src/views/market/futures/index.vue

@@ -27,6 +27,7 @@
     :is="componentId"
     v-if="componentId"
     :selectedRow="selectedRow"
+    :isShowTrade="true"
     @cancel="closeComponent"
   ></component>
 </template>

src/views/market/market-spot/goods-chart/index.vue

@@ -12,12 +12,20 @@
       <div class="inlineBar">
         <div class="valNums bdf1 ml10">
           <!-- 最新价 -->
-          <div class="firstNum start" :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ selectedRow.last }}</div>
+          <div
+            class="firstNum start"
+            :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"
+          >{{ selectedRow.last }}</div>
           <div class="lastNum start">
             <!-- 涨跌值 -->
-            <div :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteChange(selectedRow, selectedRow.decimalplace) }}</div>
+            <div
+              :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"
+            >{{ quoteChange(selectedRow, selectedRow.decimalplace) }}</div>
             <!-- 涨跌幅 -->
-            <div class="ml20" :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteAmplitude(selectedRow, selectedRow.decimalplace) }}</div>
+            <div
+              class="ml20"
+              :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"
+            >{{ quoteAmplitude(selectedRow, selectedRow.decimalplace) }}</div>
           </div>
         </div>
         <div class="priceBar ml20">
@@ -25,11 +33,17 @@
             <div class="greenBar">
               <div class="numBlock ml15">
                 <div class="first grey">卖价</div>
-                <div class="last" :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)">{{ selectedRow.ask }}</div>
+                <div
+                  class="last"
+                  :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)"
+                >{{ selectedRow.ask }}</div>
               </div>
               <div class="numBlock">
                 <div class="first grey">卖量</div>
-                <div class="last" :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)">{{ selectedRow.askvolume }}</div>
+                <div
+                  class="last"
+                  :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)"
+                >{{ selectedRow.askvolume }}</div>
               </div>
             </div>
           </div>
@@ -37,25 +51,43 @@
             <div class="redBar">
               <div class="numBlock">
                 <div class="first grey">买价</div>
-                <div class="last" :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)">{{ selectedRow.bid }}</div>
+                <div
+                  class="last"
+                  :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)"
+                >{{ selectedRow.bid }}</div>
               </div>
               <div class="numBlock">
                 <div class="first grey">买量</div>
-                <div class="last" :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)">{{ selectedRow.bidvolume }}</div>
+                <div
+                  class="last"
+                  :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)"
+                >{{ selectedRow.bidvolume }}</div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="btn-list">
+      <div class="btn-list" v-if="isShowTrade">
         <a-button class="operBtn" @click="openComponent({ code: 'trade' })">交易</a-button>
       </div>
     </div>
     <!-- 交易图表 -->
-    <Chart v-if="showComponentsId === ComponentType.chart" @update="changeComponent" :selectedRow="selectedRow" />
+    <Chart
+      v-if="showComponentsId === ComponentType.chart"
+      @update="changeComponent"
+      :selectedRow="selectedRow"
+    />
     <!-- 成交明细 -->
-    <StockExchange :selectedRow="selectedRow" v-if="showComponentsId === ComponentType.tradeDetail" />
-    <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"></component>
+    <StockExchange
+      :selectedRow="selectedRow"
+      v-if="showComponentsId === ComponentType.tradeDetail"
+    />
+    <component
+      :is="componentId"
+      v-if="componentId"
+      :selectedRow="selectedRow"
+      @cancel="closeComponent"
+    ></component>
   </div>
 </template>
 
@@ -79,6 +111,10 @@ export default defineComponent({
       type: Object as PropType<QueryQuoteDayRsp>,
       default: () => ({}),
     },
+    isShowTrade: {
+      type: Boolean,
+      default: false,
+    }
   },
   components: {
     Chart,
@@ -127,37 +163,37 @@ export default defineComponent({
 </script>
 <style lang="less">
 .valNums {
-    .flex;
-    flex-direction: column;
-    padding-left: 20px;
-    .firstNum {
-        font-size: 18px;
-        line-height: 18px;
-        font-weight: 400;
-    }
-    .lastNum {
-        margin-top: 2px;
-        display: inline-flex;
-        font-size: 12px;
-        line-height: 12px;
-        font-weight: 300;
-    }
+  .flex;
+  flex-direction: column;
+  padding-left: 20px;
+  .firstNum {
+    font-size: 18px;
+    line-height: 18px;
+    font-weight: 400;
+  }
+  .lastNum {
+    margin-top: 2px;
+    display: inline-flex;
+    font-size: 12px;
+    line-height: 12px;
+    font-weight: 300;
+  }
 }
 .inlineBar {
-    display: inline-flex;
+  display: inline-flex;
 }
 .priceBar {
-    .flex;
-    flex-direction: column;
-    height: 32px;
-    .greenBar,
-    .redBar {
-        height: 16px;
-        line-height: 16px;
-    }
+  .flex;
+  flex-direction: column;
+  height: 32px;
+  .greenBar,
+  .redBar {
+    height: 16px;
+    line-height: 16px;
+  }
 }
 .start {
-    align-self: flex-start !important;
-    align-items: flex-start !important;
+  align-self: flex-start !important;
+  align-items: flex-start !important;
 }
 </style>