i

www/vue/src/App.vue

@@ -4,7 +4,7 @@
     <div class="router-view">
       <router-view></router-view>
     </div>
-    <navigation></navigation>
+
   </div>
 </template>
 
@@ -31,7 +31,7 @@
     top: 0%;
     left: 0;
     right: 0;
-    bottom: 46px;
+    bottom:0;
     /*background-color: #d3d3d3;*/
     background-color: rgba(211, 211, 211, 0.3);
   }

www/vue/src/components/home.vue

@@ -1,59 +1,78 @@
 <template>
   <div class="home">
-      <swiper></swiper>
-      <div class='home-img-1'>
-        <img :src='homeImg1' alt="">
-        <div class="home-nav">
-          <div class="">品牌</div>
-          <div class="">管家</div>
-          <div class="">证件</div>
-          <div class="">工具</div>
-          <div class=""><a href="http://commontest.yiguanjia.me/webapp/o2o/module/pay/">赔退</a></div>
-        </div>
+    <swiper></swiper>
+    <div class='home-img-1'>
+      <img :src='homeImg1' alt="">
+      <div class="home-nav">
+        <div class="">品牌</div>
+        <div class="">管家</div>
+        <div class="">证件</div>
+        <div class="">工具</div>
+        <div class=""><a href="http://commontest.yiguanjia.me/webapp/o2o/module/pay/">赔退</a></div>
       </div>
-      <homeList></homeList>
+    </div>
+    <homeList></homeList>
+    <navigation></navigation>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'home',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App',
-      homeImg1: 'http://odulvej8l.bkt.clouddn.com/%E5%9B%BE%E6%A0%87-01.jpg'
+  import {mapState, mapActions} from 'vuex'
+  export default {
+    name: 'home',
+    data () {
+      return {
+        msg: 'Welcome to Your Vue.js App',
+        homeImg1: 'http://odulvej8l.bkt.clouddn.com/%E5%9B%BE%E6%A0%87-01.jpg'
+      }
+    },
+    computed: mapState({
+      userInfo: state => state.userInfo
+    }),
+    created () {
+      this.PRODUCTLIST()
+      this.USERINFO()
+      console.log(this.$store.state.user.userId)
+    },
+    methods: {
+      ...mapActions([
+        'USERINFO',
+        'PRODUCTLIST'
+      ])
     }
   }
-}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.home-img-1{
-  background-color: #fff;
-  margin-top: 3%;
-  padding: 3% 0;
-  position: relative;
-}
-.home-img-1 img{
-  display: block;
-  width: 100%;
-}
-.home-img-1 .home-nav{
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 0 3%;
-  display: flex;
-  display: -moz-flex;
-  display: -webkit-flex;
-}
-.home-img-1 .home-nav div{
-  width: 20%;
-  color: rgba(0,0,0,0.5);
-  border: 1px solid rgba(0,0,0,0.5);
-  line-height: 54px;
-}
+  .home-img-1 {
+    background-color: #fff;
+    margin-top: 3%;
+    padding: 3% 0;
+    position: relative;
+  }
+
+  .home-img-1 img {
+    display: block;
+    width: 100%;
+  }
+
+  .home-img-1 .home-nav {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0 3%;
+    display: flex;
+    display: -moz-flex;
+    display: -webkit-flex;
+  }
+
+  .home-img-1 .home-nav div {
+    width: 20%;
+    color: rgba(0, 0, 0, 0.5);
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    line-height: 54px;
+  }
 </style>

www/vue/src/components/homeList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home-list">
     <ul>
-      <li v-for="items in productIcon">
+      <li v-for="items in productIcon" v-on:click="pro(items.name)">
         <div class="product-icon" :style="{backgroundColor:items.color}">
           <img :src='items.url'>
         </div>
@@ -14,84 +14,104 @@
 </template>
 
 <script>
-export default {
-  name: 'home',
-  data () {
-    return {
-      productIcon: [
-        {
-          name: '母婴房',
-          url: 'http://oduj3utzz.bkt.clouddn.com/home-mother-child.png',
-          color: '#a6dc48'
-        },
-        {
-          name: '日常清洁',
-          url: 'http://oduj3utzz.bkt.clouddn.com/home-daily.png',
-          color: '#76a6f6'
-        },
-        {
-          name: '深度清洁',
-          url: 'http://oduj3utzz.bkt.clouddn.com/home-depth.png',
-          color: '#5ecdec'
-        },
-        {
-          name: '专业除螨',
-          url: 'http://oduj3utzz.bkt.clouddn.com/home-mites.png',
-          color: '#b17ff6'
-        },
-        {
-          name: '家电清洗',
-          url: 'http://oduj3utzz.bkt.clouddn.com/home-appliances.png',
-          color: '#fabf4c'
-        },
-        {
-          name: '新居开慌',
-          url: 'http://oduj3utzz.bkt.clouddn.com/home-new-home.png',
-          color: '#5adde9'
-        },
-        {
-          name: '擦玻璃',
-          url: 'http://oduj3utzz.bkt.clouddn.com/home-ca-bo-li.png',
-          color: '#70df68'
-        },
-        {
-          name: '租房大扫除',
-          url: 'http://oduj3utzz.bkt.clouddn.com/home-renting.png',
-          color: '#fcac71'
+  export default {
+    name: 'home',
+    data () {
+      return {
+        productIcon: [
+          {
+            name: '母婴清洁',
+            url: 'http://oduj3utzz.bkt.clouddn.com/home-mother-child.png',
+            color: '#a6dc48'
+          },
+          {
+            name: '日常清洁',
+            url: 'http://oduj3utzz.bkt.clouddn.com/home-daily.png',
+            color: '#76a6f6'
+          },
+          {
+            name: '深度清洁',
+            url: 'http://oduj3utzz.bkt.clouddn.com/home-depth.png',
+            color: '#5ecdec'
+          },
+          {
+            name: '专业除螨',
+            url: 'http://oduj3utzz.bkt.clouddn.com/home-mites.png',
+            color: '#b17ff6'
+          },
+          {
+            name: '家电清洗',
+            url: 'http://oduj3utzz.bkt.clouddn.com/home-appliances.png',
+            color: '#fabf4c'
+          },
+          {
+            name: '新居开慌',
+            url: 'http://oduj3utzz.bkt.clouddn.com/home-new-home.png',
+            color: '#5adde9'
+          },
+          {
+            name: '擦玻璃',
+            url: 'http://oduj3utzz.bkt.clouddn.com/home-ca-bo-li.png',
+            color: '#70df68'
+          },
+          {
+            name: '租房大扫除',
+            url: 'http://oduj3utzz.bkt.clouddn.com/home-renting.png',
+            color: '#fcac71'
+          }
+        ]
+      }
+    },
+    methods: {
+      pro: function (productName) {
+        console.log(productName)
+        let products = this.$store.state.product.products
+        let id = ''
+        for (let i in products) {
+          if (products[i].name === productName) {
+            id = products[i].id
+          }
         }
-      ]
+        console.log(this.$store.state.user.userInfo.id)
+        console.log(this.$store.state.product.products)
+        // 带查询参数，变成 /register?plan=private
+        this.$router.push({path: 'product', query: {productId: id}})
+      }
     }
   }
-}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-  .home-list{
+  .home-list {
     margin-top: 3%;
     background-color: #FFF;
   }
-  .home-list ul{
+
+  .home-list ul {
     display: flex;
-    flex-wrap:wrap;
+    flex-wrap: wrap;
     padding: 5%;
   }
-  .home-list ul li{
+
+  .home-list ul li {
     width: 25%;
     font-size: 13px;
     list-style: none;
     margin: 5% 0;
     color: #212121;
   }
-  .product-icon{
+
+  .product-icon {
     width: 85%;
     margin: 0 auto;
     border-radius: 15px;
     padding: 15px 0;
   }
-  .product-icon img{
+
+  .product-icon img {
     display: block;
-    width:65%;
+    width: 65%;
     margin: 0 auto;
   }
 </style>

www/vue/src/components/mine.vue

@@ -7,6 +7,7 @@
 			</li>
 		</ul>
 		<button v-on:click="btn(usid)" :data-value="usid">点击</button>
+		<navigation></navigation>
 	</div>
 </template>
 <script type="text/javascript">

www/vue/src/components/order.vue

@@ -1,29 +1,19 @@
 <template lang="html">
 <div class="order">
   <h2>order</h2>
-  <ul>
-    <li v-for="item in userInfo">{{item.name}}</li>
-  </ul>
+  <h2>{{userId}}</h2>
+  <navigation></navigation>
 </div>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex'
-
 export default {
-  computed: mapState({
-    userInfo: state => state.userInfo
-  }),
-  created () {
-    this.USERINFO()
-  },
-  methods: {
-    ...mapActions([
-      'USERINFO'
-    ])
+  data () {
+    return {
+      userId: this.$store.state.user.userId
+    }
   }
 }
-
 </script>
 
 <style lang="css">

www/vue/src/components/product.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="product">
-    <h1>这里是</h1>
+    <h1>这里是product</h1>
   </div>
 </template>
 

www/vue/src/config/api.js

@@ -6,6 +6,7 @@ export default ({
   // 获取用户信息
   getO2oUserInfo: function (cb) {
     axios.post('o2o/user/info', config.formData).then(function (res) {
+      console.log(res.data)
       cb(res.data)
     })
   },
@@ -16,7 +17,7 @@ export default ({
     })
   },
   // 充值卡支付状态获取
-  getPayCharge: function (cb, data) {
+  getPayCharge: function (cb) {
     axios.get('o2o/recharge/payRecharge', config.formData).then(function (res) {
       cb(res.data)
     }).catch(function (error) {