feats

config/index.js

@@ -28,6 +28,7 @@ const config = {
   },
   copy: {
     patterns: [
+      { from: 'src/native/', to: 'dist/native/' },
     ],
     options: {
     }

src/app.jsx

@@ -5,19 +5,26 @@ import { getLocation, getRouterParams } from '@/utils/tools'
 import login from '@/utils/login'
 import im from '@/utils/im'
 import store from './store'
+import trackUserSource from '@/utils/tracking/userSource'
 
 import './app.scss'
 
 class App extends Component {
+  // 更新埋点
+  updateTracking;
 
   componentDidMount () {}
 
   componentDidShow (options) {
     // 保留初始场景
     Taro.setStorage({ key: 'scene', data: options.scene })
+    // 埋点
+    trackUserSource(options).then((res) => (this.updateTracking = res))
   }
 
-  componentDidHide () {}
+  componentDidHide () {
+    this.updateTracking()
+  }
 
   componentDidCatchError () {}
 

src/assets/css/iconfont.json

@@ -1,6 +1,6 @@
 {
   "id": "2603904",
-  "name": "新联康",
+  "name": "新联家",
   "font_family": "iconfont",
   "css_prefix_text": "icon-",
   "description": "",

src/components/Poster/index.jsx

@@ -85,8 +85,10 @@ export default (props) => {
   }
 
   return (
-    <Modal title={title} visible={show} onClose={onClose}>
-      <View className='modal-poster'>
+    // <Modal title={title} visible={show} onClose={onClose}>
+    // eslint-disable-next-line react/jsx-no-undef
+    <page-container show={show} position='bottom' onClickOverlay={onClose}>
+      <View className='modal-poster' onClick={onClose}>
         <View className='modal-poster-img-box'>
         {
           !processing
@@ -99,6 +101,6 @@ export default (props) => {
         </Button>
       </View>
       <Poster dataSource={dataSource} onStart={() => setProcessing(true)} onEnd={handlePoster} />
-    </Modal>
+    </page-container>
   )
 }

src/components/Poster/style.scss

@@ -1,6 +1,7 @@
 .modal-poster {
   width: 100vw;
-  height: calc(100vh - 62rpx);
+  height: 100vh;
+  // height: calc(100vh - 62rpx);
   box-sizing: border-box;
   padding: 40rpx;
 
@@ -31,4 +32,9 @@
     font-weight: 600;
     line-height: 90rpx;
   }
-}
+}
+
+page-container {
+  position: fixed;
+  z-index: 1000;
+}

src/native/PageContainer/index.js

@@ -0,0 +1,66 @@
+Component({
+  properties: {
+    show: {
+      type: Boolean,
+      value: false,
+    },
+    position: {
+      type: String,
+      value: 'right',
+    },
+    duration: {
+      type: Number,
+      value: 300,
+    },
+    round: {
+      type: Boolean,
+      value: false,
+    },
+    overlay: {
+      type: Boolean,
+      value: true,
+    },
+    height: {
+      type: String,
+      value: '100%',
+      observer: function(val) {
+        const h = val || '100%'
+        const customStyle = 'height: '+ h +';'
+        this.setData({ customStyle })
+      }
+    },
+    overlayColor: {
+      type: String,
+      value: 'black',
+      observer: function(val) {
+        let overlayStyle = ''
+        switch(val) {
+          case 'white':
+            overlayStyle = 'background-color: rgba(255, 255, 255, 0.7)'
+            break
+          case 'blur':
+            overlayStyle = 'background-color: rgba(0, 0, 0, 0.7); filter: blur(4px);'
+            break
+          default:
+            overlayStyle = 'background-color: rgba(0, 0, 0, 0.7)'
+        }
+        this.setData({ overlayStyle })
+      }
+    }
+  },
+  data: {
+    customStyle: '',
+    overlayStyle: ''
+  },
+  methods: {
+    onBeforeEnter(e) {},
+    onEnter(e) {},
+    onAfterEnter(e) {},
+    onBeforeLeave(e) {},
+    onLeave(e) {},
+    onAfterLeave(e) {},
+    onClickOverlay(e) {
+      this.triggerEvent('clickOverlay', e)
+    }
+  }
+})

src/native/PageContainer/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

src/native/PageContainer/index.wxml

@@ -0,0 +1,19 @@
+<page-container 
+  show="{{show}}"
+  round="{{round}}"
+  overlay="{{overlay}}"
+  duration="{{duration}}"
+  position="{{position}}"
+  close-on-slide-down="{{false}}"
+  bindbeforeenter="onBeforeEnter"
+  bindenter="onEnter"
+  bindafterenter="onAfterEnter"
+  bindbeforeleave="onBeforeLeave"
+  bindleave="onLeave"
+  bindafterleave="onAfterLeave"
+  bindclickoverlay="onClickOverlay"
+  custom-style="{{customStyle}}"
+  overlay-style="{{overlayStyle}}"
+>
+  <slot></slot>
+</page-container>

src/pages/index/buildingDetail/components/Banner/index.jsx

@@ -4,14 +4,14 @@ import { getImgURL } from '@/utils/image'
 import './index.scss'
 
 export default function Banner (props) {
-  const { List = [] } = props
+  const { List, onClick } = props
   return (
     <view className='components Banner'>
       <Swiper autoplay interval={2000} indicator-dots>
         {
-          List.map((item, index) => (
+          (List||[]).map((item, index) => (
             <SwiperItem key={`Banner-${index}`}>
-              <view className='swiper-item'>
+              <view className='swiper-item' onClick={() => onClick(item, List)}>
                 <Image mode='aspectFill' className='centerLabel' src={getImgURL(item.image || item.coverImg || item.url || item.img)} />
               </view>
             </SwiperItem>

src/pages/index/buildingDetail/components/BuildingDetailBanner/index.jsx

@@ -1,10 +1,24 @@
 import { useState } from 'react'
-import { Swiper, SwiperItem, Image } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { Video } from '@tarojs/components'
 import { getImgURL } from '@/utils/image'
+import Banner from '../Banner'
 import './index.scss'
 
+const getImage = item => getImgURL(item.image || item.coverImg || item.url || item.img)
+
 export default function BuildingDetailBanner (props) {
-  const { PictureList = [{}, {}, {}] } = props
+  const { Info } = props
+  const { buildingImg, panoramaList, videoUrl, videoImage } = Info || {}
+  const videoPoster = videoImage ? videoImage[0] : undefined
+
+  const showPicBtn = buildingImg && buildingImg.length > 0
+  const showVRBtn = panoramaList && panoramaList.length > 0
+  const shwoVideoBtn = !!videoUrl
+
+  // JS 中 true + true = 2
+  const showBtns = (showPicBtn + showVRBtn + shwoVideoBtn) > 1
+
   const [NavList] = useState([
     { name: 'VR', id: 1 },
     { name: '视频', id: 2 },
@@ -18,33 +32,63 @@ export default function BuildingDetailBanner (props) {
     }
   }
 
+  const handlePreview = (item, all) => {
+    const img = getImage(item)
+    if (!img) return
+
+    Taro.previewImage({
+      current: img,
+      urls: all.map(getImage),
+    })
+  }
+
+  const handleVR = (item) => {
+    const url = (item || {}).panoramaLink
+    if (!url) return
+
+    Taro.navigateTo({
+      url: `/pages/index/webview/index?url=${encodeURIComponent(url)}`
+    })
+  }
+
   return (
     <view className='components buildingDetailBanner'>
 
       {/* 切换 */}
-      <view className='CutPoint'>
-        <view>
-          {
-            NavList.map((item, index) => (
-              <text key={`NavItem-${index}`} className={CurrentNavId === item.id ? 'active' : ''} onClick={CutNavId(item.id)}>{item.name}</text>
-            ))
-          }
-        </view>
-      </view>
+      {
+        showBtns && (
+          <view className='CutPoint'>
+            <view>
+              {
+                NavList.map((item, index) => (
+                  <text key={`NavItem-${index}`} className={CurrentNavId === item.id ? 'active' : ''} onClick={CutNavId(item.id)}>{item.name}</text>
+                ))
+              }
+            </view>
+          </view>
+        )
+      }
 
       {/* VR */}
       {
-        CurrentNavId === 1 &&
-        <view className='Vr'>
-
-        </view>
+        CurrentNavId === 1 && (
+          <view className='Vr'>
+            <Banner List={panoramaList} onClick={handleVR} />
+          </view>
+        )
       }
 
       {/* 视频 */}
       {
         CurrentNavId === 2 &&
         <view className='Video'>
-
+          <Video
+            controls
+            showMuteBtn
+            src={videoUrl}
+            poster={getImgURL(videoPoster)}
+            style={{ height: '600rpx', width: '750rpx' }}
+          />
         </view>
       }
 
@@ -52,17 +96,7 @@ export default function BuildingDetailBanner (props) {
       {
         CurrentNavId === 3 &&
         <view className='Picture'>
-          <Swiper autoplay interval={2000} indicator-dots>
-            {
-              PictureList.map((item, index) => (
-                <SwiperItem key={`Banner-${index}`}>
-                  <view className='swiper-item'>
-                    <Image mode='aspectFill' className='centerLabel' src={getImgURL(item.image || item.coverImg || item.url || item.img) || null} />
-                  </view>
-                </SwiperItem>
-              ))
-            }
-          </Swiper>
+          <Banner List={buildingImg} onClick={handlePreview} />
         </view>
       }
 

src/pages/index/buildingDetail/components/DetailBottom/index.jsx

@@ -3,17 +3,17 @@ import Taro from '@tarojs/taro'
 import { useSelector } from 'react-redux'
 import { Image } from '@tarojs/components'
 import AuthRole from '@/components/auth/AuthRole'
-import Poster from '@/components/Poster'
+// import Poster from '@/components/Poster'
 import { queryActivityList } from '@/services/activity'
 import { ROLE_CODE } from '@/constants/user'
 import './index.scss'
 
 export default function DetailBottom (props) {
-  const { Info = {}, poster } = props
+  const { Info = {}, onPoster } = props
 
   // 当前推荐置业
   const { consultant } = useSelector(s => s.system)
-  const [showPoster, setShowPoster] = useState(false)
+  // const [showPoster, setShowPoster] = useState(false)
   const [actList, setActList] = useState([])
 
   const handleCall = () => {
@@ -71,7 +71,7 @@ export default function DetailBottom (props) {
     <view>
       <view className='components DetailBottom flex-h'>
         <view className='flex-item'>
-          <view className='Item' onClick={() => setShowPoster(true)}>
+          <view className='Item' onClick={onPoster}>
             <Image mode='heightFix' src={require('@/assets/buildingDetail-icon3.png')}></Image>
             <text>一键海报</text>
           </view>
@@ -106,12 +106,12 @@ export default function DetailBottom (props) {
         </view>
       </view>
 
-      <Poster
+      {/* <Poster
         show={showPoster}
         dataSource={poster}
         onClose={() => setShowPoster(false)}
         onSuccess={() => setShowPoster(false)}
-      />
+      /> */}
     </view>
   )
 }

src/pages/index/buildingDetail/hooks/useBuildingPoster.js

@@ -1,23 +1,25 @@
 import { useEffect, useState } from 'react'
 import { getMiniQrcode } from '@/services/common'
 
-export default function useBuildingPoster(person, router, poster, paramsRef) {
+export default function useBuildingPoster(person, building, router, paramsRef) {
   const [posterData, setPosterData] = useState()
 
   useEffect(() => {
-    const page = router.path
-    const scene = paramsRef.current
-
-    getMiniQrcode({ page, scene }).then((miniCode) => {
-      setPosterData({
-        poster,
-        miniCode,
-        name: person.name || person.nickname,
-        avatar: person.avatarurl,
+    if (building?.buildingId) {
+      const page = router.path
+      const scene = paramsRef.current
+  
+      getMiniQrcode({ page, scene }).then((miniCode) => {
+        setPosterData({
+          poster: building?.poster,
+          miniCode,
+          name: person.name || person.nickname,
+          avatar: person.avatarurl,
+        })
       })
-    })
+    }
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [router.path, poster])
+  }, [building?.buildingId, router.path, building?.poster])
 
   return posterData
 }

src/pages/index/buildingDetail/index.config.js

@@ -1,4 +1,7 @@
 export default {
   navigationBarTitleText: '楼盘详情',
   enableShareAppMessage: true,
+  usingComponents: {
+    'page-container': '/native/PageContainer/index'
+  }
 }

src/pages/index/buildingDetail/index.jsx

@@ -2,9 +2,9 @@ import { useState, useEffect, useMemo, useRef } from 'react'
 import withLayout from '@/layout'
 import { ScrollView } from '@tarojs/components'
 import Disclaimer from '@/components/Disclaimer'
+import Poster from '@/components/Poster'
 import { fetch } from '@/utils/request'
 import { API_ITEMS_DETAIL, API_NEWS_LIST } from '@/constants/api'
-import useConsultant from '@/utils/hooks/useConsultant'
 import DetailBottom from './components/DetailBottom/index'
 import BuildingDetailBanner from './components/BuildingDetailBanner/index'
 import BasicInfo from './components/BasicInfo/index'
@@ -27,6 +27,7 @@ export default withLayout((props) => {
   const { router, person } = props
   const { id } = router.params
 
+  const [showPoster, setShowPoster] = useState(false)
   const [DetailInfo, setDetailInfo] = useState({})
   const [PictureList, setPictureList] = useState([])
   const [NewsList, setNewsList] = useState([])
@@ -38,7 +39,7 @@ export default withLayout((props) => {
   useBuildingShare(person, DetailInfo, router, paramsRef)
 
   // 海报
-  const posterData = useBuildingPoster(person, router, DetailInfo?.poster, paramsRef)
+  const posterData = useBuildingPoster(person, DetailInfo, router, paramsRef)
 
   useEffect(() => {
     // 获取楼盘信息
@@ -71,7 +72,7 @@ export default withLayout((props) => {
               <view className='BannerContainer'>
                 <view>
                   <view>
-                    <BuildingDetailBanner></BuildingDetailBanner>
+                    <BuildingDetailBanner Info={DetailInfo}></BuildingDetailBanner>
                   </view>
                 </view>
               </view>
@@ -139,8 +140,15 @@ export default withLayout((props) => {
       </view>
 
       <view className='PageBottom'>
-        <DetailBottom Info={DetailInfo} poster={posterData}></DetailBottom>
+        <DetailBottom Info={DetailInfo} onPoster={() => setShowPoster(true)}></DetailBottom>
       </view>
+
+      <Poster
+        show={showPoster}
+        dataSource={posterData}
+        onClose={() => setShowPoster(false)}
+        onSuccess={() => setShowPoster(false)}
+      />
     </view>
   )
 })

src/pages/index/index.config.js

@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: '新联康'
+  navigationBarTitleText: '新联家'
 }

src/pages/index/webview/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '新联家全景'
+}

src/pages/index/webview/index.jsx

@@ -0,0 +1,19 @@
+import React, { useEffect } from 'react'
+import Taro from '@tarojs/taro'
+import withLayout from '@/layout'
+import { WebView } from '@tarojs/components'
+
+export default withLayout((props) => {
+  const { router } = props
+  const { url, title } = router.params
+
+  useEffect(() => {
+    if (title) {
+      Taro.setNavigationBarTitle({ title: decodeURIComponent(title) })
+    }
+  }, [title])
+
+  return (
+    <WebView url={decodeURIComponent(url)} />
+  )
+})

src/routes.js

@@ -357,6 +357,12 @@ const routes = [
     pkg: 'main',
     type: 'mine',
   },
+  {
+    name: '全景图',
+    page: 'pages/index/webview/index',
+    pkg: 'main',
+    type: 'other',
+  },
 
 ]
 

src/utils/hooks/useShare.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import Taro, { useShareAppMessage } from '@tarojs/taro'
-import { shareTracking } from '@/utils/tracking'
+import shareTracking from '@/utils/tracking/share'
 
 export default function useShare(shareRef, trackRef) {
   useShareAppMessage((res) => {

src/utils/tracking/share.js

@@ -0,0 +1,31 @@
+import Taro from '@tarojs/taro'
+import { savePoint } from '@/services/common'
+import addNum from './addNum'
+
+export default (options) => {
+  const page = Taro.getStorageSync('page')
+  if (!page) return;
+
+  const { name: propertyName, type: eventType } = page
+  const {
+    event = 'share',
+    // eventType = '',
+    // propertyName = '',
+    consultantId = '',
+    sharePersonId = '',
+    targetId = '',
+    buildingId = '',
+  } = options
+
+  addNum({ eventType, targetId })
+  savePoint({
+    event,
+    eventType,
+    propertyName,
+    consultantId,
+    sharePersonId,
+    targetId,
+    buildingId,
+    data: '{}',
+  })
+}

src/utils/tracking/userSource.js

@@ -0,0 +1,29 @@
+import { savePoint, updatePoint } from '@/services/common'
+import { routes } from '../../routes'
+
+export default async (router) => {
+  const { path, query, scene } = router || {}
+  const { id, buildingId, recommender } = query || {}
+
+  const pageInfo = routes.filter(x => path.indexOf(x.page) > -1)[0] || { type: 'other', name: '其他' }
+
+  const trackPayload = {
+    event: 'start',
+    eventType: pageInfo.type,
+    propertyName: pageInfo.name,
+    data: '{}',
+    id,
+    buildingId,
+    realScene: scene,
+    sceneId: scene,
+    sharePersonId: recommender,
+  }
+
+  try {
+    const { recordId } = await savePoint(trackPayload)
+    return function () { updatePoint(recordId); }
+  } catch (e) {
+    console.error('进入小程序埋点出错:', e);
+    return function () { }
+  }
+}