Domů Procházet Nápověda
Přihlásit se
front_end
/
tingbang
2
0
Rozštěpit 0
Soubory Úkoly 0 Pull Requesty 0 Wiki
Procházet zdrojové kódy

订座-新增底部tab

panyong před 3 roky
rodič
9b4b705e9b
revize
96edf945c9
7 změnil soubory, kde provedl 48 přidání a 9 odebrání
Rozdělené zobrazení Ukázat statistiku rozdílových dat
  1. 1 1
      htmldev/dashboard/public/index.html
  2. 4 4
      htmldev/dashboard/src/router/index.js
  3. 39 2
      htmldev/dashboard/src/views/place/index.vue
  4. binární
      htmldev/dashboard/src/views/place/list/image/tabbar@2x.png
  5. 3 2
      htmldev/dashboard/src/views/place/list/index.vue
  6. 1 0
      htmldev/dashboard/src/views/place/list/style/index.scss
  7. 0 0
      htmldev/dashboard/src/views/place/reserve/index.vue

+ 1 - 1
htmldev/dashboard/public/index.html
Zobrazit soubor 

@@ -10,7 +10,7 @@
 
   <meta http-equiv="Pragma" content="no-cache"/>
 
   <meta http-equiv="Expires" content="0"/>
 
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
-  <title>数据看板</title>
 
+  <title>AF house</title>
 
 </head>
 
 <body>
 
 <noscript>

+ 4 - 4
htmldev/dashboard/src/router/index.js
Zobrazit soubor 

@@ -42,11 +42,11 @@ const routes = [
 
         }
 
       },
 
       {
 
-        path: 'edit',
 
-        name: 'PlaceEdit',
 
-        component: _import('views/place/edit/index'),
 
+        path: 'reserve',
 
+        name: 'PlaceReserve',
 
+        component: _import('views/place/reserve/index'),
 
         meta: {
 
-          title: '座位选择',
 
+          title: '我的订座',
 
           isUseCache: false,
 
           keepAlive: false
 
         }

+ 39 - 2
htmldev/dashboard/src/views/place/index.vue
Zobrazit soubor 

@@ -1,13 +1,50 @@
 
 <template>
 
-  <router-view/>
 
+  <div class="af-container">
 
+    <router-view/>
 
+    <van-tabbar
 
+      class="af-van-tabbar"
 
+      v-model="active"
 
+      @change="onChange">
 
+      <van-tabbar-item
 
+        name="PlaceList"
 
+        icon="wap-home-o">订座
 
+      </van-tabbar-item>
 
+      <van-tabbar-item
 
+        name="PlaceReserve"
 
+        icon="user-o">我的订座
 
+      </van-tabbar-item>
 
+    </van-tabbar>
 
+  </div>
 
 </template>
 
 
 <script>
 
+import { Tabbar, TabbarItem } from 'vant'
 
+
 
 export default {
 
-  name: 'index'
 
+  name: 'index',
 
+  components: {
 
+    'van-tabbar': Tabbar,
 
+    'van-tabbar-item': TabbarItem
 
+  },
 
+  data () {
 
+    return {
 
+      active: 0
 
+    }
 
+  },
 
+  methods: {
 
+    onChange (routeName) {
 
+      this.$router.replace({ name: routeName })
 
+    }
 
+  }
 
 }
 
 </script>
 
 
 <style lang="scss" scoped>
 
+.af-container {
 
+  padding-bottom: 70px;
 
+}
 
 
+.af-van-tabbar {
 
+  box-shadow: 0px -2px 4px 0px rgba(13, 13, 13, 0.03);
 
+}
 
 </style>

binární
htmldev/dashboard/src/views/place/list/image/tabbar@2x.png
Zobrazit soubor


+ 3 - 2
htmldev/dashboard/src/views/place/list/index.vue
Zobrazit soubor 

@@ -20,6 +20,7 @@
 
       class="af-van-tab"
 
       :background="'transparent'"
 
       :ellipsis="false"
 
+      :sticky="true"
 
       v-model="active"
 
       @change="handleChange"
 
       ref="afTabs">
 
@@ -30,7 +31,7 @@
 
           <p class="week">{{ item.week }}</p>
 
           <p class="date">{{ item.date }}</p>
 
         </template>
 
-        <div class="place-list">
 
+        <div class="place-list" v-for="i in 10" :key="i">
 
           <div class="left">
 
             <p class="name">12人卡座（舞台中间）</p>
 
             <p class="des">卡座台费2800元</p>
 
@@ -212,7 +213,7 @@ export default {
 
       ],
 
       active: 0,
 
       listData: [],
 
-      showPopup: true,
 
+      showPopup: false,
 
       tel: '13429176706',
 
       name: ''
 
     }

+ 1 - 0
htmldev/dashboard/src/views/place/list/style/index.scss
Zobrazit soubor 

@@ -113,6 +113,7 @@
 
 
   ::v-deep .van-tabs__wrap {
 
     height: 60px;
 
+    background: url("./image/tabbar@2x.png") center top/100% 17px repeat-y;
 
 
     .van-tabs__nav--complete {
 
       padding-left: 0;

+ 0 - 0
htmldev/dashboard/src/views/place/edit/index.vue → htmldev/dashboard/src/views/place/reserve/index.vue
Zobrazit soubor