wxapp_shuibei/pages/users/vault/trade_list.vue

<template>
  <view class="records-page">
    <view class="tab-header">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        :class="['tab-item', { 'is-active': activeTab === tab.id }]"
        @click="changeTab(tab.id)"
      >
        {{ tab.name }}
      </view>
    </view>

    <z-paging
      ref="paging"
      v-model="dataList"
      @query="queryList"
      :use-page-scroll="true"
      :show-refresher-update-time="true"
      :empty-view-text="emptyText"
      :refresher-enabled="true"
      :loading-text-no-more="loadingNoMoreText"
      :hide-loading-more-when-no-more-by-default="true"
    >
      <view
        v-for="(item, index) in dataList"
        :key="index"
        class="record-item-wrapper"
      >
        <view class="record-item">
          <view class="item-left">
            <view class="top">
              <text class="item-title">{{ metalTypeMap[metalType] || '黄金' }}</text>
              <view
                :class="[
                  'status-tag',
                  item.status === '待审核' ? 'status-pending' : 'status-live',
                ]"
              >
                {{ statusMap[item.status] }}
              </view>
            </view>
            <view class="time">
              <text class="item-time">{{ item.createTime }}</text>
            </view>
          </view>
          <view class="item-right">
            <text class="item-weight">{{ item.weight }}</text>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
import { useAppStore } from "@/stores/app";
import { goldTradelist } from "@/api/vault";



const paging = ref(null);
useZPaging(paging)

const appStore = useAppStore();

const dataList = ref([]);

const activeTab = ref(0);
const emptyText = ref("");
const loadingNoMoreText = ref("我也是有底线的");
const statusMap = {
  1: '已完成',
  2: '待签收',
  3: '待检测',
  4: '待确认',
  5: '待打款'
}

const tabs = [
  {
    id: 0,
    name: "存入记录",
    empty: "暂无存入记录",
  },
  {
    id: 1,
    name: "换款记录",
    empty: "暂无换款记录",
  },
  {
    id: 2,
    name: "出售记录",
    empty: "暂无出售记录",
  },
];

const metalTypeMap = {
  1: '黄金',
  2: '铂金',
  3: '白银'
}
const metalType = ref(1)

onLoad((options) => {
  if (options?.metalType) {
    metalType.value = Number(options.metalType) 
    uni.setNavigationBarTitle({
      title: metalTypeMap[options.metalType]+"明细"
    })
  }
 
})

const queryList = async (pageNo, pageSize) => {
  emptyText.value = tabs.find((tab) => tab.id === activeTab.value).empty;

  try {
    const tempParams = {
      page: pageNo,
      limit: pageSize,
      metalType: metalType.value,
      isDel: 0,
      userId: appStore.uid,
    }
    const params = Object.assign({}, tempParams, tabParams.value)
    console.log('params', params)
    const { data } = await goldTradelist(params);

    if (paging.value) {
      paging.value.complete(data.list);
    }
  } catch (error) {
    console.error("goldTradelist", error);
    paging.value.complete(false);
  }

};

const tabParams = ref({
  type: 1
})
const changeTab = (tabId) => {
  if (activeTab.value === tabId) return; 
  activeTab.value = tabId;
  if (tabId === 0) {
    tabParams.value = { type: 1 }
  } else if (tabId === 1) {
    tabParams.value = { operationType: 2 }
  } else if (tabId === 2) {
    tabParams.value = { type: 0 }
  }
  
  nextTick(() => {
    if (paging.value) {
      paging.value.reload();
    }
  });
};
</script>

<style lang="scss">
$theme-color: #e9c279;
$border-color: #f0f0f0;
$text-color-light: #999;
$text-color-dark: #333;
$button-text-color: #fff;
$gold-tag-bg: #ffeac7; // Light yellow for "直播间换金" tag
$gold-tag-text: #e9c279; // Darker yellow for text
$pending-tag-bg: #f0f0f0; // Light gray for "待审核" tag
$pending-tag-text: #666; // Darker gray for text

.records-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.tab-header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  padding: 20rpx 0;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  .tab-item {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    color: $text-color-dark;
    padding: 15rpx 0;
    position: relative;
    cursor: pointer; // Indicate clickable

    &.is-active {
      color: $theme-color;
      font-weight: bold;

      &::after {
        content: "";
        position: absolute;
        bottom: -10rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 6rpx;
        background-color: $theme-color;
        border-radius: 3rpx;
      }
    }
  }
}

/* z-paging specific styles (optional, but good to have some defaults) */
:deep(.z-paging-content) {
  padding-top: 20rpx; // Space below the tabs
}

.record-item-wrapper {
  padding: 0 30rpx;
  margin-bottom: 20rpx; // Spacing between cards

  &:first-child {
    // No extra margin-top for the first item if needed
  }
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  .item-left {

    .item-title {
      font-size: 32rpx;
      color: $text-color-dark;
      font-weight: bold;
      margin-right: 15rpx;
    }

    .status-tag {
      font-size: 24rpx;
      padding: 8rpx 16rpx;
      border-radius: 8rpx;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .status-live {
      background-color: $header-color;
      color: #fff;
    }

    .status-pending {
      background-color: $pending-tag-bg;
      color: $pending-tag-text;
    }
  }


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

  .item-right {
    flex-shrink: 0;
    margin-left: 20rpx;
    text-align: right;
  }

  .item-weight {
    font-size: 36rpx;
    font-weight: bold;
    color: $header-color;
  }
}
</style>