|
|
@@ -0,0 +1,230 @@
|
|
|
+<template>
|
|
|
+ <div class="app-content" :class="[contentClass]">
|
|
|
+ <div class="callback-wrap">
|
|
|
+ <div class="callback-blo">
|
|
|
+ <block>
|
|
|
+ <div class="status-img">
|
|
|
+ <img :src="`${constant.imgUrl}/retail/callback/success.png`" alt mode="widthFix" />
|
|
|
+ </div>
|
|
|
+ </block>
|
|
|
+ <div class="status-text app-size-36 app-bold">{{ pageTit }}</div>
|
|
|
+ <block v-if="pageStatus == 3 || pageStatus == 4 || pageStatus == 5"></block>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import wexinPay from "@/utils/pay/wxPay";
|
|
|
+import { getMerchantInfo } from "@/api/common";
|
|
|
+import { getShopUser } from "@/utils/auth";
|
|
|
+import { balancePay, wxPay } from "@/api/order";
|
|
|
+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: {
|
|
|
+ ...mapGetters({ shopUser: "getShopUser" }),
|
|
|
+ isYeBtnShow() {
|
|
|
+ if (this.$util.isEmpty(this.shopUser)) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return this.shopUser.userAsset.balance > this.option.totalPrice;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {},
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ this.pageStatus = this.option.pageStatus;
|
|
|
+ console.log("pageStatus 值发生变化");
|
|
|
+ console.log(this.pageStatus);
|
|
|
+ this.payDiscountPrice = this.option.payDiscountPrice;
|
|
|
+ this.payDiscountType = this.option.payDiscountType;
|
|
|
+ this.initClass(this.pageStatus);
|
|
|
+ getShopUser();
|
|
|
+ getMerchantInfo().then(res => {
|
|
|
+ this.merchantInfo = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ passwordModalClick(e) {
|
|
|
+ if (e.index === 0) {
|
|
|
+ this.modalCancel();
|
|
|
+ } else {
|
|
|
+ this._balancePay();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ modalCancel() {
|
|
|
+ this.passwordModal = false;
|
|
|
+ this.form.payPassword = "";
|
|
|
+ },
|
|
|
+ //初始样式
|
|
|
+ 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: 50px;
|
|
|
+ background-image: url("../../static/images/callback/bg.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% auto;
|
|
|
+ .callback-blo {
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 70px 0;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 2px 2px 16px 0px rgba(181, 181, 181, 0.29);
|
|
|
+ border-radius: 10px;
|
|
|
+ text-align: center;
|
|
|
+ // 使用icon
|
|
|
+ .icon {
|
|
|
+ .iconfont {
|
|
|
+ font-size: 170px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 使用状态图片
|
|
|
+ .status-img {
|
|
|
+ width: 294px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .call-btn-com {
|
|
|
+ margin-top: 56px;
|
|
|
+ @include disFlex(center, space-evenly);
|
|
|
+ }
|
|
|
+ // 一个按钮
|
|
|
+ .call-one-btn {
|
|
|
+ .button-com {
|
|
|
+ width: 80%;
|
|
|
+ padding-top: 22px;
|
|
|
+ padding-bottom: 22px;
|
|
|
+ font-size: 32px;
|
|
|
+ margin-top: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 两个按钮
|
|
|
+ .call-two-btn {
|
|
|
+ .button-com {
|
|
|
+ width: 40%;
|
|
|
+ padding-top: 22px;
|
|
|
+ padding-bottom: 22px;
|
|
|
+ font-size: 32px;
|
|
|
+ }
|
|
|
+ .default {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 优惠券
|
|
|
+ .coupon-wrap {
|
|
|
+ width: 96%;
|
|
|
+ margin: 52px auto 0;
|
|
|
+ position: relative;
|
|
|
+ .qrcode-img {
|
|
|
+ width: 170px;
|
|
|
+ height: 170px;
|
|
|
+ position: absolute;
|
|
|
+ top: 40px;
|
|
|
+ right: 108px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// 待支付 - 公共
|
|
|
+.awaitPayWx,
|
|
|
+.awaitPayYe {
|
|
|
+ .status-text {
|
|
|
+ margin-top: 22px;
|
|
|
+ margin-bottom: 52px;
|
|
|
+ color: #ffa92e;
|
|
|
+ }
|
|
|
+ .surplus {
|
|
|
+ margin-top: 22px;
|
|
|
+ margin-bottom: 38px;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ .iconfont {
|
|
|
+ color: #ffa92e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// 待支付 - 余额
|
|
|
+.registerMember,
|
|
|
+.successPay,
|
|
|
+.successPayCode,
|
|
|
+.successEval {
|
|
|
+ .status-text {
|
|
|
+ color: #333;
|
|
|
+ margin-top: 22px;
|
|
|
+ margin-bottom: 52px;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 提交成功
|
|
|
+.registerMember {
|
|
|
+ .call-back-wrap {
|
|
|
+ .qr-code-img {
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ margin: 20px auto;
|
|
|
+ img {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .app-color-2 {
|
|
|
+ font-size: 30px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
shish