支付成功页面优化

src/components/paySuccess/paySuccessInfo.vue

@@ -5,15 +5,15 @@
         class="paySuccess_detail"
         :style="{ 'padding-top': paddingTop, 'padding-bottom': paddingBottom }"
       >
-        <div class="iconPay" :style="{'width':imgSize,'height':imgSize}">
+        <div class="iconPay" :style="{'width':imgSize,'height':imgSize}" v-if="iconShow">
           <image mode="aspectFit" :src="icon" alt></image>
         </div>
         <!-- 企业要货开启了待审核 -->
         <template v-if="whetherOpenEnterprisesWantGoods == 1 && whetherOpenApproval == 1">
-          <p class="success">提交成功，等待审核</p>
+          <p class="success" :style="{ fontSize: payTitleSize, color: payTitleColor }">提交成功，等待审核</p>
         </template>
         <template v-else>
-          <p class="success">{{ payTitle }}</p>
+          <p class="success" :style="{ fontSize: payTitleSize, color: payTitleColor }">{{ payTitle }}</p>
           <p v-if="orderDetail.orderType == 5" class="tips">
             您可在【我的】-【我的礼包】中进行送礼
           </p>
@@ -21,7 +21,7 @@
             亦可以直接点下面按钮【立即送出】
           </p>
           <div v-if="orderDetail.orderType == 5"></div>
-          <div v-else class="orderPrice" v-html="subTitle">
+          <div v-else class="orderPrice" :style="subTitleStyle" v-html="subTitle">
             订单金额：
             <span v-if="routeQuery.multiMerchantsFlag || routeQuery.accountBalanceFlag"
               >￥{{ routeQuery.totalMoney }}</span
@@ -45,14 +45,14 @@
                 v-if="routeQuery.multiMerchantsFlag"
                 @click="toOrderList"
               >
-                <van-button size="normal">查看详情</van-button>
+                <van-button size="normal" :style="btnStyle">查看详情</van-button>
               </div>
-              <div v-else @click="toOrderDetail">
-                <van-button size="normal">查看详情</van-button>
+              <div v-else @click="toOrderDetail" :style="btnStyle">
+                <van-button size="normal" :style="btnStyle">查看详情</van-button>
               </div>
             </template>
-            <div @click="toIndex">
-              <van-button size="normal">回首页</van-button>
+            <div @click="toIndex" :style="btnStyle">
+              <van-button size="normal" :style="btnStyle">返回首页</van-button>
             </div>
           </template>
         </div>
@@ -108,7 +108,7 @@
     <div class="line" v-if="orderDetail.orderType == 5"></div>
     <div class="bottom_box" v-if="orderDetail.orderType == 5">
       <div class="bottom_item" @click="toShare">现在就分享</div>
-      <div class="bottom_item bottom_last" @click="backTo">回首页</div>
+      <div class="bottom_item bottom_last" @click="backTo">返回首页</div>
     </div>
   </div>
 </template>
@@ -173,9 +173,18 @@ export default {
     icon() {
       return this.datas.componentData["icon"]||'http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/83a4a0bc-37fc-411e-bc5c-6dd9c1b4a921.png';
     },
+    iconShow() {
+      return this.datas.componentData["iconShow"] === undefined ? true : this.datas.componentData["iconShow"];
+    },
     payTitle() {
       return this.datas.componentData["title"];
     },
+    payTitleSize() {
+      return (this.datas.componentData["titleSize"] || 16) + 'px';
+    },
+    payTitleColor() {
+      return this.datas.componentData["titleColor"] || '#333';
+    },
     subTitle() {
       let totalMoney = 0;
       if (this.routeQuery.multiMerchantsFlag) {
@@ -202,6 +211,12 @@ export default {
       });
       return subTitle;
     },
+    subTitleStyle() {
+      return {
+        color: this.datas.componentData["subTitleColor"] || '#333',
+        fontSize: (this.datas.componentData['subTitleSize'] || 40) + 'px'
+      }
+    },
     paddingTop() {
       return this.datas.componentData["paddingTop"] + "px";
     },
@@ -216,6 +231,13 @@ export default {
     },
     orderSns() {
       return this.render?this.routeQuery.orderSns:'----------'
+    },
+    btnStyle() {
+      return {
+        color: this.datas.componentData["btnColor"] || 'rgba(0, 0, 0, 0.4)',
+        backgroundColor: this.datas.componentData["btnBackgroundColor"] || 'rgba(0, 0, 0, 0)',
+        'border-radius': (this.datas.componentData["btnBorderRadius"] || 25) + 'px'
+      }
     }
   },
   onLoad() {
@@ -404,7 +426,7 @@ export default {
       line-height: 20px;
       font-size: 18px;
       font-family: MicrosoftYaHei;
-      font-weight: 400;
+      font-weight: 600;
       color: #191919;
     }
     .tips {
@@ -415,11 +437,7 @@ export default {
     .orderPrice {
       text-align: center;
       margin: 10px;
-      font-size: 14px;
-      span {
-        font-size: 18px;
-        color: #666;
-      }
+      font-weight: 500;
     }
     .price {
       width: 116px;
@@ -447,14 +465,13 @@ export default {
     }
     .bottom {
       margin-top: 10px;
-      justify-content: space-between;
+      justify-content: center;
+      gap: 20px;
       /deep/.van-button {
-        width: 140px;
-        height: 35px;
-        color: #929292;
-        line-height: 35px;
-        border-radius: 4px;
-        border: 1px solid rgba(146, 146, 146, 1);
+        height: auto;
+        line-height: normal;
+        padding: 6px 24px;
+        border: 1px solid;
       }
       .toShare {
         background: var(--main-color);

src/components/paySuccess/payWithGifts.vue

 <template>
   <div v-if="isShowIntegral || isShowGifts" :style="{ 'padding-top': paddingTop, 'padding-bottom': paddingBottom }">
+    <div class="title">恭喜你获得</div>
     <div class="pay-with-gifts__wrapper">
       <template v-if="isShowGifts">
         <!-- 推广类型: (0: 送优惠券 1: 抽奖大转盘 2: 优惠码) -->
@@ -152,6 +153,13 @@
 </script>
 
 <style lang="scss" scoped>
+.title {
+  color: #666;
+  font-size: 13px;
+  padding: 8px;
+  text-align: center;
+}
+
 .pay-with-gifts__wrapper {
   padding: 0 12px;