wxapp_shuibei/pages/mall/dapan.vue

<template>
  <view class="container">
    <view class="notice-box">
      <image class="iconfont" src="/static/images/notice@2x.png" mode=""></image>
      <up-notice-bar icon="" :text="text1" :step="true" bgColor="transparent" color="#333333"></up-notice-bar>
    </view>



    <view class="home">
      <view class="page">
        <view class="status">
          <image src="/static/images/time@2x.png" mode=""></image>
          <span class="time">
						{{ timeFormat(timestamp, "yyyy-mm-dd hh:MM:ss") }}
					</span>
          <span class="status-right" :class="{ active: !isOpen }">
						{{ !isOpen ? "闭盘" : "开盘" }}
					</span>
        </view>
        <view class="page-box">
          <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" v-if="false">
                  <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" v-if="false">
                  <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>
        </view>
        <view class="tips">
          <up-parse :content="dapan_agreement"></up-parse>
          <!-- <view @click="navigate">点击查看详情</view> -->
        </view>
      </view>

      <view class="pageFooter">
        <image src="/static/images/shou@2x.png" mode=""></image>
        <view class="item">
          <view class="address">
            <view class="address-name">
              <text>{{ appStore.$wxConfig.mailerName }}</text>
              <text>{{ appStore.$wxConfig.mailerPhone }}</text>
            </view>
            <view class="address-detail">
              地址:
              {{ appStore.$wxConfig.mailingAddress }}
            </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;
        break;
      case "kau":
        svipKgoldPrice.value = item.svipDiscountPerGram;
        break;
      case "pt":
        svipPtPrice.value = item.svipDiscountPerGram;
        break;
      case "ag":
        svipAgPrice.value = item.svipDiscountPerGram;
        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 }; // 默认权益为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 }; // 出错时默认权益为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>
page {
  background: #F9F7F0;
}
</style>
<style lang="scss" scoped>


.callService {
  padding: 20px 10px 0px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: 16px;

  .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 {
  height: 72rpx;
  margin-bottom: 16rpx;
  background: #FEF2CE;
  display: flex;
  padding: 0rpx 16rpx;

  align-items: center;

  .iconfont {
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
  }
}

.status {
  font-size: 32rpx;
  font-weight: bold;
  .status-right {
    color: #F8C008;
    margin-left: 8rpx;
  }
}

.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 {
  padding-bottom: 16rpx;

  .status {
    height: 88rpx;
    display: flex;
    align-items: center;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 20rpx;
    }
  }
}

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

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

.home {
  padding: 0 16rpx;

  .page {
    padding: 0 16rpx 16rpx;
    background: #FFFFFF;
    border-radius: 16rpx;

    .page-box {
      overflow: hidden;
      border: 1rpx solid #333333;
      background: #F8C008;
      border-radius: 16rpx;
    }

    .tab_header {
      display: flex;
      background: #F8C008;
      font-size: 28rpx;
      width: 100%;
      font-weight: bold;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      border-radius: 16rpx 16rpx 0 0;

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

      .col {
        text-align: center;
        padding: 16rpx 0;
      }

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

    .theme-container {
      display: flex;
      border-bottom: 1rpx solid #333333;

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

      .horizontal-title {
        color: #333333;
        background-color: #F8C008;
        font-size: 28rpx;
        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: 1rpx solid #333333;
        font-weight: bold;
      }

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

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

.tab_header .col {
  border-bottom: 1rpx solid #333333;
}

.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: 96rpx;
    background: #FFFFFF;

    &:nth-child(2n) {
      background: #F9F7F0;
    }
  }

  .name {
    color: #000 !important;
  }

  .col {
    line-height: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;
    font-size: 24rpx;
  }

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

  .symbole-price {
    font-size: 24rpx;
  }
}

.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: #F52929;
}

.symbol-price-fall {
  color: #2DAB6C;
}

.pageFooter {
  display: flex;
  align-items: center;
  margin-top: 16rpx;
  background: #FFFFFF;
  padding: 16rpx;
  font-size: 28rpx;
  border-radius: 16rpx;

  .item {
    flex: 1;
    padding-left: 16rpx;
    border-left: 2rpx solid #F1F3F8;
    .address-name {
      font-weight: bold;
      text {
        &:last-child {
          margin-left: 32rpx;
        }
      }
    }
    .address-detail {
      color: #666666;
      line-height: 40rpx;
      font-size: 24rpx;
      margin-top: 6rpx;
    }
  }

  image {
    width: 72rpx;
    height: 72rpx;
    margin-right: 16rpx;
  }
}
</style>