feat: 下单修改

guzijian
1 parent b4a8b373
Showing 2 changed files with 81 additions and 55 deletions
garbage-removal/src/pages/home/clean/index.vue
garbage-removal/src/pages/login/index.vue
@@ -7,10 +7,9 @@
     <u-picker closeOnClickOverlay :show="garbageTypeShowFlag" :columns="garbageTypeList" :itemHeight="100"
       @confirm="handlePickerGarbageTypeConfirm" @close="handleGarbageTypeClick(false)"
       @cancel="handleGarbageTypeClick(false)"></u-picker>
-    <u-popup :zIndex="10074" closeOnClickOverlay :show="carPopupShowFlag" :round="10" @close="handlePopupClick(false)"
+    <!-- <u-popup :zIndex="10074" closeOnClickOverlay :show="carPopupShowFlag" :round="10" @close="handlePopupClick(false)"
       @open="handlePopupClick(true)">
       <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: center;">
@@ -28,15 +27,13 @@
                   v-model="garCarInfoList[item.garOrderCarType].garOrderCarNumber" :disabledInput="true"></u-number-box>
               </view>
             </view>
-
           </view>
         </view>
-        <!-- 占位盒子 -->
         <view class="company-clean-container-car-popup-button-safe">
           &nbsp;
         </view>
       </view>
-    </u-popup>
+    </u-popup> -->
   </view>
   <view class="company-clean-container">
     <view class="company-clean-container-box">
@@ -59,19 +56,8 @@
       </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-price-area">
-              <text style="color: red;">*</text>车辆类型:
-            </view>
-            <!-- <scrollText :candidates="candidates" /> -->
-            <view style="display:flex; align-items: center;" hover-class="hoverClickStyle"
-              @click.stop="handleCarInfoClick(true)">
-              <u--input color="#909399" border="none" style="pointer-events:none" :modelValue="paramFrom.carType"
-                type="text" placeholder-class="line" readonly />
-            </view>
-          </view>
           <view class="company-clean-container-car-main-content">
-            <view v-if="paramFrom.carType" class="company-clean-container-car-main-content-type">
+            <!-- <view v-if="paramFrom.carType" 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>
@@ -79,6 +65,30 @@
                 <u-number-box :min="0" :max="9999" integer buttonSize="46" :inputWidth="100"
                   v-model="garCarInfoList[paramFrom.carType].garOrderCarNumber"></u-number-box>
               </view>
+            </view> -->
+            <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>
           </view>
@@ -91,6 +101,43 @@
                 type="text" placeholder-class="line" readonly />
             </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;justify-content: center;align-items: center; ">
+              <view style="display: flex;">
+                <up-radio-group shape="square" size="30" v-model="paramFrom.garInCarStore" placement="row"
+                  @change="handleInCarClick">
+                  <up-radio activeColor="#19a97c" labelSize="30"
+                    :customStyle="{ marginBottom: '8px', marginRight: '30rpx' }" label="是" :name="true">
+                  </up-radio>
+                  <up-radio activeColor="#19a97c" labelSize="30"
+                    :customStyle="{ marginBottom: '8px', marginRight: '30rp' }" label="否" :name="false">
+                  </up-radio>
+                </up-radio-group>
+              </view>
+            </view>
+          </view>
+          <view v-if="paramFrom.garInCarStore" class="company-in-car-store-box-info">
+            <view class="company-clean-container-site-image-info-input-remark-box">
+              <u--textarea v-model="paramFrom.remark" placeholder="请输入备注 示例：限高2、3米，需要进入车库..."></u--textarea>
+            </view>
+            <view class="company-clean-container-car-main-content-remark" style="margin-top: 20rpx;  font-size: 23rpx;">
+              提示：需要进入车库需要写车辆限高，部门车库限高2.3m，如果装修垃圾在车库，要考虑车辆是否能进入。
+            </view>
+          </view>
+          <view v-if="paramFrom.carType" 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>
+            <!-- <scrollText :candidates="candidates" /> -->
+            <view style="display:flex; align-items: center;" hover-class="hoverClickStyle"
+              @click.stop="handleCarInfoClick(true)">
+              <u--input color="#909399" border="none" style="pointer-events:none" :modelValue="paramFrom.carType"
+                type="text" placeholder-class="line" readonly />
+            </view>
+          </view>
           <view class="company-clean-container-car-main-content-img">
             <image class="company-clean-container-car-main-content-img" :src="carFront" />
           </view>
@@ -110,34 +157,13 @@
           <u-upload width="200" height="150" :fileList="fileList" @afterRead="afterRead" :deletable="deletable"
             @delete="deletePic" name="10" multiple :maxCount="10" :previewFullImage="true"></u-upload>
         </view>
-        <view class="company-in-car-store-box">
-          <view class="company-in-car-store-box-content"
-            style="font-size: 15rpx;display: flex;color: white; justify-content: flex-end;">
-            <view
-              :class="paramFrom.garInCarStore ? 'company-in-car-store-box-text-yes' : 'company-in-car-store-box-text-no'"
-              @click="handleInCarClick" style="padding: 10rpx;box-sizing: border-box;border-radius: 15rpx;">
-              需要进入车库?
-            </view>
-          </view>
-        </view>
-        <view v-if="paramFrom.garInCarStore" class="company-in-car-store-box-info">
-          <view class="company-clean-container-site-image-info-input-remark">
-            填写备注
-          </view>
-          <view class="company-clean-container-site-image-info-input-remark-box">
-            <u--textarea v-model="paramFrom.remark" placeholder="请输入内容"></u--textarea>
-          </view>
-          <view class="company-in-car-store-box-prompt" style="margin-top: 20rpx;  font-size: 23rpx;">
-            提示：需要进入车库需要写车辆限高，部门车库限高2.3m，如果装修垃圾在车库，要考虑车辆是否能进入。
-          </view>
-        </view>
       </view>
       <view class="company-clean-container-site-image-info-sure-button">
         <view class="company-clean-container-site-image-info-sure-button-radio">
           <view @click="changeAgree">
             <u-checkbox-group v-model="paramFrom.sureReadFlag" placement="row">
-              <u-checkbox activeColor="#19a97c" :customStyle="{ marginBottom: '0px', marginTop: '1px' }" size="25"
-                labelSize="25" shape="square" :key="0" :name="true" :labelDisabled="true"
+              <u-checkbox activeColor="#19a97c" :customStyle="{ marginBottom: '0px', marginTop: '1px' }" size="28"
+                labelSize="28" shape="square" :key="0" :name="true" :labelDisabled="true"
                 labelColor="#909399"></u-checkbox>
             </u-checkbox-group>
           </view>
@@ -158,7 +184,7 @@
       <view class="company-clean-bottom-box">
         <view class="company-clean-bottom-left">
           <view class="company-clean-bottom-left-icon">
-            <u-icon @click="carPopupShowFlag = true" :stop="true" size="50" name="car-fill"></u-icon>
+            <u-icon :stop="true" size="50" name="car-fill"></u-icon>
           </view>
           <view class="company-clean-bottom-left-number">
             <up-badge :type="type" max="99" :value="garCarNumberCount"></up-badge>
@@ -223,7 +249,7 @@ const garCarTransportInfo = computed(() =&gt; {
     let bagVolume = bagLength * bagWidth * bagHeight; // 袋子的体积（单位：立方米）
     let bagCount = Math.floor(boxVolume / bagVolume); // 箱子可以容纳的袋子数量（向下取整）
-
+    console.log(bagCount, boxVolume, bagVolume);
     return `箱体长${boxLength}m宽${boxWidth}m高${boxHeight}m，最多课容纳约${bagCount}袋袋装修垃圾（75cm * 45cm每袋）。`
   } catch (error) {
     return "符合装修垃圾运输管理规范的新型环保智能装修垃圾运输车。"
@@ -337,8 +363,10 @@ const initOptions = async (options) =&gt; {
   })
 }
-const handleInCarClick = () => {
-  paramFrom.value.garInCarStore = !paramFrom.value.garInCarStore
+const handleInCarClick = (val) => {
+  // console.log(val);
+  // console.log(paramFrom.value.garInCarStore);
+  // paramFrom.value.garInCarStore = !paramFrom.value.garInCarStore
 }
 const handleCarInfoClick = (val) => {
@@ -779,7 +807,7 @@ $custom-bottom-height: 200rpx;
         box-sizing: border-box;
         display: flex;
         // flex-flow: row wrap;
-        font-size: 25rpx;
+        font-size: 28rpx;
         color: $u-info;
       }
     }
@@ -855,18 +883,17 @@ $custom-bottom-height: 200rpx;
 // 弹出框
 .company-clean-container-car-popup {
-  min-height: 450rpx;
-  padding: $custom-page-padding;
   box-sizing: border-box;
+  color: $u-info;
   .company-clean-container-car-popup-content {
     font-size: 28rpx;
     .company-clean-container-car-popup-content-box {
       box-sizing: border-box;
-      padding: $custom-page-padding;
-      border: 2rpx solid #19a97c;
+      padding: 0 $custom-page-padding;
       border-radius: 10rpx;
+      border: 1rpx solid $u-info;
       .company-clean-container-car-popup-content-box-item {
         display: flex;
@@ -882,11 +909,10 @@ $custom-bottom-height: 200rpx;
     }
     .company-clean-container-car-popup-content-title {
-      color: $u-main-color;
+      color: $u-info;
       box-sizing: border-box;
-      margin-bottom: 20rpx;
-      font-size: 30rpx;
-      font-weight: bold;
+      font-size: 28rpx;
+      line-height: 30rpx;
     }
   }
@@ -24,7 +24,7 @@
 				<view style="display: flex; justify-content: flex-start;" @click="radioChange">
 					<u-checkbox-group v-model="agree" placement="row" @change="groupChange">
 						<!-- 选中颜色为绿色 -->
-						<u-checkbox shape="square" activeColor="#19a97c" :size="24"
+						<u-checkbox shape="square" activeColor="#19a97c" :size="28"
 							:customStyle="{ marginBottom: '0px', marginTop: '1px' }" :key="0" :name="true">
 						</u-checkbox>
 					</u-checkbox-group>
@@ -193,7 +193,7 @@ export default {
 		.hint {
 			padding: 20rpx 40rpx;
-			font-size: 25rpx;
+			font-size: 28rpx;
 			color: $u-tips-color;
 			display: flex;
 			justify-content: flex-start;