fohow_wx/src/views/pay/components/Btn.vue

<template>
  <div class="family-btn">
    <div class="pay-bottom1 clearfix">
      <van-button class="pay-btn" round type="primary" v-if="loading" loading :loading-text="title" />
      <van-button class="pay-btn" round type="primary" v-else @click="postApi">{{title}}</van-button>
      <div class="pay-sum"><span style="color:#4c4c4c">合计</span>: ￥<span class="money-text">{{total | getAcounting('', false)}}</span></div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      oid: this.$route.params.order_id,
      payData: {},
      loading: false,
      countdownFlag: false,
      userData: {
        name: '',
        tel: ''
      }
    }
  },
  props: {
    total: Number,
    title: String,
    type: String,
    orderData: Object
  },
  computed: {
    ...mapGetters(['userInfo']),
    loadingText: function () {
      if (this.type === 'order' || this.type === 'orderJoin') {
        return '创建订单中...'
      } else {
        return '正在支付中...'
      }
    }
  },
  methods: {
    loadClick () {
      this.loading = true
      this.$toast.loading({
        message: this.loadingText,
        forbidClick: true,
        duration: 0
      })
    },
    cancelLoading () {
      this.loading = false
      this.$toast.clear()
    },
    // 创建订单
    createOrder () {
      this.$post({
        url: 'v1/spirit/order/create',
        data: {
          product_id: this.orderData.product_id,
          quantity: this.orderData.count,
          address_id: this.orderData.address_id,
          use_balance: this.orderData.use_balance,
          remark: '',
          by_vip_user: this.orderData.by_vip_user
        }
      }).then((resp) => {
        this.cancelLoading()
        if (resp.resp_common && resp.resp_common.code) {
          this.$toast(resp.resp_common.msg)
          return
        }
        this.oid = resp.order_id
        // 提交订单为0元,跳支付成功
        if (!resp.IsPaid) {
          this.$router.push(`/pay/${resp.order_id}`)
        } else {
          this.$toast('支付成功~')
          this.$router.replace(`/order/${resp.order_id}`)
        }
      })
    },
    goSuccess () {
      this.$router.push(`/order/${this.oid}`)
    },
    // 微信支付
    onBridgeReady () {
      this.$toast.clear()
      let that = this
      // eslint-disable-next-line
      WeixinJSBridge.invoke('getBrandWCPayRequest', {
        appId: this.payData.appId,
        timeStamp: this.payData.timeStamp,
        nonceStr: this.payData.nonceStr,
        package: this.payData.package,
        signType: this.payData.signType,
        paySign: this.payData.paySign
      },
      function (res) {
        if (res.err_msg === 'get_brand_wcpay_request:ok') {
          that.$toast.loading('支付成功，跳转中···')
          setTimeout(() => { that.goSuccess() }, 1000)
        } else {
          that.$toast('微信支付失败！')
        }
      })
    },
    pay () {
      this.$post({
        url: 'v1/pay',
        data: {
          order_id: this.oid,
          pay_way: 'weixinpay'
        }
      }).then((resp) => {
        this.cancelLoading()
        this.payData = resp.pay_data
        // eslint-disable-next-line
        if (typeof WeixinJSBridge === undefined) {
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false)
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)
            document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)
          }
        } else {
          this.onBridgeReady()
        }
      })
    },
    validatorOrder () {
      let msg
      if (this.type === 'payOrder') {
        return { isOk: !msg, msg }
      }
      if (!this.orderData.address_id) {
        msg = '请先新增收件地址'
      }
      return { isOk: !msg, msg }
    },
    postApi () {
      let { isOk, msg } = this.validatorOrder()
      if (isOk) {
        this.loadClick()
        if (this.type === 'order') {
          this.createOrder()
        } else {
          this.$toast.loading('支付中···')
          this.pay()
        }
      } else {
        this.$toast(msg)
      }
    }
  },
  created () {
  },
  mounted () {
  },
  watch: {
  },
  components: {}
}
</script>
<style lang="less" scoped>
.family-btn {
  .pay-bottom1 {
    background: #fff;
    box-sizing: border-box;
    padding: 0.2rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
    .pay-btn {
      height: 0.74rem;
      min-width: 2.62rem;
      background: #07c160;
      float: right;
      color: #fff;
      font-size: 0.28rem;
      margin-left: 0.4rem;
      border: 1px solid #07c160;
    }
    .pay-btn1 {
      background: linear-gradient(#ffd01e, #ff8917);
    }
    .pay-btn2 {
      background: #999;
    }
    .pay-sum {
      color: #f47b7b;
      font-size: 0.28rem;
      float: right;
      margin-top: 0.2rem;
      .money-text {
        font-size: 0.34rem;
      }
    }
  }
}
</style>