Bit_Wise_World/src/views/bitcoin/components/TakeProfitsTopLoss.vue

<script setup>
    import { Checkbox as VanCheckbox } from 'vant';
    import { Icon as VanIcon, } from 'vant';
    import {defineAsyncComponent, ref} from 'vue';
    const TPSLSmartPopup = defineAsyncComponent(() => import('../components/TPSLSmartPopup.vue'));

    // 1. 状态控制
    const isEnabled = ref(false); // 控制复选框选中状态，
    const takeProfit = ref('');  // 止盈价格
    const stopLoss = ref('');    // 止损价格

    // 点击“高级”的事件
    const handleAdvanced = () => {
      console.log('点击了高级设置');
    };

    //止盈止损高级设置
    const showSmartTPSL = ref(false);
    const handleConfirm1 = (data) => {
      console.log('止盈止损设置:', data);
    };
</script>

<template>
  <div class="tpsl-container">

    <div class="header-row">
      <div class="left-trigger">
        <van-checkbox
          v-model="isEnabled"
          shape="square"
          checked-color="#DC4653"
          icon-size="16px"
        >
        </van-checkbox>
        <span class="label-text">止盈止损</span>

        <van-icon name="question-o" color="#999" size="16" class="help-icon" />
      </div>

      <div v-if="isEnabled" class="right-action" @click="handleAdvanced">
        <span class="fc333333" @click="showSmartTPSL = true">高级</span>
        <van-icon style="font-weight: bold; margin-left: 5px;" name="arrow" size="12"/>
      </div>
    </div>

    <transition style="min-width:205px" name="slide-fade">
      <div v-if="isEnabled" class="inputs-wrapper">

        <div class="input-box">
          <span class="placeholder" v-show="!takeProfit">止盈价格</span>
          <input
            type="number"
            v-model="takeProfit"
            class="real-input"
          />
          <span class="suffix">USDT</span>
        </div>

        <div class="input-box">
          <span class="placeholder" v-show="!stopLoss">止损价格</span>
          <input
            type="number"
            v-model="stopLoss"
            class="real-input"
          />
          <span class="suffix">USDT</span>
        </div>

      </div>
    </transition>
    <TPSLSmartPopup
        v-model:visible="showSmartTPSL"
        @confirm="handleConfirm1"
    ></TPSLSmartPopup>
  </div>
</template>

<style scoped>
/* 容器基础样式，基于 375px 设计稿 */
:deep(.van-checkbox__icon--square .van-icon) {
  border-radius: 2px !important;}
.tpsl-container {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
}

/* --- 头部样式 --- */
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  height: 24px;
}

.left-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
}

.label-text {
  font-size: 12px;
  color: #333;
  font-weight: 400;
}

.help-icon {
  margin-left: 2px;
}

.right-action {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 12px;
  cursor: pointer;
}

/* --- 输入框区域样式 --- */
.inputs-wrapper {
  max-width: 204.25px;
  display: flex;
  flex-direction: column;
  gap: 12px; /* 两个输入框之间的间距 */
}

.input-box {
  position: relative; /* 为了让 placeholder 绝对定位 */
  display: flex;
  align-items: center;
  background-color: #F7F8FA; /* 还原图片中的浅灰色背景 */
  border-radius: 4px;
  height: 38px;
  padding: 0 12px;
}

/* 模拟 placeholder，为了更好控制样式和位置 */
.placeholder {
  position: absolute;
  left: 12px;
  color: #969799; /* 浅灰提示字 */
  font-size: 14px;
  pointer-events: none; /* 点击穿透，确保能点到 input */
}

/* 实际的输入框，背景透明覆盖在上面 */
.real-input {
  flex: 1; /* 占满剩余空间 */
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  color: #333;
  z-index: 1;
  height: 100%;
  text-align: right;
  padding-right: 8px;
}

/* 让 real-input 靠左对齐输入 (还原图片样子) */
.real-input {
  text-align: left;
}

.suffix {
  color: #333;
  font-size: 14px;
  font-weight: 400;
  position: absolute;
  right: 12px;
}

/* --- 简单的展开/收起动画 --- */
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.3s ease-out;
  max-height: 200px; /* 只要比实际高度大就行 */
  opacity: 1;
  overflow: hidden;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}
</style>