From 61a2ab4ce9c2a0861b0a2ee13c205191030e9bf2 Mon Sep 17 00:00:00 2001
From: pjhmizn49 <zhangjiadi2008@126.com>
Date: Fri, 13 Dec 2024 09:23:01 +0800
Subject: [PATCH] ADD file via upload

---
 flower_user_front/src/views/CartView.vue | 551 +++++++++++++++++++++++
 1 file changed, 551 insertions(+)
 create mode 100644 flower_user_front/src/views/CartView.vue

diff --git a/flower_user_front/src/views/CartView.vue b/flower_user_front/src/views/CartView.vue
new file mode 100644
index 0000000..c59040f
--- /dev/null
+++ b/flower_user_front/src/views/CartView.vue
@@ -0,0 +1,551 @@
+<template>
+    <div>
+        <el-row style="margin: 30px auto">
+            <el-col :span="8">
+                <div style="">
+                    <el-input @input="handleSearch" suffix-icon="el-icon-search" style="width: 300px" placeholder="请输入搜索商品关键字" v-model="input" clearable></el-input>
+                    <el-button @click="handleDeleteMul" type="danger" style="margin-left: 30px">移除</el-button>
+                </div>
+            </el-col>
+            <el-col :span="16">
+                <div style="font-size: 18px;font-weight: bold">
+                    <span style="margin-right: 30px">已选商品 <span style="color: red;font-size: 20px">{{this.selectedData.length}}</span>件</span>
+                    合计（不含运费）：<span style="color: red;font-size: 20px">￥{{this.total_price.toFixed(2)}}</span>
+                    <button @click="pay" class="order-button">立即下单</button>
+                </div>
+            </el-col>
+        </el-row>
+        <!-- 表单 -->
+        <el-dialog title="商品辅材详情" :visible.sync="dialogVisible" :before-close="handleClose">
+            <el-form align="left" ref="dialogForm" :model="dialogForm" label-width="130px" style="margin-right: 150px">
+                <el-form-item label="包装辅材">
+                    <template slot-scope="scope">
+                        <el-checkbox-group class="pack-check" v-model="flower_pack">
+                            <el-checkbox-button v-for="pack in packs" :label="pack.pack_id" :key="pack.pack_id" style="margin-bottom: 20px">
+                                {{pack.pack_name}}  ￥{{pack.pack_price.toFixed(2)}}
+                            </el-checkbox-button>
+                        </el-checkbox-group>
+                    </template>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="danger" @click="handleClose" plain>取 消</el-button>
+                <el-button type="danger" @click="submitForm">确 定</el-button>
+            </div>
+        </el-dialog>
+        <el-table
+            ref="multipleTable"
+            :data="tableData"
+            tooltip-effect="dark"
+            style="width: 100%;margin-left: 30px"
+            @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="100"></el-table-column>
+            <el-table-column prop="flower_pic" label="商品" width="150">
+                <template slot-scope="scope">
+                    <el-link :underline="false" @click="navTo('/detail?id=' + scope.row.flower_id)">
+                        <img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+scope.row.flower_pic)" style="height: 80px;width: 80px" alt="">
+                    </el-link>
+                </template>
+            </el-table-column>
+            <el-table-column prop="flower_name" label="商品名" width="500">
+                <template slot-scope="scope">
+                    <div>
+                        <el-link class="good-name" @click="navTo('/detail?id=' + scope.row.flower_id)" :underline="false" style="font-size: 16px;font-weight: bold">
+                            {{scope.row.flower_name}}
+                        </el-link>
+                    </div>
+                    <el-link @click="handleModify(scope.row)" :underline="false" style="color: #8c8c8c;margin-top: 10px">
+                        <span style="margin-right: 5px">包装辅材：</span>
+                        <span v-if="typeof(scope.row.pack)!=='object'">无</span>
+                        <span v-else>
+                            <el-tag style="margin-left: 5px" type="info" v-for="pack in scope.row.pack">{{pack.pack_name}}</el-tag>
+                        </span>
+                        <i class="el-icon-arrow-down" style="margin-left: 10px"></i>
+                    </el-link>
+                </template>
+            </el-table-column>
+            <el-table-column prop="single_price" label="单价(元)" width="150">
+                <template slot-scope="scope">
+                    {{scope.row.single_price.toFixed(2)}}
+                </template>
+            </el-table-column>
+            <el-table-column prop="number" label="数量" width="250">
+                <template slot-scope="scope">
+                    <el-input-number @change="changeNum(scope.row)" v-model="scope.row.number" :min="1" size="small"></el-input-number>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作">
+                <template slot-scope="scope">
+                    <el-button @click="handleDelete(scope.row)" type="danger" size="small" plain>移除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-pagination
+            background
+            :current-page="currentPage"
+            :page-size="pageSize"
+            layout="total, prev, pager, next, jumper"
+            :total="total"
+            :page-count="page_number"
+            style="margin-top: 30px"
+            @current-change="handleCurrentChange">
+        </el-pagination>
+    </div>
+</template>
+
+<script>
+import Cookie from "js-cookie";
+export default {
+    data() {
+        return {
+            //页面数据
+            tableData: [{
+                cart_id:1,
+                flower_id: 1,
+                flower_name: '',
+                flower_price: 1,
+                flower_pic:'',
+                number:1,
+                single_price:1.00,
+                pack:[{
+                    pack_id:1,
+                    pack_name:'',
+                    pack_price:1.00
+                }]
+            }],
+            dialogForm:[{
+                cart_id:1,
+                number:1,
+                pack:[{
+                    pack_id:1,
+                    pack_name:'',
+                    pack_price:1.00
+                }]
+            }],
+            //数据处理
+            multipleSelection: [],
+            //小计、下单
+            total_price:0,
+            selectedData:[
+                // {
+                // cart_id:1,
+                // flower_id: 1,
+                // flower_name: '',
+                // flower_price: 1,
+                // flower_pic:'',
+                // number:1,
+                // single_price:1.00,
+                // pack:[{
+                //     pack_id:1,
+                //     pack_name:'',
+                //     pack_price:1.00
+                // }]
+            // }
+            ],
+            input: '',
+            dialogVisible:false,
+            //自选花材
+            flower_pack: [],
+            //花材列表-修改显示用
+            packs: [{
+                pack_id:1,
+                pack_name:'',
+                pack_price:1.00,
+            }],
+            //分页相关
+            currentPage:1,
+            pageSize:10,
+            page_number:1,//总页数
+            total:10,//总条数
+        }
+    },
+    created() {
+        this.currentPage=1;
+        this.fetchData();
+        this.getPackList()
+    },
+    methods: {
+        fetchData(){
+            const _this=this;
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/cart/list',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        page:_this.currentPage,
+                        page_size:_this.pageSize
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        //查询所有信息成功
+                        _this.tableData=response.data.data.carts;
+                        _this.page_number=response.data.data.page_number;
+                        _this.total=response.data.data.total;
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+            }catch (error){
+                this.$message.warning('页面加载出错,请重试!')
+            }
+        },
+        //搜索
+        handleSearch(){
+            const _this = this
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/cart/query',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        page:_this.currentPage,
+                        page_size:_this.pageSize,
+                        flower_name:_this.input
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        //查询信息成功
+                        _this.tableData=response.data.data.carts;
+                        _this.page_number=response.data.data.page_number;
+                        _this.total=response.data.data.total;
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+            }catch (error){
+                this.$message.warning('页面加载出错,请重试!')
+            }
+        },
+        //分页
+        handleCurrentChange(page) {
+            this.currentPage = page;
+            this.total_price = 0.00;
+            this.fetchData();
+        },
+        //多选
+        handleSelectionChange(val) {
+            this.total_price = 0
+            this.selectedData = val
+            this.multipleSelection = val
+            val.forEach(item => {
+                this.total_price += item.single_price * item.number
+            })
+        },
+        getPackList(){
+            const _this=this;
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/pack/list',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        page:1,
+                        page_size:100
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        //查询信息成功
+                        _this.packs=response.data.data.packs;
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+            }catch (error){
+                this.$message.warning('页面加载出错,请重试!')
+            }
+        },
+        //获取修改初始信息
+        handleModify(row){
+            const _this = this
+            axios({
+                method: 'post',
+                url: 'http://localhost:8181/cart/info',
+                headers: {
+                    Authorization: Cookie.get('token'),
+                    'Content-Type': 'application/json'
+                },
+                data:{
+                    cart_id: row.cart_id
+                }
+            }).then(function (response){
+                if (response.data.code===200) {
+                    //获取信息成功
+                    _this.dialogForm = response.data.data
+
+                    //花材多选框展示
+                    if(typeof(_this.dialogForm.pack)==="object"){
+                        _this.flower_pack = response.data.data.pack_id_array //数据必须为array才能正常回显
+                    }
+                }
+                if (response.data.code===401){
+                    _this.$message.warning('身份验证失败,请重新登录!')
+                }
+                if (response.data.code===403){
+                    const message = response.data.msg;
+                    this.$alert("任务出错,具体原因如下:\n"+message, '页面加载失败', {
+                        confirmButtonText: '确定'
+                    })
+                }
+            });
+            this.dialogVisible = true
+        },
+        //提交修改的表单
+        //修改花材
+        submitForm(){ //提交表单
+            const _this=this;
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/cart/modify',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        cart_id:_this.dialogForm.cart_id,
+                        pack_ids:_this.flower_pack.toString(),
+                        number:_this.dialogForm.number
+                    }
+                }).then(function (response){
+                    if (response.data.code===200) {
+                        //修改信息成功
+                        _this.$message.success('购物车修改成功!')
+                        //再次获取数据以更新页面
+                        _this.handleSearch()
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("任务出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+            }catch (error){
+                this.$message.warning('页面加载出错,请重试!')
+            }
+            //清空表单数据
+            this.handleClose();
+
+        },
+        //修改数量
+        changeNum(row){ //提交表单
+            const _this=this;
+            this.total_price = 0
+            this.selectedData.forEach(item => {
+                this.total_price += item.single_price * item.number
+            })
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/cart/modify_num',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        cart_id:row.cart_id,
+                        number:row.number
+                    }
+                }).then(function (response){
+                    if (response.data.code===200) {
+                        //再次获取数据以更新页面
+                        // _this.handleSearch()
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("任务出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+            }catch (error){
+                this.$message.warning('页面加载出错,请重试!')
+            }
+        },
+        //移除
+        handleDelete(row){
+            const _this = this;
+            this.$confirm('确定从购物车中移除该商品?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                //确认移除
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/cart/deletePer',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        cart_id:row.cart_id
+                    }
+                }).then(function (response){
+                    if (response.data.code===200) {
+                        //移除成功
+                        _this.handleSearch()
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+                this.$message({type: 'success', message: '移除成功!'});
+            }).catch(() => {
+                this.$message({type: 'info', message: '已取消'});
+            });
+        },
+        handleDeleteMul(){
+            const _this = this
+            if(_this.multipleSelection.length===0)
+                this.$message({type: 'warning', message: '请选择商品'});
+            else{
+                let ids = []
+                for (let i=0; i<_this.multipleSelection.length; i++){
+                    ids[i] = _this.multipleSelection[i].cart_id
+                }
+
+                this.$confirm('确定从购物车中移除商品?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    //确认移除
+                    axios({
+                        method: 'post',
+                        url: 'http://localhost:8181/cart/deleteMul',
+                        headers: {
+                            Authorization: Cookie.get('token'),
+                            'Content-Type': 'application/json'
+                        },
+                        data:{
+                            cart_ids:ids
+                        }
+                    }).then(function (response){
+                        if (response.data.code===200) {
+                            //移除成功
+                            _this.handleSearch()
+                        }
+                        if (response.data.code===401){
+                            _this.$message.warning('身份验证失败,请重新登录!')
+                        }
+                        if (response.data.code===403){
+                            const message = response.data.msg;
+                            this.$alert("任务出错,具体原因如下:\n"+message, '页面加载失败', {
+                                confirmButtonText: '确定'
+                            })
+                        }
+                    });
+                    this.$message({type: 'success', message: '批量移除成功!'});
+                }).catch(() => {
+                    this.$message({type: 'info', message: '已取消'});
+                });
+            }
+        },
+        //dialog弹窗关闭时触发该方法
+        handleClose(){
+            this.$refs.dialogForm.resetFields()
+            //重置表单
+            this.dialogForm.cart_id = 1;
+            this.dialogForm.flower_number=1;
+            this.dialogForm.pack=[];
+            this.flower_pack=[];
+            this.dialogVisible = false;
+        },
+        navTo(url){
+            location.href = url
+        },
+        // 下单
+        pay(){
+            if(this.selectedData.length===0)
+                this.$message({type: 'warning', message: '请选择商品'});
+            else{
+                this.$router.push({name: 'pay', params: {
+                        data: this.selectedData,
+                        type:0,
+                        total_price:this.total_price
+                    }})
+            }
+        }
+    }
+}
+</script>
+<style>
+.tableTop{
+    /*width: 1500px;*/
+    /*display: flex;*/
+    /*justify-content: space-between;*/
+    /*margin: 10px 0 20px 50px;*/
+}
+.good-name .el-link--inner:hover{
+    color: red;
+}
+.order-button{
+    margin-left: 30px;
+    font-size: 18px;
+    font-weight: bold;
+    height: 50px;
+    width: 150px;
+    color: #f7f7f7;
+    border: 1px solid #ff3134;
+    background-color: #ff3134;
+    border-radius: 30px
+}
+.order-button:hover{
+    color: #f7f7f7;
+    background-color: #fd7b6d;
+}
+.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background-color: #ff3134 !important;
+    border-color: #ff3134 !important;
+}
+.el-checkbox__inner:hover{
+    border-color: #ff3134!important;
+}
+.el-checkbox__input.is-focus .el-checkbox__inner{
+    border-color: #ff3134!important;
+}
+</style>