update

src/packages/mobile/views/pricing/trade/prepayment/Index.vue

@@ -84,8 +84,15 @@
                             <span class="g-price-up">+{{ tpsl.takeProfit.toFixed(2) }}</span>
                         </div>
                         <div class="right-bottom">
-                            <Slider v-model="takeProfitRatio" :bar-height="6" :min="quote.tpratiodown * 100"
-                                :max="quote.tpratioup * 100" :step="0.01" :disabled="!formData.TPFlag" />
+                            <Button size="small" icon="minus"
+                                :disabled="!formData.TPFlag || takeProfitRatio <= profitLossLimits.minProfitRatio" round
+                                @click="sliderDecrease()" />
+                            <Slider v-model="takeProfitRatio" :bar-height="6" :min="profitLossLimits.minProfitRatio"
+                                :max="profitLossLimits.maxProfitRatio" :step="sliderStep"
+                                :disabled="!formData.TPFlag" />
+                            <Button size="small" icon="plus"
+                                :disabled="!formData.TPFlag || takeProfitRatio >= profitLossLimits.maxProfitRatio" round
+                                @click="sliderIncrease()" />
                         </div>
                     </div>
                 </div>
@@ -100,11 +107,17 @@
                             <span>{{ $t('tss.stopLossSpread') }}{{ (tpsl.stopLossSpread > 0 ? '+' : '')
                                 + tpsl.stopLossSpread.toFixed(quote.decimalplace) }}</span>
                             <span class="g-price-down">[{{ stopLossRatio.toFixed(2) }}%]</span>
-                            <span class="g-price-down">-{{ tpsl.stopLoss.toFixed(2) }}</span>
+                            <span class="g-price-down">{{ tpsl.stopLoss.toFixed(2) }}</span>
                         </div>
                         <div class="right-bottom">
-                            <Slider v-model="stopLossRatio" :bar-height="6" :min="quote.slratiodown * 100"
-                                :max="quote.slratioup * 100" :step="0.01" :disabled="!formData.SLFlag" />
+                            <Button size="small" icon="minus"
+                                :disabled="!formData.SLFlag || stopLossRatio <= profitLossLimits.minLossRatio" round
+                                @click="sliderDecrease('sl')" />
+                            <Slider v-model="stopLossRatio" :bar-height="6" :min="profitLossLimits.minLossRatio"
+                                :max="profitLossLimits.maxLossRatio" :step="sliderStep" :disabled="!formData.SLFlag" />
+                            <Button size="small" icon="plus"
+                                :disabled="!formData.SLFlag || stopLossRatio >= profitLossLimits.maxLossRatio" round
+                                @click="sliderIncrease('sl')" />
                         </div>
                     </div>
                 </div>
@@ -165,16 +178,47 @@ const { formData, formSubmit } = useOrder()
 
 const takeProfitRatio = shallowRef(0) // 止盈比例
 const stopLossRatio = shallowRef(0) // 止损比例
+const sliderStep = 0.01 // 滑块步长
 
 // 计算盈亏
 const calcProfitLoss = (ratio: number, profitLoss: 1 | -1) => usedMargin.value.deposit * (ratio / 100) * profitLoss
 
 // 计算价差
 const calcSpread = (value: number) => {
-    const { agreeunit = 0.0 } = quote.value ?? {}
+    const { agreeunit = 0 } = quote.value ?? {}
     return value / (props.orderQty * agreeunit) * (props.orderType === 2 ? 1 : -1)
 }
 
+// 盈亏比限制
+const profitLossLimits = computed(() => {
+    const { tpratioup = 0, tpratiodown = 0, slratioup = 0, slratiodown = 0 } = quote.value ?? {}
+    return {
+        maxProfitRatio: tpratioup * 100,
+        minProfitRatio: tpratiodown * 100,
+        maxLossRatio: slratioup * 100,
+        minLossRatio: slratiodown * 100
+    }
+})
+
+// 滑块增加
+const sliderIncrease = (actionName = 'tp') => {
+    if (actionName === 'tp') {
+        takeProfitRatio.value += sliderStep
+    } else {
+        stopLossRatio.value += sliderStep
+    }
+
+}
+
+// 滑块减少
+const sliderDecrease = (actionName = 'tp') => {
+    if (actionName === 'tp') {
+        takeProfitRatio.value -= sliderStep
+    } else {
+        stopLossRatio.value -= sliderStep
+    }
+}
+
 // 止盈止损
 const tpsl = computed(() => {
     const takeProfit = calcProfitLoss(takeProfitRatio.value, 1) // 盈利

src/packages/mobile/views/pricing/trade/prepayment/index.less

@@ -69,7 +69,7 @@
 
     .order-tpsl {
         background-color: #fff;
-        padding: 20px;
+        padding: 20px 15px;
         margin-top: 5px;
 
         &__tp,
@@ -77,9 +77,14 @@
             display: flex;
             align-items: flex-end;
 
+            .left {
+                font-size: 13px;
+                padding-bottom: 10px;
+            }
+
             .right {
                 flex: 1;
-                margin-left: 20px;
+                margin-left: 15px;
 
                 &-top {
                     font-size: 12px;
@@ -92,8 +97,20 @@
                 }
 
                 &-bottom {
-                    min-height: 14px;
-                    margin-top: 20px;
+                    display: flex;
+                    align-items: center;
+                    margin-top: 10px;
+
+                    .van-button {
+                        width: 26px;
+                        height: 26px;
+                        border-width: 1px;
+                    }
+
+                    .van-slider {
+                        flex: 1;
+                        margin: 16px;
+                    }
                 }
             }
         }