wxapp_shuibei/pages/users/vault/storeMetal/goldBullionStock.vue

<template>
  <view class="content">
    <view class="tabs-wrap">
      <!-- 新增tabs导航 -->
      <view class="takeout-tabs">
        <view
          class="tab-item"
          :class="['tab-active', currentTab === 0 ? 'active' : '']"
          @click="currentTab = 0"
          >邮寄存金</view
        >
        <view
          class="tab-item"
          :key="currentTab"
          :class="['tab-active', currentTab === 1 ? 'active' : '']"
          @click="currentTab = 1"
          >无物流存金</view
        >
      </view>
    </view>
    <view v-if="!currentTab">
      <gold-mail-form :content="content" :agreement="agreement">
      </gold-mail-form>
    </view>
    <view v-else>
      <non-logistics-gold :viprealGoldprice="viprealGoldprice">
      </non-logistics-gold>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import GoldMailForm from "./GoldMailForm.vue";
import nonLogisticsGold from "./nonLogisticsGold.vue";
import { agreementGetoneApi } from "@/api/user";
import { useStoreRights } from "@/stores/rights";
import useRealGoldPrice from "@/hooks/useRealGoldPrice";
import { number } from "../../../../uni_modules/uview-plus/libs/function/test";
const {
  realGoldprice, // 黄金实时销售价（基础）
} = useRealGoldPrice({});
const rightsStore = useStoreRights();
// 响应式数据
const currentTab = ref(0);
const content = ref("");
const agreement = ref("");
// Vue 3 中使用 onMounted 替代 onLoad
// 获取协议
function agreementGetoneFn() {
  agreementGetoneApi({ name: "saveGoldRules" }).then((res) => {
    content.value = res.data?.content;
  });
  // 资产说明
  agreementGetoneApi({ name: "saveGold" }).then((res) => {
    agreement.value = res.data?.content;
  });
}

// 黄金调整价
const adjustGoldprice = computed(() => {
  const res = rightsStore.userBenefits.nobleMeta.find(
    (gold) => gold.name == "黄金"
  );
  return res;
});
// 获取实时金价
const viprealGoldprice = computed(
  () =>
    Number(realGoldprice.value) -
    Number(rightsStore.userBenefits.buy) +
    Number(adjustGoldprice.value.sellPriceAdjust)
);
onMounted((options) => {
  agreementGetoneFn();
});

// const someComputed = computed(() => { ... })

// function someMethod() { ... }
</script>

<style scoped lang="scss">
/* 新增tabs样式 */
.takeout-tabs {
  display: flex;
  height: 120rpx;
  overflow: hidden;
  position: relative;
  top: 85rpx;
}

.tabs-wrap {
  height: 270rpx;
}

.tab-item {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  color: #484848;
  font-size: 30rpx;
  &.active {
    color: #000;
    font-weight: 500;
    color: #000000;
  }
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  /* 修改为0，使三角形显示在底部 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  border-style: solid;
  border-width: 0 20rpx 20rpx 20rpx;
  /* 使用rpx单位 */
  border-color: transparent transparent #f7f7f7 transparent;
  width: 0;
  height: 0;
  opacity: 1;
  /* 设置为可见 */
  transform-origin: center top;
  animation: showTriangle 0.3s ease-out forwards;
}

/* 添加动画定义 */
@keyframes showTriangle {
  from {
    opacity: 0;
    transform: translate(-50%, 10rpx);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.content {
  position: relative;
  height: 100%;
  // background-color: #ededed;
  // background: url('https://mp-ad17e5cd-05c1-4df9-b060-556e25dac130.cdn.bspapp.com/mini/static/20250529221733.jpg') top center no-repeat;
  // background-size: 100% 40%;
  // background-color: #f7f7f7;
  background: $uni-bg-primary !important;
}

::v-deep .uni-input-placeholder {
  font-size: 14px;
  color: #bdbdbd;
}
</style>