.

package.json

@@ -11,7 +11,7 @@
     "dev-mat": "quasar dev -t mat",
     "dev-pwa": "quasar dev -m pwa",
     "dev-server": "$ quasar serve",
-    "build": "quasar build",
+    "build": "quasar build -t ios",
     "clean": "quasar clean"
   },
   "dependencies": {

quasar.conf.js

@@ -32,7 +32,7 @@ module.exports = function(ctx) {
     },
     devServer: {
       open: true,
-      host: 'localhost',
+      host: '192.168.1.254',
       port: ctx.mode.spa ? 9000 : (ctx.mode.pwa ? 9010 : 9020),
       proxy: {
         // 将所有以/api开头的请求代理到jsonplaceholder

src/assets/ebook.js

@@ -30,28 +30,13 @@ export default [
   {
     title: '我要购买',
     icon: 'mode_edit',
-    hash: 'layout-demo',
+    hash: 'market',
     extract: true,
     features: [
       {
-        title: 'Play with Layout',
+        title: 'books',
         icon: 'play_circle_outline',
-        hash: 'play-with-layout'
-      },
-      {
-        title: 'Drawer Panels',
-        icon: 'view_array',
-        hash: 'drawer-panels'
-      },
-      {
-        title: 'Page Sticky',
-        icon: 'pin_drop',
-        hash: 'page-sticky'
-      },
-      {
-        title: 'Floating Action Button',
-        icon: 'play_for_work',
-        hash: 'floating-action-button'
+        hash: 'books'
       }
     ]
   }

src/components/ebook-tabs.vue

@@ -22,7 +22,7 @@
 <script>
 import { mapState } from 'vuex'
 
-export default  {
+export default {
   name: 'EbookTabs',
   computed: mapState('ebook', [
     'pageMeta'

src/components/demo-tabs.vue → src/components/market-tabs.vue

@@ -6,24 +6,23 @@
   >
     <q-route-tab slot="title"
                  icon="play_circle_outline"
-                 to="/ebook/layout-demo/play-with-layout"
-                 eplace
-                 label="图书"
+                 to="/ebook/market/books"
+                 eplace label="图书"
     />
     <q-route-tab slot="title"
                  icon="view_array"
-                 to="/ebook/layout-demo/drawer-panels"
+                 to="/ebook/market/electronics"
                  replace label="电子"
     />
     <q-route-tab slot="title"
                  icon="pin_drop"
-                 to="/ebook/layout-demo/page-sticky"
+                 to="/ebook/market/coach"
                  replace
                  label="辅导"
     />
     <q-route-tab slot="title"
                  icon="play_for_work"
-                 to="/ebook/layout-demo/floating-action-button"
+                 to="/ebook/market/others"
                  replace
                  label="其他"
     />

src/layouts/layout-demo.vue → src/layouts/marketLayout.vue

@@ -1,21 +1,56 @@
 <template>
   <q-layout view="lHh LpR lFf">
+    <!--header-->
     <q-layout-header :reveal="headerReveal">
-      <q-toolbar :inverted="$q.theme === 'ios'">
-        <q-toolbar-title>
-          <q-search inverted color="light" v-model="terms" placeholder="点击搜索">
-            <q-autocomplete
-              @search="search"
-              @selected="selected"
-            />
-          </q-search>
-        </q-toolbar-title>
-      </q-toolbar>
+      <div>
+        <div class="row" style="background: bisqued">
+          <div class="col-10" />
+          <div class="col-2">
+            <q-btn flat icon="search" @click.native="show()"/>
+          </div>
+        </div>
+      </div>
     </q-layout-header>
-
+    <!--footer-->
     <q-layout-footer :reveal="footerReveal">
-      <demo-tabs/>
+      <footer-tabs/>
     </q-layout-footer>
+    <!--modal-->
+    <q-modal v-model="layoutModal"
+             :content-css="{minWidth: '80vw', minHeight: '80vh'}">
+      <q-modal-layout>
+        <q-toolbar slot="header">
+          <q-btn
+            flat
+            round
+            dense
+            @click="layoutModal = false"
+            icon="reply"
+          />
+          <q-toolbar-title>
+            <q-search inverted color="light"
+                      @click.native="show()"
+                      v-model="terms"
+                      placeholder="点击搜索">
+              <q-autocomplete
+                @search="search"
+                @selected="selected"
+              />
+            </q-search>
+          </q-toolbar-title>
+        </q-toolbar>
+
+        <q-toolbar slot="footer">
+          <q-toolbar-title>
+            Footer
+          </q-toolbar-title>
+        </q-toolbar>
+
+        <div class="layout-padding">
+          <!--content-->
+        </div>
+      </q-modal-layout>
+    </q-modal>
 
     <q-page-container>
       <transition
@@ -29,11 +64,15 @@
 </template>
 
 <script>
-import DemoTabs from 'components/demo-tabs'
+import FooterTabs from 'components/market-tabs'
 import { uid, filter } from 'quasar'
 import countries from 'assets/autocomplete.json'
 
-const icons = ['alarm', 'email', 'search', 'build', 'card_giftcard', 'perm_identity', 'receipt', 'schedule', 'speaker_phone', 'archive', 'weekend', 'battery_charging_full']
+const icons = ['alarm', 'email', 'search',
+  'build', 'card_giftcard', 'perm_identity',
+  'receipt', 'schedule', 'speaker_phone',
+  'archive', 'weekend', 'battery_charging_full'
+]
 
 function getRandomIcon () {
   return icons[Math.floor(Math.random() * icons.length)]
@@ -62,17 +101,21 @@ function parseCountries () {
 
 export default {
   components: {
-    DemoTabs
+    FooterTabs
   },
   data () {
     return {
       terms: '',
+      layoutModal: false,
       countries: parseCountries(),
       headerReveal: false,
       footerReveal: false
     }
   },
   methods: {
+    show () {
+      this.layoutModal = true
+    },
     async search (terms, done) {
       const arr = []
       const msg = {

src/pages/layout-demo/play-with-layout.vue → src/pages/ebook/books/books.vue

@@ -3,7 +3,7 @@
     <q-infinite-scroll :handler="refresher">
       <p v-for="(item, index) in items"
          :key="index">
-        <q-card style="margin: 0 20px">
+        <q-card style="margin: 0 10px">
           <q-card-media overlay-position="full">
             <img alt="" :src="item.bookPic">
             <q-card-title slot="overlay">
@@ -74,9 +74,6 @@ export default {
         done()
       }, 100)
     }
-  },
-  created () {
-    this.subAdvice()
   }
 }
 </script>

src/plugins/axios.js

@@ -11,7 +11,7 @@ axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded
 // http request 拦截器
 axios.interceptors.request.use(
   config => {
-    if ( config.method === 'post' ){
+    if (config.method === 'post') {
       config.data = qs.stringify(config.data)
     }
     // 判断是否存在ticket，如果存在的话，则每个http header都加上ticket

src/router/routes.js

@@ -128,15 +128,15 @@ ebookCategories.forEach(category => {
 
 routes.push(ebook)
 
-// 添加布局模板路由
+// ebook路由
 routes.push({
-  path: '/ebook/layout-demo',
-  component: () => import('layouts/layout-demo'),
+  path: '/ebook/market',
+  component: () => import('layouts/marketLayout'),
   children: [
-    {path: 'play-with-layout', component: () => import('pages/layout-demo/play-with-layout')},
-    {path: 'drawer-panels', component: () => import('pages/layout-demo/drawer-panels')},
-    {path: 'page-sticky', component: () => import('pages/layout-demo/page-sticky')},
-    {path: 'floating-action-button', component: () => import('pages/layout-demo/floating-action-button')}
+    {path: 'books', component: () => import('pages/ebook/books/books')},
+    {path: 'electronics', component: () => import('pages/ebook/electronics/electronics')},
+    {path: 'others', component: () => import('pages/ebook/others/others')},
+    {path: 'coach', component: () => import('pages/ebook/coach/coach')}
   ]
 })