修改支付

dist/css/PeriodExchange.03f0011e.css

@@ -1 +0,0 @@
-.periodExchange[data-v-1bba5874]{min-height:100vh;position:relative;background:#fff}.periodExchange .logo[data-v-1bba5874]{width:.5rem;height:.5rem;border-radius:50%;overflow:hidden;margin-right:.13rem}.periodExchange[data-v-1bba5874] .van-cell{margin-top:-1px;padding:.26rem .16rem .15rem;background:#14928a}.periodExchange .exchangeText[data-v-1bba5874]{font-size:.18rem;color:#fff}.periodExchange .info[data-v-1bba5874]{font-size:.14rem;color:#ccc}.activeList[data-v-1bba5874]{padding:.15rem .16rem 0;position:relative;z-index:49}.activeList h2[data-v-1bba5874]{font-size:.16rem;color:#444;padding-left:.15rem;padding-bottom:.15rem;position:relative}.activeList h2[data-v-1bba5874]:before{content:" ";width:.04rem;height:.15rem;background:#14928a;border-radius:.02rem;position:absolute;left:.02rem;top:.05rem}.activeList h2 span[data-v-1bba5874]{float:right}.activeList .active[data-v-1bba5874]{position:relative;margin-bottom:.15rem;line-height:0}.activeList img[data-v-1bba5874]{width:100%}.activeList .icon_question[data-v-1bba5874]{position:absolute;z-index:10;bottom:.06rem;right:.12rem;color:#e94a47;font-size:.18rem}.popupContent[data-v-1bba5874]{padding:.4rem .16rem .1rem}.van-image[data-v-1bba5874]{display:block;width:100%;min-width:1rem}.pay_btn[data-v-1bba5874]{background:#14928a;line-height:.45rem;color:#fff;font-size:.18rem;border-radius:.5rem;text-align:center;position:absolute;width:90%;margin-left:5%;bottom:.2rem}

src/common/common.js

@@ -122,6 +122,44 @@ const _throttle = (fn, time) => {
 //       }, 200)
 //   }
 // }
+// 学生地址
+const validStudentUrl = () => {
+  let url = window.location.href
+  let returnUrl = ''
+  if (/test/.test(url)) { // test环境
+    returnUrl = 'http://mstutest.dayaedu.com'
+  } else if (/dev/.test(url)) { // dev 环境
+    returnUrl = 'http://mstudev.dayaedu.com'
+  } else if (/online/.test(url)) { //线上
+    returnUrl = 'https://mstuonline.dayaedu.com'
+  } else { // 默认dev环境
+    returnUrl = 'http://mstudev.dayaedu.com'
+  }
+  return returnUrl
+}
+
+/**
+ * 转换金额为保留2位小数
+ * @param x
+ * @returns 强制保留2位小数的金额
+ */
+const changeTwoDecimal = (amt) => {
+  let f_x = parseFloat(amt);
+  if (isNaN(f_x)) {
+    return "0.00";
+  }
+  f_x = Math.round(f_x * 100) / 100;
+  let s_x = f_x.toString();
+  let pos_decimal = s_x.indexOf('.');
+  if (pos_decimal < 0) {
+    pos_decimal = s_x.length;
+    s_x += '.';
+  }
+  while (s_x.length <= pos_decimal + 2) {
+    s_x += '0';
+  }
+  return s_x;
+}
 
 export {
   browser,
@@ -130,5 +168,7 @@ export {
   getYMD,
   getDateList,
   _debounce,
-  _throttle
+  _throttle,
+  validStudentUrl,
+  changeTwoDecimal
 }

src/components/MPayment.vue

@@ -0,0 +1,221 @@
+<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>
+                <div class="payment-item" @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"></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`
+            console.log(url)
+            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;
+}
+/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: .16rem;
+    font-weight: 400;
+    color: #1A1A1A;
+    padding: .14rem 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;
+        }
+    }
+}
+
+/deep/.van-cell {
+    padding: .12rem .16rem;
+}
+
+.payment-item {
+    background-color: #ffffff;
+    display: flex;
+    padding: .12rem 0;
+    margin: 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;
+    }
+    .value-section {
+        flex: 1;
+        .van-radio {
+            float: right;
+        }
+    }
+}
+.blank {
+    height: .65rem;
+    background-color: #F0F0F0;
+}
+
+/deep/.van-button--primary {
+    background-color: #14928A;
+    color: #ffffff;
+    font-size: .16rem;
+    height: .52rem;
+    line-height: .50rem;
+    border-radius: 0;
+    border-color: #14928A;
+}
+</style>

src/views/app/PeriodExchange.vue

@@ -34,24 +34,27 @@
             <h2>优惠活动：</h2>
             <m-empty class="empty" msg="暂无优惠活动"  key="data" />
         </div>
-    
+
         <!-- <div class="pay_btn" >确认兑换</div> -->
         <van-popup v-model="popupShow" closeable position="bottom"
         :style="{ minHeight: '30%', maxHeight: '60%' }" >
             <div class="popupContent" v-html="popupContent"></div>
         </van-popup>
+
+        <m-payment :closeStatus="isStatus" :amount="payMoney" :payment="payment" @onChangeStatus="onChangeStatus" />
     </div>
 </template>
 <script>
 /* eslint-disable */
 import MHeader from '@/components/MHeader'
 import MEmpty from '@/components/MEmpty'
+import MPayment from '@/components/MPayment'
 import { browser, calcMinute }  from '@/common/common'
 import { tenantEntryActivitesList, queryUserInfo, sysTenantAccountGet, createOrder } from '@/api/app'
 
 export default {
     name: 'courseApply',
-    components: { MHeader, MEmpty },
+    components: { MHeader, MEmpty, MPayment },
     data() {
         return {
             userInfo: {},
@@ -63,7 +66,10 @@ export default {
             popupShow: false,
             popupContent: null,
             dataShow: true, // 是否有数据
-            imageStatus: false
+            imageStatus: false,
+            isStatus: false,
+            payment: {}, // 支付对象
+            payMoney: 0,
         }
     },
     mounted() {
@@ -72,7 +78,7 @@ export default {
             localStorage.setItem('Authorization', decodeURI(params.Authorization))
             localStorage.setItem('userInfo', decodeURI(params.Authorization))
         }
-        
+
         document.title = '课时兑换'
         if(browser().android || browser().iPhone) {
             this.headerStatus = false
@@ -144,7 +150,6 @@ export default {
                 let result = res.data
                 this.$toast.clear()
                 this.isClick = false
-                console.log(result)
                 if(result.code == 200) {
                     this.result = result.data
                     this.onSubmit()
@@ -179,11 +184,15 @@ export default {
                 }
             })
         },
+        onChangeStatus(val) {
+            this.isStatus = val
+        },
         onSubmit() {
             // submit 提交
             let result = this.result
-            // if(result.type == "YQPAY") {
-                let f = result.payMap
+            let f = result.payMap
+            this.payMoney = Number(f.amount)
+            if(result.type == "YQPAY") {
                 document.querySelector('#onSubmit').action = f.host
                 document.querySelector('#apiContent').value = f.apiContent
                 document.querySelector('#merNo').value = f.merNo
@@ -193,15 +202,12 @@ export default {
                 document.querySelector('#timestamp').value = f.timestamp
                 document.querySelector('#version').value = f.version
                 document.querySelector('#onSubmit').submit()
-            // } else if(result.type == "UNIONPAY") {
-            //     localStorage.setItem('payInfo', JSON.stringify(result))
-            //     this.$router.push({
-            //         path: '/alipay',
-            //         query: {
-            //             balance: result.totalPrice
-            //         }
-            //     })
-            // }
+            } else if(result.type == "ADAPAY") {
+                // 汇付天下
+				this.payment = result
+				// 开始支付窗口
+				this.isStatus = true
+            }
         },
         onMore(item) {
             this.popupContent = item.detail

vue.config.js

@@ -1,7 +1,7 @@
 // let targetUrl = 'http://mteadev.dayaedu.com'
 // let targetUrl = 'http://192.168.3.139:8000' // 箭河
 // let targetUrl = 'https://online.dayaedu.com'
-let targetUrl = 'http://admin.dayaedu.com/'
+let targetUrl = 'http://dev.dayaedu.com/'
 // let targetUrl = 'http://192.168.3.151:8080'
 module.exports = {
   chainWebpack: config => {