我的收藏和店铺列表页面，加载后台数据

components/mobile/Home.vue

@@ -88,245 +88,245 @@
 </template>
 
 <script>
-export default {
-  name: 'home',
-  data () {
-    return {
-      keyword: '',
-      activeType: 'model',
-      associate: ''
-    }
-  },
-  props: {
-    hotwords: {
-      type: Array,
-      default () {
-        return [
-          {name: 'SCT2080KEC', url: '/product/component/1100400300009990'},
-          {name: '电池组', url: '/product/kind/346'},
-          {name: 'Vishay', url: '/product/brand/30327265e42a871be050007f01003d96'},
-          {name: 'Panasonic', url: '/product/brand/30327265e47d871be050007f01003d96'}
-        ]
+  export default {
+    name: 'home',
+    data () {
+      return {
+        keyword: '',
+        activeType: 'model',
+        associate: ''
+      }
+    },
+    props: {
+      hotwords: {
+        type: Array,
+        default () {
+          return [
+            {name: 'SCT2080KEC', url: '/product/component/1100400300009990'},
+            {name: '电池组', url: '/product/kind/346'},
+            {name: 'Vishay', url: '/product/brand/30327265e42a871be050007f01003d96'},
+            {name: 'Panasonic', url: '/product/brand/30327265e47d871be050007f01003d96'}
+          ]
+        }
       }
-    }
-  },
-  methods: {
-    onFocus () {
-      this.associate = true
     },
-    onSearch () {
-      if (this.keyword) {
-        this.$router.push({path: '/mobile/search?w=' + encodeURIComponent(this.keyword)})
+    methods: {
+      onFocus () {
+        this.associate = true
+      },
+      onSearch () {
+        if (this.keyword) {
+          this.$router.push({path: '/mobile/search?w=' + encodeURIComponent(this.keyword)})
+        }
       }
+    },
+    created () {
+      this.$store.dispatch('resetSearchKeywords')
     }
-  },
-  created () {
-    this.$store.dispatch('resetSearchKeywords')
   }
-}
 </script>
 
 <style lang="scss" scoped>
-.home{
-  font-size:.28rem;
-  margin-bottom:1rem;
-  margin-top:.88rem;
+  .home{
+    font-size:.28rem;
+    margin-bottom:1rem;
+    margin-top:.88rem;
   .home-header{
     width:100%;
     padding-top:1.3rem;
     background:#ecede2;
     padding-bottom:1rem;
-    .home-top{
-      text-align: center;
-      margin-bottom:.4rem;
-      p{
-        font-size:.32rem;
-        color:rgb(23,21,26);
-      }
-    }
-    .home-search{
-      width:6rem;
-      line-height: .3rem;
-      margin:0 auto;
-      ul{
-        display:inline-flex;
-      li{
-        flex:1;
-        text-align:center;
-      span{
-        display:inline-block;
-        width:.72rem;
-        line-height:.32rem;
-        height:.32rem;
-        background: #fff;
-        color:#000;
-        border-radius: .05rem .05rem 0 0 ;
-      }
-      }
-      li.active{
-        span{
-          background: #3c7cf5;
-          color:#fff;
-          cursor:pointer;
-        }
-      }
-    }
-    input{
-      width:6rem;
-      padding: 0 1.2rem 0 .16rem;
-      margin-right:-1rem;
-      font-size:.24rem;
-      line-height: .61rem;
-      border:.02rem solid #3c7cf5;
-      border-radius:.05rem;
-    }
-    span{
-      display:inline-block;
-      text-align: center;
-      width:1rem;
-      height:.63rem;
-      line-height: .63rem;
-      font-size:.23rem;
-      border-left:none;
-      border-radius:   0 .05rem .05rem 0;
-      background: #3c7cf5;
-      color:#fff;
-    }
-    }
+  .home-top{
+    text-align: center;
+    margin-bottom:.4rem;
+  p{
+    font-size:.32rem;
+    color:rgb(23,21,26);
+  }
+  }
+  .home-search{
+    width:6rem;
+    line-height: .3rem;
+    margin:0 auto;
+  ul{
+    display:inline-flex;
+  li{
+    flex:1;
+    text-align:center;
+  span{
+    display:inline-block;
+    width:.72rem;
+    line-height:.32rem;
+    height:.32rem;
+    background: #fff;
+    color:#000;
+    border-radius: .05rem .05rem 0 0 ;
+  }
+  }
+  li.active{
+  span{
+    background: #3c7cf5;
+    color:#fff;
+    cursor:pointer;
+  }
+  }
+  }
+  input{
+    width:6rem;
+    padding: 0 1.2rem 0 .16rem;
+    margin-right:-1rem;
+    font-size:.24rem;
+    line-height: .61rem;
+    border:.02rem solid #3c7cf5;
+    border-radius:.05rem;
+  }
+  span{
+    display:inline-block;
+    text-align: center;
+    width:1rem;
+    height:.63rem;
+    line-height: .63rem;
+    font-size:.23rem;
+    border-left:none;
+    border-radius:   0 .05rem .05rem 0;
+    background: #3c7cf5;
+    color:#fff;
+  }
+  }
+  }
+  }
+  .home-main{
+    width:100%;
+    display:flex;
+    justify-content:space-between;
+    flex-wrap:wrap;
+    text-align: center;
+    padding-top:1rem;
+    background: #f7fbff;
+  }
+  .home-main a.home-main-content {
+    width:33%;
+    margin-bottom:.55rem;
+  }
+  .home-main .home-main-content div{
+    border-radius: .2rem;
+    width:1.14rem;
+    height:1.14rem;
+    margin:0 auto;
+    position:relative;
+  }
+  .home-main .home-main-content div:first-child{
+    background:rgb(255,48,100);
+  }
+  .home-main .home-main-content:nth-child(2) div{
+    background:rgb(250,103,67);
+  }
+  .home-main .home-main-content:nth-child(3) div {
+    background: rgb(252, 184, 54);
+  }
+  .home-main .home-main-content:nth-child(4) div{
+    background:rgb(99,147,255);
+  }
+  .home-main .home-main-content:nth-child(5) div{
+    background:rgb(67,201,173);
+  }
+  .home-main .home-main-content:last-child div{
+    background:rgb(135,201,79);
+  }
+  .home-main .home-main-content div>img{
+    width: .8rem;
+    height:.8rem;
+    position:absolute;
+    left:50%;
+    top:50%;
+    margin-left:-36%;
+    margin-top:-36%;
   }
-}
-.home-main{
-  width:100%;
-  display:flex;
-  justify-content:space-between;
-  flex-wrap:wrap;
-  text-align: center;
-  padding-top:1rem;
-  background: #f7fbff;
-}
-.home-main a.home-main-content {
-  width:33%;
-  margin-bottom:.55rem;
-}
-.home-main .home-main-content div{
-  border-radius: .2rem;
-  width:1.14rem;
-  height:1.14rem;
-  margin:0 auto;
-  position:relative;
-}
-.home-main .home-main-content div:first-child{
-  background:rgb(255,48,100);
-}
-.home-main .home-main-content:nth-child(2) div{
-  background:rgb(250,103,67);
-}
-.home-main .home-main-content:nth-child(3) div {
-  background: rgb(252, 184, 54);
-}
-.home-main .home-main-content:nth-child(4) div{
-  background:rgb(99,147,255);
-}
-.home-main .home-main-content:nth-child(5) div{
-  background:rgb(67,201,173);
-}
-.home-main .home-main-content:last-child div{
-  background:rgb(135,201,79);
-}
-.home-main .home-main-content div>img{
-  width: .8rem;
-  height:.8rem;
-  position:absolute;
-  left:50%;
-  top:50%;
-  margin-left:-36%;
-  margin-top:-36%;
-}
 
-.home-main .home-main-content p{
-  font-size:.28rem;
-  color:rgb(51,51,51);
-  line-height: .52rem;
-}
-.home-main .home-main-content h2{
-  font-size:.3rem;
-  color:#ff7800;
-  line-height: .32rem;
-  margin:0;
-  margin-top:.1rem;
-}
+  .home-main .home-main-content p{
+    font-size:.28rem;
+    color:rgb(51,51,51);
+    line-height: .52rem;
+  }
+  .home-main .home-main-content h2{
+    font-size:.3rem;
+    color:#ff7800;
+    line-height: .32rem;
+    margin:0;
+    margin-top:.1rem;
+  }
 
-/*  搜索记录  */
-.home-search-list {
-  position:absolute;
-  top:4.5rem;
-  width:100%;
-  min-height: 4rem;
-  background: #fff;
-}
-.home-search-list div{
-  width:6.55rem;
-  margin:0 auto;
-  margin-top:.1rem;
-  padding-bottom:.2rem;
+  /*  搜索记录  */
+  .home-search-list {
+    position:absolute;
+    top:4.5rem;
+    width:100%;
+    min-height: 4rem;
+    background: #fff;
+  }
+  .home-search-list div{
+    width:6.55rem;
+    margin:0 auto;
+    margin-top:.1rem;
+    padding-bottom:.2rem;
   .search-list-top{
-    h5{
-      font-size:.3rem;
-      position:relative;
-      line-height: .4rem;
-      color:rgb(102,102,102);
-      i{
-        position:absolute;
-        right:0;
-      }
-    }
-    .search-list-item{
-      a{
-        display:inline-block;
-        font-size:.28rem;
-        line-height: .45rem;
-        color:rgb(102,102,102);
-        background: #fff;
-        padding:0 .1rem;
-        width:2.18rem;
-        overflow:hidden;
-        text-overflow : ellipsis;
-        &:nth-child(2){
-           border-left:1px solid #a5a6a6;
-           border-right:1px solid #a5a6a6;
-           text-align: center;
-         }
-        &:nth-child(5){
-           border-left:1px solid #a5a6a6;
-           border-right:1px solid #a5a6a6;
-           text-align: center;
-         }
-      }
-    }
+  h5{
+    font-size:.3rem;
+    position:relative;
+    line-height: .4rem;
+    color:rgb(102,102,102);
+  i{
+    position:absolute;
+    right:0;
+  }
+  }
+  .search-list-item{
+  a{
+    display:inline-block;
+    font-size:.28rem;
+    line-height: .45rem;
+    color:rgb(102,102,102);
+    background: #fff;
+    padding:0 .1rem;
+    width:2.18rem;
+    overflow:hidden;
+    text-overflow : ellipsis;
+  &:nth-child(2){
+     border-left:1px solid #a5a6a6;
+     border-right:1px solid #a5a6a6;
+     text-align: center;
+   }
+  &:nth-child(5){
+     border-left:1px solid #a5a6a6;
+     border-right:1px solid #a5a6a6;
+     text-align: center;
+   }
+  }
+  }
   }
   .search-list-bottom{
     margin-top:-.07rem;
-    h5{
-      color:rgb(255,120,0);
-      font-size:.3rem;
-      text-align: center;
-      i{
-        margin-right:.15rem;
-      }
-    }
-    a{
-      display:inline-block;
-      font-size:.24rem;
-      color:rgb(255,120,0);
-      background: #fff;
-      max-width:1.62rem;
-      line-height: .35rem;
-      padding:0 .1rem;
-      border:1px solid rgb(255,120,0);
-      overflow:hidden;
-      text-overflow : ellipsis;
-      margin-left:.12rem;
-    }
+  h5{
+    color:rgb(255,120,0);
+    font-size:.3rem;
+    text-align: center;
+  i{
+    margin-right:.15rem;
+  }
+  }
+  a{
+    display:inline-block;
+    font-size:.24rem;
+    color:rgb(255,120,0);
+    background: #fff;
+    max-width:1.62rem;
+    line-height: .35rem;
+    padding:0 .1rem;
+    border:1px solid rgb(255,120,0);
+    overflow:hidden;
+    text-overflow : ellipsis;
+    margin-left:.12rem;
+  }
+  }
   }
-}
 </style>

components/mobile/MobileFooter.vue

@@ -1,12 +1,25 @@
 <template>
-<div class="mobile-footer">
-    <nuxt-link to="/"><i class="fa fa-camera-retro"></i><p>首页</p></nuxt-link>
-    <nuxt-link to="/mobile/shop"><i class="fa fa-camera-retro"></i><p>店铺</p></nuxt-link>
-    <nuxt-link to="/mobile/user"><i class="fa fa-camera-retro"></i><p>我</p></nuxt-link>
-</div>
+  <div class="mobile-footer">
+    <span :class="activeType=='home'?'active':''" @click="activeType='home'">
+      <nuxt-link to="/"><i class="fa fa-camera-retro"></i><p>首页</p></nuxt-link>
+    </span>
+    <span :class="activeType=='shops'?'active':''" @click="activeType='shops'">
+      <nuxt-link to="/mobile/shop"><i class="fa fa-camera-retro"></i><p>店铺</p></nuxt-link>
+    </span>
+    <span :class="activeType=='user'?'active':''" @click="activeType='user'">
+      <nuxt-link to="/mobile/user"><i class="fa fa-camera-retro"></i><p>我</p></nuxt-link>
+    </span>
+  </div>
 </template>
 <script>
-
+  export default{
+    name: 'MobileFooter',
+    data () {
+      return {
+        activeType: ''
+      }
+    }
+  }
 </script>
 <style scoped>
   .mobile-footer{
@@ -17,17 +30,21 @@
     display:flex;
     text-align: center;
     justify-content:space-between;
-    /*align-items:center;*/
     border-top:1px solid #ccc;
     background: #ffffff;
   }
-  .mobile-footer a{
+  .mobile-footer span{
     flex:1;
     font-size:16px;
     color:#b0b0b0;
     padding-top:5px;
   }
-  .mobile-footer a:hover{
+
+  .mobile-footer span a{
+    color:#b0b0b0;
+  }
+
+  .mobile-footer span.active a{
     color:#3976f4;
   }
 </style>

components/mobile/MobileHeader.vue

@@ -1,28 +1,28 @@
 <template>
-<div class="mobile-header">
-  <nuxt-link class="fa fa-camera-retro fa-2x" to="/">返回</nuxt-link>
-  <p>优软商城</p>
-  <nuxt-link class="fa fa-camera-retro fa-2x" to="/"></nuxt-link>
-</div>
+  <div class="mobile-header">
+    <nuxt-link class="fa fa-camera-retro fa-2x" to="/">返回</nuxt-link>
+    <p>优软商城</p>
+    <nuxt-link class="fa fa-camera-retro fa-2x" to="/"></nuxt-link>
+  </div>
 </template>
 <script>
 
 </script>
 <style>
-.mobile-header{
-  width:100%;
-  position:fixed;
-  top:0;
-  z-index:10000;
-  height:44px;
-  display:flex;
-  justify-content:space-around;
-  align-items:center;
-  border-bottom:1px solid #ccc;
-  background: #3e82f5;
-  padding:0 20px 0 10px;
-  color:#fff;
-}
+  .mobile-header{
+    width:100%;
+    position:fixed;
+    top:0;
+    z-index:10000;
+    height:44px;
+    display:flex;
+    justify-content:space-around;
+    align-items:center;
+    border-bottom:1px solid #ccc;
+    background: #3e82f5;
+    padding:0 20px 0 10px;
+    color:#fff;
+  }
   .mobile-header p{
     flex:1;
     font-size:18px;

components/mobile/search/goodList.vue

@@ -1,26 +1,26 @@
 <template>
-<div class="detail-brand" >
-  <div v-for="(item, index) in productList.components" v-if="productList.components">
-    <div class="brand-item">
-      <p>型号：<span>{{item.code}}</span></p>
-      <p>品牌：<span>{{item.brand.nameCn}}</span></p>
-      <p>产品描述：<span>{{item.kind.nameCn}}</span></p>
-      <i></i>
+  <div class="detail-brand" >
+    <div v-for="(item, index) in productList.components" v-if="productList.components">
+      <div class="brand-item">
+        <p>型号：<span>{{item.code}}</span></p>
+        <p>品牌：<span>{{item.brand.nameCn}}</span></p>
+        <p>产品描述：<span>{{item.kind.nameCn}}</span></p>
+        <i></i>
+      </div>
     </div>
-  </div>
 
-</div>
+  </div>
 </template>
 
 <script>
-    export default {
-      name: 'MobileGoodList',
-      computed: {
-        productList () {
-          return this.$store.state.searchData.searchList.lists.data
-        }
+  export default {
+    name: 'MobileGoodList',
+    computed: {
+      productList () {
+        return this.$store.state.searchData.searchList.lists.data
       }
     }
+  }
 </script>
 
 <style scoped lang="scss">
@@ -29,20 +29,20 @@
     width:100%;
     min-height:1.5rem;
     padding-top:.2rem;
-    .brand-item{
-      width:7rem;
-      margin:0 auto;
-      border-radius:.1rem;
-      background: #fff;
-      padding:.2rem;
-      p{
-        font-size:.28rem;
-        line-height:.4rem;
-        color:#333;
-        margin:0;
-        span{}
-      }
-      i{}
-    }
+  .brand-item{
+    width:7rem;
+    margin:0 auto;
+    border-radius:.1rem;
+    background: #fff;
+    padding:.2rem;
+  p{
+    font-size:.28rem;
+    line-height:.4rem;
+    color:#333;
+    margin:0;
+  span{}
+  }
+  i{}
+  }
   }
 </style>

pages/mobile/search/_keycode.vue

@@ -40,22 +40,22 @@
   .search-list{
     margin-top:.88rem;
     width:100%;
-    .search-item{
-      justify-content: space-around;
-      text-align: center;
-      display:flex;
-      span{
-        display:inline-block;
-        width:1.41rem;
-        line-height: .76rem;
-        font-size:.32rem;
-        color:#666;
-      }
-      span.active{
-        color:#3976f4;
-        border-bottom:2px solid #3976f4;
-      }
-    }
+  .search-item{
+    justify-content: space-around;
+    text-align: center;
+    display:flex;
+  span{
+    display:inline-block;
+    width:1.41rem;
+    line-height: .76rem;
+    font-size:.32rem;
+    color:#666;
+  }
+  span.active{
+    color:#3976f4;
+    border-bottom:2px solid #3976f4;
+  }
+  }
   }
 
 </style>

pages/mobile/shop/index.vue

@@ -5,19 +5,19 @@
       <a href="#">全部</a>
     </div>
     <div class="shop-list" v-for="item in list.content">
-        <h3>{{item.storeName}}</h3>
-        <div class="list-item">
-          <div class="item-img">
-            <i></i>
-            <img :src="item.bannerUrl || '/images/component/default.png'" alt="">
-          </div>
-          <div class="list-item-phone">
-            <p>电话：<span>{{item.enterprise.enTel}}</span></p>
-            <p>传真：<span>{{item.enterprise.enFax}}</span></p>
-            <p>商家介绍： <a href="#">点击查看</a></p>
-            <i></i>
-          </div>
+      <h3>{{item.storeName}}</h3>
+      <div class="list-item">
+        <div class="item-img">
+          <i></i>
+          <img :src="item.bannerUrl || '/images/component/default.png'" alt="">
         </div>
+        <div class="list-item-phone">
+          <p>电话：<span>{{item.enterprise.enTel}}</span></p>
+          <p>传真：<span>{{item.enterprise.enFax}}</span></p>
+          <p>商家介绍： <a href="#">点击查看</a></p>
+          <i></i>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -50,70 +50,70 @@
     margin-top:1rem;
     min-height: 10rem;
     background: #e2e4e6;
-    .shop-top{
-      display:inline-flex;
-      justify-content: space-between;
-      align-items: center;
-      width:100%;
-      height:1.14rem;
-      padding:0 .3rem;
-      background:#fff;
-      p{
-        font-size:.24rem;
-        color:#000;
-        span{
-          font-size:.3rem;
-          color:#f94f28;
-          margin:0 .1rem;
-        }
-      };
-      a{
-        font-size:.28rem;
-      }
-    }
+  .shop-top{
+    display:inline-flex;
+    justify-content: space-between;
+    align-items: center;
+    width:100%;
+    height:1.14rem;
+    padding:0 .3rem;
+    background:#fff;
+  p{
+    font-size:.24rem;
+    color:#000;
+  span{
+    font-size:.3rem;
+    color:#f94f28;
+    margin:0 .1rem;
+  }
+  };
+  a{
+    font-size:.28rem;
+  }
+  }
   .shop-list {
     background:#fff;
     margin-top:.12rem;
     padding-bottom:.28rem;
-    h3{
-      font-size:.32rem;
-      line-height: .8rem;
-      margin:0;
-      margin-left:.27rem;
-      margin-bottom:.14rem;
-    }
-    .list-item{
-      width:6.77rem;
-      margin-left:.39rem;
-      justify-content: space-around;
-      display:inline-flex;
-      .item-img{
-        position:relative;
-        width:2.42rem;
-        height:1.69rem;
-        i{
-          position:absolute;
-          top:0;
-          left:0;
-          background: url(/images/component/default.png);
-        }
-        img{
-          display:inline-block;
-          width:100%;
-          height:100%;
-        }
-      }
-      .list-item-phone{
-        width:3.95rem;
-        padding-top:.18rem;
-        p{
-          font-size:.28rem;
-          line-height: .45rem;
-          margin:0;
-        }
-      }
-    }
-   }
-}
+  h3{
+    font-size:.32rem;
+    line-height: .8rem;
+    margin:0;
+    margin-left:.27rem;
+    margin-bottom:.14rem;
+  }
+  .list-item{
+    width:6.77rem;
+    margin-left:.39rem;
+    justify-content: space-around;
+    display:inline-flex;
+  .item-img{
+    position:relative;
+    width:2.42rem;
+    height:1.69rem;
+  i{
+    position:absolute;
+    top:0;
+    left:0;
+    background: url(/images/component/default.png);
+  }
+  img{
+    display:inline-block;
+    width:100%;
+    height:100%;
+  }
+  }
+  .list-item-phone{
+    width:3.95rem;
+    padding-top:.18rem;
+  p{
+    font-size:.28rem;
+    line-height: .45rem;
+    margin:0;
+  }
+  }
+  }
+  }
+  }
 
 </style>

pages/mobile/user/_uuid.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="user-content">
+    <div class="user-name">
+      <img src="/images/component/default.png"/>
+      <p>{{userName}}uu用户名</p>
+      <a href="#">全部收藏<i></i></a>
+    </div>
+    <div class="shop-list">
+      <h3>{{}}</h3>
+      <div class="list-item">
+        <div class="item-img">
+          <i></i>
+          <img src="/images/component/default.png" alt="">
+        </div>
+        <div class="list-item-phone">
+          <p>电话：<span>0755-1234567</span></p>
+          <p>传真：<span>0755-1234567</span></p>
+          <p>商家介绍： <a href="#">点击查看</a></p>
+          <i></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    layout: 'main',
+    data () {
+      return {
+        userName: ''
+      }
+    },
+    fetch ({ store, storeName }) {
+      return Promise.all([
+        store.dispatch('shop/storeInfo', { storeName: storeName })
+      ])
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .user-content{
+    margin-top:1rem;
+    min-height: 10rem;
+    background: #e2e4e6;
+  .user-name{
+    padding:.14rem .38rem .09rem .34rem;
+    background:#fff;
+    display:flex;
+    align-items: center;
+    width:100%;
+  img{
+    display: inline-block;
+    width:1.25rem;
+    height:1.25rem;
+    border:.04rem solid #c5dbfc;
+    border-radius: .05rem;
+  }
+  p{
+    font-size:.32rem;
+    margin:0;
+    margin-left:.25rem;
+    flex:1;
+  }
+  a{
+    font-size:.32rem;
+  }
+  }
+  .shop-list {
+    background:#fff;
+    margin-top:.12rem;
+    padding-bottom:.28rem;
+  h3{
+    font-size:.32rem;
+    line-height: .8rem;
+    margin:0;
+    margin-left:.27rem;
+    margin-bottom:.14rem;
+  }
+  .list-item{
+    width:6.77rem;
+    margin-left:.39rem;
+    justify-content: space-around;
+    display:inline-flex;
+  .item-img{
+    width:2.42rem;
+  i{}
+  img{
+    width:2.4rem;
+    height:1.69rem;
+  }
+  }
+  .list-item-phone{
+    width:3.95rem;
+    padding-top:.18rem;
+  p{
+    font-size:.28rem;
+    line-height: .45rem;
+    margin:0;
+  }
+  }
+  }
+  }
+  }
+</style>