fix

src/pages/details/NoteDetails/index.config.js

@@ -0,0 +1,9 @@
+export default {
+  navigationBarTitleText: '笔记详情',
+  disableScroll: true,
+  navigationStyle: 'custom',
+  usingComponents: {
+    // "add-tipsFood": "../../../components/add-tipsFood/index"
+
+  }
+}

src/pages/details/NoteDetails/index.jsx

@@ -0,0 +1,199 @@
+import CustomNav from '@/components/CustomNav'
+import ax from '@/assets/icons/housemantj/onlove.png'
+import dw from '@/assets/icons/housemantj/loc-o.png'
+import TextMentioned from '@/assets/icons/housemantj/TextMentioned.png'
+import NoteasICO from '@/assets/icons/housemantj/NoteasICO.png'
+import { compressImage } from '@/utils'
+import MoreGuide from "@/components/MoreGuide";//视频
+
+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 zhuandao from "@/assets/icons/housemantj/backTop.png";
+import withLayout from '@/layouts'
+import SpinBox from "@/components/Spin/SpinBox";
+import TabIcon from '@/components/HorTabbar/TabIcon'
+import { useState, useEffect } from 'react'
+import { getTouristDetail, getExtendContent, getRecommendList } from '@/services/home'
+import logo from "@/assets/icons/UserCenter/laba.png"
+import { Swiper, SwiperItem, Button, View, Ad } from '@tarojs/components';
+import useSave from "@/utils/hooks/useSave"
+import useLike from "@/utils/hooks/useLike"
+import Cards from '@/components/foodCards/foodCards.jsx'
+import Taro, { useShareAppMessage } from '@tarojs/taro'
+import Extend from '../components/Extend/extend'
+import './index.less'
+
+
+
+export default withLayout((props) => {
+  const { router, person, location } = props
+  const { id } = props.router.params
+  const [detail, setDetail] = useState({})
+  const [isSaved, toggleSave] = useSave(detail.isSaved, 'tourist', id)
+  const [isLike, toggleLike] = useLike(detail.isLike, 'tourist', id)
+  const [loading, setLoading] = useState(false)
+
+  //banner图集数组
+  const [imglist, setimglist] = useState([])
+  const [index, setIndex] = useState(0)
+  const handchange = (e) => {
+    setIndex(e.detail.current)
+  }
+
+  //本店指南
+  const [extend, setExtend] = useState([])
+
+  // 推荐套餐列表
+  const [recommend, setRecommend] = useState([])
+
+  const openMap = () => {
+    const [lng, lat] = detail.locaton.split(',')
+
+    Taro.openLocation({
+      longitude: lng - 0,
+      latitude: lat - 0,
+      name: detail.touristName,
+      address: detail.address,
+      scale: 12,
+    })
+  }
+  //引导显隐
+  const [guidance, setGuidance] = useState('shareOff')
+  useEffect(() => {
+    if (router.params.enterType === "share") {
+      setGuidance('shareOn')
+    }
+  }, [router.params.enterType])
+
+
+  useEffect(() => {
+    if (id) {
+      setLoading(true)
+      getTouristDetail(id, { location }).then((res) => {
+        setDetail(res)
+        setimglist(res.imageList || [])
+        getRecommendList({ location: res.locaton }).then((res2) => {
+          setRecommend(res2 || [])
+        })
+      })
+      getExtendContent('tourist', id, { pageSize: 500 }).then((res) => {
+        setExtend(res.records || [])
+        setLoading(false)
+
+      })
+    } else {
+      getRecommendList({ location }).then((res2) => {
+        setRecommend(res2 || [])
+        setLoading(false)
+      }).catch(e => {
+        setLoading(false)
+      })
+    }
+  }, [id, location])
+  // 分享
+  useShareAppMessage(() => {
+    return {
+      title: detail.touristName,
+      path: `/pages/details/mjDetails/sceneryDetails?id=${id}&enterType=share`,
+      imageUrl: detail.poster,
+    }
+
+  })
+  return (
+    <view className='page-index'>
+      {
+        guidance === 'shareOn' ? <view className='index-navbar'>
+          <add-tipsFood logo={logo} custom duration={-1} />
+          <CustomNav title='十公里' noback />
+        </view> :
+          <view className='index-navbar'>
+            <CustomNav title='十公里' />
+          </view>
+      }
+
+
+      <SpinBox loading={loading} className='index-container' style={{ padding: '0 30rpx', background: '#F8F8F8' }}>
+        <scroll-view scrollY style={{ height: '100%' }}>
+          <view className='storeDetails'>
+            <View className='huadong'>
+              <Swiper
+                className='swiper'
+                circular
+                onChange={handchange}
+              >
+                {
+                  imglist.map((item, key) => (
+                    item.noteType == 'image' ?
+                      <SwiperItem key={key}>
+                        <image src={compressImage(item.url)} mode='aspectFit' className='storeImage' />
+                      </SwiperItem> : <MoreGuide key={key} item={item} />
+                  ))}
+              </Swiper>
+              <view className='tpPage'>
+                <text>
+                  {index + 1}/{imglist.length}
+                </text>
+              </view>
+            </View>
+
+            <view className='storeJs'>
+              <view className='introduce'>
+                <text className='storeName'>{detail.touristName}</text>
+              </view>
+              <view className='bz'>
+                <image src={baozan} style={{ width: '15px', height: '15px', marginRight: '10px', marginBottom: '-2px' }} />
+                <text className='bzRight'>爆赞{detail.likeNum}</text>
+              </view>
+              <view className='wz'>{detail.address}</view>
+              <view className='dpPosition' onClick={openMap}>
+                <image src={dw} className='dwTip' />
+                <view className='distance'>{(detail.distance / 1000).toFixed(2)}公里<image src={zhuandao} className='zhuandao' /></view>
+              </view>
+            </view>
+          </view>
+          <view className='jdjs'>
+            <view>{detail.description}</view>
+            <view className='line'></view>
+            <view className='sc' onClick={toggleSave}>
+              <image className='scTip' src={isSaved > 0 ? ax : good} /><text>{isSaved > 0 ? '已收藏' : '加入收藏'}</text>
+            </view>
+          </view>
+          <view class='adContainer'>
+            <Ad unit-id='adunit-a0f97bb7ec8ec7bb' ad-intervals='30' />
+          </view>
+          <view style={{ position: 'relative', display: extend == '' ? 'none' : '' }}>
+            <view className='title'>
+              <image src={NoteasICO} />笔记详情
+            </view>
+            <View style={{ background: '#FFF' }}>
+              {(extend || []).map((item) => <Extend item={item} />)}
+            </View>
+          </view>
+          <view style={{ display: recommend == '' ? 'none' : '' }}>
+            <view className='title'>
+              <image src={TextMentioned} />文中提及
+            </view>
+            {(recommend || []).map((item) => <Cards item={item} det={item} st={parseFloat(item.score.toFixed(1))} />)}
+          </view>
+          <view className='botton'>这是我的底线</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>
+  )
+})
+
+

src/pages/details/NoteDetails/index.less

@@ -0,0 +1,134 @@
+.storeDetails {
+  background-color: #fff;
+  border-radius: 12px;
+  margin-bottom: 20px;
+  .huadong {
+    position: relative;
+    .swiper {
+      height: calc((100vw - 60px) * 0.6);
+      .storeImage {
+        border-radius: 22px;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .tpPage {
+      position: absolute;
+      right: 20px;
+      bottom: 20px;
+      background: #000000;
+      border-radius: 16px;
+      font-size: 24px;
+      color: #ffffff;
+      padding: 0 7px;
+      opacity: 0.4;
+      line-height: 32px;
+      padding: 7px 8px 8px 7px;
+      text {
+        opacity: 0.64;
+      }
+    }
+  }
+  .storeJs {
+    padding: 22px;
+    .introduce {
+      display: inline-block;
+      .storeName {
+        font-size: 32px;
+        font-weight: bold;
+        color: #020200;
+      }
+    }
+    .bz {
+      float: right;
+      .bzRight {
+        font-size: 24px;
+        color: #202020;
+        line-height: 34px;
+        height: 23px;
+      }
+    }
+    .wz {
+      font-size: 24px;
+      padding: 30rpx 0 32rpx 0;
+      font-weight: bold;
+      color: #404040;
+    }
+    .dpPosition {
+      position: relative;
+      .dwTip {
+        width: 48px;
+        height: 48px;
+        top: -8px;
+        left: -8px;
+        position: absolute;
+      }
+      .distance {
+        padding-left: 38px;
+        font-size: 24px;
+        color: #c0c8d3;
+        .zhuandao {
+          width: 14px;
+          height: 24px;
+          transform: rotate(180deg);
+          position: relative;
+          left: 8px;
+          top: 5px;
+        }
+      }
+    }
+  }
+}
+.jdjs {
+  background: #fff;
+  border-radius: 12px 12px 0px 0px;
+  padding: 30px 20px 43px 20px;
+  text-align: justify;
+  font-size: 24px;
+  font-weight: bold;
+  color: #202020;
+  line-height: 54px;
+  overflow: hidden;
+  margin-bottom: 20px;
+  .line {
+    height: 1px;
+    background: #000;
+    opacity: 0.1;
+    margin: 57px 0 42px 0;
+  }
+  .sc {
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
+    float: right;
+    line-height: 0;
+    margin-right: 4px;
+    .scTip {
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
+    }
+  }
+}
+.title {
+  margin: 40px 0 40px 0;
+  font-size: 34px;
+  font-weight: bold;
+  color: #202020;
+  display: flex;
+  align-items: center;
+  image {
+    width: 35px;
+    height: 35px;
+    margin-right: 10px;
+  }
+}
+
+.botton {
+  font-size: 28px;
+  color: #c0c8d3;
+  line-height: 34px;
+  text-align: center;
+  padding: 40px 0;
+  background-color: #f8f8f8;
+}