个人中心

Author: No2015

src/components/cart/Index.vue

@@ -31,11 +31,11 @@
                   <p class="price">￥{{ item.price }}</p>
                   <ul class="flex-box num-box">
                     <li>
-                      <span class="bjs-btn btn-subtract bjs-btn-full tc font5" @click="item.num = item.num > 1 ? item.num - 1 : item.num; update(item.num, item.id)">-</span>
+                      <span class="bjs-btn btn-subtract bjs-btn-full tc font5" @click="item.num = item.num > 1 ? (update(item.num - 1, item.id),item.num - 1) : item.num">-</span>
                     </li>
                     <li class="flex-item-3 marl10"><input class="bjs-btn bjs-btn-full tc num" type="text" v-model="item.num" @blur="item.num = item.num * 1 < 1 ? 1 : item.num * 1; update(item.num, item.id)" @input="item.num = (item.num + '').replace(/[^\d]*/g,'')"></li>
                     <li class="marl10">
-                      <span class="bjs-btn btn-add bjs-btn-full tc font5" @click="item.num = item.num < 10000 ? item.num + 1 : item.num; update(item.num, item.id)">+</span>
+                      <span class="bjs-btn btn-add bjs-btn-full tc font5" @click="item.num = item.num < 10000 ? (update(item.num + 1, item.id),item.num + 1) : item.num">+</span>
                     </li>
                   </ul>
                 </li>

src/components/center/Index.vue

@@ -1,19 +1,35 @@
 <template>
-  <div class="user">
-    
+  <div id="content">
+    <div>{{ userInfo }}</div>
+    <CenterOrder />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
+import CenterOrder from './Order.vue';
 
 @Component({
   components: {
-    // HelloWorld,
+    CenterOrder,
   },
 })
 export default class CenterIndex extends Vue {
-
+  get userInfo() {
+    return this.$store.state.userInfo;
+  }
 }
 </script>
+
+<style lang="less" scoped>
+#content{
+  top: 0;
+  bottom: 42px;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  z-index: 1;
+  overflow: auto;
+}
+</style>
+

src/components/center/Order.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="order">
+    <ul class="flex-box">
+      <li>
+        <span class="icon-weizhifu"></span>
+        <span>未支付</span>
+        <span>{{ order.s0 }}</span>
+      </li>
+      <li>
+        <span class="icon-yizhifu"></span>
+        <span>已支付</span>
+        <span>{{ order.s1 }}</span>
+      </li>
+      <li>
+        <span class="icon-yiwancheng"></span>
+        <span>已完成</span>
+        <span>{{ order.s2 }}</span>
+      </li>
+      <li>
+        <span class="icon-yiquxiao"></span>
+        <span>已取消</span>
+        <span>{{ order.s3 }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component
+export default class CenterOrder extends Vue {
+  get order() {
+    return this.$store.state.center.order;
+  }
+}
+</script>
+

src/store.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import axios from '@/global/axios';
-import { userInfo, goodsDetail, cart } from '@/store/model';
+import { userInfo, goodsDetail, cart, center } from '@/store/model';
 
 Vue.use(Vuex);
 export default new Vuex.Store({
@@ -17,6 +17,7 @@ export default new Vuex.Store({
     goodsDetail,
     userInfo,
     cart,
+    center,
   },
   mutations: {
     setSearchKeywords(state, keywords) {
@@ -57,6 +58,9 @@ export default new Vuex.Store({
     setGoodsDetail(state, detail) {
       state.goodsDetail = detail;
     },
+    setCenterOrder(state, order) {
+      state.center.order = order;
+    },
     setUser(state, info) {
       state.userInfo = info;
     },
@@ -126,6 +130,12 @@ export default new Vuex.Store({
       });
       context.commit('setPageLoad', !1);
     },
+    initCenterPage(context) {
+      axios.get('/api/centerOrder.json', {}).then((response: any) => {
+        context.commit('setCenterOrder', response.data);
+      });
+      context.commit('setPageLoad', !1);
+    },
     initUserInfo(context) {
       if (context.state.userInfo.id !== 0) {
         return !1;

src/store/model.ts

@@ -24,3 +24,11 @@ export const cart = {
     amount: 0,
     list: [],
 };
+export const center = {
+    order: {
+        s0: 0,
+        s1: 0,
+        s2: 0,
+        s3: 0,
+    },
+};

src/views/Center.vue

@@ -1,19 +1,24 @@
 <template>
-  <div class="center">
-    
+  <div class="home-page">
+    <Content />
+    <Footer />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
+import Content from '@/components/center/Index.vue';
+import Footer from '@/components/layout/Footer.vue';
 
 @Component({
   components: {
-    // HelloWorld,
+    Content,
+    Footer,
   },
 })
 export default class Center extends Vue {
-
+  public created() {
+    this.$store.dispatch('initCenterPage');
+  }
 }
 </script>