zhiyuxing
/
office-vue
关注 6
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

feats

Yansen 5 年前
父节点
85c37f974b
当前提交
a192742838
共有 15 个文件被更改，包括 139 次插入 和 30 次删除
分列视图 显示文件统计
  1. 9
    1
      config/index.js
  2. 1
    0
      index.html
  3. 14
    2
      src/components/Footer/Menu/SubMenu.vue
  4. 1
    1
      src/components/Footer/Menu/index.vue
  5. 17
    7
      src/components/Footer/index.vue
  6. 28
    8
      src/components/PageWrapper/TrialForm/index.vue
  7. 13
    4
      src/components/PageWrapper/index.vue
  8. 2
    1
      src/components/Section/index.vue
  9. 13
    0
      src/components/SuspenseBtns/index.vue
  10. 3
    0
      src/main.js
  11. 3
    3
      src/pages/About/index.vue
  12. 2
    2
      src/pages/Cases/index.vue
  13. 15
    0
      src/pages/Prod/components/PlatTab/index.vue
  14. 9
    1
      src/pages/Prod/index.vue
  15. 9
    0
      src/utils/index.js

+ 9
- 1
config/index.js 查看文件 

@@ -10,7 +10,15 @@ module.exports = {
10 10 
     // Paths
11 11 
     assetsSubDirectory: 'static',
12 12 
     assetsPublicPath: '/',
13 
-    proxyTable: {},
13 
+    proxyTable: {
14 
+      '/api': {
15 
+          target: 'http://127.0.0.1:8086',
16 
+          changeOrigin: true,
17 
+          pathRewrite: {
18 
+              '^/api': '/api'
19 
+          }
20 
+      }
21 
+    },
14 22
15 23 
     // Various Dev Server settings
16 24 
     host: 'localhost', // can be overwritten by process.env.HOST

+ 1
- 0
index.html 查看文件 

@@ -3,6 +3,7 @@
3 3 
   <head>
4 4 
     <meta charset="utf-8">
5 5 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
6 
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
6 7 
     <title>office-vue</title>
7 8 
   </head>
8 9 
   <body>

+ 14
- 2
src/components/Footer/Menu/SubMenu.vue 查看文件 

@@ -1,10 +1,10 @@
1 1 
 <template>
2 2 
   <div class="sub-menu">
3 
-    <h3>
3 
+    <h3 @click="handleTitleClick(path)">
4 4 
       <span>{{title}}</span>
5 5 
     </h3>
6 6 
     <ul>
7 
-      <li v-for="(item, index) in list" :key="index">{{item.label}}</li>
7 
+      <li v-for="(item, index) in list" :key="index" @click="handleTitleClick(item.path)">{{item.label}}</li>
8 8 
     </ul>
9 9 
   </div>
10 10 
 </template>
 
@@ -12,6 +12,7 @@
12 12 
 <script>
13 13 
 export default {
14 14 
   props: {
15 
+    path: String,
15 16 
     title: {
16 17 
       type: String,
17 18 
       required: true
 
@@ -20,6 +21,13 @@ export default {
20 21 
       type: Array,
21 22 
       required: true
22 23 
     }
24 
+  },
25 
+  methods: {
26 
+    handleTitleClick (path) {
27 
+      if (path) {
28 
+        this.$router.push(path)
29 
+      }
30 
+    }
23 31 
   }
24 32 
 }
25 33 
 </script>
 
@@ -37,6 +45,10 @@ export default {
37 45 
     color:#ccc;
38 46 
     border-bottom: 0.02rem solid #D8D8D8;
39 47
48 
+    &:hover {
49 
+      cursor: pointer;
50 
+    }
51 
+
40 52 
     span {
41 53 
       display: inline-block;
42 54 
       border-bottom: 0.02rem solid #FFC470;

+ 1
- 1
src/components/Footer/Menu/index.vue 查看文件 

@@ -1,7 +1,7 @@
1 1 
 <template>
2 2 
   <ul class="footer-menu">
3 3 
     <li v-for="(menu, index) in list" :key="index">
4 
-      <SubMenu :title="menu.title" :list="menu.children" />
4 
+      <SubMenu :title="menu.title" :path="menu.path" :list="menu.children" />
5 5 
     </li>
6 6 
   </ul>
7 7 
 </template>

+ 17
- 7
src/components/Footer/index.vue 查看文件 

@@ -23,37 +23,47 @@ export default {
23 23 
       menus: [
24 24 
         {
25 25 
           title: '产品介绍',
26 
+          path: '/prod',
26 27 
           children: [
27 28 
             {
28 
-              label: '橙蕉分享获客平台'
29 
+              label: '橙蕉分享获客平台',
30 
+              path: '/prod?_t=0'
29 31 
             },
30 32 
             {
31 
-              label: '橙蕉小程序代理平台'
33 
+              label: '新房渠道报备管理平台',
34 
+              path: '/prod?_t=1'
32 35 
             }
33 36 
           ]
34 37 
         },
35 38 
         {
36 39 
           title: '关于橙蕉',
40 
+          path: '/about',
37 41 
           children: [
38 42 
             {
39 
-              label: '公司概况'
43 
+              label: '公司概况',
44 
+              path: '/about?_a=company'
40 45 
             },
41 46 
             {
42 
-              label: '业务分布'
47 
+              label: '业务分布',
48 
+              path: '/about?_a=distribute'
43 49 
             },
44 50 
             {
45 
-              label: '城市代理'
51 
+              label: '城市代理',
52 
+              path: '/about?_a=proxy'
46 53 
             }
47 54 
           ]
48 55 
         },
49 56 
         {
50 57 
           title: '合作案例',
58 
+          path: '/cases',
51 59 
           children: [
52 60 
             {
53 
-              label: '合作品牌'
61 
+              label: '合作品牌',
62 
+              path: '/cases?_a=brand'
54 63 
             },
55 64 
             {
56 
-              label: '合作项目'
65 
+              label: '合作项目',
66 
+              path: '/cases?_a=prod'
57 67 
             }
58 68 
           ]
59 69 
         },

+ 28
- 8
src/components/PageWrapper/TrialForm/index.vue 查看文件 

@@ -1,7 +1,7 @@
1 1 
 <template>
2 2 
   <div class="trial-form">
3 
-    <FormItem :required="true" errorMsg="请输入公司名称" :error="error.compnay" >
4 
-      <input placeholder="请输入公司名称" v-model="formData.compnay" />
3 
+    <FormItem :required="true" errorMsg="请输入公司名称" :error="error.company" >
4 
+      <input placeholder="请输入公司名称" v-model="formData.company" />
5 5 
     </FormItem>
6 6 
     <FormItem :required="true" errorMsg="请输入正确的手机号码" :error="error.phone">
7 7 
       <input placeholder="请输入手机号码" v-model="formData.phone" />
 
@@ -29,14 +29,14 @@ export default {
29 29 
   data () {
30 30 
     return {
31 31 
       formData: {
32 
-        compnay: null,
32 
+        company: null,
33 33 
         phone: null,
34 34 
         name: null,
35 35 
         email: null,
36 36 
         demand: null
37 37 
       },
38 38 
       error: {
39 
-        compnay: false,
39 
+        company: false,
40 40 
         phone: false,
41 41 
         name: false,
42 42 
         email: false,
 
@@ -47,7 +47,7 @@ export default {
47 47 
   methods: {
48 48 
     submit () {
49 49 
       this.error = {
50 
-        compnay: false,
50 
+        company: false,
51 51 
         phone: false,
52 52 
         name: false,
53 53 
         email: false,
 
@@ -56,8 +56,8 @@ export default {
56 56
57 57 
       let hasError = false
58 58
59 
-      if (!this.formData.compnay) {
60 
-        this.error.compnay = true
59 
+      if (!this.formData.company) {
60 
+        this.error.company = true
61 61 
         hasError = true;
62 62 
       }
63 63 
       if (!this.formData.phone || this.formData.phone.length !== 11) {
 
@@ -73,7 +73,27 @@ export default {
73 73 
         return;
74 74 
       }
75 75
76 
-      console.log(this.formData)
76 
+      const _t = this
77 
+
78 
+      // 使用 jQuery 是为了兼容 IE9, axios 支持 IE10+
79 
+      window.jQuery.ajax({
80 
+        url: '/api/official/taOfficeContact',
81 
+        type: 'POST',
82 
+        contentType: 'application/json;charset=utf-8',
83 
+        data: JSON.stringify(this.formData),
84 
+        success: function (res) {
85 
+          if (res.code === 1000) {
86 
+            _t.$emit('success')
87 
+            window.alert(`提交成功`)
88 
+          } else {
89 
+            window.alert(`提交失败: ${res.message}`)
90 
+          }
91 
+        },
92 
+        error: function (_, e) {
93 
+          console.error(e)
94 
+          window.alert(`提交失败, 请重试`)
95 
+        }
96 
+      })
77 97 
     }
78 98 
   }
79 99 
 }

+ 13
- 4
src/components/PageWrapper/index.vue 查看文件 

@@ -8,7 +8,7 @@
8 8 
     <SuspenseBtns @click="handleSuspenseBtnClick" />
9 9 
     <Modal :title="modalTitle" :visible.sync="showModal" :width="400">
10 10 
       <div v-if="showTrial">
11 
-        <TrialForm />
11 
+        <TrialForm @success="handleFormFinish" />
12 12 
       </div>
13 13 
       <div v-else-if="showMiniapp">
14 14 
         <div class="concat-miniapp">
 
@@ -60,9 +60,7 @@ export default {
60 60 
   watch: {
61 61 
     showModal (nw) {
62 62 
       if (!nw) {
63 
-        this.showTrial = false
64 
-        this.showMiniapp = false
65 
-        this.modalTitle = ''
63 
+        this.resetModal(true)
66 64 
       }
67 65 
     }
68 66 
   },
 
@@ -90,6 +88,17 @@ export default {
90 88 
         this.modalTitle = '电话咨询'
91 89 
       }
92 90 
       this.showModal = true
91 
+    },
92 
+    handleFormFinish () {
93 
+      this.resetModal()
94 
+    },
95 
+    resetModal (fromWatch) {
96 
+      if (!fromWatch) {
97 
+        this.showModal = false
98 
+      }
99 
+      this.showTrial = false
100 
+      this.showMiniapp = false
101 
+      this.modalTitle = ''
93 102 
     }
94 103 
   }
95 104 
 }

+ 2
- 1
src/components/Section/index.vue 查看文件 

@@ -1,5 +1,5 @@
1 1 
 <template>
2 
-  <div class="section-box">
2 
+  <div class="section-box" :id="id">
3 3 
     <h2>
4 4 
       <span>{{title}}</span>
5 5 
     </h2>
 
@@ -10,6 +10,7 @@
10 10 
 <script>
11 11 
 export default {
12 12 
   props: {
13 
+    id: String,
13 14 
     title: {
14 15 
       type: String,
15 16 
       required: true

+ 13
- 0
src/components/SuspenseBtns/index.vue 查看文件 

@@ -10,6 +10,8 @@
10 10 
 </template>
11 11
12 12 
 <script>
13 
+import { toAnchor } from '@/utils'
14 
+
13 15 
 export default {
14 16 
   components: {
15 17 
     IconButton: () => import('./IconButton')
 
@@ -35,6 +37,17 @@ export default {
35 37 
       ]
36 38 
     }
37 39 
   },
40 
+  mounted () {
41 
+    this.$nextTick(() => {
42 
+      const { _a } = this.$route.query
43 
+      if (_a) {
44 
+        const t = setTimeout(() => {
45 
+          toAnchor(_a)
46 
+          clearTimeout(t)
47 
+        }, 600)
48 
+      }
49 
+    })
50 
+  },
38 51 
   methods: {
39 52 
     handleClick (item) {
40 53 
       this.$emit('click', item)

+ 3
- 0
src/main.js 查看文件 

@@ -15,3 +15,6 @@ new Vue({
15 15 
 })
16 16
17 17 
 window._$eventBus = new Vue();
18 
+
19 
+// jquery 不绑定 $
20 
+window.$.noConflict();

+ 3
- 3
src/pages/About/index.vue 查看文件 

@@ -1,7 +1,7 @@
1 1 
 <template>
2 2 
   <PageWrapper :galleries="galleryList">
3 3 
     <div class="aboutPage">
4 
-      <Section title="公司概况">
4 
+      <Section title="公司概况" id="company">
5 5 
         <div class="company">
6 6 
           <p>
7 7 
             橙蕉互动是一家基于房地产数字化营销的新科技公司，成立于2019年，目前公司共有团队70余人，核心骨干具备近10年以上行业经验。
 
@@ -13,7 +13,7 @@
13 13 
           <img src="https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/survey.png" alt="">
14 14 
         </div>
15 15 
       </Section>
16 
-      <Section title="业务分布">
16 
+      <Section title="业务分布" id="distribute">
17 17 
         <ul class="distribute">
18 18 
           <li v-for="(item, index) in distributeList" :key="index">
19 19 
             <MediaCard v-bind="item" />
 
@@ -23,7 +23,7 @@
23 23 
           橙蕉互动立足南京，发展至今，已有近30家城市代理、逾百家深度合作的集团项目，业务分布以长三角为辐射区，遍布南京、上海、苏州、杭州、郑州、广州、贵阳、绍兴、海口、乌鲁木齐等全国三十多个城市。
24 24 
         </p>
25 25 
       </Section>
26 
-      <Section title="城市代理">
26 
+      <Section title="城市代理" id="distribute">
27 27 
         <div class="proxy">
28 28 
           <img src="https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/urban%20distribution.png" alt="">
29 29 
           <p>

+ 2
- 2
src/pages/Cases/index.vue 查看文件 

@@ -1,12 +1,12 @@
1 1 
 <template>
2 2 
   <PageWrapper :galleries="galleryList">
3 3 
     <div class="casesPage">
4 
-      <Section title="合作项目">
4 
+      <Section title="合作项目" id="prod">
5 5 
         <div class="cooperate">
6 6 
           <img src="https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/cooperative%20projects.png" alt="">
7 7 
         </div>
8 8 
       </Section>
9 
-      <Section title="合作品牌">
9 
+      <Section title="合作品牌" id="brand">
10 10 
         <div class="cooperate">
11 11 
           <img src="https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/cooperation%20cases.png" alt="">
12 12 
         </div>

+ 15
- 0
src/pages/Prod/components/PlatTab/index.vue 查看文件 

@@ -18,11 +18,26 @@ export default {
18 18 
   components: {
19 19 
     Section: () => import('@/components/Section')
20 20 
   },
21 
+  props: {
22 
+    tab: Number
23 
+  },
21 24 
   data () {
22 25 
     return {
23 26 
       current: 0
24 27 
     }
25 28 
   },
29 
+  created () {
30 
+    if (this.tab !== undefined) {
31 
+      this.current = this.tab
32 
+    }
33 
+  },
34 
+  watch: {
35 
+    tab (nw, od) {
36 
+      if (nw !== this.current && nw !== od) {
37 
+        this.current = nw
38 
+      }
39 
+    }
40 
+  },
26 41 
   methods: {
27 42 
     handleHover (index) {
28 43 
       this.current = index

+ 9
- 1
src/pages/Prod/index.vue 查看文件 

@@ -1,6 +1,6 @@
1 1 
 <template>
2 2 
   <PageWrapper :galleries="galleryList" title="产品介绍">
3 
-    <PlatTab @change="handleTabChange" />
3 
+    <PlatTab :tab="tab" @change="handleTabChange" />
4 4
5 5 
     <div class="prodPage">
6 6 
       <div v-if="tab === 0">
 
@@ -257,6 +257,14 @@ export default {
257 257 
       return this.report.slice(cut)
258 258 
     }
259 259 
   },
260 
+  mounted () {
261 
+    this.$nextTick(() => {
262 
+      const { _t } = this.$route.query
263 
+      if (_t !== undefined) {
264 
+        this.tab = _t - 0
265 
+      }
266 
+    })
267 
+  },
260 268 
   methods: {
261 269 
     handleTabChange (index) {
262 270 
       this.tab = index

+ 9
- 0
src/utils/index.js 查看文件 

@@ -0,0 +1,9 @@
1 
+
2 
+export function toAnchor (a) {
3 
+  const offHeight = (document.querySelector('.navi-box') || {}).offsetHeight || 150
4 
+  const to = (document.getElementById(a) || {}).offsetTop || 0
5 
+
6 
+  if (a && to) {
7 
+    window.scrollTo(0, to - offHeight)
8 
+  }
9 
+}