huangbin 4 anos atrás
pai
commit
49a73848b4

+ 19 - 15
src/common/components/drawer/index.vue

@@ -1,19 +1,23 @@
 <template>
-    <div class="drawer">
-        <a-drawer :placement="placement" :closable="false" :visible="visible" class="bottomListed">
-            <!-- 摘牌是top  挂牌是bottom 期货交易是tradeDialog -->
-            <div class="collapse" @click="cancel"></div>
-            <div class="collapseCont">
-                <!-- <div class="title">{{ title }}</div> -->
-                <div class="content highContent">
-                    <!-- <Listed></Listed> -->
-                    <!-- <Delisting></Delisting> -->
-                    <slot></slot>
-                    <!-- <Trade></Trade> -->
-                </div>
-            </div>
-        </a-drawer>
-    </div>
+  <div class="drawer">
+    <a-drawer :placement="placement"
+              :closable="false"
+              :visible="visible"
+              class="bottomListed">
+      <!-- 摘牌是top  挂牌是bottom 期货交易是tradeDialog -->
+      <div class="collapse"
+           @click="cancel"></div>
+      <div class="collapseCont">
+        <div class="title">{{ title }}</div>
+        <div class="content highContent">
+          <!-- <Listed></Listed> -->
+          <!-- <Delisting></Delisting> -->
+          <slot></slot>
+          <!-- <Trade></Trade> -->
+        </div>
+      </div>
+    </a-drawer>
+  </div>
 </template>
 
 <script lang="ts">

+ 117 - 33
src/views/market/spot_trade/components/detail/index.vue

@@ -1,57 +1,141 @@
 <template>
-  <!-- 详情-->
-  <a-modal class="add-custom custom-detail"
-           title="详情"
-           centered
-           v-model:visible="visible"
-           :maskClosable="false"
-           @cancel="cancel"
-           width="890px">
-    <template #footer>
-      <a-button key="submit"
-                type="primary"
-                @click="cancel">关闭</a-button>
-    </template>
+  <!-- 详情 -->
+  <Drawer :title="'详情'"
+          :placement="'top'"
+          :visible="visible">
+    <!-- 挂牌 -->
     详情
-  </a-modal>
+  </Drawer>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { Des } from '@/common/components/commonDes';
-import { QhjAgreementConfig } from '@/services/go/ermcp/qhj/interface';
-import { _closeModal } from '@/common/setup/modal/modal';
+import { defineComponent, PropType, ref } from 'vue';
+import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
+import Drawer from '@/common/components/drawer/index.vue';
+import { QueryWrPositionReq, WrPosition } from '@/services/go/wrtrade/interface';
+import { getUserId } from '@/services/bus/account';
+import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
+import { hdWROrder } from '@/services/proto/warehousetrade';
+import { v4 as uuidv4 } from 'uuid';
+import moment from 'moment';
 import { ModalEnum } from '@/common/constants/modalNameEnum';
 
 export default defineComponent({
-    emits: ['cancel'],
-    name: ModalEnum.detail,
-    components: { Des },
+    name: ModalEnum.spot_trade_warehouse_delisting,
+    components: { Drawer },
     props: {
         selectedRow: {
-            type: Object as PropType<QhjAgreementConfig>,
+            type: Object as PropType<WrPosition>,
             default: {},
         },
     },
-    setup(props, context) {
-        const { visible, cancel } = _closeModal(context);
+    setup(props) {
+        const data = props.selectedRow;
+        const loading = ref<boolean>(false);
+        // console.log(param);
+        // requestResultLoadingAndInfo(hdWROrder, param, loading, ['挂牌成功', '挂牌失败:']).then(() => {
+        //     // cancel(true);
+        // });
         return {
-            cancel,
-            visible,
+            visible: true,
         };
     },
 });
 </script>
 
-<style lang="less">
-.custom-detail {
-    .ant-form.inlineForm {
-        margin-top: 20px;
+<style lang="less" scoped>
+.listed {
+    width: 100%;
+    height: 100%;
+    .flex;
+    flex-direction: column;
+    .condition {
+        width: 100%;
+        height: 48px;
+        padding: 10px 16px;
+        border-bottom: 1px solid @m-black6;
+        .inlineflex;
+        .conditionBtn {
+            align-self: center;
+            align-items: center;
+            border: 0;
+            width: 80px;
+            height: 28px;
+            line-height: 28px;
+            background: @m-black7;
+            .rounded-corners(3px);
+            font-size: 14px;
+            color: @m-blue0;
+            &:hover {
+                background: rgba(@m-black7, 0.8);
+                color: rgba(@m-blue0, 0.8);
+            }
+        }
+        .conditionBtn + .conditionBtn {
+            margin-left: 10px;
+        }
+    }
+    .formBar {
+        width: 100%;
+        flex: 1;
+        padding: 28px 16px 7px;
     }
-    .upload {
-        .look {
-            margin-left: 0;
+}
+
+::v-deep.formProgress {
+    width: 140px;
+    // height: 3px;
+    // .rounded-corners(2px);
+    margin-left: 80px;
+    .ant-progress-outer {
+        margin-right: 0;
+        padding-right: 0;
+        .ant-progress-inner {
+            background: @m-grey14;
+            .rounded-corners(2px);
+            .ant-progress-bg {
+                height: 3px !important;
+                border-radius: 2px !important;
+                background-color: @m-blue0;
+            }
         }
     }
+    .ant-progress-text {
+        display: none;
+    }
+}
+.unit {
+    margin-left: 80px;
+    .flex;
+    justify-content: space-between;
+    font-size: 14px;
+    color: @m-grey1;
+    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;
+    }
+}
+.cancelBtn:extend(.listedBtn) {
+    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%);
+    &:hover {
+        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%);
+        color: @m-white0-hover;
+    }
+}
+.ml10 {
+    margin-left: 10px;
 }
 </style>;