禁用支付宝支付

src/components/MPayment.vue

@@ -1,226 +1,253 @@
 <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>
+  <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>
+      <van-radio-group v-model="payType">
+        <!-- @click="payType = 'zfb'" -->
+        <div class="payment-item van-hairline--bottom">
+          <div class="logo-section">
+            <img class="logo" src="@/assets/images/zfb_default.png" alt="" />
+          </div>
+          <div class="title-section">支付宝支付</div>
+          <div class="value-section">
+            <van-radio name="zfb" disabled></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>
+      <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 { 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
-        }
+  name: "mheader",
+  props: {
+    closeStatus: {
+      // 弹窗关闭状态
+      type: Boolean,
+      default: false,
+    },
+    amount: {
+      // 支付金额
+      type: Number,
+      default: 0,
     },
-    data() {
-        return {
-            isShow: this.closeStatus,
-            payAmount: this.amount,
-            paymentObject: this.payment, // 支付对象
-            payType: 'zfb'
-        };
+    payment: {
+      // 支付对象
+      type: Object,
     },
-    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
-        },
+  },
+  data() {
+    return {
+      isShow: this.closeStatus,
+      payAmount: this.amount,
+      paymentObject: this.payment, // 支付对象
+      payType: "wx",
+    };
+  },
+  methods: {
+    onClose() {
+      this.$dialog
+        .confirm({
+          message: "是否放弃本次付款",
+          confirmButtonText: "继续付款",
+          cancelButtonText: "放弃",
+        })
+        .then(() => {
+          // on confirm
+        })
+        .catch(() => {
+          // on cancel
+          this.isShow = false;
+          this.$emit("onChangeStatus", this.isShow);
+        });
     },
-    watch: {
-        closeStatus(val) {
-            this.isShow = val
-        },
-        amount(val) {
-            // 强制转换金额，显示两们小数
-            this.payAmount = changeTwoDecimal(val)
-        },
-        payment(val) { // 监听数据
-            this.paymentObject = val
+    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: .22rem;
+  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;
+  border-bottom-color: #f0f0f0;
 }
 .title {
-    background-color: #ffffff;
-    font-size: .16rem;
-    font-weight: 400;
-    color: #1A1A1A;
-    padding: .14rem 0 .12rem;
-    text-align: center;
+  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: .2rem 0;
-    text-align: center;
-    p {
-        font-size: .14rem;
-        color: #666666;
-        padding-bottom: .1rem;
-    }
-    .amount {
-        font-size: .28rem;
-        color: #000000;
-        span {
-            font-size: .18rem;
-            padding-left: .03rem;
-        }
+  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: .12rem .16rem;
+  padding: 0.12rem 0.16rem;
 }
 
 .payment-item {
-    background-color: #ffffff;
-    display: flex;
-    padding: .12rem 0;
-    margin: 0 .16rem;
-    align-items: center;
+  background-color: #ffffff;
+  display: flex;
+  padding: 0.12rem 0;
+  margin: 0 0.16rem;
+  align-items: center;
 
-    .logo-section {
-        width: .22rem;
-        height: .22rem;
-        .logo {
-            width: .22rem;
-            height: .22rem;
-        }
-    }
-    .title-section {
-        font-size: .16rem;
-        padding-left: .1rem;
-        flex: 1;
+  .logo-section {
+    width: 0.22rem;
+    height: 0.22rem;
+    .logo {
+      width: 0.22rem;
+      height: 0.22rem;
     }
-    .value-section {
-        flex: 1;
-        .van-radio {
-            float: right;
-        }
+  }
+  .title-section {
+    font-size: 0.16rem;
+    padding-left: 0.1rem;
+    flex: 1;
+  }
+  .value-section {
+    flex: 1;
+    .van-radio {
+      float: right;
     }
+  }
 }
 .blank {
-    height: .65rem;
-    background-color: #F0F0F0;
+  height: 0.65rem;
+  background-color: #f0f0f0;
 }
 
 /deep/.van-button--primary {
-    background-color:  @mColor;
-    color: #ffffff;
-    font-size: .16rem;
-    height: .52rem;
-    line-height: .50rem;
-    border-radius: 0;
-    border-color:  @mColor;
+  background-color: @mColor;
+  color: #ffffff;
+  font-size: 0.16rem;
+  height: 0.52rem;
+  line-height: 0.5rem;
+  border-radius: 0;
+  border-color: @mColor;
 }
-</style>
+</style>