wxapp_shuibei/pages/users/browsing_history/index.vue

<template>
  <view class="container">
    <view class="record-list">
      <view
          v-for="(record, index) in records"
          :key="index"
          class="record-item"
      >
        <view class="icon-container">
          <image :src="record.merchantLogo" mode="aspectFit"></image>
        </view>
        <view class="info-container">
          <view class="shop-name">{{ record.merchantName }}</view>
          <view class="browse-time">浏览时间：{{ record.createTime }}</view>
        </view>
        <button class="action-btn">商城主页</button>
      </view>
      <view class="loadingicon acea-row row-center-wrapper" v-if="goodScroll">
        <text
            class="loading iconfont icon-jiazai"
            :hidden="loading == false"
        ></text>
      </view>
      <view class="no-data" v-if="isNoDataState">
        <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/zhanwu_20250827104005_1720_6.png"
        />
      </view>
      <view class="mores-txt flex" v-if="!goodScroll && !isNoDataState">
        <text>我是有底线的</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import {computed, ref} from 'vue';
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
import { footprintList } from "@/api/merchant.js";

const records = ref([]);
const loading = ref(false);
const goodScroll = ref(true);
// Pagination
const params = ref({
  page: 1,
  limit: 10,
});

onLoad(() => {
  getList();
});
onReachBottom(() => {
  getList();
});

const isNoDataState = computed(() => {
  return records.value.length === 0 && !loading.value;
});
const getList = async () => {
  if (!goodScroll.value) return;
  try {
    loading.value = true;
    const { data } = await footprintList(params.value);
    console.log(data);
    records.value = [...records.value, ...data.records] || [];
    goodScroll.value = data.records.length >= params.value.limit;
    params.value.page++;
  } catch (err) {
    console.error(err);
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  box-sizing: border-box;
}

.record-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.record-item {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
}

.icon-container {
  width: 100rpx;
  height: 100rpx;
  border-radius: 16rpx;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}



.info-container {
  flex: 1;
}

.shop-name {
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 10rpx;
  color: #333;
}

.browse-time {
  font-size: 24rpx;
  color: #666666;
}

.action-btn {
  background-color: rgba(248, 192, 8, 0.10);
  color: #F8C008;
  border: none;
  border-radius: 16rpx;
  padding: 12rpx 24rpx;
  font-size: 24rpx;
  cursor: pointer;
  transition: background-color 0.2s;
}

.footer {
  text-align: center;
  margin-top: 20px;
  color: #999;
  font-size: 13px;
}

.no-data {
  margin: 150rpx auto 0;
  text-align: center;

  img {
    width: 65%;
    height: auto;
  }
}

.mores-txt {
  width: 100%;
  align-items: center;
  justify-content: center;
  height: 70rpx;
  color: #999;
  font-size: 24rpx;

}
</style>