预约车问题修复

src/views/cart/components/date-picker-button.vue

@@ -1,6 +1,11 @@
 <template>
     <div class="custom-date-picker">
-        <el-button @click="showPicker = !showPicker" :size="size" class="date-picker-button">
+        <el-button
+            @click="showPicker = !showPicker"
+            :size="size"
+            class="date-picker-button"
+            :disabled="props.isDisabled"
+        >
             {{ displayDate }}
         </el-button>
         <el-date-picker
@@ -25,7 +30,7 @@ const disabledDate = (date) => {
     const today = new Date()
     // 禁用今天之前的日期
     // return date.getTime() < today.getTime()
-    return date.setHours(0, 0, 0, 0) < today.setHours(0, 0, 0, 0);
+    return date.setHours(0, 0, 0, 0) < today.setHours(0, 0, 0, 0)
 }
 
 const props = defineProps({
@@ -65,6 +70,10 @@ const props = defineProps({
         type: Number,
         default: 0,
     },
+    isDisabled: {
+        type: Boolean,
+        default: true,
+    },
 })
 
 const emit = defineEmits(['update:modelValue', 'onLeaseDateChange'])

src/views/cart/index.vue

@@ -72,12 +72,19 @@
                                 v-model="goods.isChecked"
                                 @change="onChangeGoods(index)"
                                 :key="goods.id"
+                                :disabled="goods.maStatus != 2"
                             >
                             </el-checkbox>
                         </div>
                     </el-col>
                     <el-col :span="9" class="goods-info">
-                        <img :src="goods.picUrl" alt="" />
+                        <div class="img-box">
+                            <img :src="goods.picUrl" alt="" />
+                            <div class="img-mask" v-if="goods.maStatus != 2">
+                                <span> 装备已下架 </span>
+                            </div>
+                        </div>
+
                         <div class="goods-code">
                             <div style="font-size: 14px; font-weight: bold">
                                 {{ goods.deviceName }}
@@ -112,6 +119,7 @@
                                 size="large"
                                 placeholder="选择日期"
                                 @onLeaseDateChange="onLeaseDateChange"
+                                :isDisabled="goods.maStatus != 2"
                             />
                         </div>
                     </el-col>
@@ -133,6 +141,7 @@
                                 :min="1"
                                 :max="goods.deviceCount || 1"
                                 size="small"
+                                :disabled="goods.maStatus != 2"
                             />
                         </div>
                     </el-col>
@@ -406,7 +415,9 @@ const onChangeAll = (e: boolean) => {
     cardList.value.forEach((item: any) => {
         item.isChecked = e
         item.devInfoVoList.forEach((j: any) => {
-            j.isChecked = e
+            if (j.maStatus == 2) {
+                j.isChecked = e
+            }
         })
     })
 }
@@ -419,7 +430,11 @@ const onChangeGoods = (index: number) => {
 }
 // 公司全选事件
 const onChangeCompany = (e: boolean, index: number, item: any) => {
-    cardList.value[index].devInfoVoList.every((j) => (j.isChecked = e))
+    cardList.value[index].devInfoVoList.every((j: any) => {
+        if (j.maStatus == 2) {
+            j.isChecked = e
+        }
+    })
 }
 
 // 计算所有装备
@@ -435,7 +450,7 @@ const allChecked = computed(() => {
     if (cardList.value.length < 1) {
         return false
     } else {
-        return cardList.value.every((e: any) => e.isChecked === true)
+        return cardList.value.every((e: any) => e.maStatus == 2 && e.isChecked === true)
     }
 })
 
@@ -444,19 +459,19 @@ const amountDevice = computed(() => {
     let amountNum = 0
     cardList.value.forEach((e: any) => {
         e.devInfoVoList.forEach((g: any) => {
-            if (g.isChecked) {
+            if (g.isChecked && g.maStatus == 2) {
                 amountNum++
             }
         })
     })
     return amountNum
 })
-// 已勾选的装备数量
+// 已勾选的装备列表
 const amountDeviceList = computed(() => {
     let selectList: any = []
     cardList.value.forEach((e: any) => {
         e.devInfoVoList.forEach((g: any) => {
-            if (g.isChecked) {
+            if (g.isChecked && g.maStatus == 2) {
                 selectList.push(g)
             }
         })
@@ -469,7 +484,7 @@ const orderAmountPice = computed(() => {
     let orderAmountPice = 0
     cardList.value.forEach((e: any) => {
         e.devInfoVoList.forEach((g: any) => {
-            if (g.isChecked) {
+            if (g.isChecked && g.maStatus == 2) {
                 orderAmountPice = g.num * g.dayLeasePrice * g.days + orderAmountPice
             }
         })
@@ -854,6 +869,30 @@ getReceiptGoodsAddress()
                 display: flex;
                 align-content: center;
 
+                .img-box {
+                    position: relative;
+
+                    .img-mask {
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        bottom: 10px;
+                        opacity: 0.6;
+                        background-color: #333;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: flex-end;
+                        align-items: center;
+
+                        span {
+                            color: #fff;
+                            font-weight: bold;
+                            font-size: 16px;
+                        }
+                    }
+                }
+
                 img {
                     width: 160px;
                     height: 100px;