wxapp_shuibei/pages/mall/dapan.vue

<template>
  <view class="container">
    <view class="status">
      <uni-icons
        customPrefix="iconfont"
        color="#fff"
        type="icon-24gf-clockCircle"
        size="18"
      ></uni-icons>
      <span class="time" style="margin-left: 10px">
        {{ timeFormat(timestamp, "yyyy-mm-dd hh:MM:ss") }}
      </span>
      <span
        class="status-right"
        style="margin-left: 10px"
        :class="{ active: !isOpen }"
      >
        {{ !isOpen ? "闭盘" : "开盘" }}
      </span>
    </view>
    <view class="notice-box">
      <view class="iconfont icon-tixing"></view>
      <up-notice-bar
        icon=""
        :text="text1"
        :step="true"
        bgColor="#fff"
        color="#000"
      ></up-notice-bar>
    </view>

    <view class="home">
      <view class="page">
        <view class="tab_header">
          <view class="col col-one">商品</view>
          <view class="col" style="width: calc(100% / 13 * 3)">回购</view>
          <view class="col" style="width: calc(100% / 13 * 3)">销售</view>
          <view class="col col-four" style="width: calc(100% / 13 * 3)"
            >高/低</view
          >
        </view>
        <view class="tab_content">
          <!-- VIP 区域 -->
          <view class="theme-container">
            <view class="horizontal-title">VIP</view>
            <view class="theme-item">
              <!-- 黄金 -->
              <view class="price-table-row">
                <view class="col" style="width: calc(100% / 13 * 3)">
                  <view class="name symbol-name">黄金</view>
                </view>
                <!-- 回购价（动态颜色） -->
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view
                    class="sall symbol-name"
                    :class="{
                      'symbol-price-rise': vipGoldRecycleStatus === 'rise',
                      'symbol-price-fall': vipGoldRecycleStatus === 'down',
                    }"
                  >
                    {{ vipRealGoldRecyclePrice.toFixed(2) }}
                  </view>
                </view>
                <!-- 销售价（动态颜色） -->
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view
                    class="back symbol-name"
                    :class="{
                      'symbol-price-rise': vipGoldSellStatus === 'rise',
                      'symbol-price-fall': vipGoldSellStatus === 'down',
                    }"
                  >
                    {{ viprealGoldprice.toFixed(2) }}
                  </view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view class="symbole-price">
                    <view class="symbol-price-rise">{{
                      vipGoldTodayHigh.toFixed(2)
                    }}</view>
                    <view class="symbol-price-fall fall">{{
                      vipGoldTodayLow.toFixed(2)
                    }}</view>
                  </view>
                </view>
              </view>
              <!-- K金 -->
              <view class="price-table-row">
                <view class="col" style="width: calc(100% / 13 * 3)">
                  <view class="name symbol-name">K金</view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view
                    class="sall symbol-name"
                    :class="{
                      'symbol-price-rise': vipKGoldRecycleStatus === 'rise',
                      'symbol-price-fall': vipKGoldRecycleStatus === 'down',
                    }"
                  >
                    {{ viprealKGoldRecyclePrice.toFixed(2) }}
                  </view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view
                    class="back symbol-name"
                    :class="{
                      'symbol-price-rise': vipKGoldSellStatus === 'rise',
                      'symbol-price-fall': vipKGoldSellStatus === 'down',
                    }"
                  >
                    {{ viprealKGoldprice.toFixed(2) }}
                  </view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view class="symbole-price">
                    <view class="symbol-price-rise">{{
                      vipkGoldTodayHigh.toFixed(2)
                    }}</view>
                    <view class="symbol-price-fall fall">{{
                      vipkGoldTodayLow.toFixed(2)
                    }}</view>
                  </view>
                </view>
              </view>
              <!-- 铂金 -->
              <view class="price-table-row">
                <view class="col" style="width: calc(100% / 13 * 3)">
                  <view class="name symbol-name">铂金</view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view
                    class="sall symbol-name"
                    :class="{
                      'symbol-price-rise': vipPtRecycleStatus === 'rise',
                      'symbol-price-fall': vipPtRecycleStatus === 'down',
                    }"
                  >
                    {{ viprealPtRecyclePrice.toFixed(2) }}
                  </view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view
                    class="back symbol-name"
                    :class="{
                      'symbol-price-rise': vipPtSellStatus === 'rise',
                      'symbol-price-fall': vipPtSellStatus === 'down',
                    }"
                  >
                    {{ viprealPtprice.toFixed(2) }}
                  </view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view class="symbole-price">
                    <view class="symbol-price-rise">{{
                      vipptTodayHigh.toFixed(2)
                    }}</view>
                    <view class="symbol-price-fall fall">{{
                      vipptTodayLow.toFixed(2)
                    }}</view>
                  </view>
                </view>
              </view>
              <!-- 白银 -->
              <view class="price-table-row">
                <view class="col" style="width: calc(100% / 13 * 3)">
                  <view class="name symbol-name">白银</view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view
                    class="sall symbol-name"
                    :class="{
                      'symbol-price-rise': vipAgRecycleStatus === 'rise',
                      'symbol-price-fall': vipAgRecycleStatus === 'down',
                    }"
                  >
                    {{ viprealAgRecyclePrice.toFixed(2) }}
                  </view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view
                    class="back symbol-name"
                    :class="{
                      'symbol-price-rise': vipAgSellStatus === 'rise',
                      'symbol-price-fall': vipAgSellStatus === 'down',
                    }"
                  >
                    {{ viprealAgprice.toFixed(2) }}
                  </view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view class="symbole-price">
                    <view class="symbol-price-rise">{{
                      vipagTodayHigh.toFixed(2)
                    }}</view>
                    <view class="symbol-price-fall fall">{{
                      vipagTodayLow.toFixed(2)
                    }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- SVIP 区域 -->
          <view class="theme-container">
            <view class="horizontal-title">SVIP</view>
            <view class="theme-item">
              <!-- 黄金 -->
              <view class="price-table-row">
                <view class="col" style="width: calc(100% / 13 * 3)">
                  <view class="name symbol-name">黄金</view>
                </view>
                <!-- SVIP回购价（动态颜色） -->
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view
                    class="sall symbol-name"
                    :class="{
                      'symbol-price-rise': svipGoldRecycleStatus === 'rise',
                      'symbol-price-fall': svipGoldRecycleStatus === 'down',
                    }"
                  >
                    {{ svipRealGoldRecyclePrice.toFixed(2) }}
                  </view>
                </view>
                <!-- SVIP销售价（复用VIP销售价状态） -->
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view
                    class="back symbol-name"
                    :class="{
                      'symbol-price-rise': vipGoldSellStatus === 'rise',
                      'symbol-price-fall': vipGoldSellStatus === 'down',
                    }"
                  >
                    {{ viprealGoldprice.toFixed(2) }}
                  </view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view class="symbole-price">
                    <view class="symbol-price-rise">{{
                      vipGoldTodayHigh.toFixed(2)
                    }}</view>
                    <view class="symbol-price-fall fall">{{
                      vipGoldTodayLow.toFixed(2)
                    }}</view>
                  </view>
                </view>
              </view>
              <!-- K金 -->
              <view class="price-table-row">
                <view class="col" style="width: calc(100% / 13 * 3)">
                  <view class="name symbol-name">K金</view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view
                    class="sall symbol-name"
                    :class="{
                      'symbol-price-rise': svipKGoldRecycleStatus === 'rise',
                      'symbol-price-fall': svipKGoldRecycleStatus === 'down',
                    }"
                  >
                    {{ sviprealKGoldRecyclePrice.toFixed(2) }}
                  </view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view
                    class="back symbol-name"
                    :class="{
                      'symbol-price-rise': vipKGoldSellStatus === 'rise',
                      'symbol-price-fall': vipKGoldSellStatus === 'down',
                    }"
                  >
                    {{ viprealKGoldprice.toFixed(2) }}
                  </view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view class="symbole-price">
                    <view class="symbol-price-rise">{{
                      vipkGoldTodayHigh.toFixed(2)
                    }}</view>
                    <view class="symbol-price-fall fall">{{
                      vipkGoldTodayLow.toFixed(2)
                    }}</view>
                  </view>
                </view>
              </view>
              <!-- 铂金 -->
              <view class="price-table-row">
                <view class="col" style="width: calc(100% / 13 * 3)">
                  <view class="name symbol-name">铂金</view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view
                    class="sall symbol-name"
                    :class="{
                      'symbol-price-rise': svipPtRecycleStatus === 'rise',
                      'symbol-price-fall': svipPtRecycleStatus === 'down',
                    }"
                  >
                    {{ sviprealPtRecyclePrice.toFixed(2) }}
                  </view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view
                    class="back symbol-name"
                    :class="{
                      'symbol-price-rise': vipPtSellStatus === 'rise',
                      'symbol-price-fall': vipPtSellStatus === 'down',
                    }"
                  >
                    {{ viprealPtprice.toFixed(2) }}
                  </view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view class="symbole-price">
                    <view class="symbol-price-rise">{{
                      vipptTodayHigh.toFixed(2)
                    }}</view>
                    <view class="symbol-price-fall fall">{{
                      vipptTodayLow.toFixed(2)
                    }}</view>
                  </view>
                </view>
              </view>
              <!-- 白银 -->
              <view class="price-table-row">
                <view class="col" style="width: calc(100% / 13 * 3)">
                  <view class="name symbol-name">白银</view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view
                    class="sall symbol-name"
                    :class="{
                      'symbol-price-rise': svipAgRecycleStatus === 'rise',
                      'symbol-price-fall': svipAgRecycleStatus === 'down',
                    }"
                  >
                    {{ sviprealAgRecyclePrice.toFixed(2) }}
                  </view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view
                    class="back symbol-name"
                    :class="{
                      'symbol-price-rise': vipAgSellStatus === 'rise',
                      'symbol-price-fall': vipAgSellStatus === 'down',
                    }"
                  >
                    {{ viprealAgprice.toFixed(2) }}
                  </view>
                </view>
                <view class="col" style="width: calc(100% / 13 * (10 / 3))">
                  <view class="symbole-price">
                    <view class="symbol-price-rise">
                      {{ vipagTodayHigh.toFixed(2) }}
                    </view>
                    <view class="symbol-price-fall fall">
                      {{ vipagTodayLow.toFixed(2) }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <view class="tips">
            <up-parse :content="dapan_agreement"></up-parse>
            <!-- <view @click="navigate">点击查看详情</view> -->
          </view>
          <view class="pageFooter">
            <view class="item">
              <view class="address">
                <view>
                  {{ appStore.$wxConfig.mailerName }} ：
                  {{ appStore.$wxConfig.mailerPhone }}
                </view>
                <view class="address-detail" style="margin-top: 4px">
                  <text class="receive-address">地址:</text>
                  {{ appStore.$wxConfig.mailingAddress }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watch, nextTick } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { timeFormat } from "@/uni_modules/uview-plus";
import { useRealtimeTimestamp } from "@/utils/useRealtimeTimestamp.js";
import { useAppStore } from "@/stores/app";
import { getUserLevelInfo } from "@/api/user";
import useRealGoldPrice from "@/hooks/useRealGoldPrice";
import { agreementGetoneApi } from "@/api/user";
import { useToast } from "@/hooks/useToast";
import { getMiniProgramData } from "@/api/api";
import { Calc } from "@/utils/util";

const { Toast } = useToast();

// 全局状态和时间
const appStore = useAppStore();
const { timestamp } = useRealtimeTimestamp();
const isOpen = ref(false);
const contactHandle = () => {
  uni.navigateTo({ url: "/pages/message_create/message_create" });
};

// 点击查看详情
const navigate = () => {
  uni.navigateTo({ url: "/pages/VIP/VIP" });
};

// 配置滚动文字
const text1 = ref(["以下行情仅供参考", "更多详情咨询与客服联系"]);

// 实时价格处理
const {
  realGoldprice, // 黄金实时销售价（基础）
  goldTodayHigh, // 黄金最高价
  goldTodayLow, // 黄金最低价
  realPtprice, // 铂金实时销售价（基础）
  ptTodayHigh, // 铂金最高价
  ptTodayLow, // 铂金最低价
  realAgprice, // 白银实时销售价（基础）
  agTodayHigh, // 白银最高价
  agTodayLow, // 白银最低价
  realKGoldprice, // K金实时销售价（基础）
  kGoldTodayHigh, // K金最高价
  kGoldTodayLow, // K金最低价
  realGoldRecyclePrice, // 黄金实时回收价（基础）
  realPtRecyclePrice, // 铂金实时回收价（基础）
  realAgRecyclePrice, // 白银实时回收价（基础）
  realKGoldRecyclePrice, // K金实时回收价（基础）
} = useRealGoldPrice({});

// 用户权益数据
const userBenefits = ref({});
const adjustGoldPrice = ref({});
const adjustKgoldPrice = ref({});
const adjustPtPrice = ref({});
const adjustAgPrice = ref({});

// svip权益
const svipGoldPrice = ref(0);
const svipKgoldPrice = ref(0);
const svipPtPrice = ref(0);
const svipAgPrice = ref(0);

onLoad(() => {
  getUserBenefits();
  agreementGetoneFn();

  appStore.isLogin && updateWxSettingInfo();
});

const updateWxSettingInfo = async () => {
  const { data } = await getMiniProgramData();
  if (!data?.metalConfigs) return;
  data.metalConfigs.forEach((item) => {
    switch (item.metalType) {
      case "au":
        svipGoldPrice.value = item.svipDiscountPerGram || 0;
        break;
      case "kau":
        svipKgoldPrice.value = item.svipDiscountPerGram || 0;
        break;
      case "pt":
        svipPtPrice.value = item.svipDiscountPerGram || 0;
        break;
      case "ag":
        svipAgPrice.value = item.svipDiscountPerGram || 0;
        break;
      default:
        break;
    }
  });
};

const dapan_agreement = ref("");

const agreementGetoneFn = () => {
  agreementGetoneApi({ name: "dapan_agreement" }).then((res) => {
    dapan_agreement.value = res.data?.content;
  });
};

const getUserBenefits = async () => {
  try {
    const res = await getUserLevelInfo(appStore?.userInfo?.userId || 0);

    userBenefits.value = res.data || { sold: 0, buy: 0, silverSold: 0 }; // 默认权益为0，避免NaN
    isOpen.value = res.data?.isOpen;
    if (
      userBenefits?.value?.nobleMeta &&
      userBenefits.value.nobleMeta.length > 0
    ) {
      const nobleMeta = userBenefits.value.nobleMeta;
      nobleMeta.forEach((item) => {
        switch (item.name) {
          case "黄金":
            adjustGoldPrice.value = item;
            break;
          case "K金":
            adjustKgoldPrice.value = item;
            break;
          case "铂金":
            adjustPtPrice.value = item;
            break;
          case "白银":
            adjustAgPrice.value = item;
            break;

          default:
            break;
        }
      });
    }
  } catch (error) {
    console.error("获取用户权益失败:", error);
    userBenefits.value = { sold: 0, buy: 0, silverSold: 0 }; // 出错时默认权益为0
  }
};

// VIP 价格计算
const vipRealGoldRecyclePrice = computed(() => {
  // console.log("vipRealGoldRecyclePrice", realGoldRecyclePrice.value);
  // console.log("userBenefits", userBenefits.value.sold);
  // console.log("adjustGoldPrice", adjustGoldPrice.value.buyPriceAdjust);
  // console.log(
  //   "================>",
  //   Number(realGoldRecyclePrice.value) +
  //     Number(userBenefits.value.sold) -
  //     Number(adjustGoldPrice.value.buyPriceAdjust)
  // );

  return (
    Number(realGoldRecyclePrice.value) +
    Number(userBenefits.value.sold) -
    Number(adjustGoldPrice.value.buyPriceAdjust)
  );
});
const viprealGoldprice = computed(
  () =>
    Number(realGoldprice.value) -
    Number(userBenefits.value.buy) +
    Number(adjustGoldPrice.value.sellPriceAdjust)
);
const viprealKGoldRecyclePrice = computed(
  () =>
    Number(realKGoldRecyclePrice.value) +
    Number(userBenefits.value.sold) -
    Number(adjustKgoldPrice.value.buyPriceAdjust)
);
const viprealKGoldprice = computed(
  () =>
    Number(realKGoldprice.value) -
    Number(userBenefits.value.buy) +
    Number(adjustKgoldPrice.value.sellPriceAdjust)
);
const viprealPtRecyclePrice = computed(
  () =>
    Number(realPtRecyclePrice.value) +
    Number(userBenefits.value.sold) -
    Number(adjustPtPrice.value.buyPriceAdjust)
);
const viprealPtprice = computed(
  () =>
    Number(realPtprice.value) -
    Number(userBenefits.value.buy) +
    Number(adjustPtPrice.value.sellPriceAdjust)
);
const viprealAgRecyclePrice = computed(() =>
  Calc.add(
    Number(realAgRecyclePrice.value),
    Number(userBenefits.value.silverSold || 0)
  )
    .sub(Number(adjustAgPrice.value.buyPriceAdjust))
    .truncate()
    .valueOf()
);
const viprealAgprice = computed(
  () =>
    Number(realAgprice.value) -
    Number(userBenefits.value.buy) +
    Number(adjustAgPrice.value.sellPriceAdjust)
);

// SVIP 价格计算（回购价多+0.02，销售价复用VIP）
const svipRealGoldRecyclePrice = computed(() =>
  Calc.add(vipRealGoldRecyclePrice.value, svipGoldPrice.value)
    .truncate()
    .valueOf()
);
const sviprealKGoldRecyclePrice = computed(() =>
  Calc.add(viprealKGoldRecyclePrice.value, svipKgoldPrice.value)
    .truncate()
    .valueOf()
);
const sviprealPtRecyclePrice = computed(() =>
  Calc.add(viprealPtRecyclePrice.value, svipPtPrice.value).truncate().valueOf()
);
const sviprealAgRecyclePrice = computed(() =>
  Calc.add(viprealAgRecyclePrice.value, svipAgPrice.value).truncate().valueOf()
);

// 高低价计算
const vipGoldTodayHigh = computed(
  () =>
    Number(goldTodayHigh.value) -
    Number(userBenefits.value.buy) +
    Number(adjustGoldPrice.value.sellPriceAdjust)
);
const vipGoldTodayLow = computed(
  () =>
    Number(goldTodayLow.value) -
    Number(userBenefits.value.buy) +
    Number(adjustGoldPrice.value.sellPriceAdjust)
);
const vipkGoldTodayHigh = computed(
  () =>
    Number(kGoldTodayHigh.value) -
    Number(userBenefits.value.buy) +
    Number(adjustKgoldPrice.value.sellPriceAdjust)
);
const vipkGoldTodayLow = computed(
  () =>
    Number(kGoldTodayLow.value) -
    Number(userBenefits.value.buy) +
    Number(adjustKgoldPrice.value.sellPriceAdjust)
);
const vipptTodayHigh = computed(
  () =>
    Number(ptTodayHigh.value) -
    Number(userBenefits.value.buy) +
    Number(adjustPtPrice.value.sellPriceAdjust)
);
const vipptTodayLow = computed(
  () =>
    Number(ptTodayLow.value) -
    Number(userBenefits.value.buy) +
    Number(adjustPtPrice.value.sellPriceAdjust)
);
const vipagTodayHigh = computed(
  () =>
    Number(agTodayHigh.value) -
    Number(userBenefits.value.buy) +
    Number(adjustAgPrice.value.sellPriceAdjust)
);
const vipagTodayLow = computed(
  () =>
    Number(agTodayLow.value) -
    Number(userBenefits.value.buy) +
    Number(adjustAgPrice.value.sellPriceAdjust)
);
// 判断是否为周末（周六6/周日0）
const isWeekend = computed(() => {
  const date = new Date(timestamp.value);
  const day = date.getDay();
  return day === 0 || day === 6;
});

// 历史价格记录（用于对比变动）
// VIP 历史价
const vipGoldRecyclePrev = ref(0); // VIP黄金回购价-历史
const vipGoldSellPrev = ref(0); // VIP黄金销售价-历史
const vipKGoldRecyclePrev = ref(0); // VIP K金回购价-历史
const vipKGoldSellPrev = ref(0); // VIP K金销售价-历史
const vipPtRecyclePrev = ref(0); // VIP 铂金回购价-历史
const vipPtSellPrev = ref(0); // VIP 铂金销售价-历史
const vipAgRecyclePrev = ref(0); // VIP 白银回购价-历史
const vipAgSellPrev = ref(0); // VIP 白银销售价-历史

// SVIP 历史价（仅回购价，销售价复用VIP）
const svipGoldRecyclePrev = ref(0);
const svipKGoldRecyclePrev = ref(0);
const svipPtRecyclePrev = ref(0);
const svipAgRecyclePrev = ref(0);

// 监听实时价格更新，用nextTick延迟更新历史价（关键修复）
// VIP 价格监听
watch(vipRealGoldRecyclePrice, async (newVal, oldVal) => {
  if (newVal === 0) return; // 排除初始0值
  await nextTick(); // 等待状态计算完成后再更新历史值
  vipGoldRecyclePrev.value = oldVal;
});

watch(viprealGoldprice, async (newVal, oldVal) => {
  if (newVal === 0) return;
  await nextTick();
  vipGoldSellPrev.value = oldVal;
});

watch(viprealKGoldRecyclePrice, async (newVal, oldVal) => {
  if (newVal === 0) return;
  await nextTick();
  vipKGoldRecyclePrev.value = oldVal;
});

watch(viprealKGoldprice, async (newVal, oldVal) => {
  if (newVal === 0) return;
  await nextTick();
  vipKGoldSellPrev.value = oldVal;
});

watch(viprealPtRecyclePrice, async (newVal, oldVal) => {
  if (newVal === 0) return;
  await nextTick();
  vipPtRecyclePrev.value = oldVal;
});

watch(viprealPtprice, async (newVal, oldVal) => {
  if (newVal === 0) return;
  await nextTick();
  vipPtSellPrev.value = oldVal;
});

watch(viprealAgRecyclePrice, async (newVal, oldVal) => {
  if (newVal === 0) return;
  await nextTick();
  vipAgRecyclePrev.value = oldVal;
});

watch(viprealAgprice, async (newVal, oldVal) => {
  if (newVal === 0) return;
  await nextTick();
  vipAgSellPrev.value = oldVal;
});

// SVIP 价格监听（仅回购价）
watch(svipRealGoldRecyclePrice, async (newVal, oldVal) => {
  // 排除初始无权益时的0.02
  if (Math.abs(newVal - 0.02) < 0.001) return;
  await nextTick();
  svipGoldRecyclePrev.value = oldVal;
});

watch(sviprealKGoldRecyclePrice, async (newVal, oldVal) => {
  if (Math.abs(newVal - 0.02) < 0.001) return;
  await nextTick();
  svipKGoldRecyclePrev.value = oldVal;
});

watch(sviprealPtRecyclePrice, async (newVal, oldVal) => {
  if (Math.abs(newVal - 0.02) < 0.001) return;
  await nextTick();
  svipPtRecyclePrev.value = oldVal;
});

watch(sviprealAgRecyclePrice, async (newVal, oldVal) => {
  if (Math.abs(newVal - 0.02) < 0.001) return;
  await nextTick();
  svipAgRecyclePrev.value = oldVal;
});

// 计算价格变动状态（rise=上升红，down=下降绿，unchanged=不变保持原色）
// VIP 状态
const vipGoldRecycleStatus = computed(() => {
  const curr = vipRealGoldRecyclePrice.value;
  const prev = vipGoldRecyclePrev.value;
  //   console.log(curr, prev);

  if (prev === 0) return "unchanged"; // 初始状态不显示颜色
  return curr > prev ? "rise" : curr < prev ? "down" : "unchanged";
});

const vipGoldSellStatus = computed(() => {
  const curr = viprealGoldprice.value;
  const prev = vipGoldSellPrev.value;
  if (prev === 0) return "unchanged";
  return curr > prev ? "rise" : curr < prev ? "down" : "unchanged";
});

const vipKGoldRecycleStatus = computed(() => {
  const curr = viprealKGoldRecyclePrice.value;
  const prev = vipKGoldRecyclePrev.value;
  if (prev === 0) return "unchanged";
  return curr > prev ? "rise" : curr < prev ? "down" : "unchanged";
});

const vipKGoldSellStatus = computed(() => {
  const curr = viprealKGoldprice.value;
  const prev = vipKGoldSellPrev.value;
  if (prev === 0) return "unchanged";
  return curr > prev ? "rise" : curr < prev ? "down" : "unchanged";
});

const vipPtRecycleStatus = computed(() => {
  const curr = viprealPtRecyclePrice.value;
  const prev = vipPtRecyclePrev.value;
  if (prev === 0) return "unchanged";
  return curr > prev ? "rise" : curr < prev ? "down" : "unchanged";
});

const vipPtSellStatus = computed(() => {
  const curr = viprealPtprice.value;
  const prev = vipPtSellPrev.value;
  if (prev === 0) return "unchanged";
  return curr > prev ? "rise" : curr < prev ? "down" : "unchanged";
});

const vipAgRecycleStatus = computed(() => {
  const curr = viprealAgRecyclePrice.value;
  const prev = vipAgRecyclePrev.value;
  if (prev === 0) return "unchanged";
  return curr > prev ? "rise" : curr < prev ? "down" : "unchanged";
});

const vipAgSellStatus = computed(() => {
  const curr = viprealAgprice.value;
  const prev = vipAgSellPrev.value;
  if (prev === 0) return "unchanged";
  return curr > prev ? "rise" : curr < prev ? "down" : "unchanged";
});

// SVIP 状态（仅回购价）
const svipGoldRecycleStatus = computed(() => {
  const curr = svipRealGoldRecyclePrice.value;
  const prev = svipGoldRecyclePrev.value;
  if (prev === 0) return "unchanged";
  return curr > prev ? "rise" : curr < prev ? "down" : "unchanged";
});

const svipKGoldRecycleStatus = computed(() => {
  const curr = sviprealKGoldRecyclePrice.value;
  const prev = svipKGoldRecyclePrev.value;
  if (prev === 0) return "unchanged";
  return curr > prev ? "rise" : curr < prev ? "down" : "unchanged";
});

const svipPtRecycleStatus = computed(() => {
  const curr = sviprealPtRecyclePrice.value;
  const prev = svipPtRecyclePrev.value;
  if (prev === 0) return "unchanged";
  return curr > prev ? "rise" : curr < prev ? "down" : "unchanged";
});

const svipAgRecycleStatus = computed(() => {
  const curr = sviprealAgRecyclePrice.value;
  const prev = svipAgRecyclePrev.value;
  if (prev === 0) return "unchanged";
  return curr > prev ? "rise" : curr < prev ? "down" : "unchanged";
});
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background: #252525 !important;
}

.callService {
  padding: 20px 10px 0px;
  // background-color: #ddcca3;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: 16px;
  // margin-bottom: 30rpx;

  .list-box {
    background: #fff;
    border-radius: 20px;

    .list-item {
      width: 100%;
      height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #e1e1e1;
    }
  }
}

.notice-box {
  width: 98%;
  margin: 0 auto;
  background: #ffffff;
  display: flex;
  padding: 8rpx 30rpx;
  border-radius: 10rpx;
  // height: ;

  align-items: center;
  .iconfont {
    width: 44rpx;
    height: 44rpx;
    border-radius: 50%;
    text-align: center;
    line-height: 44rpx;
    // background-color: #fe960f;
    color: #000;
    font-size: 30rpx;
    margin-right: 15rpx;

    &.icon-wechat {
      background-color: #41b035;
    }
    &.icon-zhifubao {
      background-color: #06b4fd;
    }
  }
}
.status {
  margin: 20rpx 0;

  .time {
    font-size: 26rpx;
  }

  .status-right {
    font-size: 30rpx;
    color: #33cc33;
    &.active {
      color: red;
    }
  }
}

.address-container {
  display: flex;

  .address {
    width: 100rpx;
  }
}

.tips {
  margin-top: 20rpx;
}

.price-table-row-not {
  display: none !important;
}

::v-deep .center {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.divider {
  width: 100%;
  line-height: 1px;
  height: 1px;
  background-color: #999;
}

.divider2 {
  width: 100%;
  height: 3px;
  background-color: #000;
}

.container {
  height: 100%;
  max-width: 100% !important;
  display: flex;
  flex-direction: column;
  background: #252525 !important;

  .status {
    text-align: right;
    padding-top: 3px;
    padding-right: 10px;
    display: inline-block;
    color: red !important;
    background: #252525 !important;
    font-size: 15px;
  }
}

.header {
  display: flex;
  align-items: center;
  padding: 4px;
}

.page,
.header {
  background: #fff !important;
}

.home {
  height: 100%;
  flex-grow: 1;
  overflow: auto;
  color: #fff;
  margin-top: 5px;

  .page {
    background: #18293a;
    overflow: auto;
    box-sizing: border-box;
    position: relative;

    .tab_header {
      display: flex;
      background: #b5aa90;
      font-size: 16px;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;

      &.white {
        background-color: #fff;
      }

      .col {
        text-align: center;
        padding: 24rpx 0;
        line-height: 23px;
      }

      .col-one {
        width: 245rpx;
        box-sizing: border-box;
        padding-left: 46rpx;
      }
    }

    .theme-container {
      display: flex;
      border-bottom: 4rpx solid #000;

      .horizontal-title {
        color: #000;
        background-color: #e6e6e6;
        font-size: 14px;
        width: 86rpx;
        text-align: center;
        word-break: break-all;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 2rpx solid #999;
        font-weight: 500;
      }

      .theme-item {
        flex-grow: 1;
        flex-shrink: 1;

        .ditem {
          &.greywhite {
            background: #e6e6e6;
          }
        }
      }
    }
  }
}

.tab_header .col {
  border-bottom: 1px solid #999;
}

.tab_content .col {
  border-right: 1px solid #999;
  text-align: center;

  &:last-child {
    border: none;
  }
}

.tab_content {
  overflow-y: auto;

  .price-table-row {
    display: flex;
    justify-content: center;
    color: #808080;
    height: 55px;

    &:nth-child(2n) {
      background: #e6e6e6 !important;
    }
  }

  .name {
    color: #000 !important;
  }

  .col {
    padding: 3px 0;
    line-height: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
  }

  .symbol-name {
    font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
    font-size: 30rpx;
    color: #ff0000;
  }

  .symbole-price {
    width: 100%;
    font-size: 30rpx;
  }
}

.btn-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60rpx;
  width: 40%;
  font-size: 30rpx;
  background-color: #cc9931;
  color: #ffffff;
  border-radius: 100rpx;
  margin: 60rpx auto 20rpx;

  .btn-image {
    width: 30rpx;
    margin-left: 10rpx;
  }

  /* 移除button默认样式 */
  button::after {
    border: none;
  }

  /* 自定义按钮样式 */
  .btn {
    -webkit-appearance: none;
    width: 164rpx;
    height: 60rpx;
    font-size: 26rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #cc9931;
    color: #fff;
    border: none;
    /* 移除点击后的轮廓线 */
    outline: none;

    ::after {
      border: 0rpx solid #cc9931;
      /* 移除点击后的轮廓线 */
      outline: none;
    }
  }

  button[open-type="contact"] {
    outline: none;
    border: none;
    box-shadow: none;
  }
}

/* 价格变动颜色（上升红、下降绿，优先级确保覆盖默认色） */
.symbol-price-rise {
  color: #ff0000 !important;
}

.symbol-price-fall {
  color: #33cc33 !important;
}

.fall {
  border-top: 2rpx solid #999;
}

.pageFooter {
  background: #2c3031 !important;
  padding: 35rpx 50rpx 50rpx 50rpx;
  font-size: 28rpx;
}
</style>