代码优化

components.d.ts

@@ -8,15 +8,23 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Breadcrumb: typeof import('./src/components/Breadcrumb/index.vue')['default']
+    ElBadge: typeof import('element-plus/es')['ElBadge']
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCarousel: typeof import('element-plus/es')['ElCarousel']
+    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElCountdown: typeof import('element-plus/es')['ElCountdown']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
@@ -27,8 +35,12 @@ declare module 'vue' {
     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']
+    ElStep: typeof import('element-plus/es')['ElStep']
+    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']

src/layout/header.vue

@@ -136,12 +136,21 @@ const onSelectRoles = (type: number) => {
 
 const getBookCarDetailsData = async () => {
     const res: any = await getBookCarDetailsApi()
-    cart.SET_CART_NUM(res.data.length || 0)
+    let amountNum = 0
+    res.data.forEach((e: any) => {
+        amountNum = e.devInfoVoList.length + amountNum
+    })
+    cart.SET_CART_NUM(amountNum)
 }
 getBookCarDetailsData()
-
 const cartNum = computed(() => {
     return cart.cartNum
+
+    // let amountNum = 0
+    // cardList.value.forEach((e: any) => {
+    //     amountNum = e.devInfoVoList.length + amountNum
+    // })
+    // return amountNum
 })
 
 // 查看预约车

src/views/equip/detail.vue

@@ -929,7 +929,11 @@ const onAddCart = async () => {
                 })
                 getData()
                 const res: any = await getBookCarDetailsApi()
-                cart.SET_CART_NUM(res.data.length)
+                let amountNum = 0
+                res.data.forEach((e: any) => {
+                    amountNum = e.devInfoVoList.length + amountNum
+                })
+                cart.SET_CART_NUM(amountNum)
             } else {
                 ElMessage({
                     type: 'error',

src/views/user/orderManagement/detail.vue

@@ -323,7 +323,7 @@ const time = ref([])
                     <el-row class="cart-list" v-for="(goods, j) in cardList.detailsList" :key="j">
                         <el-col class="goods-info">
                             <el-col :span="7">
-                                <img :src="goods.url" alt="" />
+                                <img :src="goods.url" style="width: 160px; height: 120px" alt="" />
                             </el-col>
                             <div class="goods-code">
                                 <div style="font-size: 10px; font-weight: bold">

src/views/user/orderManagement/index.vue

@@ -424,6 +424,225 @@ const confirmFail = async (index: number) => {
         </el-form>
 
         <template v-if="cardList.length > 0">
+            <div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
+                <el-row class="order-title-info">
+                    <el-col :span="8">
+                        <span> 订单编号： </span>
+                        <span>
+                            {{ item.code }}
+                        </span>
+                    </el-col>
+                    <el-col :span="8">
+                        <span> 下单时间： </span>
+                        <span>
+                            {{ item.orderTime }}
+                        </span>
+                    </el-col>
+                    <el-col :span="8">
+                        <span> 装备所属公司： </span>
+                        <span>
+                            {{ item.czcompanyName }}
+                        </span>
+                    </el-col>
+                </el-row>
+                <el-row
+                    style="border-bottom: 1px solid #ccc; margin-bottom: 10px"
+                    class="order-title-info"
+                >
+                    <el-col :span="8">
+                        <span> 出租方联系电话： </span>
+                        <span>
+                            {{ item.personPhone }}
+                        </span>
+                    </el-col>
+                    <el-col :span="8">
+                        <span> 承租方联系电话： </span>
+                        <span>
+                            {{ item.phoneNumber }}
+                        </span>
+                    </el-col>
+                    <el-col :span="8">
+                        <span> 承租方地址： </span>
+                        <span>
+                            {{ item.czcompanyName }}
+                        </span>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+                    <el-col :span="8">
+                        <div
+                            v-for="(goods, j) in item.detailsList"
+                            :key="j"
+                            class="order-items order-info"
+                            :style="
+                                j != item.detailsList.length - 1
+                                    ? 'border-bottom:1px solid #eee'
+                                    : ''
+                            "
+                        >
+                            <img :src="goods.url" style="width: 160px; height: 120px" alt="" />
+                            <div
+                                style="
+                                    flex: 1;
+                                    display: flex;
+                                    justify-content: space-around;
+                                    flex-direction: column;
+                                    padding-left: 12px;
+                                "
+                            >
+                                <el-row style="color: #169bd5; font-weight: bold">
+                                    {{ goods.deviceName }}
+                                </el-row>
+                                <el-row>
+                                    <el-col :span="4"> 租期 </el-col>
+                                    <el-col :span="18"> {{ goods.days }}{{ ' ' + '天' }} </el-col>
+                                </el-row>
+                                <el-row>
+                                    <el-col :span="4"> 租金 </el-col>
+                                    <el-col :span="8">
+                                        {{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}
+                                    </el-col>
+                                    <el-col :span="4"> 数量 </el-col>
+                                    <el-col :span="8"> {{ goods.num }}{{ ' ' + '台' }} </el-col>
+                                </el-row>
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="3" class="order-items-info">
+                        <div>总费用</div>
+                        <div class="red-font">{{ item.cost }} 元</div>
+                    </el-col>
+                    <el-col :span="4" class="order-items-info">
+                        <div>租期</div>
+                        <div style="font-weight: bold; margin-top: 10px">
+                            {{ item.startTime }}至{{ item.endTime }}
+                        </div>
+                    </el-col>
+                    <el-col :span="3" class="order-items-info">
+                        <div
+                            v-if="item.orderStatus == '2'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: blue;
+                            "
+                        >
+                            {{ '待出库' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '3'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #c76f60;
+                            "
+                        >
+                            {{ '待收货' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '4' && isExpired(item)"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #008d06;
+                            "
+                        >
+                            {{ '租赁中' }}
+                            <span style="color: red">(已过期)</span>
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '4' && !isExpired(item)"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #008d06;
+                            "
+                        >
+                            {{ '租赁中' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '5'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #5b33cc;
+                            "
+                        >
+                            {{ '已退租' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '6'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #c00017;
+                            "
+                        >
+                            {{ '已完成' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '7'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #797979;
+                            "
+                        >
+                            {{ '已驳回' }}
+                        </div>
+                    </el-col>
+                    <el-col :span="6" class="handle-btn">
+                        <el-button
+                            v-if="item.orderStatus == '3'"
+                            type="primary"
+                            size="small"
+                            @click="confirmReceipt(index)"
+                            >确认收货</el-button
+                        >
+                        <el-button
+                            v-if="item.orderStatus == '2'"
+                            type="primary"
+                            size="small"
+                            @click="confirmFail(index)"
+                            >取消</el-button
+                        >
+
+                        <el-button @click="handleViewOrder(j, item)" type="primary" size="small">
+                            订单详情
+                        </el-button>
+                        <el-button @click="handleViewWord(j)" type="primary" size="small">
+                            租赁协议
+                        </el-button>
+                        <el-button
+                            v-if="item.orderStatus == '4'"
+                            @click="handleViewBack(item)"
+                            type="primary"
+                            size="small"
+                        >
+                            发起退租
+                        </el-button>
+                        <el-button
+                            v-if="item.orderStatus == '6'"
+                            @click="handleViewList(j)"
+                            type="primary"
+                            size="small"
+                        >
+                            费用清单
+                        </el-button>
+                    </el-col>
+                </el-row>
+            </div>
+        </template>
+
+        <!-- <template v-if="cardList.length > 0">
             <div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
                 <el-row style="border-bottom: 1px solid #ccc">
                     <el-col :span="1">
@@ -566,12 +785,7 @@ const confirmFail = async (index: number) => {
                     class="cart-listAll"
                     :style="{ background: item.orderStatus == '2' ? '#EBEEF5' : 'white' }"
                 >
-                    <el-col :span="1">
+                    <el-col :span="1"> </el-col>
-                        <!-- <div style="text-align: center">
-                        <el-checkbox :key="numberTemp" v-model="goods.isChecked" @change="onChangeGoods(index)" :disabled="goods.orderStatus!='2'">
-                        </el-checkbox>
-                    </div> -->
-                    </el-col>
 
                     <el-col :span="7">
                         <el-row class="cart-list" v-for="(goods, j) in item.detailsList" :key="j">
@@ -738,7 +952,7 @@ const confirmFail = async (index: number) => {
                     </el-col>
                 </el-row>
             </div>
-        </template>
+        </template> -->
 
         <el-empty v-else />
         <PagingComponent
@@ -1039,7 +1253,9 @@ const confirmFail = async (index: number) => {
     .cart-tbody {
         background: #fff;
         padding: 8px 12px;
-        margin: 10px;
+        margin-bottom: 6px;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 
         .cart-user-info {
             display: flex;
@@ -1152,4 +1368,43 @@ const confirmFail = async (index: number) => {
     background-color: skyblue;
     z-index: 9999;
 }
+
+.order-title-info {
+    padding: 6px 4px;
+    font-size: 14px;
+    color: #999;
+}
+
+.order-items {
+    border-right: 1px solid #eee;
+}
+
+.order-info {
+    display: flex;
+    padding: 10px 0;
+}
+
+.order-items-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-right: 1px solid #eee;
+}
+
+.red-font {
+    color: #ff4800;
+    font-weight: bold;
+    margin-top: 10px;
+}
+
+.handle-btn {
+    padding: 0 6px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    .el-button {
+        flex: 1;
+    }
+}
 </style>

src/views/user/orderManagementCz/index.vue

@@ -807,7 +807,7 @@ const handleViewWord = () => {
                     </el-col>
                     <el-col :span="3" class="order-items-info">
                         <div>总费用</div>
-                        <div class="red-font">{{ item.cost }}</div>
+                        <div class="red-font">{{ item.cost }} 元</div>
                     </el-col>
                     <el-col :span="4" class="order-items-info">
                         <div>租期</div>