Merge branch 'test' of git.oschina.net:yiguanjia/php into test

www/vue/src/components/mine.vue

@@ -6,26 +6,12 @@
         <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>
+      <!--选择-->
+      <group>
+        <cell :title="(item.name)" is-link v-for="item in userList" value-align="left" :link="{path: item.link}">
+          <img slot="icon" width="20" style="display:block;margin-right:5px;" :src="item.icon">
+        </cell>
+      </group>
     </scroller>
     <navigation></navigation>
   </div>
@@ -33,15 +19,47 @@
 <script type="text/javascript">
   import {mapActions} from 'vuex'
   import config from '../config/config'
+  import {Cell, Group} from 'vux'
   export default({
     data () {
       return {
         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
+        products: this.$store.state.product.products,
+        userList: [
+          {
+            name: '地址',
+            icon: 'http://odulvej8l.bkt.clouddn.com/mine-%E5%9C%B0%E5%9D%80icon-01-01.png',
+            link: '/addressList'
+          },
+          {
+            name: '订单',
+            icon: 'http://odulvej8l.bkt.clouddn.com/mine-%E8%AE%A2%E5%8D%95icon-01.png',
+            link: '/order'
+          },
+          {
+            name: '用户余额',
+            icon: 'http://odulvej8l.bkt.clouddn.com/mine-%E5%85%85%E5%80%BC%E5%8D%A1icon-01-01.png',
+            link: '/balanceLog'
+          },
+          {
+            name: '代金券',
+            icon: 'http://odulvej8l.bkt.clouddn.com/mine-%E4%BB%A3%E9%87%91%E5%88%B8icon-01-01-01.png',
+            link: '/balanceLog'
+          },
+          {
+            name: '关于',
+            icon: 'http://odulvej8l.bkt.clouddn.com/mine-%E5%85%B3%E4%BA%8Eicon-01-01-01.png',
+            link: '/balanceLog'
+          }
+        ]
       }
     },
+    components: {
+      Group,
+      Cell
+    },
     beforeCreate () {
       console.log(this.$store.state.user.userInfo)
     },
@@ -66,6 +84,7 @@
     background: url("http://odulvej8l.bkt.clouddn.com/mine-%E5%BA%95%E7%BA%B9.jpg") no-repeat center;
     background-size: 100%;
     padding: 5% 0;
+    margin-bottom: 1em;
     img:nth-child(1) {
       width: 25%;
       display: block;
@@ -79,34 +98,37 @@
   }
 
   .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%;
+      width: 33.18%;
+      box-sizing: border-box;
       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;
+      &:nth-child(1) {
+        div {
+          border-left: 0;
+        }
+      }
+      &:nth-child(3) {
+        div {
+          border-right: 0;
+        }
       }
       & > div {
-        display: block;
         width: 100%;
-        border: 0;
+        border: 1px solid black;
         padding: 0;
+        font-size: 18px;
+        line-height: 20px;
+      }
+      img {
+        display: block;
+        width: 50%;
+        margin: 15px auto;
       }
     }
   }

www/vue/src/components/order.vue

@@ -9,7 +9,7 @@
 					<button-tab-item  @on-item-click="consoleIndex(2)">已取消</button-tab-item>
 				</button-tab>
 			</div>
-			<div>
+			<div style="padding-bottom: 16%;">
 				<div class="order-block" v-for="order in orderList">
 					<div class="row_first order-line">
 						<span >订单时间</span>
@@ -218,11 +218,11 @@
 				padding: 2px;
 				border:1px #D3D3D3 solid;
 				color:#D3D3D3;
-				text-align: right;
+				text-align: center;
 			}
 			&:nth-child(3){
 				width: 20%;
-				text-align: right;
+				text-align: center;
 				border:1px #E16E00 solid;
 				color:#E16E00;
 				margin-right: 8px;

www/vue/src/main.js

@@ -52,6 +52,7 @@ Vue.component('addressDetail', require('./components/address/addressDetail.vue')
 Vue.component('addPoisiton', require('./components/address/addressPoisiton.vue'))
 
 Vue.component('mine', require('./components/mine.vue')) // 个人中心
+Vue.component('balanceLog', require('./components/balanceLog.vue')) // 用户余额
 Vue.component('navigation', require('./components/navigation')) // SAP底部导航
 Vue.component('swiper', require('./components/swiper')) // 轮播图
 Vue.component('navTitle', require('./components/navTitle')) // SAP顶部标题

www/vue/src/router/index.js

@@ -4,6 +4,7 @@ export default[
   {path: '/product', name: 'product', component: require('../components/product')},
   {path: '/placeOrder', name: 'placeOrder', component: require('../components/placeOrder.vue')},
   {path: '/mine', name: 'mine', component: require('../components/mine')},
+  {path: '/balanceLog', name: 'balanceLog', component: require('../components/balanceLog.vue')},
   {path: '/order', name: 'order', component: require('../components/order')},
   {path: '/orderInfo', component: require('../components/orderInfo')},
   {path: '/completeOrder', component: require('../components/completeOrder')},