front-end-of-violet
/
addOrder.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/element-lib/index.js"></script>
    <link rel="stylesheet" href="js/element-lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/storeindex.css">
    <script src="js/franchisee.js"></script>
    <style>
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            /* background: #d3dce6; */
            /* border: 1px solid black; */
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            height: 270px;
            margin-bottom: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>

<body>

    <div id="app">

        <el-container>
            <el-aside width="31%">
                <el-table :data="tableData" style="width: 100%;" height="430">
                    <el-table-column prop="productName" label="产品" width="100">
                    </el-table-column>
                    <el-table-column prop="purchaseQuantity" label="数量" width="120" align="center">
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.purchaseQuantity" :min="1" size="mini"
                                style="width: 100px;"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="productPrice" label="价格" width="80" align="center">
                    </el-table-column>
                    <el-table-column label="操作" width="80" align="center">
                        <template slot-scope="scope">
                            <el-button @click="deleteTableDataById(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="padding-top: 20px;width: 97%;">
                    <el-form ref="form" :model="form" label-width="60px">
                        <el-form-item label="备注：">
                            <el-input type="textarea" v-model="form.desc"></el-input>
                        </el-form-item>
                        <el-form-item label="总计：">
                            <span>{{count}}</span>
                            <el-button type="primary" style="float: right;" @click="addOrder()">下单</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-aside>
            <el-container>
                <el-header>
                    <el-menu default-active="2" class="el-menu-demo" mode="horizontal">
                        <el-menu-item index="1" onclick="location.href = 'storeindex.html'">主页</el-menu-item>
                        <el-menu-item index="2" onclick="location.href = 'addOrder.html'">新增订单</el-menu-item>
                        <el-menu-item index="3" onclick="location.href = 'orderManagement.html'">订单管理</el-menu-item>
                        <el-menu-item index="4">库存管理</el-menu-item>
                        <el-menu-item index="5">账号管理</el-menu-item>
                    </el-menu>
                </el-header>
                <el-main>
                    <el-row :gutter="20">
                        <el-col :span="3" style="position: fixed;">
                            <template>
                                <el-tabs :tab-position="tabPosition" style="width: 100%;"
                                    @tab-click="getProductsByproductType">
                                    <el-tab-pane label="全部">
                                    </el-tab-pane>
                                    <el-tab-pane v-for="productType in productType" :key="productType.id"
                                        :label="productType.productTypeName">
                                    </el-tab-pane>
                                </el-tabs>
                            </template>
                        </el-col>
                        <div style="margin-left: 13%;">
                            <el-col :span="8" v-for="product in product" :key="product.id">
                                <div class="grid-content bg-purple" @click="compraProduct(product)">
                                    <div>
                                        <el-image :src="downloadImg(product.productImg)" :fit="fit"
                                            style="height: 200px; width: 200px;margin: 10px 20px 0px 20px;"></el-image>
                                        <span style="font-size: 20px;">{{product.productName}}</span>
                                        <hr>
                                    </div>
                                    <div>
                                        <span style="color: red;font-size: 20px;">{{product.productPrice}} 元</span>
                                        <img src="http://i.huasongwang.com/i/c/hot.png"
                                            style="width: 15px; display: inline-block;margin-left: 80px;">
                                        <em>{{product.productHits}}</em>
                                        <br>
                                    </div>
                                </div>
                            </el-col>
                        </div>
                    </el-row>
                </el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    isCollapse: false,
                    tableData: [],
                    form: {
                        desc: ""
                    },
                    product: [],
                    tabPosition: 'left',
                    productType: []
                }
            }, created() {
                this.selectProduct();
                this.selectProductType();
            }, methods: {
                selectProduct: function () {
                    axios({
                        url: "/product/all",
                        method: "GET",
                    }).then(function (resp) {
                        vm.product = resp.data.data
                    })
                }, compraProduct(product) {
                    var count = vm.tableData.length;
                    for (i = 0; i < count; i++) {
                        if (vm.tableData[i].id == product.id) {
                            vm.tableData[i].purchaseQuantity += 1;
                            return;
                        }
                    }
                    var p = JSON.parse(JSON.stringify(product));
                    p.productId = product.id
                    p.purchaseQuantity = 1;
                    vm.tableData.push(p)
                },
                selectProductType: function () {
                    axios({
                        url: "/product/type/list",
                        method: "GET",
                    }).then(function (resp) {
                        vm.productType = resp.data.data
                    })
                },
                getProductsByproductType: function (obj) {
                    if (obj.label == '全部') {
                        this.selectProduct()
                        return
                    }
                    axios({
                        url: "/product/get/products/by/product/type",
                        method: "GET",
                        params: {
                            productTypeName: obj.label,
                        }
                    }).then(function (resp) {
                        vm.product = resp.data.data
                    })
                },
                deleteTableDataById: function (id) {
                    for (var i = 0; i < vm.tableData.length; i++) {
                        if (vm.tableData[i].id == id) {
                            vm.tableData.splice(i, 1);
                        }
                    }
                }, downloadImg(img) {
                    var url = "http://localhost:8080/admin/file/download?filename="
                    return url + img
                }, addOrder() {
                    axios({
                        url: "/order/info/add/order/info",
                        method: "POST",
                        params: {
                            desc: vm.form.desc == "" ? undefined : vm.form.desc
                        }
                    }).then(resp => {
                        vm.insertOrderDetail(resp.data.data)
                    })
                }, insertOrderDetail(orderInfoId) {
                    axios({
                        url: "/order/detail/add",
                        method: "POST",
                        data: {
                            orderInfoId: orderInfoId,
                            orderDetailList: vm.tableData
                        }
                    }).then(resp => {
                        vm.$message({
                            message: '恭喜你，下单成功',
                            type: 'success',
                            duration: 1000
                        });
                        vm.tableData = []

                    })
                }
            }, computed: {
                count() {
                    var tl = this.tableData.length;
                    var result = 0;
                    for (var i = 0; i < tl; i++) {
                        result += this.tableData[i].productPrice * this.tableData[i].purchaseQuantity;
                    }
                    if (result == NaN) {
                        return 0;
                    }
                    return result;
                }
            }

        })
    </script>
</body>

</html>