wxapp_shuibei/pages/users/vault/index.vue

<template>
  <view class="container">
    <view v-if="currentTab === 'wallet'" class="wallet-page">
<!--      <view class="new-asset-box">-->
<!--        <view class="new-asset-title">-->
<!--          <image-->
<!--            src="https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/an_20251011162829_903_6.png"-->
<!--            mode="widthFix"-->
<!--          ></image>-->
<!--          <text>资金安全有保障</text>-->
<!--        </view>-->
<!--        <view class="new-asset-content">-->
<!--          <view-->
<!--            class="asset-content-item"-->
<!--            v-for="item in metals"-->
<!--            :key="item.id"-->
<!--          >-->
<!--            <view class="content-item-left">-->
<!--              <image :src="item.icon" mode="widthFix"></image>-->
<!--              <text>{{ item.name }}</text>-->
<!--            </view>-->
<!--            <view class="content-item-right">{{ item.balance }}</view>-->
<!--          </view>-->
<!--        </view>-->
<!--      </view>-->
<!--      <view class="asset-tips">-->
<!--        <view class="zc">资产说明：</view>-->
<!--        <view-->
<!--          >贵金属账户里的金料随时可以在本平台内选购商品并抵扣金重，或以实时金价出售给本平台转换成现金</view-->
<!--        >-->
<!--      </view>-->

      <view class="record-container">
<!--        <view class="record-title">交易记录</view>-->
        <view class="record-tabs">
          <view
            class="record-tab"
            :class="{ active: recordTab === 'change' }"
            @click="switchRecordTab('change')"
          >
            交易
          </view>
          <view
            class="record-tab"
            :class="{ active: recordTab === 'recharge' }"
            @click="switchRecordTab('recharge')"
          >
            充值
          </view>
          <view
            class="record-tab"
            :class="{ active: recordTab === 'withdraw' }"
            @click="switchRecordTab('withdraw')"
          >
            提现
          </view>
          <!-- <view
            class="record-tab"
            :class="{ active: recordTab === 'consume' }"
            @click="switchRecordTab('consume')"
          >
            消费
          </view> -->
          <view
            class="record-tab"
            :class="{ active: recordTab === 'buygold' }"
            @click="switchRecordTab('buygold')"
          >
            买料
          </view>
          <view
            class="record-tab"
            :class="{ active: recordTab === 'soldgold' }"
            @click="switchRecordTab('soldgold')"
          >
            卖料
          </view>
          <view
            class="record-tab"
            :class="{ active: recordTab === 'savegold' }"
            @click="switchRecordTab('savegold')"
          >
            存料
          </view>
          <view
            class="record-tab"
            :class="{ active: recordTab === 'materialdeduction' }"
            @click="switchRecordTab('materialdeduction')"
          >
            扣料
          </view>
        </view>

        <z-paging
          class="paging-box"
          ref="pagingRef"
          use-page-scroll
          v-model="recordList"
          @query="queryList"
          @refresherTouchend="refresherTouchend"
          :fixed="false"
          :empty-view-text="getEmptyText()"
        >
          <view
            class="list-item"
            v-for="(item, index) in combineList"
            :key="index"
          >
            <view class="item-left">
              <view class="item-title">
                <text class="title">{{ item.title || item.comeFor }}</text>
                <text class="status" v-if="item.statusMsg">
                  {{ item.statusMsg }}
                </text>
              </view>
              <view
                class="item-title"
                v-if="
                  item?.realTimePrice &&
                  ['buygold', 'soldgold'].includes(recordTab)
                "
              >
                <!-- <text class="title">金价：{{ item.realTimePrice }}</text> -->
              </view>
              <view
                class="item-detail"
                v-if="
                  Number(item.amount) != 0 && recordTab !== 'materialdeduction'
                "
              >
                <text
                  class="detail-label"
                  v-if="
                    item?.realTimePrice &&
                    ['buygold', 'soldgold'].includes(recordTab)
                  "
                >
                  金价：{{ item.realTimePrice }}
                </text>
                <text class="detail-label"> 金额： </text>
                <text class="detail-value">{{ item.amount }}</text>
              </view>

              <!-- 扣料显示扣料克重 -->
              <view
                class="item-detail"
                v-if="recordTab === 'materialdeduction'"
              >
                <view class="detail-label">
                  贵金属类型：{{ item.metalTypeMsg }}
                </view>
                <text class="detail-label"> 金重： </text>
                <text class="detail-value">{{ item.weight }}</text>
              </view>

              <view class="item-time">
                {{ recordTab === "change" ? item.add_time : item.createTime }}
              </view>
            </view>
            <view class="item-right">
              <template v-if="recordTab === 'recharge'">
                <view
                  class="item-amount"
                  :class="{
                    positive: item.paid,
                    fail: !item.paid,
                  }"
                >
                  <text v-if="item.paid"
                    >{{ item.type === "income" ? "+" : "-"
                    }}{{ item.amount }}</text
                  >
                  <text v-else>0</text>
                </view>
              </template>

              <template v-else-if="recordTab === 'withdraw'">
                <view
                  class="item-amount"
                  :class="{
                    positive: item.status === 1,
                    fail: item.status !== 1,
                  }"
                >
                  <text v-if="item.status !== -1">-{{ item.amount }}</text>
                  <text v-else class="fail-msg">{{ item.failMsg }}</text>
                </view>
                <!-- 添加查看详情按钮 -->
                <view
                  v-if="item.status === 1"
                  class="detail-btn"
                  @click="viewDetail(item)"
                >
                  查看详情
                </view>
              </template>

              <template v-else-if="recordTab == 'consume'">
                <view class="item-amount"> -{{ item.amount }}</view>
                <view class="flex-center-flex-end gray metalTypeMsg"
                  >{{ item.metalTypeMsg }}({{ item.weight }}g)</view
                >
              </template>
              <template v-else-if="recordTab == 'buygold'">
                <view class="item-amount" v-if="item.amount !== '0.00'">
                  -{{ item.amount }}
                </view>
                <view class="flex-center-flex-end gray metalTypeMsg"
                  >{{ item.metalTypeMsg }}+({{ item.weight }}g)</view
                >
              </template>
              <template v-else-if="recordTab == 'soldgold'">
                <view class="item-amount" v-if="item.amount !== '0.00'">
                  +{{ item.amount }}
                </view>
                <view class="flex-center-flex-end gray metalTypeMsg"
                  >{{ item.metalTypeMsg }}-({{ item.weight }}g)</view
                >
              </template>
              <template v-else-if="recordTab == 'savegold'">
                <view
                  class="item-amount"
                  :class="{
                    positive: item.status === 1,
                    fail: item.status !== 1,
                  }"
                  style="margin-top: 10px"
                >
                  {{ item.metalTypeMsg }}+({{ item.weight }}g)
                </view>
                <view
                  class="flex-center-flex-end gray metalTypeMsg"
                  v-if="item.status == 6"
                >
                  驳回理由: {{ item.remark }}</view
                >

                <!-- <view class="flex-center-flex-end gray metalTypeMsg"
                  >驳回理由:{{ item.status }}</view
                > -->
              </template>
              <template v-else-if="recordTab == 'change'">
                <view
                  class="item-amount"
                  :class="{
                    positive: item.status === 1,
                    fail: item.status !== 1,
                  }"
                  style="margin-top: 10px"
                >
                  {{ item.pm == 0 ? "-" : "+" }} {{ item.amount }}
                </view>

                <!-- <view class="flex-center-flex-end gray metalTypeMsg"
                  >驳回理由:{{ item.status }}</view
                > -->
              </template>
            </view>
          </view>
        </z-paging>
      </view>
    </view>

    <!-- 提现详情弹窗 -->
    <uni-popup
      ref="detailPopup"
      type="center"
      :safeArea="false"
      backgroundColor="rgba(0,0,0,0.5)"
    >
      <view class="detail-popup">
        <view class="popup-header">
          <text class="popup-title">提现详情</text>
          <view class="close-btn" @click="closeDetail">✕</view>
        </view>
        <view class="popup-content">
          <view class="detail-item">
            <text class="label">提现金额：</text>
            <text class="value">¥{{ currentDetail.amount }}</text>
          </view>
          <view class="detail-item" v-if="currentDetail.createTime">
            <text class="label">提现时间：</text>
            <text class="value">{{ currentDetail.createTime }}</text>
          </view>

          <view
            class="detail-item"
            v-if="
              currentDetail.transferImg && currentDetail.transferImg.length > 0
            "
          >
            <text class="label">转账凭证：</text>
            <view class="image-list">
              <image
                v-for="(img, index) in currentDetail.transferImg"
                :key="index"
                :src="img"
                mode="aspectFill"
                class="transfer-image"
                @click="previewImage(currentDetail.transferImg, index)"
              ></image>
            </view>
          </view>
          <view class="detail-item" v-if="currentDetail.remark">
            <text class="label">备注：</text>
            <text class="value">{{ currentDetail.remark }}</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
import { useAppStore } from "@/stores/app";
import { useToast } from "@/hooks/useToast";
import { getUserInfo } from "@/api/user";
import {
  getWithdrawList,
  getRechargeList,
  getConsumeList,
  getMetalBalance,
} from "@/api/vault";

const appStore = useAppStore();

const { Toast } = useToast();

const pagingRef = ref(null);

useZPaging(pagingRef);

// 当前tab
const currentTab = ref("wallet");
// 记录tab
const recordTab = ref("change");
// 列表数据
const recordList = ref([]);

// metals 初始值 balance 设为 0
const metals = ref([
  {
    id: 0,
    type: -1,
    name: "余额 (￥)",
    balance: appStore.userInfo?.nowMoney || 0,
    unit: "g",
    icon: "https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/qian_20250929211527_562_6.png",
  },
  {
    id: 1,
    type: 1,
    name: "黄金 (g)",
    balance: 0,
    unit: "g",
    icon: "https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/au_20250929211527_561_6.png",
  },
  {
    id: 2,
    type: 2,
    name: "铂金 (g)",
    balance: 0,
    unit: "g",
    icon: "https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/pt_20250929211527_564_6.png",
  },
  {
    id: 3,
    type: 3,
    name: "白银 (g)",
    balance: 0,
    unit: "g",
    icon: "https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/ag_20250929211527_565_6.png",
  },
]);

async function fetchMetalBalance() {
  // 若appStore.uid为空，则请求失败
  if (!appStore?.uid) {
    Toast({ title: "未登录，请前往登录后访问" });
    return;
  }
  const params = { userId: appStore.uid };
  const { data } = await getMetalBalance(params);

  metals.value = metals.value.map((metal) => {
    const metalValue = data[metal.type];
    return metalValue !== undefined ? { ...metal, balance: metalValue } : metal;
  });
}

// 不要在 onLoad 里请求 fetchMetalBalance
onLoad((options) => {
  console.log('options==============')
  console.log(options)
  if(options.type){
    switchRecordTab(options.type)
  }
});

const combineList = computed(() => {
  if (recordTab.value === "recharge") {
    return recordList.value.map((v) => {
      return {
        type: "income",
        title: v.rechargeType == "bank_transfer" ? "银行卡" : "支付宝",
        amount: v.price,
        // 是否充值
        paid: v.paid,
        createTime: v.createTime,
        status: v.paid,
        statusMsg:
          v.rechargeType === "bank_transfer"
            ? v.paid
              ? "充值成功"
              : "审核中"
            : v.paid
            ? "充值成功"
            : "充值失败",
      };
    });
  } else if (recordTab.value === "change") {
    const statusMap = {
      "-1": "未通过",
      0: "待审核",
      1: "审核成功",
    };

    return recordList.value.map((v) => {
      return {
        ...v,
        type: "expenditure",
        title: v.title,
        failMsg: v.failMsg,
        amount: v.number,
        createTime: v.createTime,
        status: v.status,
        statusMsg: statusMap[v.status] || "未知状态",
      };
    });
  } else if (recordTab.value === "withdraw") {
    const statusMap = {
      "-1": "未通过",
      0: "审核中",
      1: "已提现",
    };

    return recordList.value.map((v) => {
      return {
        type: "expenditure",
        title: "提现记录",
        failMsg: v.failMsg,
        amount: v.extractPrice,
        createTime: v.createTime,
        status: v.status,
        statusMsg: statusMap[v.status] || "未知状态",
        remark: v.mark || "",
        transferImg: v.successImage || (v.successImage ? [v.successImage] : []),
      };
    });
  } else if (recordTab.value === "consume") {
    const statusMap = {
      1: "存金",
      2: "换款",
      3: "每日一攒",
      4: "买金",
      5: "兑换金条",
      6: "自动买卖",
    };
    const metalTypeMap = {
      1: "黄金",
      2: "铂金",
      3: "白银",
    };
    return recordList.value.map((v) => {
      return {
        type: "expenditure",
        title: "消费记录",
        amount: v.price,
        weight: v.weight,
        createTime: v.createTime,
        // status: statusMap[v.status] || '未知状态'
        status: v.operationType,
        statusMsg: statusMap[v.operationType],
        metalTypeMsg: metalTypeMap[v.metalType],
      };
    });
  } else if (recordTab.value === "buygold") {
    const statusMap = {
      // 6: "买料",
    };
    const metalTypeMap = {
      1: "黄金",
      2: "铂金",
      3: "白银",
    };
    return recordList.value.map((v) => {
      return {
        type: "expenditure",
        title: v.remark,
        amount: v.price,
        weight: v.weight,
        createTime: v.createTime,
        realTimePrice: v.realTimePrice,
        comeFor: v.comeFor,
        // status: statusMap[v.status] || '未知状态'
        status: v.operationType,
        statusMsg: statusMap[v.operationType],
        metalTypeMsg: metalTypeMap[v.metalType],
      };
    });
  } else if (recordTab.value === "soldgold") {
    const statusMap = {
      // 6: "卖料",
    };
    const metalTypeMap = {
      1: "黄金",
      2: "铂金",
      3: "白银",
    };
    return recordList.value.map((v) => {
      return {
        type: "expenditure",
        title: v.remark,
        amount: v.price,
        weight: v.weight,
        createTime: v.createTime,
        realTimePrice: v.realTimePrice,
        comeFor: v.comeFor,
        // status: statusMap[v.status] || '未知状态'
        status: v.operationType,
        statusMsg: statusMap[v.operationType],
        metalTypeMsg: metalTypeMap[v.metalType],
      };
    });
  } else if (recordTab.value === "savegold") {
    const statusMap = {
      0: "待审核",
      1: "已审核",
      6: "驳回",
    };
    const metalTypeMap = {
      1: "黄金",
      2: "铂金",
      3: "白银",
    };
    return recordList.value.map((v) => {
      return {
        ...v,
        type: "expenditure",
        title: v.comeFor,
        amount: v.price,
        weight: v.weight,
        createTime: v.createTime,
        statusMsg: statusMap[v.status] || "未知状态",
        metalTypeMsg: metalTypeMap[v.metalType],
      };
    });
  } else if (recordTab.value === "materialdeduction") {
    const metalTypeMap = {
      1: "黄金",
      2: "铂金",
      3: "白银",
    };
    return recordList.value.map((v) => {
      return {
        title: v.remark,
        amount: v.price,
        weight: v.weight,
        comeFor: v.comeFor,
        realTimePrice: v.realTimePrice,
        createTime: v.createTime,
        metalTypeMsg: metalTypeMap[v.metalType],
      };
    });
  }
  return []; // 添加默认返回值
});

// 切换记录tab
const switchRecordTab = (tab) => {
  recordTab.value = tab;
  // 重新加载数据
  recordList.value = [];
  pagingRef.value?.reload();
};

// 获取空状态文本
const getEmptyText = () => {
  const textMap = {
    recharge: "暂无充值记录",
    withdraw: "暂无提现记录",
    consume: "暂无消费记录",
  };
  return textMap[recordTab.value] || "暂无数据";
};

// 查询列表数据
const queryList = async (page, pageSize) => {
  // 若appStore.uid为空，则请求失败
  if (!appStore?.uid) {
    Toast({ title: "未登录，请前往登录后访问" });
    return;
  }
  try {
    const { data } = await fetchRecordList(page, pageSize);
    // 通过组件的complete方法将数据传递给z-paging

    pagingRef.value?.complete(data.list);
  } catch (error) {
    console.error("查询失败:", error);
    pagingRef.value?.complete(false);
    Toast({ title: "查询失败" });
  }
};

async function fetchRecordList(page, pageSize) {
  // 若appStore.uid为空，则请求失败
  if (!appStore?.uid) {
    Toast({ title: "未登录，请前往登录后访问" });
    return { data: [] };
  }
  const params = { page, pageSize, uid: appStore.uid, userId: appStore.uid };
  if (recordTab.value === "recharge") {
    return await getRechargeList(params);
  } else if (recordTab.value === "withdraw") {
    return await getWithdrawList(params);
  } else if (recordTab.value === "consume") {
    return await getConsumeList({ ...params, type: 6 });
  } else if (recordTab.value === "buygold") {
    const res = await getConsumeList({ ...params, type: 6 });
    // 2. 过滤出 operationType == 4 的数据
    const filteredList = res.data.list.filter((item) =>
      [3, 4].includes(item.operationType)
    );

    // 3. 关键：同步更新分页字段，确保格式与其他分支一致
    return {
      ...res, // 保留原始响应的其他字段（如 code、message 等）
      data: {
        list: filteredList, // 替换为过滤后的列表
      },
    };
  } else if (recordTab.value === "soldgold") {
    const res = await getConsumeList({ ...params, type: 6 });
    // 2. 过滤出 operationType == 4 的数据
    const filteredList = res.data.list.filter((item) =>
      [6, 3].includes(item.operationType)
    );

    // 3. 关键：同步更新分页字段，确保格式与其他分支一致
    return {
      ...res, // 保留原始响应的其他字段（如 code、message 等）
      data: {
        list: filteredList, // 替换为过滤后的列表
      },
    };
  } else if (recordTab.value === "savegold") {
    const res = await getConsumeList({ ...params, type: 6 });
    // 2. 过滤出 operationType == 4 的数据
    const filteredList = res.data.list.filter((item) =>
      [1].includes(item.operationType)
    );

    // 3. 关键：同步更新分页字段，确保格式与其他分支一致
    return {
      ...res, // 保留原始响应的其他字段（如 code、message 等）
      data: {
        list: filteredList, // 替换为过滤后的列表
      },
    };
  } else if (recordTab.value === "change") {
    const res = await getConsumeList({ ...params, type: 4 });
    return res;
    // 2. 过滤出 operationType == 4 的数据
  } else if (recordTab.value === "materialdeduction") {
    const res = await getConsumeList({ ...params, type: 6 });
    // 2. 过滤出 operationType == 4 的数据
    const filteredList = res.data.list.filter((item) =>
      [10].includes(item.operationType)
    );
    return {
      ...res, // 保留原始响应的其他字段（如 code、message 等）
      data: {
        list: filteredList, // 替换为过滤后的列表
      },
    };
  }
}

async function updateUserInfo() {
  const { data } = await getUserInfo();
  appStore.UPDATE_USERINFO(data);
}

function refresherTouchend() {
  updateUserInfo();
}

// 添加弹窗相关数据
const detailPopup = ref(null);
const currentDetail = ref({
  amount: "",
  createTime: "",
  remark: "",
  transferImg: [],
});

// 查看详情方法
const viewDetail = (item) => {
  currentDetail.value = {
    amount: item.amount,
    createTime: item.createTime,
    remark: item.remark || "",
    transferImg: JSON.parse(item.transferImg) || [],
  };
  detailPopup.value.open();
};

// 关闭详情弹窗
const closeDetail = () => {
  detailPopup.value.close();
};

// 预览图片
const previewImage = (urls, current) => {
  uni.previewImage({
    urls: urls,
    current: current,
  });
};

onShow(() => {
  updateUserInfo();
  fetchMetalBalance();
});
</script>

<style lang="scss" scoped>
$primary-color: #e9c279;
$text-color: #333;
$text-secondary: #666;
$text-light: #999;
$bg-color: #f5f5f5;
$white: #fff;
$border-color: #e5e5e5;

.new-asset-box {
  width: 100%;
  height: 519rpx;
  background-color: #f7ecd8;
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20rpx;

  .new-asset-title {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 25rpx;
      margin: 0 15rpx;
    }
    text {
      font-size: 26rpx;
      // color: #cc9933;
      color: #f8c007;
    }
  }
  .new-asset-content {
    width: 100%;
    height: 453rpx;
    background-color: #ffffff;
    // border-top-left-radius: 20rpx;
    // border-top-right-radius: 20rpx;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    padding: 0 30rpx;
    box-sizing: border-box;

    .asset-content-item {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2rpx dashed #979797;
      &:last-child {
        border-bottom: none;
      }
      .content-item-left {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        font-weight: bold;
        color: #000000;
        image {
          width: 50rpx;
          margin: 0rpx 20rpx 0 10rpx;
        }
      }
      .content-item-right {
        font-size: 22rpx;
        // color: #cc9933;
        color: $txt-color;
        margin-right: 20rpx;
      }
    }
  }
}
.container {
  min-height: 90vh;
  overflow: hidden;
  position: relative;
  background: $uni-bg-primary;
}

.asset-tips {
  width: 684rpx;
  height: 231rpx;
  background-color: #ffffff;
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
  border-radius: 20rpx;
  box-sizing: border-box;
  margin: 20rpx 0;
  padding: 10rpx 45rpx;
  font-size: 26rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .zc {
    margin-bottom: 20rpx;
  }
}
.record-container {
  background: #fff;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 30rpx 45rpx;
  // 记录tab样式
  .record-title {
    font-weight: bold;
    font-size: 26rpx;
  }
  .record-tabs {
    display: flex;
    width: 100%;
    text-align: center;
    font-size: 28rpx;
    color: #000000;
    transition: all 0.3s;
    .record-tab {
      flex: 1;
      display: flex;
      font-size: 26rpx;
      color: #767676;
      justify-content: center;

      margin: 32rpx 0;
      position: relative;
      &.active {
        color: #000;
      }
      &.active::after {
        content: "";
        position: absolute;
        bottom: -10rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 55rpx;
        height: 4rpx;
        background-color: $theme-color;
        border-radius: 3rpx;
      }
    }
  }
}
// 钱包页面样式
.wallet-page {
  position: relative;
  padding: 32rpx;
}

.balance-card {
  background: $white;
  border-radius: 24rpx;
  padding: 48rpx 32rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

  .balance-label {
    font-size: 28rpx;
    color: $text-secondary;
    margin-bottom: 16rpx;
  }

  .balance-amount {
    display: flex;
    align-items: baseline;
    margin-bottom: 48rpx;

    .currency {
      font-size: 32rpx;
      color: $primary-color;
      margin-right: 8rpx;
    }

    .amount {
      font-size: 58rpx;
      // font-weight: bold;
      color: $primary-color;
    }

    .unit {
      font-size: 28rpx;
      color: $text-secondary;
      margin-left: 8rpx;
    }
  }

  .action-buttons {
    display: flex;
    gap: 24rpx;

    .action-btn {
      flex: 1;
      text-align: center;
      padding: 28rpx 0;
      border-radius: 16rpx;
      font-size: 32rpx;
      background: #f0f0f0;
      color: $text-color;

      &.primary {
        background: $primary-color;
        color: $white;
      }
    }
  }
}

.paging-box {
  min-height: 45vh;
}

.record-tip {
  text-align: center;
  font-size: 24rpx;
  color: $text-light;
  margin-bottom: 32rpx;
}

// 列表样式
.list-item {
  background: $white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 0;

  margin-bottom: 16rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  .item-left {
    flex: 1;

    .item-title {
      font-size: 22rpx;
      color: $text-color;
      margin-bottom: 8rpx;
      font-weight: 500;

      .status {
        background-color: $header-color;
        font-size: 22rpx;
        color: #fff;
        padding: 2rpx 8rpx;
        border-radius: 10rpx;
        margin-left: 15rpx;
      }
    }

    .item-status {
      display: inline-block;
      background: $primary-color;
      color: $white;
      font-size: 22rpx;
      padding: 6rpx 16rpx;
      border-radius: 12rpx;
      margin-bottom: 12rpx;
    }

    .item-detail {
      margin-bottom: 12rpx;

      .detail-label {
        font-size: 22rpx;
        color: $text-secondary;
      }

      .detail-value {
        font-size: 22rpx;
        color: $text-color;
      }
    }

    .item-time {
      font-size: 22rpx;
      color: $text-light;
    }
  }

  .item-right {
    min-width: 180rpx;
    // flex: 1;
    // flex: 0 0 150rpx; // 不允许伸缩
    text-align: right;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    margin-left: 24rpx;

    .item-amount {
      font-size: 22rpx;
      font-weight: bold;
      color: #000;
      text-align: right;

      &.positive {
        color: #e9c279;
      }

      &.fail {
        color: #ccc;
      }
      .fail-msg {
        font-size: 22rpx;
      }
    }

    .metalTypeMsg {
      font-size: 22rpx;
      color: #cc9933 !important;
    }

    .detail-btn {
      font-size: 22rpx;
      color: #e9c279;
      margin-top: 10rpx;
      padding: 6rpx 16rpx;
      border: 1px solid #e9c279;
      border-radius: 8rpx;
    }
  }
}

// 贵金属页面样式
.precious-page {
  position: relative;
  padding: 32rpx;

  .metals-list {
    .metal-card-border {
      padding: 3px; // 边框宽度
      border-radius: 24rpx; // 比metal-card略大
      background: linear-gradient(135deg, #f7d08a, #e9c279, #fff6e0, #c49b47);
      // 可根据需要调整渐变色
      margin-bottom: 30rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    }
    .metal-card {
      background-image: linear-gradient(to bottom, #fdf8ee, #fcefdc);
      border-radius: 20rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

      .card-top {
        display: flex;
        justify-content: space-between;
        padding: 40rpx 30rpx;
      }

      .info-section {
        .metal-name {
          font-size: 22rpx;
          color: $text-color;
          font-weight: bold;
        }
        .balance {
          margin-top: 20rpx;
          display: flex;
          align-items: baseline;
          .amount {
            font-size: 22rpx;
            font-weight: bold;
            color: #c49b47;
          }
          .unit {
            font-size: 22rpx;
            color: $text-secondary;
            margin-left: 10rpx;
          }
        }
      }

      .action-section {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .action-btn {
          margin: 0;
          padding: 0 40rpx;
          font-size: 22rpx;
          height: 64rpx;
          line-height: 64rpx;
          border-radius: 32rpx;
          color: $white;
          &::after {
            border: none;
          }

          &.deposit-btn {
            background-color: #fae2a6;
            color: #958255;
            margin-bottom: 20rpx;
          }
          &.withdraw-btn {
            background-color: $primary-color;
          }
        }
      }

      .card-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: $primary-color;
        color: $white;
        padding: 20rpx 30rpx;
        font-size: 22rpx;

        .arrow {
          font-family: "Courier New", Courier, monospace;
          font-weight: bold;
          font-size: 22rpx;
        }
      }
    }
  }
  .asset-description {
    background-color: $white;
    padding: 30rpx;
    border-radius: 20rpx;
    font-size: 22rpx;
    line-height: 1.7;
    color: $text-secondary;

    .desc-title {
      color: $text-color;
      font-weight: bold;
      display: block;
      margin-bottom: 10rpx;
    }
  }
}

.detail-popup {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #eee;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  font-size: 40rpx;
  color: #999;
  line-height: 1;
}

.popup-content {
  padding: 30rpx;
  max-height: 600rpx;
  overflow-y: auto;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24rpx;
  font-size: 28rpx;

  .label {
    color: #666;
    min-width: 160rpx;
    flex-shrink: 0;
  }

  .value {
    color: #333;
    flex: 1;
    word-break: break-all;
  }
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-top: 16rpx;
}

.transfer-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  border: 1px solid #eee;
}
</style>