静态页面

config/dev.js

@@ -3,8 +3,8 @@ module.exports = {
     NODE_ENV: '"development"'
   },
   defineConstants: {
-    // HOST: '"https://xlk.njyz.tech"',
-    HOST: '"http://127.0.0.1:8088"',
+    HOST: '"https://xlk.njyz.tech"',
+    // HOST: '"http://127.0.0.1:8088"',
     WSS_HOST: '"wss://xlk.njyz.tech"',
     OSS_PATH: '"https://zhiyun-image.oss-accelerate.aliyuncs.com/"',
     OSS_FAST_PATH: '"https://zhiyun-image.oss-accelerate.aliyuncs.com/"',

project.config.json

@@ -27,7 +27,7 @@
 			"outputPath": ""
 		},
 		"useIsolateContext": true,
-		"useCompilerModule": true,
+		"useCompilerModule": false,
 		"userConfirmedUseCompilerModuleSwitch": false
 	},
 	"compileType": "miniprogram",

src/pages/index/buildingInfo/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '楼盘信息'
+}

src/pages/index/buildingInfo/index.jsx

@@ -0,0 +1,62 @@
+import { useState, useEffect } from 'react'
+import withLayout from '@/layout'
+import { ScrollView } from '@tarojs/components'
+import '@/assets/css/iconfont.css'
+import './index.scss'
+
+export default withLayout((props) => {
+
+  const [InfoList, setInfoList] = useState([
+    [
+      { name: '项目名称', value: '葛洲坝·南京中国府', key: '' },
+      { name: '开发商', value: '暂无', key: '' },
+      { name: '均价', value: '待定', key: '' },
+      { name: '销售状态', value: '待定', key: '' },
+      { name: '开盘日期', value: '2019-08-05', key: '' },
+      { name: '楼盘地址', value: '南京建邺区友谊街交汇处南京建邺区友谊街交汇处', key: '' },
+    ],
+    [
+      { name: '装修标准', value: '精装', key: '' },
+      { name: '物业公司', value: '葛洲坝物业', key: '' },
+      { name: '物业费', value: '2.0元/㎡/月', key: '' },
+    ],
+    [
+      { name: '容积率', value: '2.75', key: '' },
+      { name: '供水', value: '民水', key: '' },
+      { name: '供电', value: '民电', key: '' },
+      { name: '供暖方式', value: '自采暖', key: '' },
+      { name: '人车分流', value: '-', key: '' },
+      { name: '车位数量', value: '约1000', key: '' },
+      { name: '规划户数', value: '300', key: '' },
+      { name: '楼栋总数', value: '25', key: '' },
+      { name: '绿化率', value: '35.31%', key: '' },
+      { name: '项目说明', value: '南京建邺区友谊街交汇处南京建邺区友谊街交汇处', key: '' },
+      { name: '备案名', value: '暂无', key: '' },
+    ]
+  ])
+
+  return (
+    <view className='Page buildingInfo'>
+      <ScrollView scrollY>
+        <view className='List'>
+          {
+            InfoList.map((item, index) => (
+              <view key={`ListItem-${index}`}>
+                {
+                  item.map((subItem, subIndex) => (
+                    <view className='flex-h' key={`SubListItem-${subIndex}`}>
+                      <text>{subItem.name}</text>
+                      <view className='flex-item'>
+                        <text>{subItem.value}</text>
+                      </view>
+                    </view>
+                  ))
+                }
+              </view>
+            ))
+          }
+        </view>
+      </ScrollView>
+    </view>
+  )
+})

src/pages/index/buildingInfo/index.scss

@@ -0,0 +1,46 @@
+.Page.buildingInfo {
+  background: #f8f8f8;
+  width: 100%;
+  height: 100%;
+  > scroll-view {
+    width: 100%;
+    height: 100%;
+    .List {
+      position: relative;
+      overflow: hidden;
+      >view {
+        position: relative;
+        overflow: hidden;
+        background: #fff;
+        margin-top: 20px;
+        padding: 0 40px;
+        &:first-child {
+          margin-top: 0;
+        }
+        >view {
+          align-items: center;
+          border-top: 2px solid rgba(0, 0, 0, 0.08);
+          &:first-child {
+            border-top: none;
+          }
+          >text {
+            font-size: 30px;
+            color: #999;
+            padding: 36px 0;
+            min-width: 120px;
+            text-align: right;
+            margin-right: 80px;
+          }
+          >view {
+            >text {
+              display: block;
+              font-size: 32px;
+              color: #333;
+              line-height: 44px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/index/buildingPictures/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '相册图片'
+}

src/pages/index/buildingPictures/index.jsx

@@ -0,0 +1,70 @@
+import { useState, useEffect } from 'react'
+import withLayout from '@/layout'
+import { ScrollView, Image } from '@tarojs/components'
+import '@/assets/css/iconfont.css'
+import './index.scss'
+
+export default withLayout((props) => {
+
+  const [IsPull, setPull] = useState(false)
+  const [PullTimer, setPullTimer] = useState(null)
+  const [NavList, setNavList] = useState([
+    { name: '效果图', id: 1 },
+    { name: '实景图', id: 2 },
+    { name: '户型图', id: 3 },
+  ])
+  const [CurrentNavId, setCurrentNavId] = useState(1)
+  const [PageList, setPageList] = useState([{}, {}, {}, {}, {}, {}])
+
+  const PageRefresh = () => { // 页面下拉刷新回调
+    setPull(true)
+  }
+
+  useEffect(() => { // 下拉刷新触发
+    if (IsPull) {
+      clearTimeout(PullTimer)
+      setPullTimer(setTimeout(() => {
+        setPull(false)
+      }, 2000))
+    }
+  }, [IsPull])
+
+  const CutNav = (id) => {
+    return () => {
+      setCurrentNavId(id)
+    }
+  }
+
+  return (
+    <view className='Page buildingPictures flex-v'>
+      <view className='Tab flex-h'>
+        {
+          NavList.map((item, index) => (
+            <view className={item.id === CurrentNavId ? 'active flex-item' : 'flex-item'} key={`NavItem-${index}`}>
+              <text onClick={CutNav(item.id)}>{item.name}</text>
+            </view>
+          ))
+        }
+      </view>
+      <view className='flex-item'>
+        <view>
+          <ScrollView scroll-y refresher-enabled refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+            <view className='List'>
+              {
+                PageList.map((item, index) => (
+                  <view key={`ListItem-${index}`}>
+                    <view className='Img'>
+                      <Image mode='scaleToFill' className='centerLabel' src={null}></Image>
+                    </view>
+                    <text>120㎡样板间</text>
+                  </view>
+                ))
+              }
+              <text className='Tips'>已经到底了~</text>
+            </view>
+          </ScrollView>
+        </view>
+      </view>
+    </view>
+  )
+})

src/pages/index/buildingPictures/index.scss

@@ -0,0 +1,100 @@
+.Page.buildingPictures {
+  width: 100%;
+  height: 100%;
+  >.Tab {
+    position: relative;
+    overflow: hidden;
+    z-index: 2;
+    background: #fff;
+    box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.03);
+    align-items: center;
+    padding: 0 30px;
+    >view {
+      padding: 22px 0 26px;
+      text-align: center;
+      font-size: 0;
+      position: relative;
+      overflow: hidden;
+      &.active {
+        >text {
+          font-size: 34px;
+          color: #1A3B83;
+          position: relative;
+          overflow: visible;
+          &::after {
+            content: '';
+            display: block;
+            width: 100%;
+            position: absolute;
+            left: 0;
+            bottom: -26px;
+            height: 2px;
+            background: #1A3B83;
+          }
+        }
+      }
+      >text {
+        display: inline-block;
+        font-size: 28px;
+        color: #666;
+        line-height: 40px;
+      }
+    }
+  }
+  > .flex-item {
+    position: relative;
+    overflow: hidden;
+    > view {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      overflow: hidden;
+      > scroll-view {
+        width: 100%;
+        height: 100%;
+        .List {
+          position: relative;
+          overflow: hidden;
+          padding: 0 30px 0 12px;
+          font-size: 0;
+          >view {
+            display: inline-block;
+            vertical-align: middle;
+            width: 50%;
+            box-sizing: border-box;
+            border-left: 18px solid transparent;
+            position: relative;
+            overflow: hidden;
+            margin-top: 18px;
+            >.Img {
+              width: 100%;
+              padding-bottom: 75%;
+              position: relative;
+              overflow: hidden;
+              background: #eee;
+              border-radius: 16px;
+              >image {
+                width: 100%;
+                height: 100%;
+              }
+            }
+            >text {
+              display: block;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              font-size: 28px;
+              color: #353535;
+              line-height: 40px;
+              margin-top: 20px;
+              height: 40px;
+              text-align: center;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/index/buildingPropertyConsultant/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '置业顾问'
+}

src/pages/index/buildingPropertyConsultant/index.jsx

@@ -0,0 +1,73 @@
+import { useState, useEffect } from 'react'
+import withLayout from '@/layout'
+import { ScrollView, Image } from '@tarojs/components'
+import '@/assets/css/iconfont.css'
+import './index.scss'
+
+export default withLayout((props) => {
+
+  const [IsPull, setPull] = useState(false)
+  const [PullTimer, setPullTimer] = useState(null)
+  const [List, setList] = useState([
+    { name: '乖戾', icon: '', time: '11:49' },
+    { name: '乖戾', icon: '', time: '11:49' },
+    { name: '乖戾', icon: '', time: '11:49' },
+    { name: '乖戾', icon: '', time: '11:49' },
+    { name: '乖戾', icon: '', time: '11:49' },
+    { name: '乖戾', icon: '', time: '11:49' },
+  ])
+
+  const PageRefresh = () => { // 页面下拉刷新回调
+    setPull(true)
+  }
+
+  useEffect(() => { // 下拉刷新触发
+    if (IsPull) {
+      clearTimeout(PullTimer)
+      setPullTimer(setTimeout(() => {
+        setPull(false)
+      }, 2000))
+    }
+  }, [IsPull])
+
+  return (
+    <view className='Page buildingPropertyConsultant'>
+      <ScrollView scroll-y refresher-enabled refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+        <text className='TopTips'>有任何买卖房屋的问题，欢迎随时咨询</text>
+        <view className='List'>
+          {
+            List.map((item, index) => (
+              <view key={`ListItem-${index}`}>
+
+                <view className='flex-h'>
+
+                  <view className='Icon'>
+                    <Image mode='scaleToFill' src={item.icon || null}></Image>
+                  </view>
+
+                  <view className='flex-item'>
+                    <view className='Name'>
+                      <text>陆毅</text>
+                      <Image mode='heightFix' src={require('@/assets/index-icon17.png')}></Image>
+                    </view>
+                    <text>13045678976</text>
+                  </view>
+
+                  <text className='iconfont icon-liaotian'></text>
+                  <text className='iconfont icon-dianhua'></text>
+                  
+                </view>
+
+                <view className='Desc'>
+                  <text>好评经纪人，熟悉楼盘特色</text>
+                </view>
+
+              </view>
+            ))
+          }
+          <text className='BottomTips'>已经到底了~</text>
+        </view>
+      </ScrollView>
+    </view>
+  )
+})

src/pages/index/buildingPropertyConsultant/index.scss

@@ -0,0 +1,109 @@
+.Page.buildingPropertyConsultant {
+  width: 100%;
+  height: 100%;
+  > scroll-view {
+    width: 100%;
+    height: 100%;
+    .TopTips {
+      display: block;
+      padding: 0 30px;
+      font-size: 28px;
+      color: rgba(0, 0, 0, 0.31);
+      line-height: 80px;
+      background: #F5F5F5;
+    }
+    .List {
+      position: relative;
+      overflow: hidden;
+      padding: 0 30px;
+      >view {
+        position: relative;
+        overflow: hidden;
+        padding: 20px 0 40px;
+        border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+        margin-top: 20px;
+        &:first-child {
+          margin-top: 0;
+        }
+        >.flex-h {
+          align-items: center;
+          >.Icon {
+            width: 92px;
+            height: 92px;
+            border-radius: 100%;
+            background: #eee;
+            position: relative;
+            overflow: hidden;
+            margin-right: 20px;
+            >image {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          >.flex-item {
+            >.Name {
+              font-size: 0;
+              white-space: nowrap;
+              >text {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 32px;
+                color: #333;
+                line-height: 44px;
+              }
+              >image {
+                height: 32px;
+                margin-left: 20px;
+                display: inline-block;
+                vertical-align: middle;
+              }
+            }
+            >text {
+              display: block;
+              font-size: 28px;
+              color: rgba(0, 0, 0, 0.44);
+              line-height: 40px;
+              margin-top: 8px;
+            }
+          }
+          >text {
+            font-size: 50px;
+            line-height: 80px;
+            width: 80px;
+            text-align: center;
+            border-radius: 100%;
+            background: rgba(251, 171, 87, 0.12);
+            color: #FBAB57;
+            margin-left: 40px;
+            &:last-child {
+              background: rgba(129, 188, 75, 0.12);
+              color: #81BC4B;
+            }
+          }
+        }
+        >.Desc {
+          position: relative;
+          overflow: hidden;
+          background: #F9F9F9;
+          padding: 24px 20px;
+          margin-top: 20px;
+          >text {
+            display: block;
+            font-size: 28px;
+            color: rgba(0, 0, 0, 0.36);
+            line-height: 40px;
+          }
+        }
+      }
+      >.BottomTips {
+        display: block;
+        text-align: center;
+        font-size: 28px;
+        color: #999;
+        line-height: 40px;
+        margin-top: 20px;
+        margin-bottom: 40px;
+      }
+    }
+  }
+}

src/pages/index/buildingRules/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '报备规则'
+}

src/pages/index/buildingRules/index.jsx

@@ -0,0 +1,46 @@
+
+import withLayout from '@/layout'
+import { ScrollView, Image } from '@tarojs/components'
+import '@/assets/css/iconfont.css'
+import './index.scss'
+
+export default withLayout(() => {
+
+  return (
+    <view className='Page buildingRules'>
+      <ScrollView scroll-y>
+        <view className='Content'>
+          <Image mode='widthFix' src={require(`@/assets/index-icon18.jpg`)}></Image>
+
+          <view className='Title'>
+            <view>
+              <text className='iconfont icon-shoucang'></text>
+              <text>报备规则</text>
+              <text className='iconfont icon-shoucang'></text>
+            </view>
+          </view>
+
+          <view className='Text'>
+            <text>南京城际空间站渠道报备客户后，15天内客户到访并确认到访单即客户有效，客户成交相关佣金请咨询驻场管理或所属渠道经理。</text>
+            <text>南京城际空间站渠道报备客户后，15天内客户到访并确认到访单即客户有效，客户成交相关佣金请咨询驻场管理或所属渠道经理。</text>
+            <text>南京城际空间站渠道报备客户后，15天内客户到访并确认到访单即客户有效，客户成交相关佣金请咨询驻场管理或所属渠道经理。</text>
+          </view>
+
+          <view className='Bottom'>
+            <view>
+              <view>
+                <text className='iconfont icon-shengming'></text>
+                <text>免责声明</text>
+              </view>
+              <view>
+                <text>&emsp;&emsp;以上价格仅供参考,具体一房一价的信息以售楼处展示为准。房屋位置交通、医疗、教育、商业等配套信息，来源于第三方不作为要约,仅供参考,双方具体权利义务应以法律规定及买卖合同约定为准。本平台对项目周边文化教育的介绍旨在提供相关信息1 意味着信息发布方对就学安排作出承诺。相关教育资首页信息存在调整的可能,应以政府教育主管部门门及办学颁布的政策规定为准。详情请仔细阅读</text>
+                <text className='active'>《新联家使用免责条款》</text>
+              </view>
+            </view>
+          </view>
+
+        </view>
+      </ScrollView>
+    </view>
+  )
+})

src/pages/index/buildingRules/index.scss

@@ -0,0 +1,92 @@
+.Page.buildingRules {
+  width: 100%;
+  height: 100%;
+  > scroll-view {
+    width: 100%;
+    height: 100%;
+    .Content {
+      position: relative;
+      overflow: hidden;
+      > image {
+        width: 100%;
+        display: block;
+      }
+      > .Title {
+        font-size: 0;
+        white-space: nowrap;
+        text-align: center;
+        margin-top: 42px;
+        position: relative;
+        overflow: hidden;
+        &::after {
+          content: "";
+          width: 80%;
+          height: 2px;
+          display: block;
+          position: absolute;
+          z-index: 1;
+          left: 10%;
+          top: 14px;
+          background: #333;
+        }
+        > view {
+          display: inline-block;
+          font-size: 0;
+          white-space: nowrap;
+          position: relative;
+          z-index: 2;
+          background: #fff;
+          padding: 0 10px;
+          > text {
+            display: inline-block;
+            vertical-align: middle;
+            font-size: 30px;
+            color: #333;
+            line-height: 1;
+            margin-left: 20px;
+            &:first-child {
+              margin-left: 0;
+            }
+          }
+        }
+      }
+      > .Text {
+        padding: 0 30px;
+        position: relative;
+        overflow: hidden;
+        margin-top: 30px;
+        > text {
+          display: block;
+          font-size: 30px;
+          color: #333;
+          line-height: 48px;
+          text-indent: 2em;
+        }
+      }
+      >.Bottom {
+        padding: 0 30px 30px;
+        position: relative;
+        overflow: hidden;
+        margin-top: 100px;
+        >view {
+          padding: 30px;
+          position: relative;
+          overflow: hidden;
+          background: #F8F8F8;
+          border-radius: 8px;
+          >view {
+            >text {
+              font-size: 20px;
+              color: #999;
+              line-height: 30px;
+              letter-spacing: 2px;
+              &.active {
+                color: #193C83;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/index/buildingTakeLook/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '一键带看'
+}

src/pages/index/buildingTakeLook/index.jsx

@@ -0,0 +1,18 @@
+
+import withLayout from '@/layout'
+import { ScrollView, Image } from '@tarojs/components'
+import '@/assets/css/iconfont.css'
+import './index.scss'
+
+export default withLayout(() => {
+
+  return (
+    <view className='Page buildingTakeLook'>
+      <ScrollView scroll-y>
+        <view className='Content'>
+          
+        </view>
+      </ScrollView>
+    </view>
+  )
+})

src/pages/index/buildingTakeLook/index.scss

@@ -0,0 +1,12 @@
+.Page.buildingTakeLook {
+  width: 100%;
+  height: 100%;
+  > scroll-view {
+    width: 100%;
+    height: 100%;
+    .Content {
+      position: relative;
+      overflow: hidden;
+    }
+  }
+}

src/pages/index/buildingViewsRecords/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '围观记录'
+}

src/pages/index/buildingViewsRecords/index.jsx

@@ -0,0 +1,55 @@
+import { useState, useEffect } from 'react'
+import withLayout from '@/layout'
+import { ScrollView, Image } from '@tarojs/components'
+import '@/assets/css/iconfont.css'
+import './index.scss'
+
+export default withLayout((props) => {
+
+  const [IsPull, setPull] = useState(false)
+  const [PullTimer, setPullTimer] = useState(null)
+  const [List, setList] = useState([
+    { name: '乖戾', icon: '', time: '11:49' },
+    { name: '乖戾', icon: '', time: '11:49' },
+    { name: '乖戾', icon: '', time: '11:49' },
+    { name: '乖戾', icon: '', time: '11:49' },
+    { name: '乖戾', icon: '', time: '11:49' },
+    { name: '乖戾', icon: '', time: '11:49' },
+  ])
+
+  const PageRefresh = () => { // 页面下拉刷新回调
+    setPull(true)
+  }
+
+  useEffect(() => { // 下拉刷新触发
+    if (IsPull) {
+      clearTimeout(PullTimer)
+      setPullTimer(setTimeout(() => {
+        setPull(false)
+      }, 2000))
+    }
+  }, [IsPull])
+
+  return (
+    <view className='Page buildingViewsRecords'>
+      <ScrollView scroll-y refresher-enabled refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+        <view className='List'>
+          {
+            List.map((item, index) => (
+              <view className='flex-h' key={`ListItem-${index}`}>
+                <view className='Icon'>
+                  <Image mode='scaleToFill' src={item.icon || null}></Image>
+                </view>
+                <view className='flex-item'>
+                  <text>{item.name}</text>
+                </view>
+                <text>{item.time}</text>
+              </view>
+            ))
+          }
+          <text className='Tips'>仅展示最近50条围观纪录</text>
+        </view>
+      </ScrollView>
+    </view>
+  )
+})

src/pages/index/buildingViewsRecords/index.scss

@@ -0,0 +1,54 @@
+.Page.buildingViewsRecords {
+  width: 100%;
+  height: 100%;
+  > scroll-view {
+    width: 100%;
+    height: 100%;
+    .List {
+      position: relative;
+      overflow: hidden;
+      padding: 0 30px;
+      >view {
+        position: relative;
+        overflow: hidden;
+        padding: 28px 0;
+        border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+        align-items: center;
+        >.Icon {
+          width: 124px;
+          height: 124px;
+          position: relative;
+          overflow: hidden;
+          border-radius: 100%;
+          background: #eee;
+          margin-right: 20px;
+          >image {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        >.flex-item {
+          >text {
+            display: block;
+            font-size: 32px;
+            white-space: nowrap;
+            color: #333;
+          }
+        }
+        >text {
+          font-size: 24px;
+          color: #999;
+        }
+      }
+      >.Tips {
+        display: block;
+        text-align: center;
+        font-size: 24px;
+        color: #999;
+        line-height: 34px;
+        margin-top: 40px;
+        margin-bottom: 40px;
+      }
+    }
+  }
+}

src/routes.js

@@ -67,6 +67,36 @@ const routes = [
     pkg: 'main',
     type: 'building',
   },
+  {
+    name: '楼盘信息',
+    page: 'pages/index/buildingInfo/index',
+    pkg: 'main',
+    type: 'building',
+  },
+  {
+    name: '围观记录',
+    page: 'pages/index/buildingViewsRecords/index',
+    pkg: 'main',
+    type: 'building',
+  },
+  {
+    name: '置业顾问',
+    page: 'pages/index/buildingPropertyConsultant/index',
+    pkg: 'main',
+    type: 'building',
+  },
+  {
+    name: '相册图片',
+    page: 'pages/index/buildingPictures/index',
+    pkg: 'main',
+    type: 'building',
+  },
+  {
+    name: '报备规则',
+    page: 'pages/index/buildingRules/index',
+    pkg: 'main',
+    type: 'building',
+  },
   {
     name: '品牌列表',
     page: 'pages/index/brandList/index',