Kaynağa Gözat

refactor(PageFour): 优化表单选择器的布局和样式

将选择器从u--input改为直接显示文本,并调整点击区域样式
统一所有选择器的显示方式,提高一致性
添加flex布局使点击区域垂直居中
Yannay 2 ay önce
ebeveyn
işleme
8e4fd31a2a
1 değiştirilmiş dosya ile 12 ekleme ve 12 silme
  1. 12 12
      pages/orderDetailRefactored/components/PageFour.vue

+ 12 - 12
pages/orderDetailRefactored/components/PageFour.vue

@@ -18,18 +18,17 @@
18 18
               <u--input v-model="warehouseInfo.item" placeholder="请输入收单物品" class="info-input" />
19 19
             </u-form-item>
20 20
           </u-col>
21
-          <view @tap="selectCustomerServiceName">
22
-            <u-col span="5.8">
21
+          <u-col span="5.8">
22
+            <view @tap="selectCustomerServiceName">
23 23
               <u-form-item label="收单类型" prop="customerServiceNameLabel">
24
-                <view class="click-wrapper">
25
-                  <u--input v-model="warehouseInfo.customerServiceNameLabel" placeholder="点击选择收单类型" class="info-input"
26
-                    disabled />
24
+                <view class="click-wrapper info-input">
25
+                  {{ warehouseInfo.customerServiceNameLabel || '点击选择收单类型' }}
27 26
                 </view>
28 27
               </u-form-item>
29 28
               <u-picker :show="showCustomerServicePicker" :columns="customerServiceColumns" confirm keyName="label"
30 29
                 @confirm="handleConfirmCustomerService" @cancel="showCustomerServicePicker = false" />
31
-            </u-col>
32
-          </view>
30
+            </view>
31
+          </u-col>
33 32
         </u-row>
34 33
 
35 34
         <!-- 类别、是否需要查码 -->
@@ -37,8 +36,8 @@
37 36
           <u-col span="5.8">
38 37
             <view @tap="selectCategory">
39 38
               <u-form-item label="类别" prop="category">
40
-                <view class="click-wrapper">
41
-                  <u--input v-model="warehouseInfo.categoryLabel" placeholder="点击选择类别" class="info-input" disabled />
39
+                <view class="click-wrapper info-input">
40
+                  {{ warehouseInfo.categoryLabel || '点击选择类别' }}
42 41
                 </view>
43 42
               </u-form-item>
44 43
               <u-picker :show="showCategoryPicker" :columns="categoryColumns" confirm keyName="label"
@@ -48,9 +47,8 @@
48 47
           <u-col span="5.8">
49 48
             <view @tap="selectNeedCheckCode">
50 49
               <u-form-item label="是否需要查码" prop="needCheckCode">
51
-                <view class="click-wrapper">
52
-                  <u--input v-model="warehouseInfo.needCheckCodeLabel" placeholder="点击选择是否需要查码" class="info-input"
53
-                    disabled />
50
+                <view class="click-wrapper info-input">
51
+                  {{ warehouseInfo.needCheckCodeLabel || '点击选择是否需要查码' }}
54 52
                 </view>
55 53
               </u-form-item>
56 54
               <u-picker :show="showNeedCheckCodePicker" :columns="needCheckCodeColumns" confirm keyName="label"
@@ -825,6 +823,8 @@ export default {
825 823
 .click-wrapper {
826 824
   width: 100%;
827 825
   cursor: pointer;
826
+  display: flex;
827
+  align-items: center;
828 828
 }
829 829
 
830 830
 .image-uploader {