Kaynağa Gözat

把page2的核准价和page3的核价和立即支付按钮向左移动,避免被挡住

Yannay 1 ay önce
ebeveyn
işleme
97f0beaaa4

+ 39 - 23
pages/orderDetailRefactored/components/PageThree.vue

@@ -54,7 +54,7 @@
54
       <view class="detail-image-section">
54
       <view class="detail-image-section">
55
         <view class="detail-image-header">
55
         <view class="detail-image-header">
56
           <text class="detail-image-title">高清实物图(拖拽排序)</text>
56
           <text class="detail-image-title">高清实物图(拖拽排序)</text>
57
-          <u-button type="primary"  shape="circle" plain text="核价" size="small" @click="handlePricing"></u-button>
57
+          <u-button type="primary" shape="circle" plain text="核价" size="small" class="pricing-btn" @click="handlePricing"></u-button>
58
         </view>
58
         </view>
59
         <view class="detail-image-content">
59
         <view class="detail-image-content">
60
           <view class="detail-image-list">
60
           <view class="detail-image-list">
@@ -83,7 +83,12 @@
83
       <view class="payment-section">
83
       <view class="payment-section">
84
         <view class="payment-total-container">
84
         <view class="payment-total-container">
85
           <text class="payment-label">支付总额</text>
85
           <text class="payment-label">支付总额</text>
86
-          <u-input v-model="paymentAmount" class="payment-amount" type="number" decimal="2" prefix="¥" />
86
+          <view class="payment-amount-wrap">
87
+            <u-input v-model="paymentAmount" class="payment-amount" type="number" decimal="2" prefix="¥" />
88
+          </view>
89
+          <view class="pay-now-btn-wrap">
90
+          <u-button type="primary" shape="circle" plain text="立即支付" size="small" @click="handlePayNowClick"></u-button>
91
+        </view>
87
         </view>
92
         </view>
88
         <view class="payment-buttons-row">
93
         <view class="payment-buttons-row">
89
           <view class="payment-button" @click="handleUnpaidClick">
94
           <view class="payment-button" @click="handleUnpaidClick">
@@ -95,9 +100,6 @@
95
             <text class="button-text">待跟进</text>
100
             <text class="button-text">待跟进</text>
96
           </view>
101
           </view>
97
         </view>
102
         </view>
98
-        <view class="pay-now-button" @click="handlePayNowClick">
99
-          <text class="button-text">立即支付</text>
100
-        </view>
101
       </view>
103
       </view>
102
     </view>
104
     </view>
103
 
105
 
@@ -839,6 +841,7 @@ export default {
839
   grid-template-columns: 1fr auto;
841
   grid-template-columns: 1fr auto;
840
   margin-bottom: 20rpx;
842
   margin-bottom: 20rpx;
841
   padding-bottom: 20rpx;
843
   padding-bottom: 20rpx;
844
+  padding-right: 100rpx; /* 右侧留空,避免被固定页面导航遮挡,使整行(含核价按钮)左移 */
842
   border-bottom: 1rpx solid map-get($colors, border);
845
   border-bottom: 1rpx solid map-get($colors, border);
843
 }
846
 }
844
 
847
 
@@ -945,16 +948,43 @@ export default {
945
   font-size: 36rpx;
948
   font-size: 36rpx;
946
   font-weight: 700;
949
   font-weight: 700;
947
   min-width: 140rpx;
950
   min-width: 140rpx;
951
+  flex-shrink: 0;
952
+}
953
+
954
+.payment-amount-wrap {
955
+  flex: 1;
956
+  display: flex;
957
+  justify-content: center;
958
+  align-items: center;
959
+  min-width: 0;
948
 }
960
 }
949
 
961
 
950
-.payment-amount {
962
+.payment-amount-wrap .payment-amount {
951
   font-size: 48rpx;
963
   font-size: 48rpx;
952
   font-weight: 600;
964
   font-weight: 600;
953
   color: #f53f3f;
965
   color: #f53f3f;
954
-  width: auto;
955
-  min-width: 150rpx;
966
+  width: 100%;
967
+  max-width: 240rpx;
956
   border: none;
968
   border: none;
957
-  text-align: right !important;
969
+  text-align: center;
970
+}
971
+
972
+/* 让 u-input 内部输入框文字居中 */
973
+.payment-amount-wrap :deep(.u-input__content__field-wrapper__field),
974
+.payment-amount-wrap :deep(input) {
975
+  text-align: center !important;
976
+}
977
+
978
+.pay-now-btn-wrap {
979
+  flex-shrink: 0;
980
+  display: inline-flex;
981
+}
982
+
983
+.payment-total-container .pay-now-btn-wrap .u-button,
984
+.payment-total-container .pay-now-btn-wrap .u-btn {
985
+  width: auto !important;
986
+  min-width: 0 !important;
987
+  flex: none !important;
958
 }
988
 }
959
 
989
 
960
 .payment-buttons-row {
990
 .payment-buttons-row {
@@ -977,20 +1007,6 @@ export default {
977
   gap: 12rpx;
1007
   gap: 12rpx;
978
 }
1008
 }
979
 
1009
 
980
-.pay-now-button {
981
-  width: 100%;
982
-  border-radius: 12rpx;
983
-  padding: 32rpx 0;
984
-  display: flex;
985
-  flex-direction: column;
986
-  align-items: center;
987
-  justify-content: center;
988
-  background-color: #108cff;
989
-  color: #fff;
990
-  cursor: pointer;
991
-  box-shadow: 0 4rpx 12rpx rgba(16, 140, 255, 0.2);
992
-}
993
-
994
 .button-text {
1010
 .button-text {
995
   font-size: 28rpx;
1011
   font-size: 28rpx;
996
   font-weight: 500;
1012
   font-weight: 500;

+ 31 - 12
pages/orderDetailRefactored/components/PageTwo.vue

@@ -114,15 +114,18 @@
114
           </view>
114
           </view>
115
           <view class="number-box-container">
115
           <view class="number-box-container">
116
             <view class="price-input-box">
116
             <view class="price-input-box">
117
-              <text class="price-label">核准价¥</text>
118
-              <input 
119
-                type="number" 
120
-                v-model="approvedPrice" 
121
-                class="price-input" 
122
-                placeholder="0" 
123
-                min="0"
124
-                @input="onPriceInput" 
125
-              />
117
+              <text class="price-label">核准价</text>
118
+              <view class="price-value-wrap">
119
+                <text class="yuan-prefix">¥</text>
120
+                <input 
121
+                  type="number" 
122
+                  v-model="approvedPrice" 
123
+                  class="price-input" 
124
+                  placeholder="0" 
125
+                  min="0"
126
+                  @input="onPriceInput" 
127
+                />
128
+              </view>
126
             </view>
129
             </view>
127
           </view>
130
           </view>
128
           <view class="quick-actions bottom-actions">
131
           <view class="quick-actions bottom-actions">
@@ -607,6 +610,7 @@ export default {
607
 
610
 
608
 .price-section {
611
 .price-section {
609
   padding: 20rpx;
612
   padding: 20rpx;
613
+  padding-right: 20rpx; /* 整体往左挪,避免被右侧固定导航遮挡 */
610
 }
614
 }
611
 
615
 
612
 .price-picker-container {
616
 .price-picker-container {
@@ -670,15 +674,30 @@ export default {
670
   min-width: 120rpx;
674
   min-width: 120rpx;
671
 }
675
 }
672
 
676
 
677
+.price-value-wrap {
678
+  flex: 1;
679
+  display: flex;
680
+  align-items: center;
681
+  min-width: 0;
682
+}
683
+
684
+.yuan-prefix {
685
+  font-size: 48rpx;
686
+  font-weight: 600;
687
+  margin-right: 8rpx;
688
+  flex-shrink: 0;
689
+}
690
+
673
 .price-input {
691
 .price-input {
674
-  width: 100%;
692
+  flex: 1;
693
+  min-width: 0;
675
   border: none;
694
   border: none;
676
   outline: none;
695
   outline: none;
677
   background-color: transparent;
696
   background-color: transparent;
678
-  text-align: right;
697
+  text-align: left;
679
   font-size: 48rpx;
698
   font-size: 48rpx;
680
   font-weight: 600;
699
   font-weight: 600;
681
-  padding: 0 10rpx;
700
+  padding: 0 10rpx 0 0;
682
 }
701
 }
683
 
702
 
684
 .detail-image-card {
703
 .detail-image-card {