front-end/mallApp/src/pages/callback/paySuccess.vue

<template>
    <div class="app-content successPay">
      <div class="callback-wrap">
        <div class="callback-blo">
            <div class="status-img">
              <img :src="`${constant.imgUrl}/retail/callback/success.png`" alt mode="widthFix" />
            </div>
            <div class="status-text app-size-36 app-bold">支付成功</div>
            <div class="call-btn-com call-two-btn">
            <button class="button-com red" @click="goBack()">返回</button>
            </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  export default {
    name: "paySuccess",
    components: {
    },
    data() {
      return {
      };
    },
    onLoad(){
      //返回上一页时刷新
      let pages = getCurrentPages();
      let prevPage = pages[ pages.length - 2 ];
      prevPage.$vm.pageAction = {refresh:1}
    },
    methods: {
      init() {
      },
      goBack(){
        uni.navigateBack()
      }
    }
  };
  </script>
  <style lang="scss" scoped>
  .app-content {
    .callback-wrap {
      padding-top: 50upx;
      background-image: url("../../static/images/callback/bg.png");
      background-repeat: no-repeat;
      background-size: 100% auto;
      .callback-blo {
        width: 90%;
        margin: 0 auto;
        padding: 70upx 0;
        background-color: #fff;
        box-shadow: 2upx 2upx 16upx 0upx rgba(181, 181, 181, 0.29);
        border-radius: 10upx;
        text-align: center;
        // 使用icon
        .icon {
          .iconfont {
            font-size: 170upx;
          }
        }
        // 使用状态图片
        .status-img {
          width: 294upx;
          margin: 0 auto;
        }
        .call-btn-com {
          margin-top:60upx;
          @include disFlex(center, space-evenly);
        }
        // 一个按钮
        .call-one-btn {
          .button-com {
            width: 80%;
            padding-top: 22upx;
            padding-bottom: 22upx;
            font-size: 32upx;
            margin-top: 40upx;
          }
        }
        // 两个按钮
        .call-two-btn {
          .button-com {
            width: 40%;
            padding-top: 22upx;
            padding-bottom: 22upx;
            font-size: 32upx;
          }
        }
      }
      // 优惠券
      .coupon-wrap {
        width: 96%;
        margin: 52upx auto 0;
        position: relative;
        .qrcode-img {
          width: 170upx;
          height: 170upx;
          position: absolute;
          top: 40upx;
          right: 108upx;
        }
      }
    }
  }
  .awaitPayWx,
  .awaitPayYe {
    .status-text {
      margin-top: 22upx;
      margin-bottom: 52upx;
      color: #ffa92e;
    }
    .surplus {
      margin-top: 22upx;
      margin-bottom: 38upx;
    }
    .icon {
      .iconfont {
        color: #ffa92e;
      }
    }
  }
  .registerMember,
  .successPay,
  .successPayCode,
  .successEval {
    .status-text {
      color: #333;
      margin-top: 22upx;
      margin-bottom: 52upx;
    }
  }
  .registerMember {
    .call-back-wrap {
      .qr-code-img {
        width: 300upx;
        height: 300upx;
        margin: 20upx auto;
        img {
          height: 100%;
        }
      }
      .app-color-2 {
        font-size: 30upx;
        margin-bottom: 20upx;
      }
    }
  }
  </style>