手机端layout分离

app.html

@@ -29,15 +29,6 @@
       var cnzz_protocol = (("https:" == d.location.protocol) ? " https://" : " http://");
       d.write(unescape("%3Cspan id='cnzz_stat_icon_1267002346'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1267002346%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));
       if (/(iPhone|iPad|Opera Mini|Android.*Mobile|NetFront|PSP|BlackBerry|Windows Phone)/ig.test(w.navigator.userAgent)) {
-//        let meta1 = d.createElement('meta')
-//        let meta2 = d.createElement('meta')
-//        let head = d.getElementsByTagName('head')[0]
-//        meta1.name = 'viewport'
-//        meta1.content = 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'
-//        meta2['http-equiv'] = 'Cache-Control'
-//        meta2.content = 'no-siteapp'
-//        head.appendChild(meta1)
-//        head.appendChild(meta2)
         var docEl = d.documentElement
         var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
         var recalc = function () {

components/mobile/Home.vue

@@ -132,9 +132,6 @@
         }
         return num
       },
-      loadCounts () {
-        this.$store.dispatch('loadProductCounts', { _status: 'actived' })
-      },
       onCancelSearch: function () {
         this.showMainSearch = false
       }

layouts/main.vue

@@ -1,19 +1,16 @@
 <template>
   <div id="main">
-    <header-view v-if="!isMobile"></header-view>
-    <main-header v-if="!isMobile"></main-header>
-    <main-nav v-if="!isMobile"></main-nav>
-    <mobile-header v-if="isMobile"></mobile-header>
+    <header-view></header-view>
+    <main-header></main-header>
+    <main-nav></main-nav>
     <nuxt/>
-    <footer-view v-if="!isMobile"></footer-view>
-    <right-bar v-if="!isMobile"></right-bar>
-    <mobile-footer v-else></mobile-footer>
+    <footer-view></footer-view>
+    <right-bar></right-bar>
   </div>
 </template>
 <script>
   import { Header, Footer, RightBar } from '~components/default'
   import { MainHeader, MainNav } from '~components/main'
-  import { MobileHeader, MobileFooter } from '~components/mobile'
   export default {
     name: 'main',
     components: {
@@ -21,9 +18,7 @@
       FooterView: Footer,
       RightBar,
       MainHeader,
-      MainNav,
-      MobileHeader,
-      MobileFooter
+      MainNav
     },
     head () {
       return {

layouts/mobile.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="mobile">
+    <mobile-header></mobile-header>
+    <nuxt/>
+    <mobile-footer></mobile-footer>
+  </div>
+</template>
+<script>
+  import { MobileHeader, MobileFooter } from '~components/mobile'
+  export default {
+    name: 'mobile',
+    components: {
+      MobileHeader,
+      MobileFooter
+    },
+    head () {
+      return {
+        meta: [
+          { name: 'apple-mobile-web-app-capable', content: 'yes' },
+          { name: 'MobileOptimized', content: '320' },
+          { name: 'HandheldFriendly', content: 'true' },
+          { name: 'viewport', content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' },
+          { 'http-equiv': 'Cache-Control', content: 'no-siteapp' }
+        ]
+      }
+    }
+  }
+</script>

nuxt.config.js

@@ -15,10 +15,7 @@ module.exports = {
       { charset: 'utf-8' },
       { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge,chrome=1' },
       { name: 'render', content: 'webkit' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no' },
-      { name: 'apple-mobile-web-app-capable', content: 'yes' },
-      { name: 'MobileOptimized', content: '320' },
-      { name: 'HandheldFriendly', content: 'true' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
       { hid: 'description', name: 'description', content: '优软商城（usoftmall.com）是中国领先的IC电子元器件现货采购交易网上商城，提供上千万种电子元器件现货采购交易，采购电子元器件就上优软商城！' }
     ],
     link: [

pages/index.vue

@@ -20,14 +20,8 @@
 
   export default {
     name: 'index',
-    layout: 'main',
-    fetch ({ store }) {
-      return !store.state.option.isMobile ? Promise.all([
-        store.dispatch('loadFloors'),
-        store.dispatch('loadBanners', {type: 'home'}),
-        store.dispatch('loadProductKinds', { id: 0 }),
-        store.dispatch('loadNewsSnapshot', { page: 1, pageSize: 10 })
-      ]) : []
+    layout (context) {
+      return context.store.state.option.isMobile ? 'mobile' : 'main'
     },
     components: {
       KindCategory,
@@ -38,6 +32,14 @@
       News,
       Home
     },
+    fetch ({store}) {
+      return !store.state.option.isMobile ? Promise.all([
+        store.dispatch('loadFloors'),
+        store.dispatch('loadBanners', {type: 'home'}),
+        store.dispatch('loadProductKinds', { id: 0 }),
+        store.dispatch('loadNewsSnapshot', { page: 1, pageSize: 10 })
+      ]) : []
+    },
     methods: {
       loadProductKinds (id) {
         this.$store.dispatch('loadAllProductKinds', {id})

pages/mobile/brand/_code.vue

@@ -4,7 +4,7 @@
 <script>
   import BrandDetail from '~components/mobile/brand/BrandDetail.vue'
   export default {
-    layout: 'main',
+    layout: 'mobile',
     components: {
       BrandDetail
     },

pages/mobile/brand/brandCenter/_initial.vue

@@ -4,7 +4,7 @@
 <script>
   import BrandCenter from '~components/mobile/brand/BrandCenter.vue'
   export default {
-    layout: 'main',
+    layout: 'mobile',
     components: {
       BrandCenter
     },

pages/mobile/brand/componentDetail/_uuid.vue

@@ -4,7 +4,7 @@
 <script>
   import ComponentDetail from '~components/mobile/brand/ComponentDetail.vue'
   export default {
-    layout: 'main',
+    layout: 'mobile',
     components: {
       ComponentDetail
     },

pages/mobile/search/_keycode.vue

@@ -50,7 +50,7 @@
 <script>
   import RemindBox from '~components/mobile/common/RemindBox.vue'
   export default {
-    layout: 'main',
+    layout: 'mobile',
     data () {
       return {
         activeType: 'store',

pages/mobile/shop/_uuid.vue

@@ -6,7 +6,7 @@
 <script>
   import StoreDetail from '~components/mobile/store/StoreDetail.vue'
   export default {
-    layout: 'main',
+    layout: 'mobile',
     fetch ({ store, params }) {
       return Promise.all([
         store.dispatch('shop/findStoreInfoFromUuid', params),

pages/mobile/shop/index.vue

@@ -32,7 +32,7 @@
 <script>
   import RemindBox from '~components/mobile/common/RemindBox.vue'
   export default {
-    layout: 'main',
+    layout: 'mobile',
     data () {
       return {
         page: '',

pages/mobile/user/index.vue

@@ -55,7 +55,7 @@
 <script>
   import RemindBox from '~components/mobile/common/RemindBox.vue'
   export default {
-    layout: 'main',
+    layout: 'mobile',
     data () {
       return {
         userName: '',