miniapp-v2/src/pages/details/foodDetails/foodDetails.jsx

import Taro, { useShareAppMessage } from "@tarojs/taro";
import CustomNav from "@/components/CustomNav";
import withLayout from "@/layouts";
import {
  getShopDetail,
  getShopPackage,
  getExtendContent,
} from "@/services/home";
import { getVerifyTargetList } from "@/services/payOrder";
import { useState, useEffect, useRef } from "react";
import { Button, Swiper, SwiperItem } from "@tarojs/components";
import Star from "@/components/Star/Star.jsx";
import NoData from '@/components/NoData'
import Cards from "@/components/foodCards/foodCards.jsx";
import SpinBox from "@/components/Spin/SpinBox";
import TabIcon from "@/components/HorTabbar/TabIcon";
import ax from "@/assets/icons/housemantj/onlove.png";
import yysj from "@/assets/icons/housemantj/openTime.png";
import dw from "@/assets/icons/housemantj/loc.png";
import zhuandao from "@/assets/icons/housemantj/backTop.png";
import titlezs from "@/assets/icons/housemantj/titleTip.png";
import showMore from "@/assets/icons/housemantj/setMore.png";
import share from "@/assets/icons/housemantj/touristShare.png";
import good from "@/assets/icons/housemantj/touristGood.png";
import baozan from "@/assets/icons/housemantj/bgood.png";
import weibaozan from "@/assets/icons/housemantj/unLike.png";
import useSave from "@/utils/hooks/useSave";
import useLike from "@/utils/hooks/useLike";
import Extend from "../components/Extend/extend";
import "./foodDetails.less";

export default withLayout((props) => {
  const { router, person, location } = props;
  const { id, subOrderId, scene } = props.router.params;

  useEffect(() => {
    if (id && (scene || subOrderId)) {
      getVerifyTargetList({
        shopId: id,
        isMine: true,
        isVerified: 0,
      }).then((res) => {
        if (res?.records?.length > 0) {
          Taro.navigateTo({
            url: `/pages/TobeShop/index?id=${id}&subOrderId=${subOrderId}`,
          });
        }
      });
    }
  }, [id, scene, subOrderId]);

  //商铺基础信息
  const [loading, setLoading] = useState(false)
  const [detail, setDetail] = useState({});
  //商铺套餐
  const [spackage, setPackage] = useState([]);
  //banner图集数组
  const [imglist, setimglist] = useState([]);
  const [index, setIndex] = useState(0);
  const handchange = (e) => {
    setIndex(e.detail.current);
  };

  const [isSaved, toggleSave] = useSave(detail.isSaved, "shop", id);
  const [isLike, toggleLike] = useLike(detail.isLike, "shop", id);

  //当前套餐总数
  const [newpgNum, setNewpgNum] = useState(0);
  //全部套餐个数
  const [AllpgNum, setAllpgNum] = useState(0);
  //套餐当前页数
  const [page, setpage] = useState(2);
  const pgMore = () => {
    setpage(page + 1);
    getShopPackage(id, { pageNum: page }).then((res) => {
      setPackage([...spackage, ...res.records]);
      setNewpgNum(newpgNum + res.records.length);
    });
  };
  //本店指南
  const [extend, setExtend] = useState([]);

  //当前指南总数
  const [newextNum, setNewextNum] = useState(0);
  //全部指南个数
  const [AllextNum, setAllextNum] = useState(0);
  //指南当前页数
  const [epage, setepage] = useState(2);
  const extendMore = () => {
    setepage(epage + 1);
    getExtendContent("shop", id, { pageNum: epage }).then((res) => {
      setExtend([...extend, ...res.records]);
      setNewextNum(newextNum + res.records.length);
    });
  };
  const openMap = () => {
    Taro.openLocation({
      longitude: log.current - 0,
      latitude: lat.current - 0,
      name: detail.shopName,
      address: detail.address,
      scale: 12,
    });
  };
  const log = useRef("");
  const lat = useRef("");

  useEffect(() => {
    if (id) {
      setLoading(true)
      getShopDetail(id, { location }).then((res) => {
        setDetail(res);
        log.current = res.locaton.toString().split(",")[0];
        lat.current = res.locaton.toString().split(",")[1];
        setimglist(res.imageList || []);
        setLoading(false)
      }).catch(() => setLoading(false));
      getShopPackage(id).then((res) => {
        setPackage(res.records || []);
        setNewpgNum(res.records.length);
        setAllpgNum(res.total);
      });
      getExtendContent("shop", id).then((res) => {
        setExtend(res.records || []);
        setAllextNum(res.total);
        setNewextNum(res.records.length);
      });
    }
  }, [id]);

  const star = parseFloat(
    (
      (detail.sweetScore + detail.environmentScore + detail.serviceScore) / 3).toFixed(1)
  );

  // 分享
  useShareAppMessage(() => {
    return {
      title: detail.shopName,
      path: `/pages/details/foodDetails/foodDetails?id=${id}&subOrderId=${subOrderId}`,
      imageUrl: detail.poster,
    };
  });

  return (
    <view className='page-index'>
      <view className='index-navbar'>
        <CustomNav title='十公里' />
      </view>
      <SpinBox loading={loading} className='index-container' style={{ padding: '0 30rpx' }}>
        <scroll-view
          scrollY
          style={{ height: '100%' }}
        >
          <view className='storeDetails'>
            <Swiper
              className='swiper'
              circular
              current={index}
              onChange={handchange}
            >
              {imglist.map((item, inx) => (
                <SwiperItem key={inx}>
                  <image src={item.url} mode='aspectFit' className='storeImage'>
                    <view className='tpPage'>
                      <text>
                        {index + 1}/{imglist.length}
                      </text>
                    </view>
                  </image>
                </SwiperItem>
              ))}
            </Swiper>
            <view className='storeJs'>
              <view style={{ overflow: "hidden" }}>
                <view className='storeName'>{detail.shopName}</view>
                <view className='sprice'>
                  <text className='t1'>￥</text>
                  {detail.averagePrice / 100}/人
                  <view className='bzRight'>
                    <image
                      src={baozan}
                      style={{
                        width: "15px",
                        height: "15px",
                        marginRight: "11rpx",
                        marginBottom: "-2px",
                      }}
                    />
                    爆赞{detail.likeNum}
                  </view>
                </view>
              </view>
              <view className='appraise'>
                <Star star={star} />
                {star}
                <view style={{ float: "right", marginTop: "5px" }}>
                  <text className='comment'>点评：</text>
                  <text className='t1'>口味：{detail.sweetScore}</text>
                  <text className='t1'>环境：{detail.environmentScore}</text>
                  <text className='t1'>服务：{detail.serviceScore}</text>
                </view>
              </view>
              <view className='yysj'>
                <image src={yysj} className='yysjImg' />
                营业时间：{detail.businessHours}
              </view>
              <view className='dpPosition' onClick={openMap}>
                <image src={dw} className='dwTip' />
                <view>
                  {detail.address}
                  <image src={zhuandao} className='zhuandao' />
                </view>
              </view>
            </view>
          </view>
          {
            spackage == '' && extend == "" ?
              <NoData /> :
              <>
                <view
                  style={{
                    position: "relative",
                    display: spackage == "" ? "none" : "",
                  }}
                >
                  <view className='title'>
                    <image src={titlezs} />
                    <text>返现套餐</text>
                  </view>
                  {(spackage || []).map((item) => (
                    <Cards key={item.packageId} editable='1' st={star} goshop='1' item={item} det={detail} />
                  ))}
                  <view
                    className='showMore'
                    style={{ display: newpgNum == AllpgNum ? "none" : "" }}
                    onClick={pgMore}
                  >
                    <view>查看更多</view>
                    <image src={showMore} className='moreTip' />
                  </view>
                </view>
                <view
                  style={{
                    position: "relative",
                    marginTop: '1em',
                    display: extend == "" ? "none" : "",
                  }}
                >
                  <view className='title' style={{ margin: '50px 0 0 0' }} >
                    <image src={titlezs} />
                    <text>本店指南</text>
                  </view>
                  {(extend || []).map((item) => (
                    <Extend key={item.extId} item={item} />
                  ))}
                  <view
                    className='showMore'
                    style={{ display: newextNum == AllextNum ? "none" : "" }}
                    onClick={extendMore}
                  >
                    <view>查看更多</view>
                    <image src={showMore} className='moreTip' />
                  </view>
                </view>
                <view
                  className='botton'
                  style={{ display: newextNum == AllextNum ? "" : "none" }}
                >
                  这是我的底线
                </view>
              </>
          }
        </scroll-view>
      </SpinBox>
      <view className='index-tabber weui-tabbar' style={{ background: '#fff' }}>
        <view className='weui-tabbar__item'>
          <Button openType='share' className='purebtn'><TabIcon icon={share} text='分享' /></Button>
        </view>
        <view className='weui-tabbar__item' onClick={toggleLike}>
          <TabIcon icon={isLike > 0 ? baozan : weibaozan} text={isLike > 0 ? "已爆赞" : "爆赞"} />
        </view>
        <view className='weui-tabbar__item' onClick={toggleSave}>
          <TabIcon icon={isSaved > 0 ? ax : good} text={isSaved > 0 ? "已收藏" : "加入收藏"} />
        </view>
      </view>
    </view>
  );
});