对接四维看看案例页面接口

src/components/Linecanvas/index.vue

@@ -388,7 +388,6 @@ export default {
       let guideArr = getGuideArr()
 
       let myArr = getCutArr()
-      console.log(myArr)
 
       let maxLength = 0
       let guideLength = 0

src/components/Paging/index.vue

@@ -98,8 +98,8 @@ export default {
     index (newVal) {
       this.$bus.$emit('input', newVal)
     },
-    reindex (newVal) {
-      this.index = 1
+    current (newVal) {
+      this.index = newVal
     }
   }
 }

src/components/card/index.vue

@@ -1,10 +1,11 @@
 <template>
 <div class="card-con">
-  <img :src="data.img">
-  <div class="item-info">
+  <!-- <img :src="data.homepic||'https://scene3d.4dage.com/loading/thumb.jpg'"> -->
+  <div class="card-img" :style="{backgroundImage: `url(${data.homepic||'https://scene3d.4dage.com/loading/thumb.jpg'})`}"></div>
+  <div class="item-info" @click="goto(data.webSite)">
     <div class="text-info">
       <div>
-        <h3>{{data.title}}</h3>
+        <h3>{{data.sceneName}}</h3>
       </div>
     </div>
   </div>
@@ -13,11 +14,11 @@
 
     <div class="username">
       <span class="txt">作者：</span>
-      <span >{{data.username}}</span>
+      <span >{{data.nickName}}</span>
     </div>
     <div class="viewcount">
       <span class="txt">查看次数：</span>
-      <span >{{data.viewcount}}</span>
+      <span >{{data.viewCount}}</span>
     </div>
   </div>
 </div>
@@ -50,7 +51,9 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-
+    goto (url) {
+      window.open(url.replace('http://', 'https://'), '_blank')
+    }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {
@@ -58,7 +61,6 @@ export default {
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {
-
   },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
@@ -74,6 +76,13 @@ export default {
 .card-con {
   width: 330px;
   position: relative;
+  .card-img{
+    width: 330px;
+    height: 200px;
+    cursor: pointer;
+    background-position: center;
+    background-size: auto 100%;
+  }
   img {
     width: 330px;
     height: 200px;
@@ -99,7 +108,7 @@ export default {
       div {
         overflow: hidden;
         width: 100%;
-        height: 50px;
+        // height: 50px;
         position: absolute;
         top: 50%;
         transform: translateY(-50%);

src/main.js

@@ -3,9 +3,8 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import vuex from 'vuex'
-import axios from 'axios'
+import axios from './util/http.js'
 
-axios.defaults.baseURL = 'http://www.4dage.com/newOfficialapi/'
 Vue.prototype.$http = axios
 
 Vue.use(vuex)

src/page/cases/index.vue

@@ -19,12 +19,12 @@
     </div>
   </div>
   <div class="case-body" :style="{marginLeft:(split-380)+ 'px'}">
-    <div style="display:inline-block" v-for="(item,i) in cardArr" :key="i">
+    <div style="display:inline-block" v-for="(item,i) in scene" :key="i">
       <card class="card" :data="item" :style="{marginRight:(i+1)%4===0?'0':'50px'}"></card>
     </div>
     <div class="paging">
       <vcenter>
-          <Paging @clickHandle="pageChange" :total="total" :equable="pageSize" />
+          <Paging @clickHandle="pageChange" :current="currentPage" :total="total" :equable="pageSize" />
       </vcenter>
     </div>
   </div>
@@ -123,19 +123,33 @@ const cardArr = [{
 
 const sort = [
   {
-    id: 0,
+    id: 1,
     name: '网站推荐'
   },
   {
-    id: 1,
+    id: 2,
     name: '最新发布'
   },
   {
-    id: 2,
+    id: 3,
     name: '热门浏览'
   }
 ]
+let typeArr = {
+  '房地产': 2,
+  '博物馆': 1,
+  '家居': 5,
+  '餐饮': 4,
+  '其他': 0
+}
 
+let typeTotal = {
+  '房地产': 70,
+  '博物馆': 50,
+  '家居': 40,
+  '餐饮': 30,
+  '其他': 150
+}
 export default {
   // import引入的组件需要注入到对象中才能使用
   components: {
@@ -145,29 +159,64 @@ export default {
   },
   data () {
     // 这里存放数据
+
     return {
       cardArr,
-      total: 90,
+      total: 0,
       pageSize: 10,
+      currentPage: 1,
       sort,
-      sortActive: 0
+      sortActive: 1,
+      scene: [],
+      caseType: null
     }
   },
   // 监听属性 类似于data概念
   computed: {
     ...mapState({
       split: state => state.ui.navDivision
-    }),
-    caseType () {
-      return this.$route.params.id
-    }
+    })
+    // caseType () {
+    //   return this.$route.params.id
+    // }
   },
   // 监控data中的数据变化
-  watch: {},
+  watch: {
+    currentPage () {
+      this.getData()
+    },
+    sortActive () {
+      this.currentPage = 1
+      this.getData()
+    },
+    '$route.params.id': {
+      deep: true,
+      immediate: true,
+      handler (newVal) {
+        this.currentPage = 1
+        this.caseType = newVal
+        this.total = typeTotal[newVal]
+        this.getData()
+      }
+    }
+  },
   // 方法集合
   methods: {
-    pageChange () {
-
+    pageChange (data) {
+      this.currentPage = data
+    },
+    async getData () {
+      let params = {
+        sceneType: typeArr[this.caseType],
+        sceneInterest: this.sortActive,
+        page: this.currentPage
+      }
+      let result = await this.$http({
+        method: 'post',
+        data: params,
+        url: '/scene/loadScene'
+      })
+      this.scene = result.data
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
@@ -176,7 +225,7 @@ export default {
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {
-    console.log(this.split)
+    this.getData()
   }
 }
 </script>

src/page/home2/index.vue

@@ -7,8 +7,8 @@
           <div>
             <img src="@/assets/images/banner_title.png" alt="">
             <h3>
-              4Dkankan MAX PRO
-              <p>第二代空间智能建模相机</p>
+              4Dkankan PRO
+              <p>专业精准建模，高效复刻空间</p>
             </h3>
             <div class="money">
               <span>From:</span>
@@ -20,7 +20,7 @@
             </div>
           </div>
         </div>
-        <img src="@/assets/images/banner_pro.png" alt="">
+        <!-- <img src="@/assets/images/banner_pro.png" alt=""> -->
       </div>
       <video src="@/assets/video/banner.mp4" autoplay muted loop></video>
     </div>
@@ -29,8 +29,8 @@
       <div class="logo"><img src="@/assets/images/plate_icon.png"></div>
 
       <div class="hxjs">
-        <h2>核心技术介绍</h2>
-        <p>Our tools let developers build a new world powered by location data. Real-time updates. Total customization. Developers first.</p>
+        <h2>核心技术</h2>
+        <p>四维看看拥有多项发明专利和核心技术，其中主要有空间定位、空间建模、空间展示</p>
         <div>
           <figure>
             <img src="@/assets/images/hxjs_1.png" alt="">
@@ -56,7 +56,7 @@
           <div class="content">
             <h2>
               <span>空间定位</span>
-              通过人工智能算法高度还原空间结构及测距信息
+              模拟人眼的双球幕SFM技术，采集真实空间信息，测量空间数据
             </h2>
             <p>Embed extensible, custom maps, location search, and turn by turn directions into your app, built on a network of over 420 million monthly users.</p>
           </div>
@@ -73,8 +73,8 @@
           </div>
           <div class="content">
             <h2>
-              <span>空间定位</span>
-              通过人工智能算法高度还原空间结构及测距信息
+              <span>空间建模</span>
+              根据二维图像自动计算三维数字模型，5分钟生成，无需人工干预
             </h2>
             <p>Embed extensible, custom maps, location search, and turn by turn directions into your app, built on a network of over 420 million monthly users.</p>
           </div>
@@ -87,8 +87,8 @@
         </div>
         <div class="content">
           <h2>
-            <span>空间定位</span>
-            通过人工智能算法高度还原空间结构及测距信息
+            <span>空间展示</span>
+            多元化的空间展示，且无需插件，适应多端多平台展示
           </h2>
           <p>Embed extensible, custom maps, location search, and turn by turn directions into your app, built on a network of over 420 million monthly users.</p>
         </div>
@@ -100,7 +100,7 @@
       <img src="@/assets/images/background_03.png" alt="" class="hxbg hxbg-3">
       <div class="info">
         <h2>行业应用展示</h2>
-        <p>立中天之华观兮，连飞阁乎西城。临漳水之长流兮，望园果之滋荣。看空间的故事，听百鸟之悲鸣。</p>
+        <p>四维看看已为消防、公安、文博等公共领域建立三维数字化档案，助力地产、酒店民宿、电商、餐饮等行业打造体验式服务</p>
       </div>
       <div class="content-layout">
         <div class="tabs">

src/page/home2/style.scss

@@ -234,7 +234,7 @@
       h2 {
         font-size: 24px;
         margin-bottom: 30px;
-        max-width: 344px;
+        max-width: 360px;
         line-height: 1.2em;
 
         span {

src/page/layout/header/index.vue

@@ -38,12 +38,12 @@
           <i class="iconfont icon-cuowu hide"></i>
         </vcenter>
       </a>
-      <a class="user">
+      <!-- <a class="user">
         <vcenter>
           <i class="iconfont icon-geren"></i>
           <span>登入</span>
         </vcenter>
-      </a>
+      </a> -->
     </div>
   </div>
 </template>

src/page/navs/temp.vue

@@ -74,27 +74,37 @@ const setting = {
       icon: 'icon-industry_museum',
       name: '博物馆',
       to: {name: 'cases', params: {id: '博物馆'}}
-    }, {
-      icon: 'icon-industry_industry',
-      name: '工业',
-      to: {name: 'cases', params: {id: '工业'}}
-    }, {
-      icon: 'icon-industry_gover',
-      name: '政务',
-      to: {name: 'cases', params: {id: '政务'}}
-    }, {
+    },
+    //  {
+    //   icon: 'icon-industry_industry',
+    //   name: '工业',
+    //   to: {name: 'cases', params: {id: '工业'}}
+    // },
+    //  {
+    //   icon: 'icon-industry_gover',
+    //   name: '政务',
+    //   to: {name: 'cases', params: {id: '政务'}}
+    // },
+    {
       icon: 'icon-industry_ecom',
-      name: '电商',
-      to: {name: 'cases', params: {id: '电商'}}
-    }, {
+      name: '家居',
+      to: {name: 'cases', params: {id: '家居'}}
+    },
+    {
       icon: 'icon-industry_catering',
       name: '餐饮',
       to: {name: 'cases', params: {id: '餐饮'}}
-    }, {
-      icon: 'icon-industry_app',
-      name: 'app',
-      to: {name: 'cases_app'}
+    },
+    {
+      icon: 'icon-industry_industry',
+      name: '其他',
+      to: {name: 'cases', params: {id: '其他'}}
     }
+    // {
+    //   icon: 'icon-industry_app',
+    //   name: 'app',
+    //   to: {name: 'cases_app'}
+    // }
   ]
 }
 

src/util/http.js

@@ -1,18 +1,29 @@
 import axios from 'axios'
 // import store from '@/store'
+import qs from 'qs'
 
-// axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '/apis' : '103.22.43.12:8000'
-
-// // 拦截请求，做登陆，或head处理
-// axios.interceptors.request.use(
-//   config => {
-//     console.log(config)
-//   },
-//   error => {
-//     console.log(error)
-//   }
-// )
+axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'http://www.4dkankan.com' : 'http://www.4dkankan.com'
 
+// 拦截请求，做登陆，或head处理
+axios.interceptors.request.use(function (config) {
+  if (config.method === 'post') {
+    config.data = {
+      ...config.data,
+      rnd: Math.random()
+    }
+    config.data = qs.stringify(config.data)
+  } else if (config.method === 'get') {
+    config.params = {
+      rnd: Math.random(),
+      ...config.params
+    }
+    // config.params = qs.stringify(config.params)
+  }
+  return config
+}, function (error) {
+  // 对请求错误做些什么
+  return Promise.reject(error)
+})
 // // 拦截返回，做错误统一处理
 // axios.interceptors.response.use(
 //   response => {