glt-taro/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, {useShareAppMessage, useShareTimeline} from "@tarojs/taro";
import {ShopGoods} from "@/api/shop/shopGoods/model";
import {pageShopGoods} from "@/api/shop/shopGoods";
import './BestSellers.scss'


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);

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

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

  // 分享给好友
  useShareAppMessage(() => {
    return {
      title: goods?.name || '精选商品',
      path: `/shop/goodsDetail/index?id=${goods?.goodsId}`,
      imageUrl: goods?.image, // 分享图片
      success: function (res: any) {
        console.log('分享成功', res);
        Taro.showToast({
          title: '分享成功',
          icon: 'success',
          duration: 2000
        });
      },
      fail: function (res: any) {
        console.log('分享失败', res);
        Taro.showToast({
          title: '分享失败',
          icon: 'none',
          duration: 2000
        });
      }
    };
  });

  // 分享到朋友圈
  useShareTimeline(() => {
    return {
      title: `${goods?.name || '精选商品'} - 网宿小店`,
      path: `/shop/goodsDetail/index?id=${goods?.goodsId}`,
      imageUrl: goods?.image
    };
  });

  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 flex items-center'}>
                          <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