miniapp/src/pages/FuLi/ShangPinXiangQing/index.jsx

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

export default function ShangPinXiangQing () {

  const { user } = useModel('user')
  const [CurrnetId] = useState(Current.router.params.id) // 当前id
  const [GoodsDetail, setGoodsDetail] = useState(null) // 商品详情

  useEffect(() => {
    Init()
  }, [])

  const Init = () => {
    request({ ...apis.getGoodsDetail, args: { id: CurrnetId } }).then((res) => {
      setGoodsDetail(res)
    })
  }

  return (
    <Page>
      <view className='ShangPinXiangQing'>
        <view className='Info'>
          <view className='Img'>
            <image mode='aspectFill' src={GoodsDetail === null ? null : GoodsDetail.imgUrl} className='centerLabel'></image>
          </view>
          <view className='Title'>
            <text>{GoodsDetail === null ? '' : GoodsDetail.goodsName}</text>
          </view>
          <view className='flex-h'>
            <text>{GoodsDetail === null ? '' : GoodsDetail.pointPrice}</text>
            <text className='flex-item'>积分</text>
            <text>剩余数量</text>
            <text>{GoodsDetail === null ? '' : GoodsDetail.inventory}</text>
          </view>
        </view>
        <view className='Detail'>
          <view className='Title'>
            <view className='Line'></view>
            <text>产品详情</text>
            <image mode='widthFix' src={GoodsDetail === null ? null : GoodsDetail.detailImgUrl} style={{ width: `100%` }}></image>
          </view>
          <view className='BottomBtn'>
            <text className='active' onClick={() => { Taro.navigateTo({ url: `/pages/FuLi/ShangPinDuiHuan/index?id=${CurrnetId}` }) }}>立即兑换</text>
          </view>
        </view>
      </view>
    </Page>
  )
}