commit message

buyer/src/pages/home/MyShoppingCart.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <Table border ref="selection" :columns="columns" :data="shoppingCart" size="large" no-data-text="您的购物车没有商品，请先添加商品到购物车再点击购买"></Table>
+    <div class="go-to">
+      <Button @click="goTo" type="primary">去付款</Button>
+    </div>
+  </div>
+</template>
+
+<script>
+import store from '@/vuex/store';
+import { mapState, mapActions } from 'vuex';
+export default {
+  name: 'MyShoppingCart',
+  data () {
+    return {
+      columns: [ // 表格表头
+        {
+          type: 'selection',
+          width: 58,
+          align: 'center'
+        },
+        {
+          title: '图片',
+          key: 'img',
+          width: 86,
+          render: (h, params) => {
+            return h('div', [
+              h('img', {
+                attrs: {
+                  src: params.row.img
+                }
+              })
+            ]);
+          },
+          align: 'center'
+        },
+        {
+          title: '标题',
+          key: 'title',
+          align: 'center'
+        },
+        {
+          title: '套餐',
+          width: 198,
+          key: 'package',
+          align: 'center'
+        },
+        {
+          title: '数量',
+          key: 'count',
+          width: 68,
+          align: 'center'
+        },
+        {
+          title: '价格',
+          width: 68,
+          key: 'price',
+          align: 'center'
+        }
+      ]
+    };
+  },
+  created () {
+    this.loadShoppingCart();
+  },
+  computed: {
+    ...mapState(['shoppingCart'])
+  },
+  methods: {
+    ...mapActions(['loadShoppingCart']),
+    goTo () {
+      this.$router.push('/cart');
+    }
+  },
+  store
+};
+</script>
+
+<style scoped>
+.go-to {
+  margin: 15px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>