<template>
? <div id="app">
? ? <div class="container">
? ? ? <h1>购物车</h1>
? ? ? <Table border :columns="columns1" :data="data1">
? ? ? ? <template slot-scope="{ row }" slot="pic">
? ? ? ? ? <!-- <strong>{{ row.name }}</strong> -->
? ? ? ? ? <img :src="row.pic" alt="" />
? ? ? ? </template>
? ? ? ? <template slot-scope="{ row }" slot="total">
? ? ? ? ? <span>{{ computedTotal(row.price, row.count) }}</span>
? ? ? ? </template>
? ? ? ? <template slot-scope="{ row, index }" slot="action">
? ? ? ? ? <Button type="error" @click="remove(index)">删除</Button>
? ? ? ? </template>
? ? ? </Table>
? ? ? <div class="footer">
? ? ? ? <h1>总计：{{ total }}</h1>
? ? ? ? <p>
? ? ? ? ? <Button type="success" @click="submit">提交</Button>
? ? ? ? </p>
? ? ? </div>
? ? </div>
? </div>
</template>
<script>
import bignumber from 'bignumber.js'
export default {
? name: 'App',
? data() {
? ? return {
? ? ? columns1: [
? ? ? ? {
? ? ? ? ? title: '序号',
? ? ? ? ? key: 'name',
? ? ? ? ? type: 'index',
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: '图片',
? ? ? ? ? key: 'pic',
? ? ? ? ? slot: 'pic',
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: '单价',
? ? ? ? ? key: 'price',
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: '商品总价',
? ? ? ? ? slot: 'total',
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: '数量',
? ? ? ? ? key: 'count',
? ? ? ? ? render: (h, params) => {
? ? ? ? ? ? return h('div', [
? ? ? ? ? ? ? h('Input-number', {
? ? ? ? ? ? ? ? props: {
? ? ? ? ? ? ? ? ? max: 100,
? ? ? ? ? ? ? ? ? min: 0,
? ? ? ? ? ? ? ? ? step: 1,
? ? ? ? ? ? ? ? ? value: params.row.count,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? on: {
? ? ? ? ? ? ? ? ? 'on-change': (value) => {
? ? ? ? ? ? ? ? ? ? this.data1[params.index].count = value
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? }),
? ? ? ? ? ? ])
? ? ? ? ? },
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: '操作',
? ? ? ? ? key: '',
? ? ? ? ? slot: 'action',
? ? ? ? },
? ? ? ],
? ? ? data1: [
? ? ? ? {
? ? ? ? ? id: '0',
? ? ? ? ? name: '王小明',
? ? ? ? ? pic: './assets/j1.jpg',
? ? ? ? ? price: '34.63',
? ? ? ? ? count: 2,
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: '1',
? ? ? ? ? name: '张小刚',
? ? ? ? ? pic: './assets/j1.jpg',
? ? ? ? ? price: '34.63',
? ? ? ? ? count: 0,
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: '2',
? ? ? ? ? name: '李小红',
? ? ? ? ? pic: './assets/j1.jpg',
? ? ? ? ? price: '34.63',
? ? ? ? ? count: 0,
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: '3',
? ? ? ? ? name: '周小伟',
? ? ? ? ? pic: './assets/j1.jpg',
? ? ? ? ? price: '34.63',
? ? ? ? ? count: 0,
? ? ? ? },
? ? ? ],
? ? }
? },
? methods: {
? ? computedTotal(price, count) {
? ? ? return new bignumber(price).multipliedBy(count).toFixed(2)
? ? },
? ? remove(index) {
? ? ? this.$Modal.confirm({
? ? ? ? title: '提示',
? ? ? ? content: '确认删除这条数据吗？',
? ? ? ? onOk: () => {
? ? ? ? ? this.data1.splice(index, 1)
? ? ? ? },
? ? ? ? onCancel: () => {
? ? ? ? ? this.$Message.info('已取消')
? ? ? ? },
? ? ? })
? ? },
? ? submit() {
? ? ? const req = this.data1.map((item) => ({
? ? ? ? id: item.id,
? ? ? ? count: item.count,
? ? ? }))
? ? ? console.log(req)
? ? },
? },
? computed: {
? ? total() {
? ? ? const num = this.data1.reduce((a, b) => {
? ? ? ? return new bignumber(a).plus(
? ? ? ? ? new bignumber(b.count).multipliedBy(b.price),
? ? ? ? )
? ? ? }, 0)
? ? ? return new bignumber(num).toFixed(2)
? ? },
? },
}
</script>
<style>
#app {
? margin-top: 60px;
}
.container {
? width: 1224px;
? margin: 0 auto;
}
img {
? width: 30px;
? height: 20px;
}
.footer {
? right: 0;
}
</style>
?