商铺详情v1

src/components/Star/Star.jsx

@@ -0,0 +1,16 @@
+
+import hongxin from '@/assets/icons/housemantj/已收藏.png'
+import baixin from '@/assets/icons/housemantj/收藏.png'
+import './Star.less'
+export default (props) => {
+  const {star}=props
+  return (
+    <>
+      <image className='star' src={star >= 1 ? hongxin : baixin}></image>
+      <image className='star' src={star >= 2 ? hongxin : baixin}></image>
+      <image className='star' src={star >= 3 ? hongxin : baixin}></image>
+      <image className='star' src={star >= 4 ? hongxin : baixin}></image>
+      <image className='star' src={star >= 5 ? hongxin : baixin}></image>
+    </>
+  )
+}

src/components/Star/Star.less

@@ -0,0 +1,5 @@
+image{
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+}

src/components/foodCards/foodCards.jsx

@@ -0,0 +1,56 @@
+import Star from '@/components/Star/Star.jsx'
+import pay from '@/assets/icons/housemantj/pay.png'
+import msTip from '@/assets/icons/housemantj/foodtip.png'
+import wz from '@/assets/icons/housemantj/location.png'
+import hongxin from '@/assets/icons/housemantj/已收藏.png'
+import baixin from '@/assets/icons/housemantj/收藏.png'
+import './style.less'
+import useSave from "@/utils/hooks/useSave"
+
+
+//套餐卡片
+export default (props) => {
+  const { star, item, city } = props
+  const [isSaved, toggleSave] = useSave(item.isSaved,'shop_package', item.packageId)
+  return (
+      <view className='foodCard'>
+        <view className='fCleft'>
+          <view className='backMoney'>
+            返现￥{item.cashback}
+          </view>
+          <view className='appraise'>
+            <Star star={star} />
+            <text className='storezf'>{star}</text>
+          </view>
+          <view>
+            <view className='contentImg'>
+              <image src={item.poster} className='img1' ></image>
+              <image src={msTip} className='mstip'></image>
+            </view>
+            <view className='neirong'>
+              <view className='textword'>{item.description}</view>
+              <view className='jiage'>
+                <text className='rmb' >￥&nbsp;&nbsp;</text>
+                <text className='p1'><text className='price' >{item.actualPrice}</text>元&nbsp;&nbsp;</text>
+                <text className='p2'>门市价<text className='oldprice' >{item.standardPrice}</text>元</text>
+              </view>
+              <view className='address'>
+                <image className='dw' src={wz} />
+                <text className='wz'>{city.areaPName}/{city.areaName}</text>
+                <view style={{display:'inline-block'}} onClick={toggleSave}>
+                <image className='star' src={isSaved>0?hongxin:baixin}></image>
+                <text className='collection'>{isSaved>0?'已收藏':'加入收藏'}</text>
+              </view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view className='fCright'>
+          <image src={pay} />
+          <view>支付</view>
+        </view>
+        <view className='columnLine'></view>
+      </view>
+    
+  )
+}

src/components/foodCards/style.less

@@ -0,0 +1,135 @@
+.foodCard{
+  background: #FFF;
+  box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 12px;
+  position: relative;
+  margin-bottom: 30px;
+  overflow: hidden;
+  background: radial-gradient(circle at 82% top,transparent 20px,#fff 0) top,
+              radial-gradient(circle at 82% bottom,transparent 20px,#fff 0) bottom;
+  background-repeat: no-repeat;
+  background-size: auto 50%;
+  .fCleft{
+    float: left;
+    width: 82%;
+    .backMoney{
+      font-size: 24px;
+      font-weight: bold;
+      color: #FFF;
+      margin: 22px 40px 20px 0;        
+      padding: 12px 17px 9px 6px;
+      background:url('../../assets/icons/housemantj/fximg.png') no-repeat;    
+      display: inline-block;
+      background-size: 100% 100%;
+    }
+    .appraise{
+      display: inline-block;
+      image{
+        width: 21px;
+        height: 21px;
+        margin-right: 10px;
+      }
+      text{
+        font-size: 24px;           
+        font-weight: bold;
+        color: #020200;
+      }
+    }
+    .contentImg{
+      margin: 0 20px 43px 20px;
+      position: relative;
+      display: inline-block;
+      .img1{
+        width: 144px;
+        height: 144px;
+        border-radius: 24px;
+      }
+      .mstip{
+          width:99px;
+          height:37px;
+          position: absolute;
+          left: 0;          
+      }
+    }
+    .neirong{
+      display: inline-block;
+      width: 65%;
+      .textword{
+        font-size: 24px;           
+        color: #333;
+        margin: 0 21px 0 0;
+        height: 84px;
+      }
+      .jiage{
+        line-height: 20px;
+        font-weight: bold;
+        color: #333;
+        .rmb{
+          font-size: 20px;             
+          margin: 0 8px 0 7px;
+        }
+        .p1{
+          font-size: 24px;     
+        }
+        .p2{
+          font-size: 18px;             
+          text-decoration: line-through;
+          color: #666;
+        }
+      }
+      .address{
+        line-height: 0;
+        margin-top: 18px;
+        .dw{
+          width: 16px;
+          height: 20px;
+          position: relative;
+          top:3px;
+          margin-right: 10px;
+        }
+        .wz{
+          font-size: 20px;             
+          color: #333;
+        }
+        .star{
+          width: 21px;
+          height: 21px;
+          margin: 0 10px 0 40px;
+          position: relative;
+          top: 3px;
+        }
+        .collection{
+          font-size: 20px;             
+          color: #333333;
+        }
+      }
+    }
+  }
+  .fCright{
+    float: right;
+    width: 18%;
+    line-height: 0;
+    image{
+      width:35px;
+      height:32px;
+      margin-top: 120%;
+      margin-left:calc(50% - 15px)
+    }
+    view{
+      font-size: 24px;
+      line-height: 23px;
+      font-weight: bold;
+      color: #202020;
+      margin-top: 19px;
+      text-align: center;
+    }
+  }
+  .columnLine{
+    height: 50%;
+    border-right: 2px dashed #595959;
+    opacity: 0.12;
+    position: absolute;
+    right: 18%;
+    bottom:15%;
+  }
+}

src/components/tip/index.jsx

@@ -0,0 +1,33 @@
+import { Swiper, SwiperItem,View} from '@tarojs/components';
+import { getTipList} from '@/services/home'
+import { useState,useEffect } from 'react';
+import icontip from '@/assets/icons/housemantj/tip.png'
+import './index.less'
+
+export default ()=>{  
+  const [tips,setTips]=useState([])
+  useEffect(() => {
+    getTipList(1).then((res)=>{
+      setTips(res.records||[])
+    })
+  },[])
+    return (      
+      <view className='tip'>
+        <image className='tipicon' src={icontip} />
+      <Swiper
+      className='swp'
+        vertical
+        circular        
+        interval="3000"        
+        autoplay>
+          {
+            tips.map((item)=>
+              <SwiperItem>
+                <View>Tip:{item.content}</View>
+              </SwiperItem>
+            )
+          }        
+      </Swiper>
+      </view>
+    )  
+}

src/components/tip/index.less

@@ -0,0 +1,19 @@
+.tip{
+  padding:23px 0 22px 31px;
+  height: 70px;
+
+  .tipicon{
+    width: 17px;
+    height: 19px;
+    margin-right: 10px;
+    margin-bottom: 25px;
+  }
+  .swp{
+    width:90%;
+    display:inline-block;
+    line-height: 70px;
+    height: 70px;
+    font-size: 24px;
+    color: #999;
+  }
+}

src/pages/details/components/extend.jsx

@@ -0,0 +1,18 @@
+import { Video} from '@tarojs/components';
+
+export default (props) => {
+  const { item } = props
+  return (
+    <>{
+      item.contentType == 'image' ?
+        <image src={item.content} mode="widthFix" style={{width:'100%'}}/> :
+        item.contentType == 'text' ?
+          <view className='storezn'>{item.content}</view> :
+          <Video controls={true}
+          autoplay={false}
+          loop={false}
+          muted={false} style={{width:"100%",height:'200px'} } src={item.content} ></Video>
+    }
+    </>
+  )
+}

src/pages/details/foodDetails/foodDetails.jsx

@@ -1,305 +1,169 @@
 import CustomNav from '@/components/CustomNav'
-import { Icon } from '@tarojs/components'
-import Taro from '@tarojs/taro'
-import fd from '../../../assets/icons/housemantj/fd.jpg'
-import ax from '../../../assets/icons/housemantj/onlove.png'
-import huangxin from '../../../assets/icons/housemantj/已收藏.png'
-import baixin from '../../../assets/icons/housemantj/收藏.png'
-import yysj from '../../../assets/icons/housemantj/营业时间.png'
-import dw from '../../../assets/icons/housemantj/地址.png'
-import zhuandao from '../../../assets/icons/housemantj/backTop.png'
-import titlezs from '../../../assets/icons/housemantj/标题装饰.png'
-import pay from '../../../assets/icons/housemantj/pay.png'
-import ms2 from '../../../assets/icons/housemantj/ms2.jpg'
-import msTip from '../../../assets/icons/housemantj/foodtip.png'
-import wz from '../../../assets/icons/housemantj/location.png'
-import showMore from '../../../assets/icons/housemantj/查看更多.png'
-import dp from '../../../assets/icons/housemantj/dp.jpg'
-import znz from '../../../assets/icons/housemantj/znz.png'
-import location from '../../../assets/icons/housemantj/location.png'
-import mjImage from '../../../assets/icons/housemantj/mj.jpg'
-import glImage from '../../../assets/icons/housemantj/gl.jpg'
-import glTip from '../../../assets/icons/housemantj/gltip.png'
-import onlove from '../../../assets/icons/housemantj/爱心.png'
-import './foodDetails.less'
 import withLayout from '@/layouts'
-
+import {getShopDetail,getShopPackage,getShopcity,getExtendContent} from '@/services/home'
+import { useState,useEffect } from 'react'
+import { Swiper, SwiperItem } from '@tarojs/components';
+import Star from '@/components/Star/Star.jsx'
+import Cards from '@/components/foodCards/foodCards.jsx'
+import ax from '@/assets/icons/housemantj/onlove.png'
+import yysj from '@/assets/icons/housemantj/营业时间.png'
+import dw from '@/assets/icons/housemantj/地址.png'
+import zhuandao from '@/assets/icons/housemantj/backTop.png'
+import titlezs from '@/assets/icons/housemantj/标题装饰.png'
+import showMore from '@/assets/icons/housemantj/查看更多.png'
+import './foodDetails.less'
+import Extend from '../components/extend'
 
 export default withLayout((props) => {
   const { router, person } = props
+  const {id}=props.router.params
+  //商铺基础信息
+  const [detail,setDetail]=useState({})
+  //商铺套餐
+  const [spackage,setPackage]=useState([])
+  const [city,setCity]=useState({})
+  //banner图集数组
+  const [imlist,setimlist]=useState([])
+  const [index, setIndex] = useState(0)
+  const handchange = (e) => {
+    setIndex(e.detail.current)
+  }
+
+  //当前套餐总数
+  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([])
 
-  return (
+  //当前指南总数
+  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)
+    })
+  }
+  useEffect(()=>{
+    getShopDetail(id).then((res)=>{
+      setDetail(res)
+      setimlist(res.imageList||[])
+      getShopcity(res.cityId).then((res2)=>{
+        setCity(res2)
+      })
+    })
+    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)
+    })
+  },[])
+  const star=parseFloat(((detail.sweetScore+detail.environmentScore+detail.serviceScore)/3).toFixed(1)); 
+return (
     <view className='page-index'>
       <view className='index-navbar'>
         <CustomNav title='十公里' />
       </view>
       <view style={{overflow: 'auto', padding: '0 30rpx', background: '#F8F8F8' }}>
         <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
-          <view className='storeDetails'>
-            <image src={fd} className='storeImage' >
-              <view className='tpPage'>
-                <text>1</text><text>/</text><text>64</text>
-              </view>
-            </image>
+          <view className='storeDetails'>           
+            <Swiper
+              className='.swiper'
+              circular
+              current={index}
+              onChange={handchange}
+            >
+              {
+                imlist.map((item) =>
+                  <SwiperItem>
+                    <image src={item.url} className='storeImage' >
+                      <view className='tpPage'>
+                        <text>{index + 1}</text><text>/</text><text>{imlist.length}</text>
+                      </view>
+                    </image>
+                  </SwiperItem>
+                )
+              }
+            </Swiper>                        
             <view className='storeJs'>
               <view style={{ overflow: 'hidden' }}>
-                <view className='introduce'>
-                  <text className='storeName'>clip coffee</text>
-                  <text>￥</text><text className='price'><text>88</text>/人</text>
-                </view>
-                <view className='bz'>
-                  <image src={ax} style={{ width: '15px', height: '15px', marginRight: '11rpx', marginBottom: '-2px' }} />
-                  <text className='bzRight'>爆赞<text>9999+</text></text>
-                </view>
+                  <view className='storeName'>{detail.shopName}</view>
+                  <view className='sprice'>
+                    <text className='t1'>￥</text>
+                    {detail.averagePrice}/人                
+                    <view className='bzRight'>
+                      <image src={ax} style={{ width: '15px', height: '15px', marginRight: '11rpx', marginBottom: '-2px' }} />
+                    爆赞{detail.likeNum}</view>
+                  </view>
               </view>
               <view className='appraise'>
-                <image className='star' src={huangxin}></image>
-                <image className='star' src={huangxin}></image>
-                <image className='star' src={huangxin}></image>
-                <image className='star' src={huangxin}></image>
-                <image className='star' src={baixin}></image>
-                <text className='storezf'>4.5</text>
+                <Star star={star}/>
+                <text className='storezf'>{star}</text>
                 <view style={{float:'right',marginTop:'5px'}}>
                   <text className='comment'>点评：</text>
-                  <text className='t1'>口味：</text>
-                  <text className='flavor'>4</text>
-                  <text className='t1'>环境：</text>
-                  <text className='storehj'>3</text>
-                  <text className='t1'>服务</text>
-                  <text className='service'>4.5</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' />
-                <text>营业时间：周一至周日 06:00-20:00</text>
+                <image src={yysj} className='yysjImg' />营业时间：{detail.businessHours}
               </view>
-              <view className='dpPosition'>
+              <view className='dpPosition'> 
                 <image src={dw} className='dwTip' />
-                <view>
-                  <text>马道街夫子庙老门东小吃街三条营47号（地铁3号线武定门3号口步行8分钟）</text>
+                <view>{detail.address}
                   <image src={zhuandao} className='zhuandao' />
                 </view>
               </view>
             </view>
           </view>
-          <view style={{ position: 'relative' }}>
+          <view style={{ position: 'relative',display:spackage?'':'none'}}>
             <view className='title'>
               <image src={titlezs}></image>
               <text>返现套餐</text>
             </view>
             
-            <view className='foodCard'>
-              <view className='fCleft'>
-                <view className='backMoney'>
-                  返现￥2.04
-                </view>
-                <view className='appraise'>
-                  <image className='star' src={huangxin}></image>
-                  <image className='star' src={huangxin}></image>
-                  <image className='star' src={huangxin}></image>
-                  <image className='star' src={huangxin}></image>
-                  <image className='star' src={baixin}></image>
-                  <text className='storezf'>4.5</text>
-                </view>
-                <view>
-                  <view className='contentImg'>
-                    <image src={ms2} className='img1' ></image>
-                    <image src={msTip} className='mstip'></image>
-                  </view>
-                  <view className='neirong'>
-                    <view className='textword'>
-                      探店拥有“蓝色波浪”的咖啡店连手提袋都很特别手绘的...
-                    </view>
-                    <view className='jiage'>
-                      <text className='rmb' >￥&nbsp;&nbsp;</text>
-                      <text className='p1'><text className='price' >55</text>元&nbsp;&nbsp;</text>
-                      <text className='p2'>门市价<text className='oldprice' >78</text>元</text>
-                    </view>
-                    <view className='address'>
-                      <image className='dw' src={wz} />
-                      <text className='wz'>南京市/秦淮区</text>
-                      <image className='star' src={huangxin}></image>
-                      <text className='collection'>已收藏</text>
-                    </view>
-                  </view>
-                </view>
-              </view>
-              <view className='fCright'>
-                <image src={pay} />
-                <view>支付</view>
-              </view>
-              <view className='columnLine'></view>
-            </view>
-            <view className='foodCard'>
-              <view className='fCleft'>
-                <view className='backMoney'>
-                  返现￥2.04
-                </view>
-                <view className='appraise'>
-                  <image className='star' src={huangxin}></image>
-                  <image className='star' src={huangxin}></image>
-                  <image className='star' src={huangxin}></image>
-                  <image className='star' src={huangxin}></image>
-                  <image className='star' src={baixin}></image>
-                  <text className='storezf'>4.5</text>
-                </view>
-                <view style={{ overflow: 'hidden' }}>
-                  <view className='contentImg'>
-                    <image src={ms2} className='img1' ></image>
-                    <image src={msTip} className='mstip'></image>
-                  </view>
-                  <view className='neirong'>
-                    <view className='textword'>
-                      探店拥有“蓝色波浪”的咖啡店连手提袋都很特别手绘的...
-                    </view>
-                    <view className='jiage'>
-                      <text className='rmb' >￥&nbsp;&nbsp;</text>
-                      <text className='p1'><text className='price' >55</text>元&nbsp;&nbsp;</text>
-                      <text className='p2'>门市价<text className='oldprice' >78</text>元</text>
-                    </view>
-                    <view className='address'>
-                      <image className='dw' src={wz} />
-                      <text className='wz'>南京市/秦淮区</text>
-                      <image className='star' src={huangxin}></image>
-                      <text className='collection'>已收藏</text>
-                    </view>
-                  </view>
-                </view>
-              </view>
-              <view className='fCright'>
-                <image src={pay} />
-                <view>支付</view>
-              </view>
-              <view className='columnLine'></view>
-            </view>
-            <view className='showMore'>
+            {
+             spackage?.map((item)=><Cards star={star} item={item} city={city} />)
+            }
+            
+            <view className='showMore' style={{display:newpgNum==AllpgNum?'none':''}} onClick={pgMore}>
               <view>查看更多</view>
               <image src={showMore} className='moreTip' />
             </view>
           </view>
 
-          <view style={{ position: 'relative' }}>
+          <view style={{ position: 'relative',display:extend?'':'none' }}>
             <view className='title'>
               <image src={titlezs}></image>
               <text>本店指南</text>
             </view>
-            <view className='storezn'>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-              sed do eiusmod tempor incididunt ut labore et dolore
-              magna aliqua. Quis ipsum suspendisse ultrices gravida.
-              Risus commodo viverra maecenas accumsan lacus vel
-              facilisis.
-            </view>
-            <image src={dp} mode='widthFix' />
-            <view className='storezn'>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-              sed do eiusmod tempor incididunt ut labore et dolore
-              magna aliqua. Quis ipsum suspendisse ultrices gravida.
-              Risus commodo viverra maecenas accumsan lacus vel
-              facilisis.
-            </view>
-            <view className='foodCard'>
-              <view className='fCleft'>
-                <view className='backMoney'>
-                  返现￥2.04
-                </view>
-                <view className='appraise'>
-                  <image className='star' src={huangxin}></image>
-                  <image className='star' src={huangxin}></image>
-                  <image className='star' src={huangxin}></image>
-                  <image className='star' src={huangxin}></image>
-                  <image className='star' src={baixin}></image>
-                  <text className='storezf'>4.5</text>
-                </view>
-                <view style={{ overflow: 'hidden' }}>
-                  <view className='contentImg'>
-                    <image src={ms2} className='img1' ></image>
-                    <image src={msTip} className='mstip'></image>
-                  </view>
-                  <view className='neirong'>
-                    <view className='textword'>
-                      探店拥有“蓝色波浪”的咖啡店连手提袋都很特别手绘的...
-                    </view>
-                    <view className='jiage'>
-                      <text className='rmb' >￥&nbsp;&nbsp;</text>
-                      <text className='p1'><text className='price' >55</text>元&nbsp;&nbsp;</text>
-                      <text className='p2'>门市价<text className='oldprice' >78</text>元</text>
-                    </view>
-                    <view className='address'>
-                      <image className='dw' src={wz} />
-                      <text className='wz'>南京市/秦淮区</text>
-                      <image className='star' src={huangxin}></image>
-                      <text className='collection'>已收藏</text>
-                    </view>
-                  </view>
-                </view>
-              </view>
-              <view className='fCright'>
-                <image src={pay} />
-                <view>支付</view>
-              </view>
-              <view className='columnLine'></view>
-            </view>
-            <view className='storezn'>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-              sed do eiusmod tempor incididunt ut labore et dolore
-              magna aliqua. Quis ipsum suspendisse ultrices gravida.
-            </view>
-            <view className='showMore'>
+            {extend?.map((item)=><Extend item={item} />)}
+            <view className='showMore' style={{display:newextNum==AllextNum?'none':''}} onClick={extendMore}>
               <view>查看更多</view>
               <image src={showMore} className='moreTip' />
             </view>
           </view>
-
-          <view className='title'>
-            <image src={znz} className='gltitle'></image>
-            <text>老板推荐的攻略</text>
-          </view>
-
-
-          <view className="waterfall">
-            <view className='contentCard'>
-              <view className='cardTop'>
-                <image mode='widthFix' src={mjImage} className='cCardimg' />
-                <image className='lefttips' src={glTip} />
-                <image src={onlove} className='loveharde'></image>
-              </view>
-              <view className='bContent'>
-                <view className='cCword'>
-                  超划算套餐？这么便宜也是第一次见6荤6素1...
-                </view>
-                <view className='cCleft'>
-                  <image src={location} className='cCicon'></image>
-                  <view className='distance'><text>9.99</text>公里</view>
-                </view>
-                <view className='cCright'>
-                  <view className='money'>￥</view>
-                  <view className='price'><text>999</text>/人</view>
-                </view>
-              </view>
-            </view>
-            <view className='contentCard'>
-              <view className='cardTop'>
-                <image mode='widthFix' src={glImage} className='cCardimg' />
-                <image className='lefttips' src={glTip} />
-                <image src={onlove} className='loveharde'></image>
-              </view>
-              <view className='bContent'>
-                <view className='cCword'>
-                  超划算套餐？这么便宜也是第一次见6荤6素1...
-                </view>
-                <view className='cCleft'>
-                  <image src={location} className='cCicon'></image>
-                  <view className='distance'>9.99公里</view>
-                </view>
-                <view className='cCright'>
-                  <view className='money'>￥</view>
-                  <view className='price'>999/人</view>
-                </view>
-              </view>
-            </view>
-          </view>
-          <view className='botton'>已经到底了~</view>
+           <view className='botton'>已经到底了~</view>
         </scroll-view>
       </view>
     </view>

src/pages/details/foodDetails/foodDetails.less

@@ -1,10 +1,16 @@
 .storeDetails{
   background-color: #fff;  
   border-radius: 12px;
+  margin-bottom: 20px;
+
+  .swiper{
+    height: calc((100vw - 60px) * 0.6);
+  }
   .storeImage{
     position: relative;
     border-radius: 22px;
     width: 100%;
+    height: 100%;
     .tpPage{
       position: absolute;
       right: 20px;
@@ -24,44 +30,36 @@
   }  
   .storeJs{
     padding: 20px;
-    .introduce{
-      float: left;
-      .storeName{
-        font-size: 32px;         
-        font-weight: bold;
-        color: #020200;
-        padding-right: 60px;
-      }
-      .storeName+text{
-        font-size: 24px;         
-        font-weight: bold;
-        color: #202020;
+    .storeName{      
+      font-size: 32px;         
+      font-weight: bold;
+      color: #202020;
+    }
+    .sprice{
+      color: #202020;
+      font-size: 32px;         
+      font-weight: bold;
+      .t1{        
+        font-size: 24px;
         padding-right: 10px;
       }
-      .price{
-        font-size: 32px;         
-        font-weight: bold;
-        color: #202020;
-      }
-    }
-    .bz{
-      float: right;
-      .bzRight{
-        font-size: 24px;         
-        color: #202020;
-        line-height: 34px;
-        height: 23px;
+      .bzRight{        
+        font-weight: 400;
+        font-size: 24px;
+        float: right;
       }
     }
+
+
+
+
+
+
     .appraise{
       line-height: 0;
       margin-top: 28px;
       margin-bottom: 37px;
-      image{
-        width: 24px;
-        height: 24px;
-        margin-right: 10px;
-      }
+      
       text{
         font-size: 24px;         
         font-weight: bold;
@@ -70,26 +68,20 @@
       .t1{
         margin-left: 10px;
       }
-      .storezf{
-        color: #020200;
-        margin-left: 7px ;
-      }
       .comment{
         color: #666;
       }
     }
     .yysj{
       line-height: 0;
+      font-size: 24px;
+      color: #666;
       .yysjImg{
         width: 26px;
         height: 26px;
         position: relative;
         top: 5px;
-      }
-      text{
-        font-size: 24px;
-        color: #666;
-        padding-left: 10px;
+        padding-right: 10px;
       }
     }
     .dpPosition{
@@ -106,13 +98,14 @@
         font-size: 24px;         
         color: #666666;
         padding-left: 34px;
-        height: 97px;
+        padding-bottom: 40px;
         .zhuandao{
           width: 14px;
           height: 24px;
           transform: rotate(180deg);
-          position: absolute;
-          bottom: 25px;
+          position: relative;
+          left: 8px;
+          top: 5px;
         }        
       }
       
@@ -155,141 +148,7 @@
 background-repeat: no-repeat;
 background-size: auto 50%;
 }
-.foodCard{
-  background: #FFF;
-  box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
-  border-radius: 12px;
-  position: relative;
-  margin-bottom: 30px;
-  overflow: hidden;
-  background: radial-gradient(circle at 82% top,transparent 20px,#fff 0) top,
-              radial-gradient(circle at 82% bottom,transparent 20px,#fff 0) bottom;
-  background-repeat: no-repeat;
-  background-size: auto 50%;
-  .fCleft{
-    float: left;
-    width: 82%;
-    .backMoney{
-      font-size: 24px;
-      font-weight: bold;
-      color: #FFF;
-      margin: 22px 40px 20px 0;        
-      padding: 12px 17px 9px 6px;
-      background:url('../../../assets/icons/housemantj/fximg.png') no-repeat;    
-      display: inline-block;
-      background-size: 100% 100%;
-    }
-    .appraise{
-      display: inline-block;
-      image{
-        width: 21px;
-        height: 21px;
-        margin-right: 10px;
-      }
-      text{
-        font-size: 24px;           
-        font-weight: bold;
-        color: #020200;
-      }
-    }
-    .contentImg{
-      margin: 0 20px 43px 20px;
-      position: relative;
-      display: inline-block;
-      .img1{
-        width: 144px;
-        height: 144px;
-        border-radius: 24px;
-      }
-      .mstip{
-          width:99px;
-          height:37px;
-          position: absolute;
-          left: 0;          
-      }
-    }
-    .neirong{
-      display: inline-block;
-      width: 65%;
-      .textword{
-        font-size: 24px;           
-        color: #333;
-        margin: 0 21px 0 0;
-        height: 84px;
-      }
-      .jiage{
-        line-height: 20px;
-        font-weight: bold;
-        color: #333;
-        .rmb{
-          font-size: 20px;             
-          margin: 0 8px 0 7px;
-        }
-        .p1{
-          font-size: 24px;     
-        }
-        .p2{
-          font-size: 18px;             
-          text-decoration: line-through;
-          color: #666;
-        }
-      }
-      .address{
-        line-height: 0;
-        margin-top: 18px;
-        .dw{
-          width: 16px;
-          height: 20px;
-          position: relative;
-          top:3px;
-          margin-right: 10px;
-        }
-        .wz{
-          font-size: 20px;             
-          color: #333;
-        }
-        .star{
-          width: 21px;
-          height: 21px;
-          margin: 0 10px 0 40px;
-          position: relative;
-          top: 3px;
-        }
-        .collection{
-          font-size: 20px;             
-          color: #333333;
-        }
-      }
-    }
-  }
-  .fCright{
-    float: right;
-    width: 18%;
-    line-height: 0;
-    image{
-      width:35px;
-      height:32px;
-      margin-top: 120%;
-      margin-left:calc(50% - 15px)
-    }
-    view{
-      font-size: 24px;
-      line-height: 23px;
-      font-weight: bold;
-      color: #202020;
-      margin-top: 19px;
-      text-align: center;
-    }
-  }
-  .columnLine{
-    height: 50%;
-    border-right: 2px dashed #595959;
-    opacity: 0.12;
-    position: absolute;
-    right: 18%;
-    bottom:15%;
-  }
-}
+
 .showMore{
   width: 100%;
   background: linear-gradient(0deg, rgba(248, 248, 248, 0.58) 42%, rgba(248, 248, 248, 0) 100%);
@@ -317,85 +176,7 @@ background-size: auto 50%;
   width: 100%;
   margin-bottom: 40px;
 }
-.waterfall{
-  column-count: 2;      //分两列
-  column-gap: 30px;    //列间距
-  background-color: #F8F8F8;
-  padding:30px 30px 0 30px;
-  
-  .contentCard{
-    background: #FFF;
-    box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
-    border-radius: 24px;
-    overflow: hidden;
-    margin-bottom:50px;
-    break-inside: avoid;
-    position: relative;
 
-    .cardTop{
-      border-radius: 24px 24px 0px 0px;
-      .cCardimg{
-        width: 100%;
-        border-radius: 24px 24px 0px 0px;
-      }
-      .lefttips{
-        width:99px;
-        height:37px;
-        position: absolute;
-        left: 0;
-      }
-      .loveharde{
-        width: 22px;
-        height: 20px;
-        position: absolute;
-        right: 20px;
-        top: 10px;
-      }
-    }
-    .bContent{
-      padding:20px;
-      .cCword{
-        font-size: 24px;
-        font-weight: bold;
-        color: #404040;
-      }
-      
-      .cCleft{
-        float: left;
-        position: relative;
-        padding:40px 0 30px 0;
-        .cCicon{
-          width: 17px;
-          height: 21px;
-          position: absolute;
-          left: 0;
-          top: 48px;
-        }
-        .distance{
-          padding-left: 24px;
-          font-size: 24px;
-          color: #C0C8D3;
-        }
-      }
-      .cCright{
-        position: relative;
-        float: right;
-        padding:40px 0 30px 0;
-        .money{
-          font-size: 20px;
-          color: #FF3434;          
-          position: absolute;
-          right: 78px;
-          bottom: 32px;
-        }
-        .price{
-          font-size: 24px;
-          color: #FF3434;
-        }
-      }
-    }
-  }
-}
 .botton{
   font-size: 28px;   
   color: #C0C8D3;

src/pages/details/mjDetails/sceneryDetails.jsx

@@ -1,10 +1,11 @@
 import CustomNav from '@/components/CustomNav'
 import mj from '../../../assets/icons/housemantj/mj2.jpg'
+import mj3 from '../../../assets/icons/housemantj/mj3.jpg'
 import ax from '../../../assets/icons/housemantj/onlove.png'
 import huangxin from '../../../assets/icons/housemantj/已收藏.png'
 import baixin from '../../../assets/icons/housemantj/收藏.png'
 import dw from '../../../assets/icons/housemantj/地址.png'
-import titlezs from '../../../assets/icons/housemantj/推荐景点.png'
+import titlejd from '../../../assets/icons/housemantj/推荐景点.png'
 import titlems from '../../../assets/icons/housemantj/推荐美食.png'
 import pay from '../../../assets/icons/housemantj/pay.png'
 import ms2 from '../../../assets/icons/housemantj/ms2.jpg'
@@ -12,42 +13,93 @@ import msTip from '../../../assets/icons/housemantj/foodtip.png'
 import wz from '../../../assets/icons/housemantj/location.png'
 import showMore from '../../../assets/icons/housemantj/查看更多.png'
 import dp from '../../../assets/icons/housemantj/dp.jpg'
-import znz from '../../../assets/icons/housemantj/znz.png'
-import location from '../../../assets/icons/housemantj/location.png'
-import mjImage from '../../../assets/icons/housemantj/mj.jpg'
-import glImage from '../../../assets/icons/housemantj/gl.jpg'
-import glTip from '../../../assets/icons/housemantj/gltip.png'
-import onlove from '../../../assets/icons/housemantj/爱心.png'
 import share from '../../../assets/icons/housemantj/景点分享.png'
 import good from '../../../assets/icons/housemantj/景点爆赞.png'
 import collection from '../../../assets/icons/housemantj/景点收藏.png'
 import './sceneryDetails.less'
 import withLayout from '@/layouts'
+import { useState, useEffect } from 'react'
+import { getTouristDetail, saveCollection, removeCollection } from '@/services/home'
+import { Swiper, SwiperItem } from '@tarojs/components';
+
+
 
 
 export default withLayout((props) => {
-  const { router, person } = props
+  const { router, person, id } = props
+  const { detail, setDetail } = useState()
+  const tips = [
+    { src: mj },
+    { src: mj3 },
+    { src: collection },
+    { src: mj },
+    { src: mj },
+    { src: mj3 },
+    { src: titlems },
+    { src: mj }
+  ]
+  const [ jshidden, setHidden]  = useState('none')
+  const [ jsclose, setClose ] = useState('none')
+  const [ jsmore, setMore ] = useState('block')
+  const [ tchidden, tcHidden ] = useState('none')
+  const [ tcclose, setTcclose ] = useState('none')
+  const [ tcmore, setTcMore ] = useState('block')
+  const onClose=()=>{
+    setHidden('none')
+    setClose('none')
+    setMore('block')
+  }
+  const onShow=()=>{
+    setHidden('block')
+    setClose('block')
+    setMore('none')
+  }
+
+
+  const [index, setIndex] = useState(0)
+  const handchange = (e) => {
+    setIndex(e.detail.current)
+  }
+  useEffect(() => {
+    getTouristDetail(id).then((res) => {
+      setDetail(res)
+    })
+  }, [])
   return (
     <view className='page-index'>
       <view className='index-navbar'>
         <CustomNav title='十公里' />
       </view>
-      <view style={{overflow: 'auto', padding: '0 30rpx', background: '#F8F8F8' }}>
+      <view style={{ overflow: 'auto', padding: '0 30rpx', background: '#F8F8F8' }}>
         <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
           <view className='storeDetails'>
-            <image src={mj} className='storeImage' >
-              <view className='tpPage'>
-                <text>1</text><text>/</text><text>64</text>
-              </view>
-            </image>
+            <Swiper
+              className='.swiper'
+              circular
+              current={index}
+              onChange={handchange}
+            >
+              {
+                tips.map((item) =>
+                  <SwiperItem>
+                    <image src={item.src} className='storeImage' >
+                      <view className='tpPage'>
+                        <text>{index + 1}</text><text>/</text><text>{tips.length}</text>
+                      </view>
+                    </image>
+                  </SwiperItem>
+                )
+              }
+            </Swiper>
+
             <view className='storeJs'>
               <view className='introduce'>
                 <text className='storeName'>玄武湖</text>
               </view>
               <view className='bz'>
-                  <image src={ax} style={{ width: '15px', height: '15px', marginRight: '10px', marginBottom: '-2px' }} />
-                  <text className='bzRight'>爆赞<text>9999+</text></text>
-                </view>
+                <image src={ax} style={{ width: '15px', height: '15px', marginRight: '10px', marginBottom: '-2px' }} />
+                <text className='bzRight'>爆赞<text>9999+</text></text>
+              </view>
               <view className='wz'>凤游寺52号悦动新门西15栋111号</view>
               <view className='dpPosition'>
                 <image src={dw} className='dwTip' />
@@ -60,15 +112,16 @@ export default withLayout((props) => {
               到了10月下旬的深秋时节，“不觉初秋夜渐长，清风习习重凄
               凉”，秋天的美，毫不输给繁花似锦的春天11月栖霞山枫叶最
               佳观赏期快要来了，赶紧提前收藏这些吧！
-              </view>
-              <view className='line'></view>
-              <view className='sc'>
-                <image className='scTip' src={baixin} /><text>加入收藏</text>
-              </view>
+            </view>
+            <view className='line'></view>
+            <view className='sc'>
+              <image className='scTip' src={baixin} /><text>加入收藏</text>
+            </view>
           </view>
           <view style={{ position: 'relative' }}>
+
             <view className='title'>
-              <image src={titlezs}></image>
+              <image src={titlejd}></image>
               <text>景点介绍</text>
             </view>
             <view className='storezn'>
@@ -84,10 +137,55 @@ export default withLayout((props) => {
               sed do eiusmod tempor incididunt ut labore et dolore
               magna aliqua. Quis ipsum suspendisse ultrices gravida.
             </view>
-            <view className='showMore'>
+
+
+
+            <view style={{display:jshidden}} >
+              <view className='title'>
+                <image src={titlejd}></image>
+                <text>景点介绍</text>
+              </view>
+              <view className='storezn'>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                sed do eiusmod tempor incididunt ut labore et dolore
+                magna aliqua. Quis ipsum suspendisse ultrices gravida.
+                Risus commodo viverra maecenas accumsan lacus vel
+                facilisis.
+              </view>
+              <image src={dp} mode='widthFix' />
+              <view className='storezn'>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                sed do eiusmod tempor incididunt ut labore et dolore
+                magna aliqua. Quis ipsum suspendisse ultrices gravida.
+              </view>
+              <view className='title'>
+                <image src={titlejd}></image>
+                <text>景点介绍</text>
+              </view>
+              <view className='storezn'>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                sed do eiusmod tempor incididunt ut labore et dolore
+                magna aliqua. Quis ipsum suspendisse ultrices gravida.
+                Risus commodo viverra maecenas accumsan lacus vel
+                facilisis.
+              </view>
+              <image src={dp} mode='widthFix' />
+              <view className='storezn'>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                sed do eiusmod tempor incididunt ut labore et dolore
+                magna aliqua. Quis ipsum suspendisse ultrices gravida.
+              </view>
+            </view>
+            <view className='showMore' style={{display:jsclose}} onClick={onClose}>
+              <image src={showMore} className='moreTip2' />
+              <view>收起</view>
+            </view>
+            <view className='showMore'  style={{display:jsmore}} onClick={onShow}>
               <view>点击查看更多</view>
               <image src={showMore} className='moreTip' />
             </view>
+
+
           </view>
           <view style={{ position: 'relative' }}>
             <view className='title'>
@@ -183,67 +281,21 @@ export default withLayout((props) => {
               <image src={showMore} className='moreTip' />
             </view>
           </view>
-          <view className='title'>
-            <image src={znz} className='gltitle'></image>
-            <text>老板推荐的攻略</text>
-          </view>
-          <view className="waterfall">
-            <view className='contentCard'>
-              <view className='cardTop'>
-                <image mode='widthFix' src={mjImage} className='cCardimg' />
-                <image className='lefttips' src={glTip} />
-                <image src={onlove} className='loveharde'></image>
-              </view>
-              <view className='bContent'>
-                <view className='cCword'>
-                  超划算套餐？这么便宜也是第一次见6荤6素1...
-                </view>
-                <view className='cCleft'>
-                  <image src={location} className='cCicon'></image>
-                  <view className='distance'><text>9.99</text>公里</view>
-                </view>
-                <view className='cCright'>
-                  <view className='money'>￥</view>
-                  <view className='price'><text>999</text>/人</view>
-                </view>
-              </view>
-            </view>
-            <view className='contentCard'>
-              <view className='cardTop'>
-                <image mode='widthFix' src={glImage} className='cCardimg' />
-                <image className='lefttips' src={glTip} />
-                <image src={onlove} className='loveharde'></image>
-              </view>
-              <view className='bContent'>
-                <view className='cCword'>
-                  超划算套餐？这么便宜也是第一次见6荤6素1...
-                </view>
-                <view className='cCleft'>
-                  <image src={location} className='cCicon'></image>
-                  <view className='distance'>9.99公里</view>
-                </view>
-                <view className='cCright'>
-                  <view className='money'>￥</view>
-                  <view className='price'>999/人</view>
-                </view>
-              </view>
-            </view>
-          </view>
           <view className='bottom'>已经到底了~</view>
         </scroll-view>
+      </view>
+      <view className='bottomTab'>
+        <view className='tab'>
+          <image className='share' src={share} /><text>分享</text>
         </view>
-        <view className='bottomTab'>
-          <view className='tab'>
-            <image className='share' src={share} /><text>分享</text>
-          </view>
-          <view className='tab'>
-            <image className='good' src={good} /><text>爆赞</text>
-          </view>
-          <view className='tab'>
-            <image className='collection' src={collection} /><text>加入收藏</text>
-          </view>
+        <view className='tab'>
+          <image className='good' src={good} /><text>爆赞</text>
         </view>
-      
+        <view className='tab'>
+          <image className='collection' src={collection} /><text>加入收藏</text>
+        </view>
+      </view>
+
     </view>
   )
 })

src/pages/details/mjDetails/sceneryDetails.less

@@ -2,10 +2,14 @@
   background-color: #fff;  
   border-radius: 12px;
   margin-bottom: 20px;
+  .swiper{
+    height: calc((100vw - 60px) * 0.6);
+  }
   .storeImage{
     position: relative;
     border-radius: 22px;
     width: 100%;
+    height: 100%;
     .tpPage{
       position: absolute;
       right: 20px;
@@ -265,6 +269,12 @@
     height: 19px;
     margin-top: 14px;
   }
+  .moreTip2{
+    width: 38px;
+    height: 19px;
+    margin-top: 14px;
+    transform:rotate(180deg);
+  }
 }
 .storezn{
   font-size: 28px;
@@ -276,84 +286,6 @@
 .storezn+image{
   width: 100%;
 }  
-.waterfall{
-  column-count: 2;      //分两列
-  column-gap: 30px;    //列间距
-  background-color: #F8F8F8;
-  
-  .contentCard{
-    background: #FFF;
-    box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
-    border-radius: 24px;
-    overflow: hidden;
-    margin-bottom:50px;
-    break-inside: avoid;
-    position: relative;
-
-    .cardTop{
-      border-radius: 24px 24px 0px 0px;
-      .cCardimg{
-        width: 100%;
-        border-radius: 24px 24px 0px 0px;
-      }
-      .lefttips{
-        width:99px;
-        height:37px;
-        position: absolute;
-        left: 0;
-      }
-      .loveharde{
-        width: 22px;
-        height: 20px;
-        position: absolute;
-        right: 20px;
-        top: 10px;
-      }
-    }
-    .bContent{
-      padding:20px;
-      .cCword{
-        font-size: 24px;
-        font-weight: bold;
-        color: #404040;
-      }
-      
-      .cCleft{
-        float: left;
-        position: relative;
-        padding:40px 0 30px 0;
-        .cCicon{
-          width: 17px;
-          height: 21px;
-          position: absolute;
-          left: 0;
-          top: 48px;
-        }
-        .distance{
-          padding-left: 24px;
-          font-size: 24px;
-          color: #C0C8D3;
-        }
-      }
-      .cCright{
-        position: relative;
-        float: right;
-        padding:40px 0 30px 0;
-        .money{
-          font-size: 20px;
-          color: #FF3434;          
-          position: absolute;
-          right: 78px;
-          bottom: 32px;
-        }
-        .price{
-          font-size: 24px;
-          color: #FF3434;
-        }
-      }
-    }
-  }
-}
 .bottom{
   font-size: 28px;    
   color: #C0C8D3;

src/pages/index/components/Card.js

@@ -0,0 +1,45 @@
+
+import Taro from '@tarojs/taro'
+import useSave from "@/utils/hooks/useSave"
+import msTip from '@/assets/icons/housemantj/foodtip.png'
+import mjTip from '@/assets/icons/housemantj/mjtip.png'
+import glTip from '@/assets/icons/housemantj/gltip.png'
+import location from '@/assets/icons/housemantj/location.png'
+import onlove from '@/assets/icons/housemantj/onlove.png'
+import love from '@/assets/icons/housemantj/爱心.png'
+
+export default (props) => {
+
+  const { item } = props
+
+  const [isSaved, toggleSave] = useSave(item.isSaved, item.targetType, item.targetId)
+  const Detail=()=>{
+    if (item.targetType=='tourist') {
+      Taro.navigateTo({ url: `/pages/details/mjDetails/sceneryDetails?id=${item.targetId}` });
+    }
+    else{
+      Taro.navigateTo({ url: `/pages/details/foodDetails/foodDetails?id=${item.targetId}` });
+    }
+  }
+
+  return (
+    <view className='contentCard'>
+      <view className='cardTop'>
+        <image mode='widthFix' onClick={Detail} src={item.poster} className='cCardimg' />
+        <image className='lefttips' src={item.targetType==='tourist'?mjTip:msTip}/>
+        <image onClick={toggleSave} src={isSaved> 0?onlove:love} className='loveharde'></image>
+      </view>
+      <view className='bContent' onClick={Detail}>
+        <view className='cCword'>{(item.title).toString().length>35?(item.title).substring(0, 35)+'...':(item.title)}</view>
+        <view className='cCleft'>
+          <image src={location} className='cCicon'></image>
+          <view className='distance'><text>{(item.distance/1000).toFixed(2)}</text>公里</view>
+        </view>
+        <view className='cCright'>          
+          <view className='price'><text className='money'>￥</text><text>{item.averagePrice/100}</text>/人</view>
+        </view>
+      </view>
+    </view>
+  )
+
+}

src/pages/index/tabs/Recommend.jsx

@@ -1,19 +1,11 @@
-import { React, useState, useEffect, } from 'react'
-
+import Taro, { useRouter } from '@tarojs/taro'
+import { React, useState, useEffect } from 'react'
 import iconsearch from '@/assets/icons/housemantj/search.png'
-import icontip from '@/assets/icons/housemantj/tip.png'
 import location from '@/assets/icons/housemantj/location.png'
-import msImage from '@/assets/icons/housemantj/ms.jpg'
-import mjImage from '@/assets/icons/housemantj/mj.jpg'
-import glImage from '@/assets/icons/housemantj/gl.jpg'
-import msTip from '@/assets/icons/housemantj/foodtip.png'
-import mjTip from '@/assets/icons/housemantj/mjtip.png'
-import glTip from '@/assets/icons/housemantj/gltip.png'
-import onlove from '@/assets/icons/housemantj/onlove.png'
-import Taro, { useRouter } from '@tarojs/taro'
-import withLayout from '@/layouts'
-
-import { getIndexType, getIndexRecommender } from '@/services/home'
+import Tip from '@/components/tip'
+import { getIndexType,  getResourceList } from '@/services/home'
+import Card from '../components/Card'
+import { getLocation } from '@/utils/location'
 
 import './less/Recommend.less'
 
@@ -24,44 +16,67 @@ export default (props) => {
   const { params } = useRouter()
   const { tabJump } = params || {}
   const [typeList, setTypeList] = useState([])
-  const [list, setList] = useState([])
+  const [location1,setLocation]=useState('')
 
-  const tabs = [{ title: '附近' }].concat(typeList.map(x => ({ ...x, title: x.typeName })))
+  const [queryParams, setQueryParams] = useState({ location: '', pageNum: 1, pageSize: 10, typeId: '' })
 
+  // 获取资源表信息
+  const [alllist, setAllList] = useState([])
+  //分类标签
+  const tabs = [{ title: '附近' }].concat(typeList.map(x => ({ ...x, title: x.typeName })))
+  //切换上面的标签
   const handleTabChange = (e) => {
     const { index } = e.detail
     setActiveTab(index)
     const tab = tabs[index].typeId
-    // getIndexRecommender().then()
+    setQueryParams({
+      ...queryParams,
+      typeId: tab
+    })
+    if (index == 0) {
+      setQueryParams({ location: location1, pageNum: 1, pageSize: 10, typeId: '' })
+    }
   }
 
   useEffect(() => {
+    getLocation().then((res) => {
+      setLocation(`${res.longitude},${res.latitude}`)
+      setQueryParams({
+        ...queryParams,
+        location: `${res.longitude},${res.latitude}`
+      })
+      getResourceList(queryParams).then((res2) => {
+      setAllList(res2.records || [])
+    })
+    })
+
+    //查询分类标签表
     getIndexType({ pageSize: 20 }).then((res) => {
       setTypeList(res.records || [])
     })
-    getIndexRecommender().then((res) => {
-      setList(res.records || [])
-    })
+    
+  }, [])
+
+  useEffect(() => {
     if (tabJump) {
-      setActiveTab(tabJump - 0)
+      // 更新 typeId
+      // 更新 分页
     }
+
+    setActiveTab(tabJump - 0)
   }, [tabJump])
+
+
+  useEffect(() => {
+    getResourceList(queryParams).then((res) => {
+      setAllList(res.records || [])
+    })
+  }, [queryParams])
+
   const onSearch = () => {
     // 用绝对路径
     Taro.navigateTo({ url: '/pages/search/search' });
   }
-  const toDetails = () => {
-    // 用绝对路径
-    Taro.navigateTo({ url: '/pages/details/foodDetails/foodDetails' });
-  }
-  const toDetails2 = () => {
-    // 用绝对路径
-    Taro.navigateTo({ url: '/pages/details/mjDetails/sceneryDetails' });
-  }
-  const onLogin = () => {
-    // 用绝对路径
-    Taro.navigateTo({ url: '/components/AuthPage/index' });
-  }
   return (
     <view style={{ height: '100%', overflow: 'auto' }}>
       <view className='search' onClick={onSearch}>
@@ -69,19 +84,14 @@ export default (props) => {
         <image className='searchicon' src={iconsearch} />
         <view className='searchword'>搜索</view>
       </view>
-      <view className='tip' onclick={onLogin}>
-        <image className='tipicon' src={icontip} />
-        <view className='tipword' >Tip : 饮食无大小，疫情防控请大家认真对待！</view>
-      </view>
+      <Tip />
       <view className='index-tabs'>
         <view className='position'>
           <image className='location' src={location} />
           <view className='city'>南京</view>
           <view className='line' />
         </view>
-
         <scroll-view scroll-x='true' scroll-view='true' bindscrolltoupper='upper' bindscrolltolower='lower' bindscroll='scroll'>
-
           <mp-tabs
             tabClass='tabs-Unselected'
             swiperClass='tabs-swiper'
@@ -96,288 +106,9 @@ export default (props) => {
       </view>
       <scroll-view scroll-y='true' scroll-view='true' bindscrolltoupper='upper' bindscrolltolower='lower' bindscroll='scroll'>
         <view className='waterfall'>
-          {/* {
-            list.map()
-
-          } */}
-
-
-          {activeTab === 0 &&
-            <>
-              <view className='contentCard' onClick={toDetails2}>
-                <view className='cardTop'>
-                  <image mode='widthFix' src={mjImage} className='cCardimg' />
-                  <image className='lefttips' src={mjTip} />
-                  <image src={onlove} className='loveharde'></image>
-                </view>
-                <view className='bContent'>
-                  <view className='cCword'>
-                    超划算套餐？这么便宜也是第一次见6荤6素1...
-                  </view>
-                  <view className='cCleft'>
-                    <image src={location} className='cCicon'></image>
-                    <view className='distance'><text>9.99</text>公里</view>
-                  </view>
-                  <view className='cCright'>
-                    <view className='money'>￥</view>
-                    <view className='price'><text>999</text>/人</view>
-                  </view>
-                </view>
-              </view>
-              <view className='contentCard'>
-                <view className='cardTop'>
-                  <image mode='widthFix' src={msImage} className='cCardimg' />
-                  <image className='lefttips' src={msTip} />
-                  <image src={onlove} className='loveharde'></image>
-                </view>
-                <view className='bContent'>
-                  <view className='cCword'>
-                    超划算套餐？这么便宜也是第一次见6荤6素1...
-                  </view>
-                  <view className='cCleft'>
-                    <image src={location} className='cCicon'></image>
-                    <view className='distance'><text>9.99</text>公里</view>
-                  </view>
-                  <view className='cCright'>
-                    <view className='money'>￥</view>
-                    <view className='price'><text>999</text>/人</view>
-                  </view>
-                </view>
-              </view>
-              <view className='contentCard'>
-                <view className='cardTop'>
-                  <image mode='widthFix' src={glImage} className='cCardimg' />
-                  <image className='lefttips' src={glTip} />
-                  <image src={onlove} className='loveharde'></image>
-                </view>
-                <view className='bContent'>
-                  <view className='cCword'>
-                    超划算套餐？这么便宜也是第一次见6荤6素1...
-                  </view>
-                  <view className='cCleft'>
-                    <image src={location} className='cCicon'></image>
-                    <view className='distance'>9.99公里</view>
-                  </view>
-                  <view className='cCright'>
-                    <view className='money'>￥</view>
-                    <view className='price'>999/人</view>
-                  </view>
-                </view>
-              </view>
-              <view className='contentCard'>
-                <view className='cardTop'>
-                  <image mode='widthFix' src={mjImage} className='cCardimg' />
-                  <image className='lefttips' src={mjTip} />
-                  <image src={onlove} className='loveharde'></image>
-                </view>
-                <view className='bContent'>
-                  <view className='cCword'>
-                    超划算套餐？这么便宜也是第一次见6荤6素1...
-                  </view>
-                  <view className='cCleft'>
-                    <image src={location} className='cCicon'></image>
-                    <view className='distance'><text>9.99</text>公里</view>
-                  </view>
-                  <view className='cCright'>
-                    <view className='money'>￥</view>
-                    <view className='price'><text>999</text>/人</view>
-                  </view>
-                </view>
-              </view>
-              <view className='contentCard'>
-                <view className='cardTop'>
-                  <image mode='widthFix' src={mjImage} className='cCardimg' />
-                  <image className='lefttips' src={mjTip} />
-                  <image src={onlove} className='loveharde'></image>
-                </view>
-                <view className='bContent'>
-                  <view className='cCword'>
-                    超划算套餐？这么便宜也是第一次见6荤6素1...
-                  </view>
-                  <view className='cCleft'>
-                    <image src={location} className='cCicon'></image>
-                    <view className='distance'><text>9.99</text>公里</view>
-                  </view>
-                  <view className='cCright'>
-                    <view className='money'>￥</view>
-                    <view className='price'><text>999</text>/人</view>
-                  </view>
-                </view>
-              </view>
-              <view className='contentCard'>
-                <view className='cardTop'>
-                  <image mode='widthFix' src={msImage} className='cCardimg' />
-                  <image className='lefttips' src={msTip} />
-                  <image src={onlove} className='loveharde'></image>
-                </view>
-                <view className='bContent'>
-                  <view className='cCword'>
-                    超划算套餐？这么便宜也是第一次见6荤6素1...
-                  </view>
-                  <view className='cCleft'>
-                    <image src={location} className='cCicon'></image>
-                    <view className='distance'><text>9.99</text>公里</view>
-                  </view>
-                  <view className='cCright'>
-                    <view className='money'>￥</view>
-                    <view className='price'><text>999</text>/人</view>
-                  </view>
-                </view>
-              </view>
-              <view className='contentCard'>
-                <view className='cardTop'>
-                  <image mode='widthFix' src={mjImage} className='cCardimg' />
-                  <image className='lefttips' src={mjTip} />
-                  <image src={onlove} className='loveharde'></image>
-                </view>
-                <view className='bContent'>
-                  <view className='cCword'>
-                    超划算套餐？这么便宜也是第一次见6荤6素1...
-                  </view>
-                  <view className='cCleft'>
-                    <image src={location} className='cCicon'></image>
-                    <view className='distance'><text>9.99</text>公里</view>
-                  </view>
-                  <view className='cCright'>
-                    <view className='money'>￥</view>
-                    <view className='price'><text>999</text>/人</view>
-                  </view>
-                </view>
-              </view>
-              <view className='contentCard' onClick={toDetails}>
-                <view className='cardTop'>
-                  <image mode='widthFix' src={msImage} className='cCardimg' />
-                  <image className='lefttips' src={msTip} />
-                  <image src={onlove} className='loveharde'></image>
-                </view>
-                <view className='bContent'>
-                  <view className='cCword'>
-                    超划算套餐？这么便宜也是第一次见6荤6素1...
-                  </view>
-                  <view className='cCleft'>
-                    <image src={location} className='cCicon'></image>
-                    <view className='distance'><text>9.99</text>公里</view>
-                  </view>
-                  <view className='cCright'>
-                    <view className='money'>￥</view>
-                    <view className='price'><text>999</text>/人</view>
-                  </view>
-                </view>
-              </view>
-            </>
-          }
-          {activeTab === 1 &&
-            <>
-              <view className='contentCard'>
-                <view className='cardTop'>
-                  <image mode='widthFix' src={mjImage} className='cCardimg' />
-                  <image className='lefttips' src={mjTip} />
-                  <image src={onlove} className='loveharde'></image>
-                </view>
-                <view className='bContent'>
-                  <view className='cCword'>
-                    超划算套餐？这么便宜也是第一次见6荤6素1...
-                  </view>
-                  <view className='cCleft'>
-                    <image src={location} className='cCicon'></image>
-                    <view className='distance'><text>9.99</text>公里</view>
-                  </view>
-                  <view className='cCright'>
-                    <view className='money'>￥</view>
-                    <view className='price'><text>999</text>/人</view>
-                  </view>
-                </view>
-              </view>
-              <view className='contentCard'>
-                <view className='cardTop'>
-                  <image mode='widthFix' src={msImage} className='cCardimg' />
-                  <image className='lefttips' src={msTip} />
-                  <image src={onlove} className='loveharde'></image>
-                </view>
-                <view className='bContent'>
-                  <view className='cCword'>
-                    超划算套餐？这么便宜也是第一次见6荤6素1...
-                  </view>
-                  <view className='cCleft'>
-                    <image src={location} className='cCicon'></image>
-                    <view className='distance'><text>9.99</text>公里</view>
-                  </view>
-                  <view className='cCright'>
-                    <view className='money'>￥</view>
-                    <view className='price'><text>999</text>/人</view>
-                  </view>
-                </view>
-              </view>
-            </>
-          }
-          {activeTab === 2 &&
-            <view className='contentCard'>
-              <view className='cardTop'>
-                <image mode='widthFix' src={mjImage} className='cCardimg' />
-                <image className='lefttips' src={mjTip} />
-                <image src={onlove} className='loveharde'></image>
-              </view>
-              <view className='bContent'>
-                <view className='cCword'>
-                  超划算套餐？这么便宜也是第一次见6荤6素1...
-                </view>
-                <view className='cCleft'>
-                  <image src={location} className='cCicon'></image>
-                  <view className='distance'><text>9.99</text>公里</view>
-                </view>
-                <view className='cCright'>
-                  <view className='money'>￥</view>
-                  <view className='price'><text>999</text>/人</view>
-                </view>
-              </view>
-            </view>
+          {
+            alllist.map((item) => <Card key={item.resourceNo} item={item} />)
           }
-          {activeTab === 3 && <>
-            <view className='contentCard'>
-              <view className='cardTop'>
-                <image mode='widthFix' src={msImage} className='cCardimg' />
-                <image className='lefttips' src={msTip} />
-                <image src={onlove} className='loveharde'></image>
-              </view>
-              <view className='bContent'>
-                <view className='cCword'>
-                  超划算套餐？这么便宜也是第一次见6荤6素1...
-                </view>
-                <view className='cCleft'>
-                  <image src={location} className='cCicon'></image>
-                  <view className='distance'><text>9.99</text>公里</view>
-                </view>
-                <view className='cCright'>
-                  <view className='money'>￥</view>
-                  <view className='price'><text>999</text>/人</view>
-                </view>
-              </view>
-            </view>
-            <view className='contentCard'>
-              <view className='cardTop'>
-                <image mode='widthFix' src={mjImage} className='cCardimg' />
-                <image className='lefttips' src={mjTip} />
-                <image src={onlove} className='loveharde'></image>
-              </view>
-              <view className='bContent'>
-                <view className='cCword'>
-                  超划算套餐？这么便宜也是第一次见6荤6素1...
-                </view>
-                <view className='cCleft'>
-                  <image src={location} className='cCicon'></image>
-                  <view className='distance'><text>9.99</text>公里</view>
-                </view>
-                <view className='cCright'>
-                  <view className='money'>￥</view>
-                  <view className='price'><text>999</text>/人</view>
-                </view>
-              </view>
-            </view>
-          </>
-          }
-
-
-
         </view>
         <view className='botton'>已经到底了~</view>
       </scroll-view>

src/pages/index/tabs/less/Recommend.less

@@ -28,21 +28,6 @@
       letter-spacing: 0.2em;
     }
 }
-.tip{
-  padding:23px 0 22px 31px;
-  height: 70px;
-
-  .tipicon{
-    width: 17px;
-    height: 19px;
-    margin-right: 10px;
-  }
-  .tipword{
-    display:inline-block;
-    font-size: 24px;
-    color: #999;
-  }
-}
 .waterfall{
   column-count: 2;      //分两列
   column-gap: 30px;    //列间距
@@ -107,16 +92,12 @@
         position: relative;
         float: right;
         padding:40px 0 30px 0;
-        .money{
-          font-size: 20px;
-          color: #FF3434;          
-          position: absolute;
-          right: 78px;
-          bottom: 32px;
-        }
-        .price{
+        .price{          
           font-size: 24px;
           color: #FF3434;
+          .money{
+            font-size: 20px;
+          }
         }
       }
     }

src/services/home.js

@@ -1,35 +1,57 @@
 import request from '@/utils/request'
 
+
+
 /**
- * 获取推荐列表
- * @param {*} params 
+ * 获取分类列表
  * @returns 
  */
-export const getIndexRecommender = (params) => request('/index/recommender', { params })
+export const getIndexType = (params) => request('/tdType', { params })
 
 /**
- * 获取分类列表
+ * 获取新闻公告列表
  * @returns 
  */
-export const getIndexType = (params) => request('/tdType', { params })
+ export const getTipList = (params) => request('/notification', { params })
+/**
+ * 获取资源列表
+ * @returns 
+ * params 搜索条件放这里
+ */
+ export const getResourceList = (params) => request('/resource', { params })
 
 /**
- * 获取商铺列表
+ * 加入收藏
+ * @param {*} data 
  * @returns 
  */
- export const getIndexShop = (params) => request('/taShop', { params })
+ export const saveCollection = (targetType,targetId) => request(`/${targetType}/save/${targetId}`, { method: 'post' })
+
+/**
+ * 取消收藏
+ * @param {*} data 
+ * @returns 
+ */
+ export const removeCollection = (targetType,targetId) => request(`/${targetType}/save/${targetId}`, { method: 'delete'})
+ 
+/**
+ * 获取收藏
+ * @param {*} data 
+ * @returns 
+ */
+ export const getCollection = (targetType,targetId) => request(`/${targetType}/save/${targetId}`)
 
 /**
  * 商铺详情
  * @param {*} id 
  * @returns 
  */
- export const getShopDetail = (id) => request(`/taShop/${id}`)
+ export const getShopDetail = (id) => request(`/shop/${id}`)
  /**
  * 获取商铺套餐列表
  * @returns 
  */
-  export const getIndexShopPackage = (params) => request('/taShopPackage ', { params })
+  export const getShopPackage = (id,params) => request(`/shop/${id}/package`,{params})
 
   /**
  * 套餐详情
@@ -37,13 +59,21 @@ export const getIndexType = (params) => request('/tdType', { params })
  * @returns 
  */
  export const getShopPackageDetail = (id) => request(`/taShopPackage/${id}`)
-
-/**
- * 获取景点列表
+ 
+ /**
+ * 获取套餐定位
+ * @param {*} id 
  * @returns 
  */
- export const getIndexTourist  = (params) => request('/taTourist ', { params })
+   export const getShopcity = (id) => request(`/city/${id}`)
 
+ /**
+ * 本店指南
+ * @param {*} id 
+ * @returns 
+ */
+  export const getExtendContent = (type,id,params) => request(`/${type}/${id}/content`,{params})
+ 
 /**
  * 景点详情
  * @param {*} id 
@@ -68,11 +98,6 @@ export const getIndexType = (params) => request('/tdType', { params })
 //缺少收藏接口
 //缺少套餐订单生成
 
-/**
- * 获取更多指引列表
- * @returns 
- */
- export const getExtendContent  = (params) => request('/taExtendContent  ', { params })
 
 
 /**

src/utils/hooks/useSave.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react"
+import { saveCollection, removeCollection } from "@/services/home"
+
+export default function (initailState, targetType, targetId) {
+  const [isSaved, setIsSaved] = useState(initailState)
+  useEffect(() => {
+    setIsSaved(initailState)
+  }, [initailState])
+  const toggleSave = () => {
+    if (isSaved) {
+      removeCollection(targetType, targetId).then(() => {
+        setIsSaved(false)
+      })
+    } else {
+      saveCollection(targetType, targetId).then(() => {
+        setIsSaved(true)
+      })
+    }
+  }
+  return [isSaved, toggleSave]
+}

src/utils/location.js

@@ -0,0 +1,26 @@
+
+import Taro from '@tarojs/taro'
+
+export function getLocation() {
+  return new Promise((resolve, reject) => {
+    Taro.authorize({
+      scope: 'scope.userLocation',
+      success: () => {
+        Taro.getLocation({
+          type: 'wgs84',
+          success: (res) => {
+            resolve(res)
+          },
+          fail: (err) => {
+            console.error(err)
+            reject(err)
+          }
+        })
+      },
+      fail: (err) => {
+        console.error(err)
+        reject(err)
+      }
+    })
+  })
+}