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

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

diff --git a/flower_user_front/src/views/PayView.vue b/flower_user_front/src/views/PayView.vue
new file mode 100644
index 0000000..1765a83
--- /dev/null
+++ b/flower_user_front/src/views/PayView.vue
@@ -0,0 +1,296 @@
+<template>
+    <div>
+<!--  收货方式选择   -->
+        <div style="width: 1300px;margin-left: 100px;margin-bottom:30px; border: #e4e7ed 2px solid">
+            <el-tabs v-model="method" @tab-click="handleTabClick" style="margin: 20px 50px">
+                <el-tab-pane  label="到店自取" name="0">
+                    <div style="margin: 10px auto;font-size: 18px;font-weight: bold">
+                        本店地址：山东省 济南市 历城区 港沟街道舜华路1400号山东大学软件园校区 好花花店
+                    </div>
+                    <div style="margin: 10px auto;font-size: 16px;font-weight: bold">
+                        请于下单时间<span style="color: red">1小时后</span>到店领取
+                    </div>
+                </el-tab-pane>
+                <el-tab-pane label="送货上门" name="1">
+                    <el-table ref="singleTable"
+                              :data="addressData"
+                              highlight-current-row
+                              @current-change="handleCurrentChange"
+                        style="width: 100%">
+                        <el-table-column property="address_name" label="收件人" width="120"></el-table-column>
+                        <el-table-column property="address_sheng" label="地址" width="80"></el-table-column>
+                        <el-table-column property="address_shi" label="" width="80"></el-table-column>
+                        <el-table-column property="address_qu" label="" width="80"></el-table-column>
+                        <el-table-column property="address_detail" label="详细地址" width="480"></el-table-column>
+                        <el-table-column property="address_phone" label="联系电话"></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>
+                </el-tab-pane>
+            </el-tabs>
+        </div>
+<!--  下单商品   -->
+        <el-table
+            ref="Table"
+            :data="selectedData"
+            style="width: 100%;margin-left: 100px">
+            <el-table-column prop="flower_pic" label="商品" width="150">
+                <template slot-scope="scope">
+                <img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+scope.row.flower_pic)" style="height: 80px;width: 80px" alt="">
+                </template>
+            </el-table-column>
+            <el-table-column prop="flower_name" label="商品名" width="550">
+                <template slot-scope="scope">
+                    <div style="font-size: 16px;font-weight: bold;margin-bottom: 5px">
+                        {{scope.row.flower_name}}
+                    </div>
+                    <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>
+                </template>
+            </el-table-column>
+            <el-table-column prop="single_price" label="单价(元)" width="150"></el-table-column>
+            <el-table-column prop="number" label="数量" width="150"></el-table-column>
+            <el-table-column label="小计">
+                <template slot-scope="scope">
+                    <span style="color: red">￥ {{ (scope.row.single_price * scope.row.number).toFixed(2) }}</span>
+                </template>
+            </el-table-column>
+        </el-table>
+<!--  底部总计  -->
+        <div class="tableTop" style="margin-left: 100px">
+            <div>
+                <el-link :underline="false" @click="navTo('/cart')" style="font-weight: normal;margin-top: -15px">
+                    <i class="el-icon-arrow-left"></i>返回购物车
+                </el-link>
+            </div>
+            <div style="font-size: 18px;font-weight: bold">
+                运费：<span style="color: red;font-size: 20px;margin-right: 30px">￥ {{this.trans_fee.toFixed(2)}} </span>
+                合计：<span style="color: red;font-size: 20px">￥{{(this.total_price + this.trans_fee).toFixed(2)}}</span>
+                <button @click="submitOrder" class="order-button">提交订单</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Cookie from "js-cookie";
+
+export default {
+    data(){
+        return{
+            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
+            //     }],
+            //     pack_total_price:1.00
+            // }
+            ],
+            type:0, //订单类型：商品0 换赠1
+            total_price:1.00,
+            method:"0",
+            trans_fee:0.00,
+            //地址选择
+            addressData:[
+            //     {
+            //     address_id:1,
+            //     address_name:'',
+            //     address_sheng:'',
+            //     address_shi:'',
+            //     address_qu:'',
+            //     address_detail:'',
+            //     address_phone:''
+            // }
+            ],
+            currentAddress: {}, //选中的地址
+            //分页相关
+            currentPage:1,
+            pageSize:5,
+            page_number:1,//总页数
+            total:10,//总条数
+        }
+    },
+    created() {
+        this.selectedData = this.$route.params.data
+        this.type = this.$route.params.type
+        this.total_price = this.$route.params.total_price
+        this.getAddress()
+    },
+    methods: {
+        getAddress(){
+            const _this=this;
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/address/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.addressData=response.data.data.addresses;
+                        _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('页面加载出错,请重试!')
+            }
+        },
+        handleTabClick(tab){
+            if(tab.name==="0")//到店自取运费为0
+                this.trans_fee = 0.00
+            else if(tab.name==="1")//送货上门运费
+                this.trans_fee = 20.00
+            this.method = tab.name
+        },
+        navTo(url){
+            location.href = url
+        },
+        //地址选择
+        handleCurrentChange(val) {
+            this.currentAddress = val;
+        },
+        submitOrder(){ //提交订单
+            const _this=this;
+            let pack_t_price=0.00;
+            _this.selectedData.forEach(item =>{
+                if(typeof(item.pack)==="object")
+                item.pack.forEach(pack =>{
+                    pack_t_price += pack.pack_price
+                })
+                item.pack_total_price = pack_t_price
+            });
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/order/add',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        order_type:_this.type,
+                        order_price:_this.total_price + _this.trans_fee,
+                        order_address:_this.currentAddress.address_sheng+_this.currentAddress.address_shi+ _this.currentAddress.address_qu+_this.currentAddress.address_detail,
+                        order_phone:_this.currentAddress.address_phone,
+                        order_method:_this.method,
+                        trans_fee:_this.trans_fee,
+                        order_discount:null,
+                        shoppingData:_this.selectedData
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        _this.$message.success('下单成功！')
+                        // 将购物车中已下单的物品删除
+                        _this.selectedData.forEach(item =>{
+                            if(item.cart_id!==1)
+                                _this.handleDelete(item.cart_id)
+                        })
+                        // 跳转到购物车
+                        let timer = setInterval(() => {
+                            _this.navTo('/cart')
+                        }, 1500);
+
+                        // 离开当前页面时销毁定时器
+                        _this.$once('hook:beforeDestroy', () => {
+                            clearInterval(timer);
+                            timer = null;
+                        })
+                    }
+                    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(val){
+            const _this = this;
+            axios({
+                method: 'post',
+                url: 'http://localhost:8181/cart/deletePer',
+                headers: {
+                    Authorization: Cookie.get('token'),
+                    'Content-Type': 'application/json'
+                },
+                data:{
+                    cart_id:val
+                }
+            }).then(function (response){
+                if (response.data.code===200) {
+                    //移除成功
+                }
+                if (response.data.code===401){
+                    _this.$message.warning('身份验证失败,请重新登录!')
+                }
+                if (response.data.code===403){
+                    const message = response.data.msg;
+                    this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                        confirmButtonText: '确定'
+                    })
+                }
+            });
+        },
+    }
+}
+</script>
+<style>
+.el-tabs__item{
+    height: 15px;
+    color: #505050 !important;
+    text-align: center;
+    font-size: 16px !important;
+}
+.is-active{
+    color: #000 !important;
+}
+.el-tabs__active-bar{
+    background-color: red !important;
+}
+.el-link--inner:hover{
+    color: red;
+}
+</style>
\ No newline at end of file