VAVABUY/pages/dashboard/components/PricePopup.vue

<template>
  <Popup
    ref="popupRef"
    title="上架"
    :isClose="true"
    mode="bottom"
    :round="20"
    @close="onClose"
  >
    <template #content>
      <view class="price-content">
        <view class="price-section">
          <view class="section-title">
            <trans _t="原价" />
          </view>
          <view class="price-input-wrapper">
            <view class="currency-symbol">{{ symbol }}</view>
            <Input
              v-model="originalPrice"
              type="number"
              :placeholder="t('请输入原价')"
              :clearable="true"
              border="none"
              class="price-input"
            />
          </view>
          <view class="price-tip">
            <text
              ><trans _t="建议原价" />：{{ symbol
              }}{{ suggestedOriginalPrice }}</text
            >
          </view>
        </view>
        <view class="price-section">
          <view class="section-title">
            <trans _t="销售价格" />
          </view>
          <view class="price-input-wrapper">
            <view class="currency-symbol">{{ symbol }}</view>
            <Input
              v-model="salePrice"
              type="number"
              :placeholder="t('请输入销售价格')"
              :focus="true"
              :clearable="true"
              border="none"
              class="price-input"
            />
          </view>
          <view class="price-tip">
            <text
              ><trans _t="建议销售价格" />：{{ symbol
              }}{{ suggestedPrice }}</text
            >
          </view>
        </view>
      </view>
    </template>

    <template #footer>
      <view class="btn-group">
        <view class="btn cancel-btn" @click="onClose">
          <trans _t="取消" />
        </view>
        <view class="btn submit-btn" @click="submitPrice">
          <trans _t="确认上架" />
        </view>
      </view>
    </template>
  </Popup>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import Popup from "@/components/popup";
import Input from "@/components/input";
import { t } from "@/locale";
import { useSystemStore } from "@/store";
import { SELLER_GOODS_UP } from "@/api";
import { Toast } from "@/utils";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  item: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["close", "confirm"]);

const useSystem = useSystemStore();
const symbol = computed(() => useSystem.getSymbol.symbol);

const popupRef = ref(null);
const salePrice = ref("");
const originalPrice = ref("");

// 建议价格（原价的1.3倍）
const suggestedPrice = computed(() => {
  if (props.item?.price) {
    return (parseFloat(props.item.price) * 1.3).toFixed(2);
  }
  return "0.00";
});

// 建议原价（原价的40%）
const suggestedOriginalPrice = computed(() => {
  if (props.item?.price) {
    return (parseFloat(props.item.price) * 1.4).toFixed(2);
  }
  return "0.00";
});

watch(
  () => props.show,
  (newVal) => {
    if (newVal) {
      salePrice.value = suggestedPrice.value;
      originalPrice.value = suggestedOriginalPrice.value;
      popupRef.value?.open();
    } else {
      popupRef.value?.close();
    }
  }
);

const onClose = () => {
  emit("close");
};

const submitPrice = async () => {
  if (!salePrice.value || parseFloat(salePrice.value) <= 0) {
    return Toast(t("请输入有效的销售价格"));
  }
  if (!originalPrice.value || parseFloat(originalPrice.value) <= 0) {
    return Toast(t("请输入有效的原价"));
  }
  try {
    const para = {
      id: props.item.id,
      price: parseFloat(salePrice.value),
      originalprice: parseFloat(originalPrice.value),
    };
    const res = await SELLER_GOODS_UP(para);
    emit("confirm");
    popupRef.value?.close();
  } catch (error) {
    Toast(error.msg);
  }
};
</script>

<style lang="less" scoped>
@import url("@/style.less");

.price-content {
  width: 100%;
  .price-section {
    margin-bottom: 32rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: var(--black);
      margin-bottom: 24rpx;
    }

    .price-input-wrapper {
      display: flex;
      align-items: center;
      background: var(--bg);
      border-radius: 16rpx;
      padding: 0 24rpx;
      margin-bottom: 16rpx;
      border: 2rpx solid var(--border);

      .currency-symbol {
        font-size: 32rpx;
        font-weight: bold;
        color: var(--primary);
        margin-right: 16rpx;
      }

      .price-input {
        flex: 1;

        :deep(.u-input) {
          // padding: 0 !important;
          // background: transparent !important;
          // border: none !important;

          .u-input__content__field-wrapper__field {
            font-size: 32rpx;
            font-weight: bold;
            color: var(--black);
          }
        }
      }
    }

    .price-tip {
      font-size: 24rpx;
      color: var(--text-01);
      text-align: center;
    }
  }
}

.btn-group {
  display: flex;
  gap: 20rpx;

  .btn {
    flex: 1;
    height: 80rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-weight: 600;
    transition: all 0.3s ease;

    &.cancel-btn {
      background: var(--bg);
      color: var(--text-01);
      border: 2rpx solid var(--border);
    }

    &.submit-btn {
      background: var(--primary);
      color: var(--light);
    }
  }
}
</style>