feats: add project vr info

config/dev.js

@@ -7,10 +7,10 @@ module.exports = {
     // WSS_HOST: '"wss://47.101.36.130:8085"',
     // HOST: '"https://dev.pawoma.cn"',//测试
     // WSS_HOST: '"wss://dev.pawoma.cn"',
-    HOST: '"https://lt.pawoma.cn"',
-    WSS_HOST: '"wss://lt.pawoma.cn"',
-    // HOST: '"http://192.168.2.51:8080"',
-    // WSS_HOST: '"ws://192.168.2.51:8080"',
+    // HOST: '"https://lt.pawoma.cn"',
+    // WSS_HOST: '"wss://lt.pawoma.cn"',
+    HOST: '"http://127.0.0.1:8080"',
+    WSS_HOST: '"ws://127.0.0.1:8080"',
     Version: 'V3.5.6'
   },
   weapp: {},

config/prod.js

@@ -9,7 +9,7 @@ module.exports = {
     // WSS_HOST: '"wss://dev.pawoma.cn"',
     HOST: '"https://lt.pawoma.cn"',
     WSS_HOST: '"wss://lt.pawoma.cn"',
-    Version:'V3.5.6_2020-1-20'
+    Version:'V3.5.6_2020-1-30'
   },
   weapp: {},
   h5: {}

project.config.json

@@ -1,8 +1,8 @@
 {
 	"miniprogramRoot": "dist/",
 	"projectname": "mini-chengjiao",
-	"description": "知与行互动",
-	"appid": "wxd6f47a9bb3052175",
+	"description": "大营销云测试",
+	"appid": "wxda1f84b79b3edeb3",
 	"setting": {
 		"urlCheck": false,
 		"es6": false,

src/app.js

@@ -92,6 +92,7 @@ class App extends Component {
       'pages/card/fans/index',
       'pages/checkin/index',
       'pages/checkin/checkinsuccess/index',
+      'pages/project/panorama/index',
     ],
     subPackages: [
       {

src/pages/card/fans/index.js

@@ -120,6 +120,7 @@ export default class Index extends Component {
   render() {
     // const { hasMore, isEmpty, list, noReacord } = this.state
     const { hasMore, isEmpty, list } = this.state
+
     return (
       // <ListView
       //   needInit
@@ -132,15 +133,20 @@ export default class Index extends Component {
       // >
       //   {list.map(item => <FansItem key={item.uvId} data={item} />)}
       // </ListView>
-      <View>
-        {!noReacord ?
-          <View>
-            {list.map(item =>
-              <FansItem key={item.uvId} data={item} />)}
-            {list.length >= 50 && <View style="text-align:center;line-height:120rpx;font-size:24rpx;color:#999"> 仅展示最近50条围观记录</View>}
-          </View>
-          : <EmptyPage text="暂无围观记录哦~" />}
+      // <View>
+      //   {!noReacord ?
+      //     <View>
+      //       {list.map(item =>
+      //         <FansItem key={item.uvId} data={item} />)}
+      //       {list.length >= 50 && <View style="text-align:center;line-height:120rpx;font-size:24rpx;color:#999"> 仅展示最近50条围观记录</View>}
+      //     </View>
+      //     : <EmptyPage text="暂无围观记录哦~" />}
 
+      // </View>
+      <View>
+        {list.map(item =>
+          <FansItem key={item.uvId} data={item} />)}
+        {list.length >= 50 && <View style="text-align:center;line-height:120rpx;font-size:24rpx;color:#999"> 仅展示最近50条围观记录</View>}
       </View>
 
     );

src/pages/project/banner/index.js

@@ -57,11 +57,21 @@ export default class SwiperBanner extends Component {
                 mode="aspectFill"
                 style={style}
                 className='home-banner__swiper-item-img'
-                src={transferImage(item.image || item.url || item.img || emptyImg)}
+                src={transferImage(item.image || item.coverImg || item.url || item.img || emptyImg)}
               />
             </SwiperItem>
           ))}
         </Swiper>
+        {
+          this.props.logo &&
+          (
+            <Image
+              mode="aspectFill"
+              className='logo'
+              src={this.props.logo}
+            />
+          )
+        }
       </View>
     )
   }

src/pages/project/banner/index.scss

@@ -3,6 +3,15 @@
   width: 100%;
   overflow: hidden;
   height: 250px;
+  position: relative;
+
+  .logo {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 64rpx;
+    height: 64rpx;
+  }
 }
 
 .home-banner__swiper {

src/pages/project/detail/index.js

@@ -36,6 +36,7 @@ import { share as shareSavePoint } from '@/utils/shareSavePoint'
 
 const buildBg = 'https://njcj.oss-cn-shanghai.aliyuncs.com/miniapp/images/buildbg.png'
 const dotImg = require('@/assets/dot.png')
+const vrLogo = require('@/assets/vr.png');
 
 @connect(
   ({ user, project }) => ({ ...user, ...project }),
@@ -72,7 +73,7 @@ export default class Index extends Component {
     recordId: null,
     posterShow: 'none',
     current: 1,
-    btnstate: 0,// 1显示视频 0显示图片
+    btnstate: 0,// 1显示视频 0显示图片 2显示全景
     albumCurrent: 0,
     videoPlayShow: 'flex',
     consultData: {}, // 分享的置业顾问信息
@@ -1042,6 +1043,15 @@ export default class Index extends Component {
       url: '/pages/activity/detail/assemble?id=' + item.activityId
     })
   }
+
+  handleHouseTypePosterClick(apartment, imgList) {
+    if (apartment.panoramaArr) {
+      this.goToPanorama(apartment.panoramaArr[0])
+    } else {
+      this.handlePreviewHxImage(apartment.buildingImgList[0].url, imgList)
+    }
+  }
+
   renderGroup() {
     const { groupList } = this.state
     return (
@@ -1066,13 +1076,23 @@ export default class Index extends Component {
 
   renderHouseTypeList() {
     const { statusOpts, statusBgColors } = this.state
-    const { projectDetail: { buildingApartment } } = this.props
+    const { projectDetail: { buildingApartment, panoramaList } } = this.props
     const list = buildingApartment.filter(item => item.apartmentType === 'apart')
+
+    // 挂载全景图设置
+    list.forEach(apartment => {
+      const panoramaArr = (panoramaList || []).filter(x => x.buildingId === apartment.buildingId && x.apartmentId === apartment.apartmentId )
+      if (panoramaArr.length) {
+        apartment.panoramaArr = panoramaArr
+      }
+    })
+
     let imgUrls = list.reduce((prev, cur) => {
       prev = prev.concat(cur.buildingImgList)
       return prev
     }, [])
     imgUrls = imgUrls.map(item => item.url)
+
     return (
       <Block>
         {
@@ -1086,10 +1106,17 @@ export default class Index extends Component {
                     <View className='item' key={item.apartmentId}>
                       {
                         item && (
-                          <View className='house__img-info'>
-                            <Image className='house__img' src={transferImage(item.buildingImgList[0].url)} mode="widthFix" onClick={this.handlePreviewHxImage.bind(this, item.buildingImgList[0].url, imgUrls)}></Image>
+                          <Block>
                             <View className='house-type__state' style={`background-color: ${statusBgColors[item.marketStatus - 1]}`}>{statusOpts[item.marketStatus - 1]}</View>
-                          </View>
+                            <View className='house__img-info'>
+                              <Image className='house__img' src={transferImage(item.buildingImgList[0].url)} mode="widthFix" onClick={this.handleHouseTypePosterClick.bind(this, item, imgUrls)}></Image>
+                              {item.panoramaArr && (
+                                <View className='house-type__panorama'>
+                                  <Image mode="aspectFill" src={vrLogo} style={{ width: '100%', height: '100%' }} />
+                                </View>
+                              )}
+                            </View>
+                          </Block>
                         )
                       }
                       <View className="rest-info">
@@ -1232,7 +1259,6 @@ export default class Index extends Component {
       <View
         className="pro__banner"
       >
-        {console.log(projectDetail)}
         <Video
           src={projectDetail.videoUrl}
           // src='http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
@@ -1281,6 +1307,69 @@ export default class Index extends Component {
     })
   }
 
+  handleBannerBtnClick(btnstate) {
+    this.setState({ btnstate, current: 1 })
+  }
+
+  goToPanorama(panorama) {    
+    const url = (panorama || {}).panoramaLink
+
+    if (!url) return;
+
+    this.navigateTo(`/pages/project/panorama/index?url=${encodeURIComponent(url)}`)
+  }
+
+  handlePanoramaClick(panorama) {
+    this.goToPanorama(panorama)
+  }
+
+  renderBannerImages() {
+    const { projectDetail } = this.props
+    const { current = 1 } = this.state
+
+    return (
+      <View
+        className="pro__banner"
+        onClick={this.previewImage.bind(this, projectDetail.buildingImg)}>
+        <Banner
+          list={projectDetail.buildingImg}
+          indicatorDots={false}
+          // current
+          // isChange = {true}
+          onChange={this.changeCurrent.bind(this)}
+          style={{
+            height: '600rpx'
+          }}
+
+        ></Banner>
+        <Text className="pro__banner-text">{current}/{(projectDetail.buildingImg && projectDetail.buildingImg.length) || 0}</Text>
+      </View>
+    );
+  }
+
+  renderBannerPanorama() {
+    const { projectDetail } = this.props
+    const { current = 1 } = this.state
+
+    return (
+      <View className="pro__banner">
+        <Banner
+          list={projectDetail.panoramaList || []}
+          indicatorDots={false}
+          // current
+          // isChange = {true}
+          onChange={this.changeCurrent.bind(this)}
+          onClick={this.handlePanoramaClick.bind(this)}
+          style={{
+            height: '600rpx'
+          }}
+          logo={vrLogo}
+        ></Banner>
+        <Text className="pro__banner-text">{current}/{(projectDetail.panoramaList && projectDetail.panoramaList.length) || 0}</Text>
+      </View>
+    );
+  }
+
   render() {
     const { grantPhoneVisible, grantAvatarVisible, posterStatus, posterData, loaded, btnstate, consultData, consultShow } = this.state
     const { projectDetail, userInfo = { person: {} } } = this.props
@@ -1305,36 +1394,24 @@ export default class Index extends Component {
           loaded && (
             <View className='detail'>
               <Notice></Notice>
-              {/* {(projectDetail.videoUrl == null || btnstate === 0) && ( */}
-              <View
-                className="pro__banner"
-                onClick={this.previewImage.bind(this, projectDetail.buildingImg)}>
-                <Banner
-                  list={projectDetail.buildingImg}
-                  indicatorDots={false}
-                  // current
-                  // isChange = {true}
-                  onChange={this.changeCurrent.bind(this)}
-                  style={{
-                    height: '600rpx'
-                  }}
-
-                ></Banner>
-                <Text className="pro__banner-text">{this.current}/{(projectDetail.buildingImg && projectDetail.buildingImg.length) || 0}</Text>
-              </View>
-              {/* )} */}
-
-              {/* {btnstate === 1 && projectDetail.videoUrl != null && this.renderVideo()} */}
 
-              {/* {btnstate === 1 && projectDetail.videoUrl != null && (<View className='media-btn'>
-                <View className='video-btn' style={{ background: ' rgba(187, 156, 121, 1)', color: 'rgba(255, 255, 255, 1)' }} >视频</View>
-                <View className='img-btn' onClick={() => this.setState({ btnstate: 0 })}>图片</View>
-              </View>)} */}
+              { !btnstate && this.renderBannerImages() }
+              
+              { btnstate === 1 && this.renderVideo() }
+              
+              { btnstate === 2 && this.renderBannerPanorama() }
 
-              {/* {btnstate === 0 && projectDetail.videoUrl != null && (<View className='media-btn'>
-                <View className='video-btn' onClick={() => this.setState({ btnstate: 1 })} >视频</View>
-                <View className='img-btn' style={{ background: ' rgba(187, 156, 121, 1)', color: 'rgba(255, 255, 255, 1)' }}>图片</View>
-              </View>)} */}
+              {
+                projectDetail.buildingImg && projectDetail.buildingImg.length &&
+                projectDetail.panoramaList && projectDetail.panoramaList.length &&
+                (
+                  <View className="media-btn">
+                    {/* <View className={`btn ${btnstate === 1 && 'active'}`} onClick={this.handleBannerBtnClick.bind(this, 1)}>视频</View> */}
+                    <View className={`btn ${btnstate === 2 && 'active'}`} onClick={this.handleBannerBtnClick.bind(this, 2)}>全景</View>
+                    <View className={`btn ${!btnstate && 'active'}`} onClick={this.handleBannerBtnClick.bind(this, 0)}>图片</View>
+                  </View>
+                )
+              }
 
               <ScrollView
                 enableBackToTop

src/pages/project/detail/index.scss

@@ -17,8 +17,6 @@
     position: absolute;
     width: 184px;
     height: 64px;
-    background: rgba(255, 255, 255, 1);
-    border-radius: 12px;
     top: 440px;
     left: 284px;
     font-size: 30px;
@@ -30,18 +28,20 @@
     display: flex;
     position: fixed;
 
-    .video-btn {
+    .btn {
       width: 92px;
       height: 64px;
-      border-radius: 12px 0px 0px 12px;
-
+      border-radius: 12px;
+      background: rgba(255, 255, 255, 1);
 
+      & + .btn {
+        margin-left: 24px;
+      }
     }
 
-    .img-btn {
-      width: 92px;
-      height: 64px;
-      border-radius: 0px 12px 12px 0px;
+    .active {
+      background: rgba(187, 156, 121, 1);
+      color: rgba(255, 255, 255, 1);
     }
 
   }
@@ -891,9 +891,17 @@
       border-radius: 16px;
 
       .house__img-info {
-        padding: 70px 30px 80px 30px;
+        position: relative;
+        padding: 70px 30px;
         border-bottom: 1px solid rgba(232, 232, 232, 1);
-
+      
+        .house-type__panorama {
+          position: absolute;
+          left: 30px;
+          bottom: 70px;
+          width: 64px;
+          height: 64px;
+        }
 
         .house__img {
           width: 100%;

src/pages/project/panorama/index.js

@@ -0,0 +1,16 @@
+import Taro, { Component } from '@tarojs/taro'
+import { WebView } from '@tarojs/components'
+
+export default class Panorama extends Component {
+  state = {}
+
+  componentWillMount() {}
+
+  render () {
+    const url = decodeURIComponent(this.$router.params.url)
+
+    return (
+      <WebView src={url} />
+    )
+  }
+}