li.shaoyi 3 years ago
parent
commit
a7a6c2cd3e

+ 226 - 284
src/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/components/post_buying/index.vue

@@ -1,13 +1,6 @@
 <template>
   <!-- 挂牌求购 -->
-  <a-drawer
-    placement="right"
-    :closable="false"
-    :visible="visible"
-    :width="1052"
-    :destroyOnClose="true"
-    class="post-buying-container"
-  >
+  <a-drawer placement="right" :closable="false" :visible="visible" :width="1052" :destroyOnClose="true" class="post-buying-container">
     <div class="collapse">
       <div class="collapse-close" @click="cancelAction">
         <DoubleRightOutlined />
@@ -32,47 +25,32 @@
                 <div class="content--right">{{ selectedRow.goodsname }}</div>
               </div>
               <div class="chart-tips__last">
-                <div
-                  :class="['content--left', handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')]"
-                >{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</div>
+                <div :class="['content--left', handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')]">{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</div>
                 <div class="content--right">
-                  <span
-                    :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')"
-                  >{{ quoteChange_out(selectedRow.refgoodscode) }}</span>
-                  <span
-                    :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')"
-                  >{{ quoteAmplitude_out(selectedRow.refgoodscode) }}</span>
+                  <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')">{{ quoteChange_out(selectedRow.refgoodscode) }}</span>
+                  <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')">{{ quoteAmplitude_out(selectedRow.refgoodscode) }}</span>
                 </div>
               </div>
               <a-row>
                 <a-col :span="4" :offset="2">最高价</a-col>
                 <a-col :span="6">
-                  <span
-                    :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'highest')"
-                  >{{ getQuoteValue_out(selectedRow.refgoodscode, 'highest') }}</span>
+                  <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'highest')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'highest') }}</span>
                 </a-col>
                 <a-col :span="4" :offset="2">开盘价</a-col>
                 <a-col :span="6">
-                  <span
-                    :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'opened')"
-                  >{{ getQuoteValue_out(selectedRow.refgoodscode, 'opened') }}</span>
+                  <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'opened')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'opened') }}</span>
                 </a-col>
               </a-row>
               <a-row>
                 <a-col :span="4" :offset="2">最低价</a-col>
                 <a-col :span="6">
-                  <span
-                    :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'lowest')"
-                  >{{ getQuoteValue_out(selectedRow.refgoodscode, 'lowest') }}</span>
+                  <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'lowest')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'lowest') }}</span>
                 </a-col>
                 <a-col :span="4" :offset="2">昨结价</a-col>
                 <a-col :span="6">{{ getQuoteValue_out(selectedRow.refgoodscode, 'presettle') }}</a-col>
               </a-row>
               <div class="chart-content">
-                <Chart
-                  :selectedRow="getQuoteDayInfoByCode(selectedRow.refgoodscode)"
-                  :showExchange="false"
-                />
+                <Chart :selectedRow="getQuoteDayInfoByCode(selectedRow.refgoodscode)" :showExchange="false" />
               </div>
             </div>
           </a-col>
@@ -83,17 +61,8 @@
                   <a-row :gutter="24">
                     <a-col :span="24">
                       <a-form-item label="贸易账户" name="accountid">
-                        <a-select
-                          class="inlineFormSelect"
-                          style="width: 260px"
-                          v-model:value="formState.accountid"
-                          placeholder="请选择"
-                        >
-                          <a-select-option
-                            v-for="item in accountList"
-                            :value="item.accountid"
-                            :key="item.accountid"
-                          >{{ item.accountid }}</a-select-option>
+                        <a-select class="inlineFormSelect" style="width: 260px" v-model:value="formState.accountid" placeholder="请选择">
+                          <a-select-option v-for="item in accountList" :value="item.accountid" :key="item.accountid">{{ item.accountid }}</a-select-option>
                         </a-select>
                       </a-form-item>
                     </a-col>
@@ -109,30 +78,19 @@
                     </a-col>
                     <a-col :span="24">
                       <a-form-item label="参考价">
-                        <span
-                          :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')"
-                        >{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</span>
+                        <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</span>
                       </a-form-item>
                     </a-col>
                     <a-col :span="24" v-if="!isFloat()">
                       <a-form-item label="挂牌价格" name="FixedPrice" class="inputIconBox">
-                        <a-input-number
-                          class="commonInput"
-                          style="width: 260px"
-                          :min="0"
-                          v-model:value="formState.FixedPrice"
-                        />
+                        <a-input-number class="commonInput" style="width: 260px" :min="0" v-model:value="formState.FixedPrice" />
                         <MinusOutlined @click="decreasePrice" />
                         <PlusOutlined @click="increasePrice" />
                       </a-form-item>
                     </a-col>
                     <a-col :span="24" v-else>
                       <a-form-item label="点差" name="PriceMove">
-                        <a-input-number
-                          class="commonInput"
-                          style="width: 260px"
-                          v-model:value="formState.PriceMove"
-                        />
+                        <a-input-number class="commonInput" style="width: 260px" v-model:value="formState.PriceMove" />
                       </a-form-item>
                     </a-col>
                     <a-col :span="24" v-if="isFloat()">
@@ -143,13 +101,7 @@
 
                     <a-col :span="24">
                       <a-form-item label="挂牌数量" name="OrderQty" class="inputIconBox">
-                        <a-input-number
-                          class="commonInput"
-                          style="width: 260px"
-                          :min="0"
-                          :max="getMaxNum()"
-                          v-model:value="formState.OrderQty"
-                        />
+                        <a-input-number class="commonInput" style="width: 260px" :min="0" :max="getMaxNum()" v-model:value="formState.OrderQty" />
                         <MinusOutlined @click="decreaseNum" />
                         <PlusOutlined @click="increaseNum" />
                         <span class="input-enumdicname">{{ selected.enumdicname }}</span>
@@ -157,12 +109,7 @@
                     </a-col>
                     <a-col :span="24" class="mt-10">
                       <a-form-item>
-                        <a-slider
-                          :min="0"
-                          v-model:value="formState.OrderQty"
-                          :max="getMaxNum()"
-                          class="formSlider"
-                        />
+                        <a-slider :min="0" v-model:value="formState.OrderQty" :max="getMaxNum()" class="formSlider" />
                         <div class="unit">
                           <span>{{ getMaxNum() ? selected.minivalue : 0 }}</span>
                           <span>{{ getMaxNum() }}{{ selected.enumdicname }}</span>
@@ -189,12 +136,7 @@
                 <a-row :gutter="24">
                   <a-col :span="24" class="fixedBtns">
                     <a-form-item class="btnCenter">
-                      <a-button
-                        class="listedBtn"
-                        :loading="loading"
-                        :disabled="loading"
-                        @click="submit"
-                      >{{ isBuy() ? '买入' : '卖出' }}</a-button>
+                      <a-button class="listedBtn" :loading="loading" :disabled="loading" @click="submit">{{ isBuy() ? '买入' : '卖出' }}</a-button>
                       <a-button class="ml10 cancelBtn" @click="cancel">取消</a-button>
                     </a-form-item>
                   </a-col>
@@ -426,267 +368,267 @@ export default defineComponent({
 
 <style lang="less">
 .post-buying-container {
-  top: 101px;
-  .ant-drawer-content-wrapper {
-    height: 605px;
-  }
+    top: 101px;
+    .ant-drawer-content-wrapper {
+        height: 510px;
+    }
 }
 .chart-content {
-  height: 400px;
+    height: 305px;
+
+    .chart-content__header,
+    .chart-content__main {
+        width: 90% !important;
+        margin: auto !important;
+    }
 
-  .chart-content__header,
-  .chart-content__main {
-    width: 90% !important;
-    margin: auto !important;
-  }
+    .chart-slider {
+        display: none;
+    }
 
-  .chart-slider {
-    display: none;
-  }
+    .chart-container {
+        height: 100%;
+    }
 }
 .formBar {
-  height: 100%;
-  max-height: 100%;
+    height: 100%;
 }
 .post_buying_chart {
-  [theme="light"] & {
-    --bgcolor: #fff;
-    --tab-border-color: #dae5ec;
-    --tab-checked-color: #0866b8;
-    --tab-checked-bgcolor: #d4e0ff;
-    --slider-border-color: #b2c4dd;
-    --slider-bgcolor: #edf2f7;
-    --slider-button-color: #b2c4dd;
-    --row-border-color: #dae5ec;
-    --row-title-color: #acb8c0;
-    --row-content-color: #3c454b;
-    --tik-title-bgcolor: #ecf2f5;
-    --tik-title-color: #7a8a94;
-  }
-  color: @m-grey67;
+    [theme='light'] & {
+        --bgcolor: #fff;
+        --tab-border-color: #dae5ec;
+        --tab-checked-color: #0866b8;
+        --tab-checked-bgcolor: #d4e0ff;
+        --slider-border-color: #b2c4dd;
+        --slider-bgcolor: #edf2f7;
+        --slider-button-color: #b2c4dd;
+        --row-border-color: #dae5ec;
+        --row-title-color: #acb8c0;
+        --row-content-color: #3c454b;
+        --tik-title-bgcolor: #ecf2f5;
+        --tik-title-color: #7a8a94;
+    }
+    color: @m-grey67;
 
-  // background-color: var(--bgcolor, #0e0e0f);
+    // background-color: var(--bgcolor, #0e0e0f);
 
-  // background: @m-blue37;
-  // color: @m-grey67;
-  .buying_chart {
-    display: flex;
+    // background: @m-blue37;
+    // color: @m-grey67;
+    .buying_chart {
+        display: flex;
 
-    // background-color: @m-blue36;
-    &__nav {
-      display: flex;
-      justify-content: center;
-      align-items: center;
+        // background-color: @m-blue36;
+        &__nav {
+            display: flex;
+            justify-content: center;
+            align-items: center;
 
-      .content {
-        &:first-child:not(:last-child) {
-          margin-right: 16px;
-        }
+            .content {
+                &:first-child:not(:last-child) {
+                    margin-right: 16px;
+                }
 
-        &--left {
-          font-size: 16px;
-          color: var(--row-content-color, #acb8c0);
-          margin-right: 6px;
-        }
+                &--left {
+                    font-size: 16px;
+                    color: var(--row-content-color, #acb8c0);
+                    margin-right: 6px;
+                }
 
-        &--right {
-          font-size: 24px;
-          color: #fc9618;
+                &--right {
+                    font-size: 24px;
+                    color: #fc9618;
+                }
+            }
         }
-      }
     }
-  }
-  .chart-tips {
-    display: flex;
-    flex-direction: column;
-    width: 300px;
-    height: 100%;
+    .chart-tips {
+        display: flex;
+        flex-direction: column;
+        width: 300px;
+        height: 100%;
 
-    &__last {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 16px 0;
-      .content {
-        &--left {
-          font-size: 24px;
-          margin-right: 16px;
-        }
+        &__last {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 16px 0;
+            .content {
+                &--left {
+                    font-size: 24px;
+                    margin-right: 16px;
+                }
 
-        &--right {
-          display: flex;
-          flex-direction: column;
-          align-items: flex-start;
+                &--right {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: flex-start;
+                }
+            }
         }
-      }
     }
-  }
 }
 .post_buying {
-  width: 100%;
-  height: 100%;
-  .flex;
-  flex-direction: column;
-  position: relative;
-  overflow: hidden;
-
-  .ant-form {
-    height: 100%;
-  }
-  .condition {
     width: 100%;
-    height: 48px;
-    margin: 0 16px;
-    padding: 10px 0;
-    border-bottom: 1px solid @m-black6;
-    .inlineflex;
-    .conditionBtn {
-      align-self: center;
-      align-items: center;
-      border: 0;
-      min-width: 80px;
-      height: 28px;
-      line-height: 28px;
-      background: @m-black7;
-      .rounded-corners(3px);
-      font-size: 14px;
-      color: @m-blue0;
-      &:hover {
-        background: @m-black7-hover;
-        color: @m-blue0-hover;
-      }
+    height: 100%;
+    .flex;
+    flex-direction: column;
+    position: relative;
+    overflow: hidden;
+
+    .ant-form {
+        height: 100%;
+    }
+
+    .ant-form.dialogForm .ant-row.ant-form-item {
+        margin-bottom: 10px;
     }
-    .conditionBtn + .conditionBtn {
-      margin-left: 10px;
+    .condition {
+        width: 100%;
+        height: 48px;
+        margin: 0 16px;
+        padding: 10px 0;
+        border-bottom: 1px solid @m-black6;
+        .inlineflex;
+        .conditionBtn {
+            align-self: center;
+            align-items: center;
+            border: 0;
+            min-width: 80px;
+            height: 28px;
+            line-height: 28px;
+            background: @m-black7;
+            .rounded-corners(3px);
+            font-size: 14px;
+            color: @m-blue0;
+            &:hover {
+                background: @m-black7-hover;
+                color: @m-blue0-hover;
+            }
+        }
+        .conditionBtn + .conditionBtn {
+            margin-left: 10px;
+        }
     }
-  }
 }
 .title_right {
-  color: @m-blue25;
-  position: absolute;
-  top: 8px;
-  right: 19px;
-  cursor: pointer;
-  display: flex;
-  .tline {
-    width: 1px;
-    height: 18px;
-    background: @m-black47;
-    margin-top: 2px;
-    box-shadow: 1px 0px 0px 0px @m-black48;
-  }
-  .icon {
-    font-size: 16px;
-    height: 16px;
-    line-height: 16px;
-    margin: 3px 7px 3px 17px;
-    fill: @m-blue25;
-  }
-  span {
-    font-size: 14px;
-    font-family: Adobe Heiti Std;
-    font-weight: normal;
-  }
+    color: @m-blue25;
+    position: absolute;
+    top: 8px;
+    right: 19px;
+    cursor: pointer;
+    display: flex;
+    .tline {
+        width: 1px;
+        height: 18px;
+        background: @m-black47;
+        margin-top: 2px;
+        box-shadow: 1px 0px 0px 0px @m-black48;
+    }
+    .icon {
+        font-size: 16px;
+        height: 16px;
+        line-height: 16px;
+        margin: 3px 7px 3px 17px;
+        fill: @m-blue25;
+    }
+    span {
+        font-size: 14px;
+        font-family: Adobe Heiti Std;
+        font-weight: normal;
+    }
 }
 .unit {
-  margin-left: 70px;
-  width: 260px;
-  .flex;
-  justify-content: space-between;
-  font-size: 14px;
-  color: @m-grey41;
-  height: 14px;
-  line-height: 14px;
+    margin-left: 70px;
+    width: 260px;
+    .flex;
+    justify-content: space-between;
+    font-size: 14px;
+    color: @m-grey41;
+    height: 14px;
+    line-height: 14px;
 }
 .listedBtn {
-  width: 120px;
-  height: 30px;
-  line-height: 30px;
-  background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
-  border-radius: 3px;
-  color: @m-white0;
-  font-size: 14px;
-  text-align: center;
-  border: 0;
-  &:hover {
-    background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
-    color: @m-white0-hover;
-  }
+    width: 120px;
+    height: 30px;
+    line-height: 30px;
+    background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
+    border-radius: 3px;
+    color: @m-white0;
+    font-size: 14px;
+    text-align: center;
+    border: 0;
+    &:hover {
+        background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
+        color: @m-white0-hover;
+    }
 }
 .cancelBtn:extend(.listedBtn) {
-  background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%) !important;
-  &:hover {
-    background: linear-gradient(
-      0deg,
-      @m-grey12-hover 0%,
-      @m-grey13-hover 100%
-    ) !important;
-    color: @m-white0-hover;
-  }
+    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%) !important;
+    &:hover {
+        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%) !important;
+        color: @m-white0-hover;
+    }
 }
 .ml10 {
-  margin-left: 10px;
-}
-.ant-form.dialogForm .ant-row.ant-form-item {
-  margin-bottom: 14px;
+    margin-left: 10px;
 }
 .mt20 {
-  margin-top: 20px;
+    margin-top: 20px;
 }
 .mt-10 {
-  margin-top: -10px;
+    margin-top: -10px;
 }
 .ant-input-suffix {
-  position: absolute;
-  right: -25px;
+    position: absolute;
+    right: -25px;
 }
 .minusBtn,
 .plusBtn {
-  width: 15px;
-  height: 32px;
-  line-height: 32px;
-  font-size: 15px;
-  color: @m-blue15;
-  cursor: pointer;
+    width: 15px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 15px;
+    color: @m-blue15;
+    cursor: pointer;
 }
 .minusBtn {
-  position: absolute;
-  top: -6px;
-  left: 14px;
-  z-index: 1;
+    position: absolute;
+    top: -6px;
+    left: 14px;
+    z-index: 1;
 }
 .plusBtn {
-  position: absolute;
-  top: -6px;
-  right: 14px;
-  z-index: 1;
+    position: absolute;
+    top: -6px;
+    right: 14px;
+    z-index: 1;
 }
 .stepper {
-  padding-left: 30px;
-  padding-right: 30px;
-  text-align: center;
-  color: @m-yellow1;
-  font-size: 16px;
+    padding-left: 30px;
+    padding-right: 30px;
+    text-align: center;
+    color: @m-yellow1;
+    font-size: 16px;
 }
 .ant-slider.formSlider {
-  width: 260px !important;
-  margin-left: 70px;
-  .ant-slider-rail {
-    margin-right: 0;
-    padding-right: 0;
-    height: 3px !important;
-    border-radius: 2px !important;
-    background-color: @m-blue14;
-  }
-  .ant-slider-track {
-    height: 3px;
-    background-color: @m-blue0;
-  }
-  .ant-slider-step {
-    height: 3px;
-  }
-  .ant-progress-text {
-    display: none;
-  }
+    width: 260px !important;
+    margin-left: 70px;
+    .ant-slider-rail {
+        margin-right: 0;
+        padding-right: 0;
+        height: 3px !important;
+        border-radius: 2px !important;
+        background-color: @m-blue14;
+    }
+    .ant-slider-track {
+        height: 3px;
+        background-color: @m-blue0;
+    }
+    .ant-slider-step {
+        height: 3px;
+    }
+    .ant-progress-text {
+        display: none;
+    }
 }
 </style>