cxb-minapp-vue3/src/pages/home/index.vue

<script lang="ts" setup>
import {getNewSignInInfo, getUserInfo, getYanglaojinStatistics} from "~/apis/user";
import {getProduct} from "~/apis/home";

import Navs from "~/pages/home/components/navs.vue";
import Announcement from "~/pages/home/components/announcement.vue";
import Banner from "~/pages/home/components/banner.vue";
import Header from "~/pages/home/components/header.vue";
import ProductList from "~/pages/home/components/product-list.vue";
import {getHomeBanner, getHomeQuickLink, getLocal, getNoticeList} from "~/apis/common";
import {useUserStore} from "~/stores/userStore";
import CXBDialogSIgnIn from "~/components/CXBDialogSignIn/CXBDialogSIgnIn.vue";
import CXBDialogSIgnInSucceed from "~/components/CXBDialogSignInSucceed/CXBDialogSIgnInSucceed.vue";
import {CDN_URL} from "~/config/app";
// import CXBDialogSIgnIn from "~/components/CXBDialogSignIn/CXBDialogSIgnIn.vue";
// import CXBDialogSIgnInSucceed from "~/components/CXBDialogSignInSucceed/CXBDialogSIgnInSucceed.vue";
const userStore = useUserStore()
const usePageStore = usePageStoreWidthOut()
usePageStore.setPageConfig({
  currentPage: {
    type: 'tab',
    url:  '/pages/home/index'
  }
})

// const list = ref([])
const state = reactive({
  yanglaojine: {},
  page: 1,
  limit: 10,
  currentPage: 1,
  productList: [],
  // 线上未结算养老金
  closeMoney: '',
  // 结算养老金
  openMoney: '',
  all_yanglao: NaN,
  signToday: NaN,
  isShowSignIn: false,
  banners: [],
  announcementList: [],

  indicatorDots: true,
  circular: true,
  autoplay: true,
  interval: 5000,
  duration: 500,
  currents: "0",
})
onShow(() => {
  usePageStore.setPageConfig({
    currentPage: {
      type: 'tab',
      url:  '/pages/home/index'
    }
  })
  if (!userStore.uid) {
    state.closeMoney = ''
    state.openMoney = ''
  } else {
    getUserInfo().then(res => {
      userStore.setUserInfo(res)
    })
    getYanglaojinStatistics().then(res => {
      state.all_yanglao = res.all_yanglao
    })
  }

})
onLoad(() => {
  getLocal()
  getHomeBanner().then(res => {
    console.log(res)
    state.banners = res
  })
  // 加载地址数据
  // orderStore.getCurrentAddress()
  // 1加载首页数据
  getHomeQuickLink().then(res => {})

  getNoticeList().then(res => {
    state.announcementList = res.list
  })
  state.page = 1
  loadProductList()
})
onShow(() => {
  if (userStore.uid) {
    // 2 检查用户签到信息
    getNewSignInInfo().then(res => {
      console.log(res)
      const {today, day} = res
      state.signToday = today
      if (today === 0) {
        state.isShowSignIn = true
      }
      state.day = day

      // // if (today === 0) {
      //   2.1 弹出签到窗口
      // }
    }).catch(error => {
      console.error(error + '->GetNewsSignInInfo')
    })
  }

})
watch(() => state.isShowSignIn, (val) => {
  val ? uni.hideTabBar() : uni.showTabBar()
})
const headerClass = ref('')

onPageScroll((page) => {
  // page.scrollTop
  if (page.scrollTop >= 76 ) {
    headerClass.value = 'bg-white !text-gray-900'
  } else {
    headerClass.value = ''
  }
})
// 下拉刷新
onPullDownRefresh(() => {
  state.page = 1
  loadProductList()
})

onReachBottom(() => {
  state.page += 1
  loadProductList()
})
function loadProductList() {
  uni.showLoading({
    title: '加载中',
  });

  getProduct({
    page: state.page,
    limit: state.limit
  }).then(res => {
    uni.stopPullDownRefresh();
    if (state.page === 1) {
      state.productList = res
    } else {
      setTimeout(() => {
        state.productList.push(...res)
      }, 300)
    }
    uni.hideLoading()
  }).catch(error => {
    console.error(error + '->getProduct')
  })
}
const homeBanner = CDN_URL + '/static/assets/home-banner.png'

function handleBannerClick(item) {
  if(item.url == 'rich') {
    uni.navigateTo({
      url: '/pages/vip/index'
    })
  }
}


</script>
<template>
  <div class="h-screen ">
    <Header :yanglaojin="state.all_yanglao"
            :exClass="headerClass"
    />
    <div class="flex flex-col gap-3 ">
<!--      <image-->
<!--          @click="handleBannerClick"-->
<!--          :src="homeBanner"-->
<!--             mode="widthFix" class="h-60 w-full "-->
<!--      ></image>-->

      <div class="w-screen h-65">
        <swiper
            v-if="state.banners"
            :indicator-dots="state.indicatorDots"
            indicator-active-color="#e93323"
            :autoplay="state.autoplay"
            :circular="state.circular"
            :interval="state.interval"
            :duration="state.duration"
            class="w-full h-full"
        >
          <swiper-item v-for="(item, index) in state.banners" :key="index">
            <image :src="item.pic" @tap="handleBannerClick(item)" class="!w-full !h-full" mode="aspectFill"/>
          </swiper-item>
        </swiper>
      </div>

      <Navs/>

      <Announcement :list="state.announcementList"/>
<!--      {{userStore.userInfo}}-->

      <Banner/>

      <ProductList :list="state.productList"/>
    </div>

  </div>
  <CXBDialogSIgnIn
      :show="state.isShowSignIn"
      :today="state.signToday"
      :day="state.day"

      @confirm="state.isShowSignIn = false"
      @close="state.isShowSignIn = false"
  />
</template>
<style>
page {
  background-color: #f8f8f8;
}
</style>
<route lang="yaml"   type="home">
style:
  navigationStyle: custom
  navigationBarTitleText: 储蓄保
  enablePullDownRefresh: true
</route>