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

import React, { useState, useEffect } from 'react'
import Taro, { Current } from '@tarojs/taro'
import { RichText, Button } from '@tarojs/components'
import request, { apis } from '@/utils/request'
import { useModel } from '@/store'
import GetUserPhone from '@/components/GetUserPhone/index'
import '@/assets/css/reset.less'
import '@/assets/css/iconfont.less'
import './index.less'

export default function HuoDongDetail (props) {

  const { user } = useModel('user')
  const [ShowGetUserPhoneLayer, setShowGetUserPhoneLayer] = useState(false)
  const [CurrnetHuoDongId] = useState(Current.router.params.id) // 当前活动id
  const [ActivityDetail, setActivityDetail] = useState(null) // 活动详情

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

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

  const ToJoin = () => { // 去报名
    const { personId, phone } = user
    const { dynamicId } = ActivityDetail
    console.log(personId, phone, dynamicId)
  }

  return (
    <view className='HuoDongDetail'>
      {
        ShowGetUserPhoneLayer &&
        <GetUserPhone></GetUserPhone>
      }
      <view className='BannerLayer'></view>
      {
        ActivityDetail !== null &&
        <view className='Banner'>
          <image mode='aspectFill' src={ActivityDetail.bannerListImg} 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'>{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'>{ActivityDetail.enlistEnd}</view>
            </view>
          </view>

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

          <text className='BottomBtn' onClick={ToJoin}>立即参加</text>

        </view>
      }
    </view>
  )
}