mall4pc-bbc/pages/payment.vue

<template>
  <div class="payment">
    <div class="content">
      <div class="step-box">
        <div class="left">
          <span class="img"></span>
          <span class="text">{{$t('payment.orderPayment')}}</span>
        </div>
        <div class="steps">
          <div class="item">
            <div class="number">step 01.</div>
            <div class="text">{{$t('payment.selectProductToBuy')}}</div>
          </div>
          <div class="item">
            <div class="number">step 02.</div>
            <div class="text">{{$t('payment.confirmOrderInformation')}}</div>
          </div>
          <div class="item active">
            <div class="number">step 03.</div>
            <div class="text">{{$t('payment.payToCompleteTheOrder')}}</div>
          </div>
        </div>
      </div>
      <div class="payment-con">
        <div class="pay-box">
          <div class="pay-info">
            <div class="tag success"></div>
            <div class="item">
              <div class="tit">{{$t('payment.orderSubmittedSuccessfully')}}！</div>
              <div class="total-pay">
                {{$t('payment.totalPayable')}}：
                <span class="price">
                  <span v-if="payOrderInfo.totalFee">￥{{payOrderInfo.totalFee}}</span>
                  <span v-if="payOrderInfo.totalFee &&payOrderInfo.totalScore">+</span>
                  <span v-if="payOrderInfo.totalScore">{{payOrderInfo.totalScore}}{{$t('payment.points')}}</span>
                </span>
              </div>
            </div>
            <div class="item">
              <div class="time" v-if="isOverTime && $t('language') == 'zh' ">
                请在
                <span class="warning">{{min}} : {{sec}}</span>内付款，否则交易会被取消。
              </div>
              <div class="time" v-if="isOverTime && $t('language') == 'en'">
                please pay within
                <span class="warning">{{min}} : {{sec}}</span>，otherwise the transaction will be cancelled。
              </div>
              <div class="rest-time" v-if="!isOverTime">{{$t('payment.orderHasExpired')}}</div>
              <div class="order-det" @click="showOrderInfo = !showOrderInfo">{{$t('payment.orderDetails')}}</div>
            </div>
          </div>
          <div class="order-info" v-if="showOrderInfo">
            <div v-if="mold !=1 " class="text">
              <div v-if="payOrderInfo.receiver||payOrderInfo.mobile||payOrderInfo.userAddr">
              <div class="label" :style="this.$store.state.locale =='en'?'width: 140px':'width: 70px'">{{$t('payment.receiptInformation')}}：</div>
              <div class="con">{{payOrderInfo.receiver}} {{payOrderInfo.mobile}}</div>
              <div class="con">{{payOrderInfo.userAddr}}</div>
              </div>
            </div>
            <div class="text">
              <div class="label" :style="this.$store.state.locale =='en'?'width: 140px':'width: 70px'">{{$t('payment.productName')}}：</div>
              <div class="con con-items">
                <div class="item" v-for="item in payOrderInfo.prodNameList" :key="item">{{item}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="section-payment">
          <div class="tit" v-if="payOrderInfo.totalFee>0">{{$t('payment.selectPaymentMethod')}}</div>
          <div class="con" v-if="payOrderInfo.totalFee>0">
            <div
              v-if="paySwitchInfo.aliPaySwitch"
              class="item"
              :class="{active: payType === PayTypeConstant.ALIPAY}"
              @click="payType = PayTypeConstant.ALIPAY"
            >
               <img src="~/assets/images/payment-aliPay.png" alt />
              <span class="payment-text">{{$t('payment.aliPay')}}</span>
              <div v-html="payHtml"></div>
            </div>
            <div
              v-if="paySwitchInfo.wxPaySwitch"
              class="item"
              :class="{active: payType === PayTypeConstant.WECHATPAY_SWEEP_CODE}"
              @click="payType = PayTypeConstant.WECHATPAY_SWEEP_CODE"
            >
              <img src="~/assets/images/payment-wechatPay.png" alt />
              <span class="payment-text">{{$t('payment.wechatPay')}}</span>
            </div>
            <div
              v-if="paySwitchInfo.payPalSwitch"
              class="item paypal"
              :class="{active: payType === PayTypeConstant.PAYPAL}"
              @click="payType = PayTypeConstant.PAYPAL"
            >
              <img class="paypal-logo" src="~/assets/images/paypal.png" alt />
              <img class="paypal-text" src="~/assets/images/paypal-text.png" alt />
            </div>
            <div
              class="item paypal item-balance"
              :class="{active: payType === PayTypeConstant.BALANCEPAY}"
              @click="payType = PayTypeConstant.BALANCEPAY"
            >
              <img class="paypal-logo item-balance-img" src="~/assets/images/balancePay.png" alt />
              <div class="payment-text item-balance-div">{{$t('payment.balancePay')}}<span class="item-balance-span">({{$t('payment.availableBalance')}}：{{currentBalance}})</span></div>
            </div>
            <!-- <div class="item"><img src="~/assets/images/unionpay.png"
            alt=""></div>-->
          </div>
          <a
            href="javascript:void(0)"
            :class="[isCanPay ? '' : 'no-pay', 'btn']"
            @click="toPay"
          >{{$t('payment.payNow')}}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { PayType } from '~/plugins/constant'
import util from '../plugins/util'
export default {
  data () {
    return {
      orderNumber: '',  //订单号
      total: 0,  //订单价
      payHtml: '',  //支付宝页面
      min: '00',  //分
      sec: '00',  //秒
      timer: null,  //倒计时变量
      payOrderInfo: {},  //支付订单详情
      showOrderInfo: false,  //是否显示订单详情
      payType: PayType.ALIPAY,  //支付类型，默认支付宝
      PayTypeConstant: PayType,  //支付类型常量
      isCanPay: true,  //是否能支付
      isOverTime: true,  //能否支付的文字提示
      loading: false, //PayPal支付的加载缓冲弹窗
      mold: null,
      currentBalance: 0 //余额
    }
  },
  computed: {
    // 从缓存获取系统支付开关
    paySwitchInfo() {
      return JSON.parse(localStorage.getItem('paySwitchInfo')).switchInfo
    }
  },
  mounted () {
    this.orderNumber = sessionStorage.getItem("pay_orderNumber")
    this.total = sessionStorage.getItem("pay_total")
    this.mold = Number(sessionStorage.getItem("pay_mold"))
    this.getOrderDetail()
    this.setDefaultPayType()
    this.getBalanceInfo()
  },
  methods: {
    /**
     * 设置默认支付类型
     */
    setDefaultPayType() {
      if (this.paySwitchInfo.aliPaySwitch) {
        return
      }
      if (this.paySwitchInfo.wxPaySwitch) {
        this.payType = PayType.WECHATPAY_SWEEP_CODE
        return
      }
      if (this.paySwitchInfo.balancePaySwitch) {
        this.payType = PayType.WECHATPAY_SWEEP_CODE
        return
      }
      if (this.paySwitchInfo.payPalSwitch) {
        this.payType = PayType.PAYPAL
      }
    },
    // 请求支付订单详情
    getOrderDetail () {
      this.$axios.get('/p/order/getOrderPayInfoByOrderNumber', {
        params: {
          orderNumbers: this.orderNumber
        }
      }).then(({ data }) => {
        this.payOrderInfo = data
        this.countTime()
      })
    },

    
    //获取余额信息
    getBalanceInfo () {
      this.$axios.get('/p/userBalance/getBalanceInfo').then(({ data }) => {
        this.currentBalance = data
      })
    },

    // 倒计时
    countTime (hu) {
      // 获取当前时间
      let date = new Date()
      let now = date.getTime()

      // // 设置截止时间（）
      let end = new Date(this.payOrderInfo.endTime).getTime()

      // 时间差
      let leftTime = end - now

      // 定义变量 d,h,m,s保存倒计时的时间
      if (leftTime >= 0) {
        // 分
        let m = Math.floor(leftTime / 1000 / 60 % 60)
        this.min = m < 10 ? '0' + m : m
        // 秒
        let s = Math.floor(leftTime / 1000 % 60)
        this.sec = s < 10 ? '0' + s : s
      } else {
        this.min = '00'
        this.sec = '00'
        this.isOverTime = false
        this.isCanPay = false
      }
      // 等于0的时候不调用
      if (Number(this.min) === 0 && Number(this.sec) === 0) {
        return
      } else {
        // 递归每秒调用countTime方法，显示动态时间效果,
        this.timer = setTimeout(this.countTime, 1000)
      }
    },

    //去支付
    toPay () {
      if (this.isCanPay && this.payOrderInfo.totalFee == 0 && this.payOrderInfo.totalScore) {
        // 纯积分
        this.$axios.post('/p/order/pay', {
          payType: PayType.SCOREPAY,
          orderNumbers: this.orderNumber,
        }).then(({ data }) => {
          this.$router.push({ path: '/user-center/uc-order' })
        })
        return
      }
      if (this.isCanPay) {
        var type = this.payType
        if (type == PayType.ALIPAY) {
          this.$axios.post('/p/order/pay', {
            payType: type,
            orderNumbers: this.orderNumber,
            returnUrl: window.location.origin + '/user-center/uc-order'
          }).then(({ data }) => {
            // 支付宝部分
            this.payHtml = data
            this.$nextTick(() => {
              document.forms[0].submit()
            })
          }).catch((err) => {
            util.getSysPaySwitch(true)
          })
        } else if (type == PayType.WECHATPAY_SWEEP_CODE) {
          // 微信部分
          this.$router.push({
            path: '/weixin-pay'
          })
        } else if (type == PayType.PAYPAL) {
          // PayPal部分
          const loading = this.$loading({
            lock: true,
            text: this.$i18n.t('loading'),
            background: 'rgba(255, 255, 255, 0.8)'
          });
          this.$axios.post('/p/order/pay', {
            payType: type,
            orderNumbers: this.orderNumber,
            returnUrl: window.location.origin + '/user-center/uc-order'
          }).then(({ data }) => {
            window.location.href = data
            // setTimeout(() => {
            //   loading.close();
            // },1000)
          })
        } else if (type == PayType.BALANCEPAY) {
          // 余额部分
          if (parseFloat(this.payOrderInfo.totalFee) > parseFloat(this.currentBalance)) {
            this.$message({
              message: this.$t('payment.balanceTip') + this.currentBalance,
              type: 'none',
              duration: 3000
            })
            return
          }
          var that = this
          this.$confirm(this.$t("myBalance.payTips"), this.$t("tips"), {
            distinguishCancelAndClose: true,
            confirmButtonText: this.$t("determine"),
            cancelButtonText: this.$t("cancel")
          }).then(() => {
            this.$axios.post('/p/order/pay', {
              payType: type,
              orderNumbers: this.orderNumber,
              returnUrl: window.location.origin + '/user-center/uc-order'
            }).then(({ data }) => {
              this.$message({
                  message: this.$t('payment.paymentSuccessful'),
                  type: 'success',
                  duration: 1000,
                  onClose() {
                    that.$router.push({ path: '/user-center/uc-order' })
                  }
                })
            })
          }).catch((action) => {})
        }
      } else {
        return false
      }
    }
  },

  destroyed () {
    if (this.timer) { //如果定时器在运行则关闭
      clearInterval(this.timer);
    }
  }
}
</script>

<style scoped src='~/assets/css/payment.css'></style>