From 009462b26dbe75d7edc24ce1ee7f6b04d1372bc2 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Tue, 26 Nov 2024 18:09:58 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E7=BA=A6=E8=BD=A6=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=20=E5=88=A0=E9=99=A4=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E8=B0=83=E8=AF=95=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                     |   7 +-
 env/.env.dev                        |   1 +
 src/components/FooterInfo/index.vue | 127 ++++++++++----------
 src/http/api/cart/index.ts          |  12 +-
 src/views/cart/index.vue            | 179 +++++++++++++++++++++++-----
 5 files changed, 226 insertions(+), 100 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index dd46610..9e05b69 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -26,17 +26,20 @@ declare module 'vue' {
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     EquipCard: typeof import('./src/components/equipCard.vue')['default']
     EquipCardHall: typeof import('./src/components/equipCardHall/index.vue')['default']
     EquipCardNew: typeof import('./src/components/equipCardNew/index.vue')['default']
diff --git a/env/.env.dev b/env/.env.dev
index 6b35cd2..56b9df1 100644
--- a/env/.env.dev
+++ b/env/.env.dev
@@ -8,6 +8,7 @@ VITE_API_URL = '/proxyApi'
 # VITE_proxyTarget = 'http://10.40.92.74:8080'  #盛旭
 
 VITE_proxyTarget = 'http://192.168.2.246:18080'  # 马帅
+# VITE_proxyTarget = 'http://192.168.2.129:18080'  # 马帅
 
 # VITE_proxyTarget = 'http://10.40.92.185:9206'  # 赵福海 ( 设备类型) 
 # VITE_proxyTarget = 'http://10.40.92.16:9502'  # 牛 (个人中心 基础信息企业申请认证) 
diff --git a/src/components/FooterInfo/index.vue b/src/components/FooterInfo/index.vue
index 822c002..ff0c8dd 100644
--- a/src/components/FooterInfo/index.vue
+++ b/src/components/FooterInfo/index.vue
@@ -35,7 +35,7 @@
                 </li>
             </ul>
 
-            <ul class="mobile-info">
+            <!-- <ul class="mobile-info">
                 <li>商城热线</li>
                 <li>供应商入驻、开店、续费资讯：010-2345-1234</li>
                 <li>供应商咨询：010-2345-1234</li>
@@ -45,84 +45,83 @@
                     工作时间：周一至周五 8:30-12：00 &nbsp;&nbsp;&nbsp;&nbsp;
                     14：00-17：30
                 </li>
-            </ul>
+            </ul> -->
         </div>
     </div>
 </template>
 
 <style lang="scss">
-    .footer-container {
-        margin-top: 40px;
-        height: 650px;
-        border-top: 1px solid #979797;
-        background: url("../../assets/img/home/2023_12_01_beijing2/beijing2.png")
-            no-repeat;
-        background-size: cover;
+.footer-container {
+    margin-top: 40px;
+    // height: 650px;
+    border-top: 1px solid #979797;
+    background: url('../../assets/img/home/2023_12_01_beijing2/beijing2.png') no-repeat;
+    background-size: cover;
 
-        .icon-info {
+    .icon-info {
+        height: 100px;
+        margin-top: 30px;
+        display: flex;
+        justify-content: space-around;
+
+        li {
             height: 100px;
-            margin-top: 30px;
             display: flex;
-            justify-content: space-around;
+            align-items: center;
 
-            li {
-                height: 100px;
+            span:first-child {
+                display: block;
+                width: 50px;
+                height: 50px;
+                text-align: center;
+                line-height: 50px;
+                border-radius: 50%;
+                border: 3px solid #3cb4a6;
+                color: #3cb4a6;
+                font-weight: bold;
+                font-size: 22px;
+            }
+
+            span:last-child {
+                display: block;
+                height: 50px;
+                margin-left: 15px;
                 display: flex;
+                flex-direction: column;
                 align-items: center;
+                justify-content: space-around;
 
-                span:first-child {
-                    display: block;
-                    width: 50px;
-                    height: 50px;
-                    text-align: center;
-                    line-height: 50px;
-                    border-radius: 50%;
-                    border: 3px solid #3cb4a6;
-                    color: #3cb4a6;
+                i {
+                    color: #8c8c8c;
+                }
+
+                i:first-child {
                     font-weight: bold;
-                    font-size: 22px;
+                    font-size: 18px;
+                    color: #333;
                 }
-
-                span:last-child {
-                    display: block;
-                    height: 50px;
-                    margin-left: 15px;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    justify-content: space-around;
-
-                    i {
-                        color: #8c8c8c;
-                    }
-
-                    i:first-child {
-                        font-weight: bold;
-                        font-size: 18px;
-                        color: #333;
-                    }
-                }
-            }
-        }
-
-        .mobile-info {
-            margin-top: 30px;
-            text-align: center;
-
-            li {
-                padding: 20px 0;
-            }
-
-            li:first-child {
-                padding: 30px 0;
-                font-size: 20px;
-                font-weight: bold;
-                letter-spacing: 1px;
-            }
-
-            li:last-child {
-                font-weight: bold;
             }
         }
     }
+
+    .mobile-info {
+        margin-top: 30px;
+        text-align: center;
+
+        li {
+            padding: 20px 0;
+        }
+
+        li:first-child {
+            padding: 30px 0;
+            font-size: 20px;
+            font-weight: bold;
+            letter-spacing: 1px;
+        }
+
+        li:last-child {
+            font-weight: bold;
+        }
+    }
+}
 </style>
diff --git a/src/http/api/cart/index.ts b/src/http/api/cart/index.ts
index d941d23..a425474 100644
--- a/src/http/api/cart/index.ts
+++ b/src/http/api/cart/index.ts
@@ -1,5 +1,15 @@
-import { get } from '../../index'
+import { get, post } from '../../index'
 
+
+// 预约车列表详情接口
 export const getBookCarDetailsApi = () => {
     return get('/material-mall/bookCar/getBookCarDetails', {})
+}
+// 预约车列表提交
+export const submitBookCarApi = (data: any) => {
+    return post('/material-mall/order/submitBookCar', data)
+}
+// 预约车列表提交
+export const deleteCartByIdApi = (data: any) => {
+    return post('/material-mall/bookCar/deleteById', data)
 }
\ No newline at end of file
diff --git a/src/views/cart/index.vue b/src/views/cart/index.vue
index 9c36c09..0ace2ce 100644
--- a/src/views/cart/index.vue
+++ b/src/views/cart/index.vue
@@ -15,7 +15,9 @@
         <el-row class="cart-th">
             <el-col :span="2">
                 <div>
-                    <el-checkbox v-model="allChecked" @change="onChangeAll"> 全选 </el-checkbox>
+                    <el-checkbox v-model="allChecked" @change="onChangeAll" :key="allKey">
+                        全选
+                    </el-checkbox>
                 </div>
             </el-col>
             <el-col :span="9">
@@ -47,6 +49,7 @@
                     <div style="text-align: center">
                         <el-checkbox
                             v-model="item.isChecked"
+                            :key="index"
                             @change="onChangeCompany($event, index, item)"
                         >
                         </el-checkbox>
@@ -59,10 +62,14 @@
                 </el-col>
             </el-row>
 
-            <el-row class="cart-list" v-for="(goods, j) in item.devInfoVoList" :key="j">
+            <el-row class="cart-list" v-for="(goods, j) in item.devInfoVoList" :key="goods.id">
                 <el-col :span="1">
                     <div style="text-align: center">
-                        <el-checkbox v-model="goods.isChecked" @change="onChangeGoods(index)">
+                        <el-checkbox
+                            v-model="goods.isChecked"
+                            @change="onChangeGoods(index)"
+                            :key="goods.id"
+                        >
                         </el-checkbox>
                     </div>
                 </el-col>
@@ -79,7 +86,9 @@
                 </el-col>
                 <el-col :span="4">
                     <div class="lease-date">
-                        <div>{{ goods.lease_date_string }}</div>
+                        <div v-if="goods.rentBeginTime && goods.rentEndTime">
+                            {{ goods.rentBeginTime }}-{{ goods.rentEndTime }}
+                        </div>
                         <el-date-picker
                             style="width: 100px; margin-top: 10px"
                             v-model="goods.lease_date"
@@ -92,44 +101,65 @@
                 </el-col>
                 <el-col :span="2">
                     <div class="red-font">
-                        {{ goods.lease_pic }}
+                        {{ goods.dayLeasePrice }}
                     </div>
                 </el-col>
                 <el-col :span="2">
                     <div class="red-font" style="color: #0062ff">
-                        {{ goods.lease_day }}
+                        {{ goods.days }}
                     </div>
                 </el-col>
                 <el-col :span="2">
                     <div>
                         <el-input-number
-                            v-model="goods.goods_num"
+                            v-model="goods.num"
                             style="width: 100px"
                             :min="1"
+                            :max="goods.deviceCount"
                             size="small"
                         />
                     </div>
                 </el-col>
                 <el-col :span="2">
                     <div class="red-font">
-                        {{ goods.goods_num * goods.lease_pic * goods.lease_day }}
+                        {{ goods.num * goods.days * goods.dayLeasePrice }}
                     </div>
                 </el-col>
                 <el-col :span="2">
                     <div>
-                        <el-button
-                            @click="onDeleteGoods(j)"
-                            type="text"
+                        <!-- <el-button
+                            link
+                            @click="onDeleteGoods(goods.id)"
                             style="color: #ff4800; font-weight: bold"
                         >
                             删除
-                        </el-button>
+                        </el-button> -->
+
+                        <el-popconfirm
+                            width="220"
+                            :icon="InfoFilled"
+                            icon-color="#626AEF"
+                            title="确定删除该条预约车记录吗？"
+                            @confirm="onDeleteGoods(goods.id)"
+                        >
+                            <template #reference>
+                                <el-button link style="color: #ff4800; font-weight: bold">
+                                    删除</el-button
+                                >
+                            </template>
+                            <template #actions="{ confirm }">
+                                <el-button size="small">取消</el-button>
+                                <el-button type="danger" size="small" @click="confirm()">
+                                    确定
+                                </el-button>
+                            </template>
+                        </el-popconfirm>
                     </div>
                 </el-col>
             </el-row>
         </div>
 
-        <div class="protocol-handle">
+        <div class="protocol-handle" v-if="cardList.length > 0">
             <el-row style="display: flex; align-items: center">
                 <el-col :span="16">
                     <div class="checkbox-container">
@@ -174,23 +204,33 @@
 import Header from '../../components/header/index.vue'
 import FooterInfo from '../../components/FooterInfo/index.vue'
 import { ElMessage } from 'element-plus'
-import { getBookCarDetailsApi } from '../../http/api/cart/index'
-import moment from 'moment'
+import {
+    getBookCarDetailsApi,
+    submitBookCarApi,
+    deleteCartByIdApi,
+} from '../../http/api/cart/index'
+import moment, { max } from 'moment'
+import { InfoFilled } from '@element-plus/icons-vue'
 
 const protocolChecked = ref<boolean>(false)
+const allKey = ref(0)
 
 const cardList = ref<any>([])
 
 const getBookCarDetailsData = async () => {
     const res: any = await getBookCarDetailsApi()
-    console.log(res, '----')
-
-    cardList.value = res.data
 
+    cardList.value = []
+    cardList.value = JSON.parse(JSON.stringify(res.data))
     cardList.value.forEach((e: any) => {
         e.isChecked = false
+
         e.devInfoVoList.forEach((j: any) => {
-            j.isChecked = false
+            j.days = 0
+            j.num = 1
+            j.costs = 0
+            j.rentBeginTime = ''
+            j.rentEndTime = ''
         })
     })
 
@@ -204,13 +244,30 @@ onMounted(() => {
 
 // 日期change事件
 const onLeaseDateChange = (e: any, item: any) => {
-    item.lease_date_string = `${e[0]}至${e[1]}`
-    item.lease_day = moment(e[1]).diff(e[0], 'day')
+    console.log(e, '*****')
+    if (!e) {
+        item.rentBeginTime = ''
+        item.rentEndTime = ''
+        item.days = 0
+    } else {
+        item.rentBeginTime = e[0]
+        item.rentEndTime = e[1]
+        item.days = moment(e[1]).diff(e[0], 'day')
+    }
 }
 
 // 删除按钮
-const onDeleteGoods = (index: number) => {
-    console.log('删除---', index)
+const onDeleteGoods = async (id: number | string) => {
+    const res: any = deleteCartByIdApi({ id })
+    if (res.code === 200) {
+        ElMessage({
+            showClose: false,
+            message: '删除成功',
+            type: 'success',
+        })
+
+        getBookCarDetailsData()
+    }
 }
 
 // 全选change事件
@@ -237,21 +294,25 @@ const onChangeCompany = (e: boolean, index: number, item: any) => {
 // 计算所有装备
 const amountNum = computed(() => {
     let amountNum = 0
-    cardList.value.forEach((e) => {
+    cardList.value.forEach((e: any) => {
         amountNum = e.devInfoVoList.length + amountNum
     })
     return amountNum
 })
 // 计算全选按钮的选中状态
 const allChecked = computed(() => {
-    return cardList.value.every((e: any) => e.isChecked === true)
+    if (cardList.value.length < 1) {
+        return false
+    } else {
+        return cardList.value.every((e: any) => e.isChecked === true)
+    }
 })
 
-// 已勾选的所有装备
+// 已勾选的装备数量
 const amountDevice = computed(() => {
     let amountNum = 0
-    cardList.value.forEach((e) => {
-        e.devInfoVoList.forEach((g) => {
+    cardList.value.forEach((e: any) => {
+        e.devInfoVoList.forEach((g: any) => {
             if (g.isChecked) {
                 amountNum++
             }
@@ -259,14 +320,26 @@ const amountDevice = computed(() => {
     })
     return amountNum
 })
+// 已勾选的装备数量
+const amountDeviceList = computed(() => {
+    let selectList: any = []
+    cardList.value.forEach((e: any) => {
+        e.devInfoVoList.forEach((g: any) => {
+            if (g.isChecked) {
+                selectList.push(g)
+            }
+        })
+    })
+    return selectList
+})
 
 // 计算订单总价格
 const orderAmountPice = computed(() => {
     let orderAmountPice = 0
-    cardList.value.forEach((e) => {
-        e.devInfoVoList.forEach((g) => {
+    cardList.value.forEach((e: any) => {
+        e.devInfoVoList.forEach((g: any) => {
             if (g.isChecked) {
-                orderAmountPice = g.goods_num * g.lease_pic * g.lease_day + orderAmountPice
+                orderAmountPice = g.num * g.dayLeasePrice * g.days + orderAmountPice
             }
         })
     })
@@ -274,16 +347,56 @@ const orderAmountPice = computed(() => {
 })
 
 // 提交按钮
-const onCartSubmit = () => {
+const onCartSubmit = async () => {
     ElMessage.closeAll()
+    if (amountDevice.value < 1) {
+        ElMessage({
+            showClose: false,
+            message: '请选择装备',
+            type: 'error',
+        })
+        return
+    }
     if (!protocolChecked.value) {
         ElMessage({
             showClose: false,
             message: '请阅读公司合同',
             type: 'error',
         })
+        return
     }
-    console.log('提交订单')
+
+    // 组装参数
+    const detailsList = amountDeviceList.value.map((e: any) => {
+        return {
+            maId: e.maId,
+            id: e.id,
+            rentBeginTime: e.rentBeginTime + ' ' + '00:00:00',
+            rentEndTime: e.rentEndTime + ' ' + '00:00:00',
+            manageType: e.manageType,
+            days: e.days,
+            num: e.num,
+            costs: e.num * e.days * e.dayLeasePrice,
+        }
+    })
+
+    const submitParams = {
+        cost: orderAmountPice.value,
+        detailsList,
+    }
+
+    const res: any = await submitBookCarApi(submitParams)
+    if (res.code === 200) {
+        ElMessage({
+            showClose: false,
+            message: '提交成功',
+            type: 'success',
+        })
+        allKey.value++
+
+        getBookCarDetailsData()
+    }
+    // console.log(res, '预约车提交结果')
 }
 </script>