TestEShopDist/src/pages/details/index.tsx

import { Button, CustomWrapper, Image, RichText, ScrollView, Swiper, SwiperItem, Text, View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh, useRouter, useShareAppMessage } from '@tarojs/taro';
import classnames from "classnames";
import DesSwiper from './components/swiper';
import OrderCount from './components/orderCount';
import ShopCart from '@/components/shopCart';
import Preview,{colorItem} from './components/preview';
import styles  from './index.module.scss'
import { useEffect, useMemo, useState } from 'react';
import {formatHashTag} from '@/common/fotmat'
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh';
import { goLink } from '@/common/common';
import useUserInfo from '@/use/useUserInfo';
import {GetProductDetailApi} from '@/api/material'
import useLogin from '@/use/useLogin';

type item = {title:string, img:string, url:string, id:number}

type params = {
  list?: item[]
  swiperOnClick?: (val: item) => void,
  style?: Object
}
export default (props:params) => {
  const {checkLogin, getPhoneNumber, userInfo} = useLogin()

  useDidShow(() => {
    checkLogin()
  })

  const router = useRouter()

  //获取数据
  const [productInfo, setProductInfo] = useState<any>({})
  const {fetchData} = GetProductDetailApi()
  useEffect(() => {
    getProductDetail()
  }, [])
  const getProductDetail = async () => {
    let {data} = await fetchData({id: router.params.id})
    setProductInfo(data)
    Taro.stopPullDownRefresh()
  }

  //面料名称
  const productName = useMemo(() => {
    return formatHashTag(productInfo.code, productInfo.name)
  },[productInfo])

  const [showCart, setShowCart] = useState(false)

  const [showOrderCount, setShowOrderCount] = useState(false)

  const html = `
    <img style="width:100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic24.nipic.com%2F20121021%2F10910884_100200815001_2.jpg&refer=http%3A%2F%2Fpic24.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257920&t=9353dda34f18ae2fe6803f3da35954bb">
  `

  
  const [colorInfo, setColorInfo] = useState<colorItem>()
  const [showPreview, setShowPreview] = useState(false)
  const getColorItem = (item) => {
    setColorInfo({
      title: item.code,
      img: item.texture_url,
    })
    setShowPreview(true)
  }

  const [collectStatus, setCollectStatus] = useState(false)
  const changeCollect = () => {
    setCollectStatus(!collectStatus)
    Taro.showToast({
      title: '收藏成功',
      icon: 'success',
      duration: 2000
    })
  }

  useShareAppMessage(res => {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/pages/details/index?id=10',
      imageUrl: ''
    }
  })
  

  //开始下单
  const placeOrder = async (e:any) => {
    try {
      await getPhoneNumber(e.detail.code)
    } catch(msg) {
      Taro.showToast({
        icon:"none",
        title: msg
      })
      return false
    }
    setShowOrderCount(true)
  }

  
  //页面下拉刷新
  usePullDownRefresh(() => {
    getProductDetail()
    
  })
  

  return (
    <View className={styles.main}>
      <DesSwiper list={productInfo.texture_url||[]}/>
      <View className={styles.product_header}>
        <View className={styles.title}>
          <View className={styles.name}>{productName}</View>
          <View className={styles.des}>{productInfo.describe}</View>
        </View>
        <View className={styles.share}>
          <View className={classnames('iconfont icon-fenxiang', styles.miconfont)}></View>
          <View className={styles.text}>分享</View>
          
          <Button open-type="share" className={styles.shareBtn}></Button>
        </View>
        <View className={styles.collect}>
          <View className={classnames('iconfont icon-shoucang', styles.miconfont, collectStatus&&styles.collected)} onClick={() => changeCollect()}></View>
          <View className={styles.text}>收藏</View>
          
        </View>
      </View>
      <View className={styles.des_data}>
        <View className={styles.title}>详情参数</View>
        <View className={styles.con}>
          <View className={styles.des_text}>编号：<Text>{productInfo.code}</Text></View>
          <View className={styles.des_text}>幅宽：<Text>{productInfo.width}</Text></View>
          <View className={styles.des_text}>克重：<Text>{productInfo.weight_density}</Text></View>
          <View className={styles.des_text}>成分：<Text>{productInfo.component}</Text></View>
        </View>
      </View>
      <View className={styles.product_color}>
        <View className={styles.title}>色号 (10)</View>
          <View className={styles.list}>
              {productInfo?.product_color_list?.map(item => {
                return <View className={styles.item} onClick={() => getColorItem(item)}>
                  <View className={styles.item_color}>
                    <Image src={item.texture_url}></Image>
                  </View>
                  <View className={styles.item_name}>{item.code}</View>
                </View>
              })}
          </View>
      </View>
      <View className={styles.product_detail}>
          <RichText nodes={html}></RichText>
      </View>
      <View className={styles.product_buy}>
        <View className={styles.buy_cart}  onClick={() => setShowCart(true)}>
          <View className={classnames('iconfont icon-gouwuche', styles.miconfont)}></View>
          <View className={styles.text}>购物车</View>
        </View>
        {
            !userInfo.adminUserInfo?.is_authorize_phone&&<View className={styles.buy_btn} >
              <Button className={styles.phoneBtn} open-type="getPhoneNumber" onGetPhoneNumber={(e) => placeOrder(e)}></Button>
              开始下单
            </View>
            || <View className={styles.buy_btn} onClick={(e) => placeOrder(e)}>开始下单</View>
        }
      </View>
      <CustomWrapper>
        <OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)} title={productName} productId={productInfo.id}/>
      </CustomWrapper>
      <ShopCart show={showCart}  onClose={() => setShowCart(false)}/>
      <Preview value={colorInfo} show={showPreview} onClose={() => setShowPreview(false)}/>
      <View className='common_safe_area_y'></View>
    </View>
  )
}