”补充定金“ 界面添加字段“可退定金”

src/packages/mobile/components/base/select/index.vue

@@ -4,7 +4,7 @@
             <input class="'app-select__input'" v-model="inputValue" :placeholder="placeholder" readonly />
         </slot>
         <Popup v-model:show="show" position="bottom" teleport="body" round>
-            <Picker :columns="columns" @cancel="onCancel" @confirm="onConfirm" :confirm-button-text="$t('operation.confirm')" :cancel-button-text="$t('operation.cancel')"
+            <Picker :columns="columns" @cancel="onCancel" @confirm="onConfirm" :confirm-button-text="$t('operation.confirm')" :cancel-button-text="$t('operation.cancel')">
                 <template #option="{ text, index }">
                     <slot name="option" :row="options[index]" :index="index">
                         {{ text }}

src/packages/sbyj/views/order/list/components/supplement-deposit/index.vue

@@ -17,6 +17,12 @@
                     <Cell title="已付定金" :value="selectedRow.tHDetailEx.payedDeposit" />
                     <Cell title="已补定金" :value="selectedRow.tHDetailEx.restockDeposit" />
                     <Cell title="滞纳金" :value="selectedRow.tHDetailEx.callAteFee" />
+                    <Cell title="可退订金" :value="formatDecimal(refundDespoit)" />
+                    <Cell title="浮动权益" >
+                        <template #value>
+                            <span :class="handlePriceColor(selectedRow.tHDetailEx.floatPL)">{{ selectedRow.tHDetailEx.floatPL }}</span>
+                        </template>
+                    </Cell>
                     <Field label="类型">
                         <template #input>
                             <RadioGroup direction="horizontal" v-model="orderType" @click="onTypeChanged">
@@ -46,10 +52,10 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, PropType, onMounted, reactive } from 'vue'
+import { shallowRef, PropType, onMounted, reactive, computed } from 'vue'
 import { CellGroup, Cell, Button, Stepper, Field, Form, FormInstance, FieldRule, RadioGroup, Radio } from 'vant'
 import { fullloading } from '@/utils/vant'
-import { handleRequestBigNumber } from '@/filters'
+import { handleRequestBigNumber, formatDecimal, handlePriceColor } from '@/filters'
 import { parsePercent } from '@/filters'
 import { supplementDeposit, refundedDeposit } from '@/services/api/trade'
 import AppModal from '@/components/base/modal/index.vue'
@@ -68,6 +74,13 @@ const showModal = shallowRef(true)
 const refresh = shallowRef(false) // 是否刷新父组件数据
 const orderType = shallowRef(1) // 1-补充 2-退返
 
+// 可退定金 = Max(Min(补充定金 + 浮动盈亏 - 滞纳金, 补充定金）,0）
+// 浮动盈亏 根据行情实时变动
+const refundDespoit = computed(() => {
+    const { restockDeposit, callAteFee, floatPL } = props.selectedRow.tHDetailEx
+    return Math.max(Math.min((restockDeposit + floatPL - callAteFee), restockDeposit) , 0)
+})
+
 // 表单验证规则
 const formRules: { [key: string]: FieldRule[] } = {
     RestockDeposit: [{