mteacher/src/components/MPayment.vue

<template>
  <div class="mpayment">
    <van-popup
      v-model="isShow"
      :close-on-click-overlay="false"
      close-icon-position="top-left"
      position="bottom"
      round
      :closeOnPopstate="true"
      :safe-area-inset-bottom="true"
      :style="{ minHeight: '30%' }"
    >
      <i
        @click="onClose"
        class="van-icon van-icon-cross van-popup__close-icon van-popup__close-icon--top-left"
      ></i>
      <div class="title van-hairline--bottom">选择支付方式</div>
      <div class="payAmount">
        <p>应付金额</p>
        <div class="amount">{{ payAmount }}<span>元</span></div>
      </div>

      <van-radio-group v-model="payType">
        <!--  -->
        <div class="payment-item van-hairline--bottom" @click="payType = 'zfb'">
          <div class="logo-section">
            <img class="logo" src="@/assets/images/zfb.png" alt="" />
          </div>
          <div class="title-section">支付宝支付</div>
          <div class="value-section">
            <van-radio name="zfb"></van-radio>
          </div>
        </div>
        <!-- @click="payType = 'wx'" -->
        <div class="payment-item centerLine" @click="payType = 'wx'">
          <div class="logo-section">
            <img class="logo" src="@/assets/images/wx_icon.png" alt="" />
          </div>
          <div class="title-section">微信支付</div>
          <div class="value-section"><van-radio name="wx"></van-radio></div>
        </div>
      </van-radio-group>

      <div class="blank">
        <!-- <p
          style="padding: 0.1rem 0.12rem;color: red;font-size: .14rem;text-align: center;"
        >
          温馨提示：由于支付宝支付升级，临时暂停支付通道
        </p> -->
      </div>
      <van-button type="primary" block @click="onSubmit">确认支付</van-button>
    </van-popup>
  </div>
</template>

<script>
import { changeTwoDecimal, validStudentUrl } from "@/common/common";
// import { executePayment } from '@/api/student'
// const axios = require('@/common/axios').default
export default {
  name: "mheader",
  props: {
    closeStatus: {
      // 弹窗关闭状态
      type: Boolean,
      default: false,
    },
    amount: {
      // 支付金额
      type: Number,
      default: 0,
    },
    payment: {
      // 支付对象
      type: Object,
    },
  },
  data() {
    return {
      isShow: this.closeStatus,
      payAmount: this.amount,
      paymentObject: this.payment, // 支付对象
      payType: "zfb",
    };
  },
  methods: {
    onClose() {
      this.$dialog
        .confirm({
          message: "是否放弃本次付款",
          confirmButtonText: "继续付款",
          cancelButtonText: "放弃",
        })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
          this.isShow = false;
          this.$emit("onChangeStatus", this.isShow);
        });
    },
    onSubmit() {
      // 提交支付
      // 支付...
      const pt = this.payType,
        ua = window.navigator.userAgent.toLowerCase();
      // 判断当前浏览器
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        // 微信浏览器
        if (pt == "zfb") {
          this.pay_channel = "alipay_qr";
          this.getCodePay("qrCode");
        } else if (pt == "wx") {
          this.pay_channel = "wx_pub";
          this.getCodePay("pay");
        }
      } else if (ua.match(/AlipayClient/i) == "alipayclient") {
        // 支付宝浏览器
        if (pt == "zfb") {
          this.pay_channel = "alipay_wap";
          // 支付宝 H5 支付
          this.getCodePay("pay");
        } else if (pt == "wx") {
          this.pay_channel = "wx_pub";
          this.getCodePay("qrCode");
        }
      } else {
        if (pt == "zfb") {
          this.pay_channel = "alipay_qr";
        } else if (pt == "wx") {
          this.pay_channel = "wx_pub";
        }
        this.getCodePay("qrCode");
      }
    },
    getCodePay(code) {
      // 二维码页面， 唤起支付页面
      let url = validStudentUrl();
      if (code == "qrCode") {
        url += `/#/payQRCode`;
      } else {
        url += `/#/payResult`;
      }
      url += `?payType=${this.pay_channel}&payment=${JSON.stringify(
        this.paymentObject
      )}&platform=teacher`;
      this.$emit("onChangeStatus", false); // 初始化弹窗状态
      window.location.href = url;
    },
  },
  watch: {
    closeStatus(val) {
      this.isShow = val;
    },
    amount(val) {
      // 强制转换金额，显示两们小数
      this.payAmount = changeTwoDecimal(val);
    },
    payment(val) {
      // 监听数据
      this.paymentObject = val;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/commonLess/variable");
/deep/.van-popup__close-icon {
  color: #cccccc;
  font-size: 0.22rem;
}
// /deep/.van-popup--bottom.van-popup--round {
//     border-radius: .06rem .06rem 0 0;
//     // background-color: rgba(0, 0, 0, 0.06);
// }
/deep/.van-hairline--bottom::after {
  border-bottom-color: #f0f0f0;
}
.title {
  background-color: #ffffff;
  font-size: 0.16rem;
  font-weight: 400;
  color: #1a1a1a;
  padding: 0.14rem 0 0.12rem;
  text-align: center;
}
.payAmount {
  background-color: #ffffff;
  padding: 0.2rem 0;
  text-align: center;
  p {
    font-size: 0.14rem;
    color: #666666;
    padding-bottom: 0.1rem;
  }
  .amount {
    font-size: 0.28rem;
    color: #000000;
    span {
      font-size: 0.18rem;
      padding-left: 0.03rem;
    }
  }
}

/deep/.van-cell {
  padding: 0.12rem 0.16rem;
}

.payment-item {
  background-color: #ffffff;
  display: flex;
  padding: 0.12rem 0;
  margin: 0 0.16rem;
  align-items: center;

  .logo-section {
    width: 0.22rem;
    height: 0.22rem;
    .logo {
      width: 0.22rem;
      height: 0.22rem;
    }
  }
  .title-section {
    font-size: 0.16rem;
    padding-left: 0.1rem;
    flex: 1;
  }
  .value-section {
    flex: 1;
    .van-radio {
      float: right;
    }
  }
}
.blank {
  height: 0.65rem;
  background-color: #f0f0f0;
}

/deep/.van-button--primary {
  background-color: @mColor;
  color: #ffffff;
  font-size: 0.16rem;
  height: 0.52rem;
  line-height: 0.5rem;
  border-radius: 0;
  border-color: @mColor;
}
</style>