下单车辆信息展示修改

liujun001
1 parent 789ce9cb
Showing 1 changed file with 64 additions and 83 deletions
garbage-removal/src/pages/home-info/clean/index.vue
@@ -30,50 +30,43 @@
           </view>
         </view>
       </view>
+      
       <view class="company-clean-container-car-main">
         <view class="company-clean-container-car-main-content">
-          <view v-if="paramFrom.carType" class="company-clean-container-car-main-content-type">
+          <view  class="company-clean-container-car-main-content-type">
             <view class="company-clean-container-car-main-content-type-price-area">
               <text style="color: red;">*</text>车辆信息:
             </view>
-            <view style=" width:100%;display:flex; color:#909399; align-items: center;">
-              <myPiker :parentValue="paramFrom.carType" @change="handlePickerCarInfoConfirm"
-                :modelValue="paramFrom.carType" :array="candidates" :title="'车辆信息'">
-              </myPiker>
-            </view>
           </view>
-          <view class="company-clean-container-car-main-content-img">
-            <image class="company-clean-container-car-main-content-img" :src="carFront" />
+
+          <view>
+              <swiper style="height: 588rpx;" @change="onChangeSwiper" indicator-dots circular >
+                <swiper-item v-for="(car,index) in garCarInfoList" :key="index" >
+                  <view style="font-size: 16px;text-align: center;"><text>{{car.carType}}</text></view>
+                  <view><image :src="combinationImagePath(car)" ></image></view> 
+                  <view><text style="color:#909399;font-size: 14px;">{{car.remark}}</text></view>
+                </swiper-item>
+              </swiper>
           </view>
-          <view class="company-clean-container-car-main-content-remark" style="margin: 20rpx 0;  font-size: 23rpx;">
-            {{ garCarTransportInfo }}
+          
+          <view class="company-clean-container-car-main-content-type">
+            <view class="company-clean-container-car-main-content-type-price-area">
+              <text style="color: red;">*</text>车辆容积:
+            </view>
+            <view style=" width:100%;display:flex; color:#909399; align-items: center;">
+              <text>{{containerVolume}} 方</text>
+            </view>
           </view>
-          <view class=" company-clean-container-car-main-content">
-            <view class="company-clean-container-car-popup">
-              <!-- 主要内容 -->
-              <view class="company-clean-container-car-popup-content">
-                <view class="company-clean-container-car-popup-content-title">
-                  <view style="text-align: left;">
-                    <text style="color: red;">*</text>车辆选择:
-                  </view>
-                </view>
-                <view class="company-clean-container-car-popup-content-box">
-                  <view class="company-clean-container-car-popup-content-box-item"
-                    v-for="(item, index) in garCarInfoList" :key="index">
-                    <view class="company-clean-container-car-popup-content-box-item-text">
-                      {{ item.garOrderCarType }}
-                    </view>
-                    <view class="company-clean-container-car-popup-content-box-item-number"
-                      hover-class="hoverClickStyle">
-                      <u-number-box :min="0" :max="9999" integer buttonSize="46" :inputWidth="100"
-                        v-model="garCarInfoList[item.garOrderCarType].garOrderCarNumber"
-                        :disabledInput="true"></u-number-box>
-                    </view>
-                  </view>
-                </view>
-              </view>
+
+          <view class="company-clean-container-car-main-content-type">
+            <view class="company-clean-container-car-main-content-type-price-area">
+              <text style="color: red;">*</text>添加车辆数量:
+            </view>
+            <view style=" width:100%;display:flex; color:#909399; align-items: center;">
+              <u-number-box :min="0" :max="9999" integer buttonSize="46" :inputWidth="100"  :disabledInput="true" v-model="carNumber[swiperIndex]" @change="numberBoxChange"></u-number-box>
             </view>
           </view>
+          
           <view class="company-clean-container-car-main-content-type">
             <view class="company-clean-container-car-main-content-type-price-area">
               <text style="color: red;">*</text>垃圾类型:
@@ -204,37 +197,11 @@ const isCallBtn = ref(false);
 const garCarInfoList = ref({})
 const garCarLabelInfoList = ref({})
 const garCarLabelInfoNow = ref()
-const garCarTransportInfo = computed(() => {
-  try {
-    let carInfo = garCarLabelInfoNow.value
-    let lengthWidthHeight = carInfo.lengthWidthHeight.split(";");
-    let boxLength = lengthWidthHeight[0]; // 箱子的长度（单位：米）
-    let boxWidth = lengthWidthHeight[1]; // 箱子的宽度（单位：米）
-    let boxHeight = lengthWidthHeight[2]; // 箱子的高度（单位：米）
-    let bagLength = 0.75; // 袋子的长度（单位：米）
-    let bagWidth = 0.45; // 袋子的宽度（单位：米）
-    let bagHeight = 0.16; // 袋子的高度（单位：米）
-
-    let boxVolume = boxLength * boxWidth * boxHeight; // 箱子的体积（单位：立方米）
-    let bagVolume = bagLength * bagWidth * bagHeight; // 袋子的体积（单位：立方米）
-
-    let bagCount = Math.floor(boxVolume / bagVolume); // 箱子可以容纳的袋子数量（向下取整）
-    return `箱体长${boxLength}m宽${boxWidth}m高${boxHeight}m，最多课容纳约${bagCount}袋袋装修垃圾（${bagLength * 100}cm * ${bagWidth * 100}cm每袋）。`
-  } catch (error) {
-    return "符合装修垃圾运输管理规范的专用运输车辆。"
-  }
-})
+const swiperIndex =ref(0)
+const containerVolume=ref("")
+const carNumber=ref([]);
 // 车辆数量
-const garCarNumberCount = computed(() => {
-  let count = 0;
-  if (garCarInfoList.value) {
-    for (const key in garCarInfoList.value) {
-      const element = garCarInfoList.value[key];
-      count = typeof element.garOrderCarNumber === 'number' ? count + element.garOrderCarNumber : count;
-    }
-  }
-  return count;
-})
+const garCarNumberCount = ref()
 const garbageTypeList = ref(["装修垃圾", "建筑垃圾"])
 const paramFrom = ref({
   carNumber: 0,
@@ -268,6 +235,27 @@ const changeAgree = (e) =&gt; {
 const onChange = (e) => {
 }
+const onChangeSwiper=(e)=>{
+  swiperIndex.value = e.detail.current;
+  containerVolume.value = garCarInfoList.value[e.detail.current].containerVolume;
+}
+
+const numberBoxChange=(value)=>{
+  garCarInfoList.value[swiperIndex.value].garOrderCarNumber=value.value;
+  carNumber.value[swiperIndex.value]=value.value;
+  if(!garCarNumberCount.value){
+    garCarNumberCount.value=0;
+  }
+  let va = 0;
+  console.log(garCarInfoList.value[swiperIndex.value].garOrderCarNumber);
+  carNumber.value.forEach(function(item,index,arr){
+      if(item){
+        va = va+item;
+      }
+  })
+
+  garCarNumberCount.value = va;
+}
 /**
  * 初始化信息
  */
@@ -275,6 +263,11 @@ onLoad((options) =&gt; {
   initOptions(options);
 })
+
+const combinationImagePath=(car)=>{
+  return import.meta.env.VITE_BASE_URL+"/"+car.carLeft;
+}
+
 const initOptions = async (options) => {
   companyObj.value = JSON.parse(options.companyObj);
   tel.value = options.tel;
@@ -298,24 +291,9 @@ const initOptions = async (options) =&gt; {
     return
   }
   queryCarList({ companyId: companyObj.value.id }).then(res => {
-    // 设置车辆类型
-    candidates.value = [...new Set(res.data.rows
-      .filter(item => item.containerVolume)
-      .map(item => {
-        garCarLabelInfoList.value[item.containerVolume + "方车"] = item
-        return item.containerVolume + "方车"
-      }))
-    ];
-    // 设置初始车辆数量
-    candidates.value.forEach((item, index) => {
-      garCarInfoList.value[item] = {
-        garOrderCarNumber: 0,
-        garOrderCarType: item
-      }
-    })
-    // 设置默认车辆
-    paramFrom.value.carType = candidates.value[0];
-    garCarLabelInfoNow.value = garCarLabelInfoList.value[paramFrom.value.carType]
+   
+    garCarInfoList.value=res.data.rows;
+
   })
 }
@@ -386,7 +364,10 @@ const orderClick = ref(true)
 const handleOderSure = async () => {
   let garCarInfos = [];
   for (const key in garCarInfoList.value) {
-    garCarInfos.push(garCarInfoList.value[key])
+    if(garCarInfoList.value[key]&& garCarInfoList.value[key].garOrderCarNumber && garCarInfoList.value[key].garOrderCarNumber>0){
+      garCarInfos.push(garCarInfoList.value[key]);
+    }
+    
   }
   let params = {