exhibit-front/pages/index/shop.vue

<template>
  <view class="shop-page">
    <!-- 导航栏 -->
    <HomePageNav />
    
    <!-- 可用积分卡片 -->
    <PointsCard :points="userPoints"/>
    
    <!-- 商城内容 -->
    <ShopContent ref="shopContentRef" />
  </view>
</template>

<script>
import HomePageNav from '@/pages/components/HomePageNav.vue'
import PointsCard from '@/pages/components/shop/PointsCard.vue'
import ShopContent from '@/pages/components/shop/ShopContent.vue'

export default {
  name: 'Shop',
  components: {
    HomePageNav,
    PointsCard,
    ShopContent
  },
  data() {
    return {
      userPoints: 1385
    }
  },
  methods: {
    async getUserPoints() {
      if (!uni.getStorageSync('token')) {
        // 还没登陆
        this.userPoints = '未登录'
      }else{
        // 实际项目中这里应该调用API
        const res = await this.$api.user.queryUser()
        this.userPoints = res?.result?.score || 0
      }
    }
  },
  async onShow() {
    // 获取用户积分
    await this.getUserPoints()
    this.$refs.shopContentRef.initData()
    await this.$refs.shopContentRef.getGoodsList({isRefresh : true})
  },
  async onPullDownRefresh() {
    // 下拉刷新时调用
    this.$refs.shopContentRef.initData()
    await this.$refs.shopContentRef.getGoodsList({isRefresh : true})
    uni.stopPullDownRefresh()
  },
  onReachBottom() {
    this.$refs.shopContentRef.getGoodsList()
  }
}
</script>

<style lang="scss" scoped>
.shop-page {
  min-height: 100vh;
  background: #f8f8f8;
}
</style>