miniapp/src/pages/HuoDong/HuoDongDetail/index.jsx

import React, { useState, useEffect } from 'react'
import Taro, { Current } from '@tarojs/taro'
import { RichText } from '@tarojs/components'
import request, { apis } from '@/utils/request'
import { useModel } from '@/store'
import Page from '@/layouts'
import toolclass from '@/utils/toolclass.js'
import { getShareObject } from '@/utils/share.js'
import '@/assets/css/reset.less'
import '@/assets/css/iconfont.less'
import './index.less'

export default function HuoDongDetail () {

  const { user } = useModel('user')
  const [DataLock, setDataLock] = useState(false)
  const [HasJoin, setHasJoin] = useState(null)
  const [IsSign, setIsSign] = useState(null)
  const [JoinBtnText, setJoinBtnText] = useState(null)
  const [JoinBtnStatus, setJoinBtnStatus] = useState(false)
  const [CurrnetHuoDongId] = useState(Current.router.params.id) // 当前活动id
  const [ActivityDetail, setActivityDetail] = useState(null) // 活动详情

  Taro.useShareAppMessage(() => {
    return getShareObject({
      title: ActivityDetail.title,
      id: CurrnetHuoDongId,
      image: ActivityDetail.imgUrl
    }, user)
  })

  useEffect(() => {
    GetActivityDetail()
  }, [CurrnetHuoDongId])

  useEffect(() => {
    if (ActivityDetail !== null) {
      SetJoinBtnText()
    }
  }, [IsSign])

  const GetActivityDetail = () => { // 获取活动详情
    request({ ...apis.getActivityDetail, args: { id: CurrnetHuoDongId } }).then((res) => {
      setActivityDetail(res)
      CheckActivityJoin()
    })
  }

  const CheckActivityJoin = () => { // 查询活动参加详情
    request({ ...apis.checkActivityJoin, args: { id: CurrnetHuoDongId } }).then((res) => {
      setHasJoin(!!res.dynamic.isEnlist)
      setIsSign(!!res.dynamic.isSign)
    })
  }

  const SetJoinBtnText = () => {
    let Now = Date.now()
    let JoinStart = new Date(ActivityDetail.enlistStart).getTime()
    let JoinEnd = new Date(ActivityDetail.enlistEnd).getTime()
    let Start = new Date(ActivityDetail.startDate).getTime()
    let End = new Date(ActivityDetail.endDate).getTime()

    if (Now < JoinStart) {
      setJoinBtnText(`未开始`)
      return false
    } else if (Now < JoinEnd) {
      if (!HasJoin) {
        setJoinBtnText(`立即参加`)
        setJoinBtnStatus(true)
        return false
      }
      setJoinBtnText(`已报名`)
      return false
    } else if (Now < Start) {
      if (!HasJoin) {
        setJoinBtnText(`报名已截止`)
        return false
      }
      setJoinBtnText(`已报名`)
      return false
    } else if (Now < End) {
      if (!HasJoin) {
        setJoinBtnText(`活动已开始`)
        return false
      } else if (!IsSign) {
        setJoinBtnText(`去签到`)
        setJoinBtnStatus(true)
        return false
      } else {
        setJoinBtnText(`已签到`)
        return false
      }
    } else if (Now >= End) {
      setJoinBtnText(`已结束`)
      return false
    }
    setJoinBtnText(null)
    return false
  }

  const ToJoin = () => { // 去报名
    if (DataLock || ActivityDetail === null || !JoinBtnStatus) return
    setDataLock(true)
    const { personId, phone, nickname, orgId } = user
    const { dynamicId } = ActivityDetail
    if (!phone) { // 未授权手机号，唤起授权手机号弹窗
      setShowGetUserPhoneLayer(true)
      setDataLock(false)
      return false
    }
    let Data = {
      phone,
      personId,
      dynamicId,
      name: nickname,
      orgId,
      attendNum: 1,
      sharePerson: null,
      sharePersonName: null,
      sharePersonType: null
    }
    request({ ...apis.JoinActivity, data: { ...Data } }).then(() => {
      setHasJoin(true)
      setDataLock(false)
    }).catch((res) => {
      Taro.showToast({ title: res, icon: 'none' })
      setDataLock(false)
    })
  }

  return (
    <Page>
      <view className='HuoDongDetail'>

        <view className='BannerLayer'></view>
        {
          ActivityDetail !== null &&
          <view className='Banner'>
            <image mode='aspectFill' src={ActivityDetail.imgUrl} className='centerLabel'></image>
          </view>
        }
        {
          ActivityDetail !== null &&
          <view className='Info'>
            <view className='MainInfo'>
              <text className='Name'>{ActivityDetail.title}</text>
              <text className='Tips'>{ActivityDetail.enlisted}人已报名</text>
              <view className='flex-h'>
                <text>活动时间：</text>
                <view className='flex-item'>{toolclass.FormatDate(ActivityDetail.startDate)}<text>限{ActivityDetail.enlistNum}人</text></view>
              </view>
              <view className='flex-h'>
                <text>活动地址：</text>
                <view className='flex-item'>{ActivityDetail.address}</view>
              </view>
              <view className='flex-h'>
                <text>报名截止：</text>
                <view className='flex-item'>{toolclass.FormatDate(ActivityDetail.enlistEnd)}</view>
              </view>
            </view>

            <view className='Desc'>
              <text>活动介绍</text>
              <RichText nodes={ActivityDetail.desc}></RichText>
            </view>

            {
              HasJoin !== null &&
              <text className={JoinBtnStatus ? 'active BottomBtn' : 'BottomBtn'} onClick={ToJoin}>{JoinBtnText}</text>
            }

          </view>
        }
      </view>
    </Page>
  )
}