mp-10550/src/pages/index/BestSellers.tsx

import {useEffect, useState} from "react";
import {Image} from '@nutui/nutui-react-taro'
import {Share} from '@nutui/icons-react-taro'
import {View, Text} from '@tarojs/components';
import Taro from "@tarojs/taro";
import {ShopGoods} from "@/api/shop/shopGoods/model";
import {pageShopGoods} from "@/api/shop/shopGoods";

const BestSellers = () => {
  const [list, setList] = useState<ShopGoods[]>([])
  const [goods, setGoods] = useState<ShopGoods>()

  const reload = () => {
    pageShopGoods({}).then(res => {
      setList(res?.list || []);
    })
  }

  // 处理分享点击
  const handleShare = (item: ShopGoods) => {
    setGoods(item);

    console.log(goods)

    // 显示分享选项菜单
    Taro.showActionSheet({
      itemList: ['分享给好友'],
      success: (res) => {
        if (res.tapIndex === 0) {
          // 分享给好友 - 触发转发
          Taro.showShareMenu({
            withShareTicket: true,
            success: () => {
              // 提示用户点击右上角分享
              Taro.showToast({
                title: '请点击右上角分享给好友',
                icon: 'none',
                duration: 2000
              });
            }
          });
        }
      },
      fail: (err) => {
        console.log('显示分享菜单失败', err);
      }
    });
  }

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

  // 注意：不在这里配置分享，避免与首页分享冲突
  // 商品分享应该在商品详情页处理，首页分享应该分享首页本身

  return (
    <>
      <View className={'py-3'}>
        <View className={'flex flex-col justify-between items-center rounded-lg px-2'}>
          {list?.map((item, index) => {
            return (
              <View key={index} className={'flex flex-col rounded-lg bg-white shadow-sm w-full mb-5'}>
                <Image src={item.image} mode={'aspectFit'} lazyLoad={false}
                       radius="10px 10px 0 0" height="180"
                       onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}/>
                <View className={'flex flex-col p-2 rounded-lg'}>
                  <View>
                    <View className={'car-no text-sm'}>{item.name}</View>
                    <View className={'flex justify-between text-xs py-1'}>
                      <Text className={'text-orange-500'}>{item.comments}</Text>
                      <Text className={'text-gray-400'}>已售 {item.sales}</Text>
                    </View>
                    <View className={'flex justify-between items-center py-2'}>
                      <View className={'flex text-red-500 text-xl items-baseline'}>
                        <Text className={'text-xs'}>￥</Text>
                        <Text className={'font-bold text-2xl'}>{item.price}</Text>
                      </View>
                      <View className={'buy-btn'}>
                        <View className={'cart-icon items-center hidden'}>
                          <View
                            className={'flex flex-col justify-center items-center text-white px-3 gap-1 text-nowrap whitespace-nowrap cursor-pointer'}
                            onClick={() => handleShare(item)}
                          >
                            <Share size={20}/>
                          </View>
                        </View>
                        <Text className={'text-white pl-4 pr-5'}
                              onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}>购买
                        </Text>
                      </View>
                    </View>
                  </View>
                </View>
              </View>
            )
          })}
        </View>
      </View>
    </>
  )
}
export default BestSellers