调整样式

components/paymentMethod.vue

@@ -42,6 +42,7 @@
         </block>
       </up-radio-group>
     </view>
+    <slot name="bottom"></slot>
   </view>
 </template>
 
@@ -230,11 +231,11 @@ defineExpose({
 .paymentMethod {
   box-sizing: border-box;
   margin-top: 30rpx;
-  border-radius: 18rpx;
+  background-color: #fff;
+  border-radius: 20rpx;
+
 
   .paymentMethod_content {
-    background-color: #fff;
-    border-radius: 22rpx;
     padding: 30rpx 30rpx 0 30rpx;
     box-sizing: border-box;
 
@@ -297,6 +298,9 @@ defineExpose({
     .method_list:nth-child(odd) {
       border-bottom: 2rpx solid #e5e5e5;
     }
+    .method_list:nth-child(2) {
+      padding-bottom: 22rpx;
+    }
   }
 }
 </style>

pages/order/components/charge.vue

@@ -1,11 +1,11 @@
 <template>
   <view>
     <view class="box" v-if="isShow">
-      <view class="u-flex u-col-center" style="align-items: center">
+      <!-- <view class="u-flex u-col-center" style="align-items: center">
         <image src="/static/icon/charge.png" class="charge" mode=""></image>
         <view class="u-m-l-28 color-333 font-700"> 充值享优惠</view>
-      </view>
+      </view> -->
-      <scroll-view scroll-x="true" class="u-m-t-20">
+      <scroll-view scroll-x="true" >
         <view class="list">
           <view
             class="item color1"
@@ -159,10 +159,7 @@ onMounted(() => {
   color: #ff6300;
 }
 .box {
-  background-color: #fdf9f6;
+  padding:0 30rpx;
-  padding: 30rpx;
-  margin-top: 32rpx;
-  border-radius: 22rpx;
   overflow: hidden;
 }
 
@@ -174,12 +171,12 @@ onMounted(() => {
 .list {
   display: flex;
   gap: 20rpx;
-  padding: 20rpx 0;
+  padding-bottom: 20rpx;
 
   .item {
     padding: 36rpx 22rpx;
     border-radius: 42rpx;
-    background: linear-gradient(180deg, #f5f5f5 58.54%, #fff 104.47%);
+    background: linear-gradient(180deg, #F5F5F5 58.54%, #FFF 104.47%);
     display: flex;
     flex-direction: column;
     justify-content: center;

pages/order/confirm-order.vue

@@ -101,21 +101,6 @@
       @changeFree="changeFree"
     ></rechargeFree>
 
-    <!-- 充值享优惠 -->
-    <view
-      v-if="
-        !showFreeDine &&
-        (listinfo.status == 'unpaid' || !listinfo.id) &&
-        cartStore.orderCostSummary.finalPayAmount > 0
-      "
-    >
-      <ChargeVue
-        @updateChargeSel="(e) => updateChargeSel(e)"
-        @updateRechargeId="updateRechargeId"
-        @updateIsShow="updateIsShow"
-        v-if="listinfo.status == 'unpaid' || !listinfo.id"
-      ></ChargeVue>
-    </view>
     <!-- 支付方式 -->
     <paymentMethodes
       ref="paymentMethodref"
@@ -125,14 +110,31 @@
       :changeFreeenable="isBwc"
       v-model="paymentmethod"
       v-if="listinfo.status == 'unpaid' || !listinfo.id"
-    ></paymentMethodes>
+    >
+      <template #bottom>
+        <!-- 充值享优惠 -->
+        <view
+          v-if="
+            !showFreeDine &&
+            (listinfo.status == 'unpaid' || !listinfo.id) &&
+            cartStore.orderCostSummary.finalPayAmount > 0
+          "
+        >
+          <ChargeVue
+            @updateChargeSel="(e) => updateChargeSel(e)"
+            @updateRechargeId="updateRechargeId"
+            @updateIsShow="updateIsShow"
+            v-if="listinfo.status == 'unpaid' || !listinfo.id"
+          ></ChargeVue>
+        </view>
+      </template>
+    </paymentMethodes>
     <view class="fixedview">
       <view
         class="flex-between"
         v-if="listinfo.status == 'unpaid' || !listinfo.id"
       >
         <view class="fixedview_one flex-start">
-
           <view class="fixedview_oneone">实付金额</view>
           <view class="fixedview_onetow" v-if="rechargeItem.id">
             <text>¥</text>
@@ -1147,7 +1149,7 @@ async function init(opt) {
     let res = await APIgetOrderById({
       orderId: listinfo.id,
     });
-    if (res&&typeof res=='object') {
+    if (res && typeof res == "object") {
       setOrder(res);
     }
   }
@@ -1155,11 +1157,11 @@ async function init(opt) {
   const shopInfoRes = await APIusershopInfodetail({
     shopId: options.shopId,
   });
-  if (!isPayBefor()&&options.tableCode) {
+  if (!isPayBefor() && options.tableCode) {
     const res = await APIhistoryOrder({
       tableCode: options.tableCode || "",
     });
-	if (res&&typeof res=='object') {
+    if (res && typeof res == "object") {
       setOrder(res);
     }
   }
@@ -1693,14 +1695,13 @@ page {
     width: 100%;
     padding: 36rpx 36rpx 70rpx 36rpx;
     background: #ffffff;
-	
+
     .fixedview_one {
       display: flex;
-	  flex-direction: column;
+      flex-direction: column;
-	  justify-content: center;
+      justify-content: center;
-	  align-items: center;
+      align-items: center;
-    //   align-items: flex-end;
+      //   align-items: flex-end;
-
 
       .fixedview_oneone {
         font-weight: 400;