miniapp/src/pages/FuLi/index.jsx

import React, { useState } from 'react'
import Taro from '@tarojs/taro'
import NavHeader from '@/components/NavHeader/index'
import PrizeListItem from '@/components/PrizeListItem/index'
import ScrollPageRefresh from '@/components/ScrollPageRefresh/index'
import { useModel } from '@/store'
import '@/assets/css/reset.less'
import '@/assets/css/iconfont.less'
import './index.less'

export default function FuLi () {

  const { user } = useModel('user')
  const [PageList, setPageList] = useState([])

  const Refresh = (e) => { // 下拉刷新
    setPageList(e)
  }

  const Push = (e) => { // 上拉加载
    setPageList(PageList.concat(e))
  }

  return (
    <view className='FuLi flex-v'>
      <NavHeader BgColor='none' Title='福利' IsFixed={true}></NavHeader>

      {/* 顶部背景图 */}
      <view className='TopBg'>
        <image mode='aspectFill' src={require('@/assets/img/bg.jpg').default} class='centerLabel'></image>
      </view>

      {/* 正文 */}
      <view className='flex-item'>
        <view>
          <ScrollPageRefresh ApiName={`getGoodsList`} Refresh={Refresh} Push={Push}>
            <view className='FuLiContent'>

              {/* 用户面板 */}
              <view className='UserTab'>
                <view>
                  <view className='Info flex-h'>
                    <view className='Icon'>
                      {
                        user !== null &&
                        <image mode='aspectFill' src={user.avatarurl} class='centerLabel'></image>
                      }
                    </view>
                    <view className='flex-item'>
                      <text>{user === null ? '未登录' : user.nickname || '未授权用户信息'}</text>
                      <text>积分{user === null ? '-' : user.points || 0}</text>
                    </view>
                    <text className='active'>签到</text>
                  </view>
                  <view className='Rule flex-h'>
                    <view className='flex-item' onClick={() => { Taro.navigateTo({ url: '/pages/FuLi/JiFenGuiZe/index' }) }}>
                      <text className='iconfont iconjifen'></text>
                      <text>积分规则</text>
                    </view>
                    <view className='flex-item' onClick={() => { Taro.navigateTo({ url: '/pages/FuLi/JiFenMingXi/index' }) }}>
                      <text className='iconfont iconjifenguize'></text>
                      <text>积分明细</text>
                    </view>
                  </view>
                </view>
              </view>

              {/* 搜索框 */}
              {/* <view className='SearchContainer'>
                <view>
                  <text className='iconfont iconsousuo'></text>
                  <text>附近热搜：火锅</text>
                </view>
              </view> */}

              {/* 积分礼品列表 */}
              <view className='PirzeList'>
                {
                  PageList.map((item, index) => (
                    <view key={`PirzeListItem-${index}`}>
                      <view>
                        <PrizeListItem Data={item}></PrizeListItem>
                      </view>
                    </view>
                  ))
                }
              </view>

            </view>
          </ScrollPageRefresh>
        </view>
      </view>

    </view>
  )
}