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

<template>
  <div class="app-content" :class="[contentClass]">
    <div class="callback-wrap">
      <div class="callback-blo">
        <block v-if="pageStatus == 1 || pageStatus == 2">
          <div class="icon">
            <i class="iconfont icondaizhifu"></i>
          </div>
        </block>
        <block v-else>
          <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 == 1 || pageStatus == 2">
          <div class="price">
            <span>￥</span>
            <span class="app-size-36 app-bold">{{ totalPrice }}</span>
          </div>
          <div class="order-num app-color-3">订单号: {{ orderSn }}</div>
        </block>
        <block v-else-if="pageStatus == 3 && payDiscountPrice >0">
          <div>
            <span v-if="payDiscountType == 0" class="app-color-2">使用优惠券为您省</span>
            <span v-else-if="payDiscountType == 1" class="app-color-2">会员身份为您省</span>
            <span v-else-if="payDiscountType == 2" class="app-color-2">随机优惠为您省</span>
            <span v-else class="app-color-2">随机优惠为您省</span>
            <span class="app-price">{{ payDiscountPrice }}元</span>
          </div>
        </block>
        <block v-if="pageStatus == 1 || pageStatus == 2">
          <div class="call-one-btn">
            <button v-if="isYeBtnShow" class="button-com red pay-ye" @click="balancePayFn">余额支付</button>
            <button class="button-com green pay-wx" @click="wxPayFn">微信支付</button>
          </div>
        </block>
        <block v-else-if="pageStatus == 3 || pageStatus == 4 || pageStatus == 5">
          <div class="call-btn-com call-two-btn" v-if="$util.isEmpty(loginInfo)"> <button class="button-com" @click="register()" >注册会员</button> </div>
          <div class="call-btn-com call-two-btn"> <button class="button-com default" @click="goBackHome()" >返回首页</button></div>
        </block>
      </div>
      <div class="coupon-wrap" v-if="option.pageStatus == 5">
        <div class="coupon-img">
          <img :src="`${constant.imgUrl}/retail/callback/coupon.png`" alt mode="widthFix" />
        </div>
        <div class="qrcode-img">
          <img :src="`${constant.imgUrl}/retail/images/extension.png`" alt mode="widthFix" />
        </div>
      </div>
    </div>
    <modal-module :show="passwordModal" @cancel="modalCancel" @click="passwordModalClick" :maskClosable="false" title="支付密码" padding="30upx 30upx" >
      <template v-slot:content>
        <div class="app-modal-input-wrap">
          <div class="inp-list-line">
            <div class="line-input">
              <input type="password" v-model="form.payPassword" :adjust-position="false" class="inp-input" />
            </div>
          </div>
        </div>
      </template>
    </modal-module>
    <alert-module :show="setPassModal" btnText="去设置" btnColor="#FF2842" padding="66upx 24upx 66upx 24upx" @click="hideAlert" >
      <div class="go-login-module">
        <div>请先设置密码</div>
      </div>
    </alert-module>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import ModalModule from "@/components/plugin/modal";
import AlertModule from "@/components/plugin/alert";
import wexinPay from "@/utils/pay/wxPay";
import { getShopUser } from "@/utils/auth";
import { balancePay, wxPay } from "@/api/order";
export default {
  name: "index",
  components: {
    ModalModule,
    AlertModule
  },
  data() {
    return {
      constant: this.$constant,
      pageTit: "",
      pageStatus: 1,
      contentClass: "",
      payDiscountPrice: null,
      payDiscountType: 0,
      passwordModal: false,
      form: {
        payPassword: ""
      },
      payCallData: {},
      setPassModal: false,
      totalPrice:0,
      orderSn:''
    };
  },
  computed: {
    ...mapGetters({ shopUser: "getShopUser",loginInfo:"getLoginInfo" })
  },
  methods: {
    register(){
      let account = uni.getStorageSync('account')
      this.$util.pageTo({url: "/pages/login/index?account="+account,type:2})
    },
    goBackHome(){
      this.$util.pageTo({url: "/pages/home/recent",type:3})
    },
    init() {
      this.orderSn = this.option.orderSn ? this.option.orderSn : ''
      if(this.option.totalPrice){
        this.totalPrice = parseFloat(Number(this.option.totalPrice))
      }
      this.pageStatus = this.option.pageStatus;
      this.payDiscountPrice = this.option.payDiscountPrice;
      this.payDiscountType = this.option.payDiscountType;
      this.initClass(this.pageStatus);
      getShopUser(true);
    },
    _balancePay() {
      if (!this.form.payPassword) {
        this.$msg("请先输入支付密码!");
        return false;
      }
      balancePay({
        payPassword: this.form.payPassword,
        orderSn: this.orderSn,
        couponId: this.option.couponId
      }).then(res => {
          this.modalCancel();
          this.$msg("支付成功！");
          this.payCallData = res.data;
          this.paySuccess();
      })
    },
    // 微信支付
    wxPayFn() {
      let miniOpenId = uni.getStorageSync('miniOpenId')
      wxPay({ orderSn: this.orderSn, couponId: this.option.couponId,miniOpenId:miniOpenId }).then(res => {
        this.payCallData = res.data
        wexinPay(res.data, this.paySuccess, this.payFail)
        this.orderSn = res.data.orderSn ? res.data.orderSn : ''
      })
    },
    paySuccess() {
      this.$util.pageTo({
        url: "/pages/callback/index",
        type: 2,
        query: {
          ...this.option,
          pageStatus: 3,
          payDiscountPrice: this.payCallData.discountAmount,
          payDiscountType: this.payCallData.discountType
        }
      });
    },
    payFail() {
    },
    balancePayFn() {
      if (this.shopUser.hasPayPwd == 0) {
        this.setPassModal = true;
      } else {
        this.passwordModal = true;
      }
    },
    passwordModalClick(e) {
      if (e.index === 0) {
        this.modalCancel();
      } else {
        this._balancePay();
      }
    },
    modalCancel() {
      this.passwordModal = false;
      this.form.payPassword = "";
    },
    // 暂未设置密码
    hideAlert() {
      this.$util.pageTo("/pages/user/password");
    },
    // 初始样式
    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: 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>