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, getProductShare} 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 CXBPrivacyPopup from "~/components/CXBPrivacyPopup/CXBPrivacyPopup.vue";
import {getShareId} from "~/apis/product";
// import CXBDialogSIgnIn from "~/components/CXBDialogSignIn/CXBDialogSIgnIn.vue";
// import CXBDialogSIgnInSucceed from "~/components/CXBDialogSignInSucceed/CXBDialogSIgnInSucceed.vue";
import Cache from "~/utils/cache";

import CXBBackTopVue from "~/components/CXBBackTop/CXBBackTop.vue";
const userStore = useUserStore()
const usePageStore = usePageStoreWidthOut()
usePageStore.setPageConfig({
  currentPage: {
    type: 'tab',
    url:  '/pages/home/index'
  }
})


// const list = ref([])
const state = reactive({
  shareId: '',
  yanglaojine: {},
  isEject: 0,
  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",
})
// 距离顶部距离
let Scroll_X = ref(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
    })
  }


})

function checkSignIn() {
  // if (userStore.uid && state.isEject === 1) {
    // 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')
    })
  // }
}
onLoad((option) => {
  if (option && option.shareId) {
    userStore.setShareId(option.shareId)
  }
  getIsShow()
  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()

  getProductShare().then(res => {
    if (res) {
      userStore.setShareId(res.share_id)
    }
  }).catch(message => {
    // console.log(message)
  })
  userStore.setRedirectPage(`/pages/home/index`, 'tab')

})

onShareAppMessage(() => {
  const shareId = Cache.get('SHARE_ID')

  return {
    title: `消费储蓄 保障未来`,
    path: `/pages/home/index?shareId=${shareId}`,
    imageUrl: 'https://cdn.bjtdba.com/vod/image/2023-10-09/20231009202402136.png'
  }
})

onShareTimeline(() => {
  const shareId = Cache.get('SHARE_ID')

  return {
    title: `消费储蓄 保障未来`,
    imageUrl: 'https://cdn.bjtdba.com/vod/image/2023-10-11/20231011062523504.png',
    query: `from=share&shareId=${shareId}`
    // imageUrl: 'https://cdn.bjtdba.com/vod/image/2023-10-09/20231009202402136.png'
  }
})


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

onPageScroll((page) => {
  // console.log(page.scrollTop.toFixed(),'距离顶部的距离')
  Scroll_X.value = Number(page.scrollTop.toFixed())
  // 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'
    })
  }
}

function getIsShow(){
  //首先获取是否执行过
  uni.getStorage({
    key: 'today',
    success: function(res) {
      // console.log(res.data)
      // console.log('----')
      //成功的话 说明之前执行过，再判断时间是否是当天
      // 如果不是当天更新
      if (res.data && res.data != new Date().toLocaleDateString()) {
        // getApp().globalData.isEject = 0; //自定义要更改的变量 或者方法
        state.isEject = 1
        checkSignIn()
        uni.setStorageSync("today", new Date().toLocaleDateString()); //把新得日期更新到本地
      }
    },
    fail: function(res) {
      // console.log(res + 'FAIL...')
      //没有执行过的话 先存一下当前的执行时间
      // console.log(res);
      state.isEject = 1
      checkSignIn()

      // getApp().globalData.isEject = 0; //自定义要更改的变量 或者方法
      let today = new Date().toLocaleDateString();
      uni.setStorageSync('today', today)
    }
  })

}



</script>
<template>
  <div class="h-screen ">
    <CXBBackTopVue :Scroll_X="Scroll_X"/>
    <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"
  />

  <CXBPrivacyPopup />
</template>
<style>
page {
  background-color: #f8f8f8;
}
</style>
<route lang="yaml"   type="home">
style:
  navigationStyle: custom
  navigationBarTitleText: 储蓄保
  enablePullDownRefresh: true
</route>