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

<template>
  <div class="app-content" :class="[contentClass]">
    <div class="callback-wrap">
      <div class="callback-blo">
        <div class="status-text app-size-36 app-bold" style="margin-top:30upx;">支付成功</div>
        <block></block>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "callback",
  components: {},
  data() {
    return {
      constant: this.$constant,
      pageTit: "",
      pageStatus: 1,
      contentClass: "",
      payDiscountPrice: null,
      payDiscountType: 0,
      passwordModal: false,
      form: {
        payPassword: ""
      },
      payCallData: {},
      merchantInfo: {}
    };
  },
  computed: {},
  onLoad() {},
  methods: {
    init() {
      this.pageStatus = this.option.pageStatus;
      this.payDiscountPrice = this.option.payDiscountPrice;
      this.payDiscountType = this.option.payDiscountType;
      this.initClass(this.pageStatus);
    },
    //初始样式
    initClass(val) {
      switch (val) {
        case "1":
          this.pageTit = "待支付";
          this.contentClass = "awaitPayYe";
          break;
        case "2":
          this.pageTit = "待支付";
          this.contentClass = "awaitPayWx";
          break;
        case "3":
          this.pageTit = "支付成功";
          this.contentClass = "successPay";
          break;
        case "4":
          this.pageTit = "评价成功";
          this.contentClass = "successEval";
          break;
        case "5":
          this.pageTit = "支付成功";
          this.contentClass = "successPayCode";
          break;
        case "6":
          this.pageTit = "提交成功";
          this.contentClass = "registerMember";
          break;
        default:
          this.pageTit = "支付成功";
          this.contentClass = "awaitPayYe";
          break;
      }

      uni.setNavigationBarTitle({
        title: this.pageTit
      });
    }
  }
};
</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: 100upx 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: 56upx;
        @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;
        }
        .default {
          margin-right: 20upx;
        }
      }
    }
    // 优惠券
    .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>