91 lines
1.8 KiB
Vue
91 lines
1.8 KiB
Vue
<template>
|
||
<div>
|
||
<Table border ref="selection" :columns="columns" :data="shoppingCart" size="large" no-data-text="您的购物车没有商品，请先添加商品到购物车再点击购买">
|
||
<template slot-scope="{row}" slot="price">
|
||
<span>{{row.price | unitPrice('￥')}}</span>
|
||
</template>
|
||
</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,
|
||
slot: '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>
|