2

www/vue/src/components/mine.vue

@@ -1,41 +1,124 @@
 <template>
-	<div class="mine">
-		<h1>this is mine component</h1>
-		<ul>
-			<li v-for="item in products" >
-				{{item.name}}
-			</li>
-		</ul>
-		<button v-on:click="btn(usid)" :data-value="usid">点击</button>
+  <div class="mine">
+    <scroller>
+      <div class="user">
+        <!--<img class="head-background" :src="HeadBackground" alt="">-->
+        <img :src="userInfo.avatar" alt="">
+        <div>{{userInfo.user_name}}</div>
+      </div>
+      <div class="mine-type">
+        <div class="order"><img src="http://odulvej8l.bkt.clouddn.com/mine-%E8%AE%A2%E5%8D%95icon-01.png" alt="">
+          <div>订单</div>
+        </div>
+        <div class="recharge"><img src="http://odulvej8l.bkt.clouddn.com/mine-%E8%AE%A2%E5%8D%95icon-01.png" alt="">
+          <div>订单</div>
+        </div>
+        <div class="address-list"><img src="http://odulvej8l.bkt.clouddn.com/mine-%E8%AE%A2%E5%8D%95icon-01.png" alt="">
+          <div>订单</div>
+        </div>
+        <div class="contact"><img src="http://odulvej8l.bkt.clouddn.com/mine-%E8%AE%A2%E5%8D%95icon-01.png" alt="">
+          <div>订单</div>
+        </div>
+        <div class="coupon"><img src="http://odulvej8l.bkt.clouddn.com/mine-%E8%AE%A2%E5%8D%95icon-01.png" alt="">
+          <div>订单</div>
+        </div>
+        <div class="about"><img src="http://odulvej8l.bkt.clouddn.com/mine-%E8%AE%A2%E5%8D%95icon-01.png" alt="">
+          <div>订单</div>
+        </div>
+      </div>
+    </scroller>
     <navigation></navigation>
   </div>
 </template>
 <script type="text/javascript">
-  import { mapActions } from 'vuex'
-//  import config from '../config/config'
+  import {mapActions} from 'vuex'
+  import config from '../config/config'
   export default({
     data () {
       return {
-        usid: this.$store.state.user.userInfo.id,
+        userId: config.userId,
+        userInfo: this.$store.state.user.userInfo,
+        HeadBackground: 'http://odulvej8l.bkt.clouddn.com/mine-%E5%BA%95%E7%BA%B9.jpg',
         products: this.$store.state.product.products
       }
     },
+    beforeCreate () {
+      console.log(this.$store.state.user.userInfo)
+    },
     created () {
-//      console.log(this.$store.state.user)
-//      console.log(config.shopAddress)
     },
     methods: {
       ...mapActions([]),
       btn: function (a) {
-//        console.log(this.$store.state.product.products)
-//        console.log(this.$store.state.user)
       }
     }
   })
 </script>
-<style type="text/css" scoped>
-	button{
-		font-size: 2rem;
-		border:1px solid darkseagreen;
-	}
+<style type="text/css" lang="less" scoped>
+  button {
+    font-size: 2rem;
+    border: 1px solid darkseagreen;
+  }
+
+  .user {
+    width: 100%;
+    position: relative;
+    background: url("http://odulvej8l.bkt.clouddn.com/mine-%E5%BA%95%E7%BA%B9.jpg") no-repeat center;
+    background-size: 100%;
+    padding: 5% 0;
+    img:nth-child(1) {
+      width: 25%;
+      display: block;
+      margin: 0 auto;
+      border-radius: 50%;
+    }
+    & > div {
+      color: white;
+      margin-top: 1em;
+    }
+  }
+
+  .mine-type {
+    margin-top: 1em;
+    width: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    & > div {
+      float: left;
+      width: 33.33%;
+      border: 1px solid black;
+      padding-top: 5%;
+      padding-bottom: 5%;
+      text-align: center;
+      background: #ffffff;
+      &:nth-child(1){border-left: 0;}
+      &:nth-child(2){border-left: 0;border-right: 0;}
+      &:nth-child(3){border-left: 0;border-right: 0;}
+      & > img {
+        display: block;
+        width: 50%;
+        margin: 0 auto;
+      }
+      & > div {
+        display: block;
+        width: 100%;
+        border: 0;
+        padding: 0;
+      }
+    }
+  }
+
+  @media (max-width: 320px) {
+    .user {
+      img:nth-child(2) {
+        /*margin-top: 1em;*/
+      }
+      & > div {
+        font-size: 15px;
+      }
+    }
+  }
 </style>

www/vue/src/components/navigation.vue

@@ -6,12 +6,12 @@
         <img slot="icon-active" :src='iconHomeActive'>
         <span slot="label">首页</span>
       </tabbar-item>
-      <tabbar-item link="/addressList">
+      <tabbar-item link="/order">
         <img slot="icon" :src='iconOrder'>
         <img slot="icon-active" :src='iconOrderActive'>
         <span slot="label">订单</span>
       </tabbar-item>
-      <tabbar-item link="/order">
+      <tabbar-item link="/mine">
         <img slot="icon" :src='iconMine'>
         <img slot="icon-active" :src='iconMineActive'>
         <span slot="label">我的</span>

www/vue/src/components/order.vue

@@ -26,6 +26,7 @@
 				<button-tab-item><span class="vux-reddot-s">WERWERWE</span></button-tab-item>
 			</button-tab>
 		</div>
+    <navigation></navigation>
 	</div>
 </template>