添加支付方式

src/router/index-student.ts

@@ -10,7 +10,7 @@ const router: Router = createRouter({
 
 router.beforeEach((to, from, next) => {
   const title = to.meta.title
-  document.title = (title || '酷乐秀') as any
+  document.title = (title || '管乐迷') as any
   next()
   // if (browser().iPhone && !state.version) {
   // try {

src/views/cart/cart-confirm-agin/index.tsx

@@ -47,6 +47,25 @@ export default defineComponent({
     const paymentPopup = ref(false)
     const authPopup = ref(false)
     const orderInfo = ref<any>()
+
+    const paymentWay = ref([])
+    onMounted(async () => {
+      try {
+        const res = await request.get(
+          '/api-student/sysConfig/queryByParamName',
+          {
+            params: {
+              paramName: 'payment_channel_action'
+            }
+          }
+        )
+        const paranValue = res.data.paranValue
+        paymentWay.value = paranValue ? JSON.parse(paranValue) : []
+      } catch {
+        //
+      }
+    })
+
     //修复实名认证头部问题
     watch(authPopup, (value, oldValue) => {
       if (authPopup.value) {
@@ -199,6 +218,7 @@ export default defineComponent({
               style={{ minHeight: '30%' }}
             >
               <Payment
+                paymentWay={paymentWay.value}
                 v-model={paymentPopup.value}
                 orderInfo={orderInfo.value}
                 paymentType="goodsPay"

src/views/cart/cart-confirm/index.tsx

@@ -50,13 +50,14 @@ export default defineComponent({
       balance: 0,
       couponId: ''
     })
+    const paymentWay = ref([])
     onMounted(async () => {
       loading.value = true
       // 获取用户余额
       await getUserBalance()
       if (route.query.cartIds) {
         try {
-          let { code, data } = await request.post(
+          const { code, data } = await request.post(
             '/api-mall-portal/order/generateConfirmOrder',
             {
               params: {
@@ -69,6 +70,17 @@ export default defineComponent({
             cartConfirm.cartPromotionItemList = data.cartPromotionItemList
             cartConfirm.memberReceiveAddressList = data.memberReceiveAddressList
           }
+
+          const res = await request.get(
+            '/api-student/sysConfig/queryByParamName',
+            {
+              params: {
+                paramName: 'payment_channel_action'
+              }
+            }
+          )
+          const paranValue = res.data.paranValue
+          paymentWay.value = paranValue ? JSON.parse(paranValue) : []
         } catch (error) {}
       }
       loading.value = false
@@ -320,6 +332,7 @@ export default defineComponent({
                   style={{ minHeight: '30%' }}
                 >
                   <Payment
+                    paymentWay={paymentWay.value}
                     v-model={paymentPopup.value}
                     orderInfo={orderInfo.value}
                     paymentType="goodsPay"

src/views/order-detail/index.tsx

@@ -1,269 +1,283 @@
-import ColProtocol from '@/components/col-protocol'
-import { Button, Dialog, Icon, Popup, Sticky, Toast } from 'vant'
-import ColPopup from '@/components/col-popup'
-import { defineComponent } from 'vue'
-import { postMessage } from '@/helpers/native-message'
-import styles from './index.module.less'
-import UserAuth from './userAuth'
-import request from '@/helpers/request'
-
-import iconTips from '@common/images/icon_tips.png'
-import Payment from './payment'
-import ColHeader from '@/components/col-header'
-import { state } from '@/state'
-import { orderInfos, orderStatus, resestState } from './orderStatus'
-import OrderVip from './order-vip'
-import { moneyFormat } from '@/helpers/utils'
-import { getMusicDetail } from '@/student/trade/tradeOrder'
-import UseCoupon from './use-coupons'
-
-export default defineComponent({
-  name: 'order-detail',
-  data() {
-    const query = this.$route.query
-    return {
-      loading: false, // 是否加载中，为了处理0元订单（）
-      orderType: query.orderType as string,
-      recomUserId: query.recomUserId, // 推荐人id
-      activityId: query.activityId, // 活动编号
-      id: query.id,
-      agreeStatus: false,
-      popupShow: false,
-      paymentStatus: false,
-      orderAmount: 0, // 订单金额，用于使用优惠券，余额，优惠等
-      orderPrice: 0, // 支付金额，最后支付金额
-      dataLoading: true
-    }
-  },
-  unmounted() {
-    // 销毁时解绑监听
-    orderStatus.orderInfo = {
-      orderNo: '',
-      actualPrice: 0,
-      payStatus: false
-    }
-  },
-  computed: {
-    orderList() {
-      // 商品列表
-      const orderObject = orderStatus.orderObject
-      return orderObject.orderList || []
-    }
-  },
-  async mounted() {
-    // 判断是否是曲目购买（只有智能陪练才会有入口），其它地方不会有入口
-    this.dataLoading = true
-    if (this.orderType == 'MUSIC' && this.id) {
-      try {
-        const item = await getMusicDetail(this.id)
-        orderStatus.orderObject.orderType = 'MUSIC'
-        orderStatus.orderObject.orderName = item.musicSheetName
-        orderStatus.orderObject.orderDesc = item.musicSheetName
-        orderStatus.orderObject.actualPrice = item.musicPrice
-        orderStatus.orderObject.recomUserId = this.recomUserId
-        orderStatus.orderObject.activityId = this.activityId
-        // 判断当前订单是否在支付中
-        if (['WAIT_PAY', 'PAYING'].includes(item.orderStatus)) {
-          orderStatus.orderObject.orderNo = item.orderNo
-        } else if (['PAID', 'CLOSE', 'FAIL'].includes(item.orderStatus)) {
-          // 判断订单是否是其它状态
-          Toast('订单有误')
-          postMessage({ api: 'back', content: {} })
-        }
-        orderStatus.orderObject.orderList = [
-          {
-            orderType: 'MUSIC',
-            goodsName: item.musicSheetName,
-            actualPrice: item.musicPrice,
-            ...item
-          }
-        ]
-      } catch {
-        //
-      }
-    }
-    this.orderAmount = orderStatus.orderObject.actualPrice || 0
-    this.orderPrice = orderStatus.orderObject.actualPrice || 0
-    this.dataLoading = false
-    // 0元支付特别处理
-    if (this.orderPrice === 0 && orderStatus.orderObject.orderType) {
-      this.loading = true
-      this.onSubmit()
-    }
-  },
-  methods: {
-    onAuthSuccess() {
-      this.popupShow = false
-      this.onSubmit() // 实名成功后自动支付
-    },
-    async onSubmit() {
-      // console.log(this.orderInfos)
-      if (this.orderPrice > 0) {
-        if (!this.agreeStatus) {
-          Toast('请先阅读并同意《酷乐秀平台服务协议》')
-          return
-        }
-        const users = state.user.data
-        // 判断是否需要实名认证
-        if (!users?.realName || !users?.idCardNo) {
-          this.popupShow = true
-          return
-        }
-      }
-
-      // 判断是否有订单号
-      if (orderStatus.orderObject.orderNo) {
-        this.paymentStatus = true
-        return
-      }
-
-      // 正常支付
-      try {
-        const orderObject = orderStatus.orderObject
-        const url =
-          state.platformType === 'TEACHER'
-            ? '/api-teacher/userOrder/executeOrder'
-            : '/api-student/userOrder/executeOrder'
-        const res = await request.post(url, {
-          data: {
-            orderName: orderObject.orderName,
-            orderDesc: orderObject.orderDesc,
-            orderType: orderObject.orderType,
-            actualPrice: this.orderPrice || 0,
-            recomUserId: orderObject.recomUserId,
-            activityId: orderObject.activityId,
-            couponId: orderObject.couponId,
-            orderInfos: [...orderInfos()]
-          }
-        })
-        const result = res.data || {}
-        // 支付成功
-        if (result.status == 'PAID') {
-          this.$router.replace({
-            path: '/tradeDetail',
-            query: {
-              orderNo: result.orderNo
-            }
-          })
-          return
-        }
-
-        // 拉起支付方式
-        orderStatus.orderObject.orderNo = result.orderNo
-        orderStatus.orderObject.actualPrice = result.actualPrice
-        this.paymentStatus = true
-      } catch {
-        this.loading = false
-        if (this.orderPrice === 0) {
-          Dialog.alert({
-            title: '提示',
-            message: '支付失败，请稍后重试！',
-            confirmButtonText: '确定',
-            confirmButtonColor: '#01C1B5'
-          })
-        }
-      }
-    },
-    onBackOut() {
-      // 关闭订单后需要重置数据
-      resestState()
-    },
-    onCouponSelect(item: any) {
-      console.log('onCouponSelect', item)
-      let discountCount = 0
-      ;(item || []).forEach((item: any) => {
-        discountCount += Number(item.discountPrice)
-      })
-
-      const lastAmount = Number(
-        (Number(this.orderAmount) - Number(discountCount)).toFixed(2)
-      )
-      this.orderPrice = lastAmount >= 0 ? lastAmount : 0
-
-      // 设置优惠券编号
-      const couponIds = (item || []).map((item: any) => {
-        return item.couponIssueId
-      })
-      orderStatus.orderObject.couponId = couponIds.join(',') || ''
-    }
-  },
-  render() {
-    return (
-      <div class={styles['order-detail']}>
-        <ColHeader />
-
-        {!this.loading && (
-          <>
-            {this.orderList.map((item: any) => {
-              if (item.orderType === 'VIP') {
-                return <OrderVip item={item} />
-              }
-            })}
-
-            {/* 优惠券使用 */}
-            {!this.dataLoading && (
-              <UseCoupon
-                discountPrice={orderStatus.orderObject.discountPrice}
-                orderType={this.orderType}
-                orderAmount={this.orderAmount}
-                onCouponSelect={this.onCouponSelect}
-                disabled={orderStatus.orderObject.orderNo ? true : false}
-              />
-            )}
-
-            <div class={styles.paymentInfo}>
-              {this.orderPrice > 0 && (
-                <div class={styles.protocol}>
-                  <ColProtocol
-                    v-model={this.agreeStatus}
-                    showHeader
-                    style={{ paddingLeft: 0, paddingRight: 0 }}
-                  />
-                </div>
-              )}
-
-              <div class={styles.btnGroup}>
-                <div class={styles.priceSection}>
-                  支付金额：
-                  <div class={styles.price}>
-                    <span class={styles.priceUnit}>￥</span>
-                    <span class={styles.priceNum}>
-                      {moneyFormat(this.orderPrice)}
-                    </span>
-                  </div>
-                </div>
-                <Button
-                  type="primary"
-                  round
-                  class={styles.btn}
-                  onClick={this.onSubmit}
-                >
-                  立即支付
-                </Button>
-              </div>
-            </div>
-          </>
-        )}
-        <ColPopup v-model={this.popupShow}>
-          <UserAuth onSuccess={this.onAuthSuccess} />
-        </ColPopup>
-
-        <Popup
-          show={this.paymentStatus}
-          closeOnClickOverlay={false}
-          position="bottom"
-          round
-          closeOnPopstate
-          safeAreaInsetBottom
-          style={{ minHeight: '30%' }}
-        >
-          <Payment
-            v-model={this.paymentStatus}
-            orderInfo={orderStatus.orderObject}
-            onBackOut={this.onBackOut}
-          />
-        </Popup>
-      </div>
-    )
-  }
-})
+import ColProtocol from '@/components/col-protocol'
+import { Button, Dialog, Icon, Popup, Sticky, Toast } from 'vant'
+import ColPopup from '@/components/col-popup'
+import { defineComponent } from 'vue'
+import { postMessage } from '@/helpers/native-message'
+import styles from './index.module.less'
+import UserAuth from './userAuth'
+import request from '@/helpers/request'
+
+import iconTips from '@common/images/icon_tips.png'
+import Payment from './payment'
+import ColHeader from '@/components/col-header'
+import { state } from '@/state'
+import { orderInfos, orderStatus, resestState } from './orderStatus'
+import OrderVip from './order-vip'
+import { moneyFormat } from '@/helpers/utils'
+import { getMusicDetail } from '@/student/trade/tradeOrder'
+import UseCoupon from './use-coupons'
+
+export default defineComponent({
+  name: 'order-detail',
+  data() {
+    const query = this.$route.query
+    return {
+      loading: false, // 是否加载中，为了处理0元订单（）
+      orderType: query.orderType as string,
+      recomUserId: query.recomUserId, // 推荐人id
+      activityId: query.activityId, // 活动编号
+      id: query.id,
+      agreeStatus: false,
+      popupShow: false,
+      paymentStatus: false,
+      orderAmount: 0, // 订单金额，用于使用优惠券，余额，优惠等
+      orderPrice: 0, // 支付金额，最后支付金额
+      dataLoading: true,
+      paymentWay: [] as any
+    }
+  },
+  unmounted() {
+    // 销毁时解绑监听
+    orderStatus.orderInfo = {
+      orderNo: '',
+      actualPrice: 0,
+      payStatus: false
+    }
+  },
+  computed: {
+    orderList() {
+      // 商品列表
+      const orderObject = orderStatus.orderObject
+      return orderObject.orderList || []
+    }
+  },
+  async mounted() {
+    try {
+      const res = await request.get('/api-student/sysConfig/queryByParamName', {
+        params: {
+          paramName: 'payment_channel_action'
+        }
+      })
+      const paranValue = res.data.paranValue
+      this.paymentWay = paranValue ? JSON.parse(paranValue) : []
+    } catch {
+      //
+    }
+
+    // 判断是否是曲目购买（只有智能陪练才会有入口），其它地方不会有入口
+    this.dataLoading = true
+    if (this.orderType == 'MUSIC' && this.id) {
+      try {
+        const item = await getMusicDetail(this.id)
+        orderStatus.orderObject.orderType = 'MUSIC'
+        orderStatus.orderObject.orderName = item.musicSheetName
+        orderStatus.orderObject.orderDesc = item.musicSheetName
+        orderStatus.orderObject.actualPrice = item.musicPrice
+        orderStatus.orderObject.recomUserId = this.recomUserId
+        orderStatus.orderObject.activityId = this.activityId
+        // 判断当前订单是否在支付中
+        if (['WAIT_PAY', 'PAYING'].includes(item.orderStatus)) {
+          orderStatus.orderObject.orderNo = item.orderNo
+        } else if (['PAID', 'CLOSE', 'FAIL'].includes(item.orderStatus)) {
+          // 判断订单是否是其它状态
+          Toast('订单有误')
+          postMessage({ api: 'back', content: {} })
+        }
+        orderStatus.orderObject.orderList = [
+          {
+            orderType: 'MUSIC',
+            goodsName: item.musicSheetName,
+            actualPrice: item.musicPrice,
+            ...item
+          }
+        ]
+      } catch {
+        //
+      }
+    }
+    this.orderAmount = orderStatus.orderObject.actualPrice || 0
+    this.orderPrice = orderStatus.orderObject.actualPrice || 0
+    this.dataLoading = false
+    // 0元支付特别处理
+    if (this.orderPrice === 0 && orderStatus.orderObject.orderType) {
+      this.loading = true
+      this.onSubmit()
+    }
+  },
+  methods: {
+    onAuthSuccess() {
+      this.popupShow = false
+      this.onSubmit() // 实名成功后自动支付
+    },
+    async onSubmit() {
+      // console.log(this.orderInfos)
+      if (this.orderPrice > 0) {
+        if (!this.agreeStatus) {
+          Toast('请先阅读并同意《管乐迷平台服务协议》')
+          return
+        }
+        const users = state.user.data
+        // 判断是否需要实名认证
+        if (!users?.realName || !users?.idCardNo) {
+          this.popupShow = true
+          return
+        }
+      }
+
+      // 判断是否有订单号
+      if (orderStatus.orderObject.orderNo) {
+        this.paymentStatus = true
+        return
+      }
+
+      // 正常支付
+      try {
+        const orderObject = orderStatus.orderObject
+        const url =
+          state.platformType === 'TEACHER'
+            ? '/api-teacher/userOrder/executeOrder'
+            : '/api-student/userOrder/executeOrder'
+        const res = await request.post(url, {
+          data: {
+            orderName: orderObject.orderName,
+            orderDesc: orderObject.orderDesc,
+            orderType: orderObject.orderType,
+            actualPrice: this.orderPrice || 0,
+            recomUserId: orderObject.recomUserId,
+            activityId: orderObject.activityId,
+            couponId: orderObject.couponId,
+            orderInfos: [...orderInfos()]
+          }
+        })
+        const result = res.data || {}
+        // 支付成功
+        if (result.status == 'PAID') {
+          this.$router.replace({
+            path: '/tradeDetail',
+            query: {
+              orderNo: result.orderNo
+            }
+          })
+          return
+        }
+
+        // 拉起支付方式
+        orderStatus.orderObject.orderNo = result.orderNo
+        orderStatus.orderObject.actualPrice = result.actualPrice
+        this.paymentStatus = true
+      } catch {
+        this.loading = false
+        if (this.orderPrice === 0) {
+          Dialog.alert({
+            title: '提示',
+            message: '支付失败，请稍后重试！',
+            confirmButtonText: '确定',
+            confirmButtonColor: '#01C1B5'
+          })
+        }
+      }
+    },
+    onBackOut() {
+      // 关闭订单后需要重置数据
+      resestState()
+    },
+    onCouponSelect(item: any) {
+      console.log('onCouponSelect', item)
+      let discountCount = 0
+      ;(item || []).forEach((item: any) => {
+        discountCount += Number(item.discountPrice)
+      })
+
+      const lastAmount = Number(
+        (Number(this.orderAmount) - Number(discountCount)).toFixed(2)
+      )
+      this.orderPrice = lastAmount >= 0 ? lastAmount : 0
+
+      // 设置优惠券编号
+      const couponIds = (item || []).map((item: any) => {
+        return item.couponIssueId
+      })
+      orderStatus.orderObject.couponId = couponIds.join(',') || ''
+    }
+  },
+  render() {
+    return (
+      <div class={styles['order-detail']}>
+        <ColHeader />
+
+        {!this.loading && (
+          <>
+            {this.orderList.map((item: any) => {
+              if (item.orderType === 'VIP') {
+                return <OrderVip item={item} />
+              }
+            })}
+
+            {/* 优惠券使用 */}
+            {!this.dataLoading && (
+              <UseCoupon
+                discountPrice={orderStatus.orderObject.discountPrice}
+                orderType={this.orderType}
+                orderAmount={this.orderAmount}
+                onCouponSelect={this.onCouponSelect}
+                disabled={orderStatus.orderObject.orderNo ? true : false}
+              />
+            )}
+
+            <div class={styles.paymentInfo}>
+              {this.orderPrice > 0 && (
+                <div class={styles.protocol}>
+                  <ColProtocol
+                    v-model={this.agreeStatus}
+                    showHeader
+                    style={{ paddingLeft: 0, paddingRight: 0 }}
+                  />
+                </div>
+              )}
+
+              <div class={styles.btnGroup}>
+                <div class={styles.priceSection}>
+                  支付金额：
+                  <div class={styles.price}>
+                    <span class={styles.priceUnit}>￥</span>
+                    <span class={styles.priceNum}>
+                      {moneyFormat(this.orderPrice)}
+                    </span>
+                  </div>
+                </div>
+                <Button
+                  type="primary"
+                  round
+                  class={styles.btn}
+                  onClick={this.onSubmit}
+                >
+                  立即支付
+                </Button>
+              </div>
+            </div>
+          </>
+        )}
+        <ColPopup v-model={this.popupShow}>
+          <UserAuth onSuccess={this.onAuthSuccess} />
+        </ColPopup>
+
+        <Popup
+          show={this.paymentStatus}
+          closeOnClickOverlay={false}
+          position="bottom"
+          round
+          closeOnPopstate
+          safeAreaInsetBottom
+          style={{ minHeight: '30%' }}
+        >
+          <Payment
+            paymentWay={this.paymentWay}
+            v-model={this.paymentStatus}
+            orderInfo={orderStatus.orderObject}
+            onBackOut={this.onBackOut}
+          />
+        </Popup>
+      </div>
+    )
+  }
+})

src/views/order-detail/payment/index.module.less

@@ -1,79 +1,91 @@
-.payment {
-  :global {
-    .van-cell__title {
-      font-size: 16px;
-      padding-left: 10px;
-    }
-    .van-icon-cross {
-      position: absolute;
-      z-index: 1;
-      top: 13px;
-      left: 13px;
-      color: #ccc;
-      cursor: pointer;
-    }
-
-    // .van-checkbox__icon,
-    // .van-radio__icon {
-    //   height: 22px;
-    //   .van-icon {
-    //     border: 0;
-    //   }
-    // }
-    // .van-checkbox__icon--checked .van-icon,
-    // .van-radio__icon--checked .van-icon {
-    //   background: transparent;
-    //   border: transparent;
-    // }
-  }
-
-  // .van-popup__close-icon {
-  //   color: #cccccc;
-  //   font-size: 22px;
-  // }
-  // .van-popup--bottom.van-popup--round {
-  //   border-radius: 6px 6px 0 0;
-  // }
-  // .van-hairline--bottom::after {
-  //   border-bottom-color: #f0f0f0;
-  // }
-  .title {
-    background-color: #ffffff;
-    font-size: 16px;
-    font-weight: 400;
-    color: #1a1a1a;
-    padding: 14px 0 12px;
-    text-align: center;
-  }
-  .payAmount {
-    background-color: #ffffff;
-    padding: 20px 0;
-    text-align: center;
-    p {
-      font-size: 14px;
-      color: #666666;
-      padding-bottom: 10px;
-    }
-    .amount {
-      font-size: 28px;
-      color: #000000;
-      span {
-        font-size: 18px;
-        padding-left: 3px;
-      }
-    }
-  }
-
-  .blank {
-    height: 65px;
-    // background-color: #f6f8f9;
-  }
-
-  .payBtn {
-    width: 230px !important;
-    margin: 0 auto;
-    font-size: 16px;
-    font-weight: 600;
-    margin-bottom: 20px;
-  }
-}
+.payment {
+  :global {
+    .van-cell__title {
+      font-size: 16px;
+      padding-left: 10px;
+    }
+
+    .van-icon-cross {
+      position: absolute;
+      z-index: 1;
+      top: 13px;
+      left: 13px;
+      color: #ccc;
+      cursor: pointer;
+    }
+
+    // .van-checkbox__icon,
+    // .van-radio__icon {
+    //   height: 22px;
+    //   .van-icon {
+    //     border: 0;
+    //   }
+    // }
+    // .van-checkbox__icon--checked .van-icon,
+    // .van-radio__icon--checked .van-icon {
+    //   background: transparent;
+    //   border: transparent;
+    // }
+  }
+
+  // .van-popup__close-icon {
+  //   color: #cccccc;
+  //   font-size: 22px;
+  // }
+  // .van-popup--bottom.van-popup--round {
+  //   border-radius: 6px 6px 0 0;
+  // }
+  // .van-hairline--bottom::after {
+  //   border-bottom-color: #f0f0f0;
+  // }
+  .title {
+    background-color: #ffffff;
+    font-size: 16px;
+    font-weight: 400;
+    color: #1a1a1a;
+    padding: 14px 0 12px;
+    text-align: center;
+  }
+
+  .payAmount {
+    background-color: #ffffff;
+    padding: 20px 0;
+    text-align: center;
+
+    p {
+      font-size: 14px;
+      color: #666666;
+      padding-bottom: 10px;
+    }
+
+    .amount {
+      font-size: 28px;
+      color: #000000;
+
+      span {
+        font-size: 18px;
+        padding-left: 3px;
+      }
+    }
+  }
+
+  .blank {
+    height: 65px;
+    // background-color: #f6f8f9;
+
+    .message {
+      padding: 10px 12px;
+      color: red;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+
+  .payBtn {
+    width: 230px !important;
+    margin: 0 auto;
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 20px;
+  }
+}

src/views/order-detail/payment/index.tsx

@@ -1,202 +1,239 @@
-import request from '@/helpers/request'
-import {
-  listenerMessage,
-  postMessage,
-  removeListenerMessage
-} from '@/helpers/native-message'
-import {
-  Button,
-  Cell,
-  CellGroup,
-  Icon,
-  RadioGroup,
-  Radio,
-  Dialog,
-  Toast
-} from 'vant'
-import { defineComponent, PropType } from 'vue'
-
-import styles from './index.module.less'
-import { state } from '@/state'
-import { validStudentUrl } from '@/helpers/utils'
-
-export default defineComponent({
-  name: 'payment',
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false
-    },
-    orderInfo: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    onBackOut: {
-      type: Function,
-      default: () => {}
-    },
-    paymentType: {
-      type: String,
-      default: 'orderPay' as 'orderPay' | 'goodsPay'
-    }
-  },
-  data() {
-    return {
-      payType: 'ali_app',
-      pay_channel: ''
-    }
-  },
-  methods: {
-    onClose() {
-      Dialog.confirm({
-        message: '是否放弃本次付款',
-        confirmButtonText: '继续付款',
-        cancelButtonText: '放弃'
-      })
-        .then(() => {})
-        .catch(async () => {
-          this.onCancel()
-        })
-    },
-    async onCancel(noBack?: boolean) {
-      // 不管接口是否报错,都返回
-      this.$emit('update:modelValue', false)
-
-      !noBack && this.$router.go(-1)
-      this.onBackOut && this.onBackOut()
-    },
-    async onSubmit() {
-      // 支付...
-      try {
-        console.log(this.orderInfo, 'orderInfo payment')
-        Toast.loading({
-          message: '支付中...',
-          forbidClick: true,
-          duration: 3000,
-          loadingType: 'spinner'
-        })
-
-        const pt = this.payType,
-          ua = window.navigator.userAgent.toLowerCase()
-        // 判断当前浏览器
-        if (ua.match(/MicroMessenger/i) + '' == 'micromessenger') {
-          // 微信浏览器
-          if (pt == 'ali_app') {
-            this.pay_channel = 'alipay_qr'
-            this.getCodePay('qrCode')
-          } else if (pt == 'wx_app') {
-            this.pay_channel = 'wx_pub'
-            this.getCodePay('pay')
-          }
-        } else if (ua.match(/AlipayClient/i) + '' == 'alipayclient') {
-          // 支付宝浏览器
-          if (pt == 'ali_app') {
-            this.pay_channel = 'alipay_wap'
-            // 支付宝 H5 支付
-            this.getCodePay('pay')
-          } else if (pt == 'wx_app') {
-            this.pay_channel = 'wx_pub'
-            this.getCodePay('qrCode')
-          }
-        } else {
-          if (pt == 'ali_app') {
-            this.pay_channel = 'alipay_qr'
-          } else if (pt == 'wx_app') {
-            this.pay_channel = 'wx_pub'
-          }
-          this.getCodePay('qrCode')
-        }
-        this.$emit('update:modelValue', false)
-
-        setTimeout(() => {
-          Toast.clear()
-        }, 1000)
-      } catch (e: any) {
-        console.log(e)
-      }
-    },
-    getCodePay(code) {
-      // 二维码页面， 唤起支付页面
-      let url = validStudentUrl()
-      if (code == 'qrCode') {
-        url += `/#/payQRCode`
-      } else {
-        url += `/#/payResult`
-      }
-      const orderInfo = this.orderInfo
-      orderInfo.payMap.returnUrl = orderInfo.payMap.returnUrl.replace(
-        /&/gi,
-        '^^'
-      )
-      const navHeight = sessionStorage.getItem('navHeight') || 0
-      // p 表示是商品购买，需要单独去学生端处理
-      url += `?payType=${this.pay_channel}&payment=${JSON.stringify(
-        this.orderInfo
-      )}&navHeight=${navHeight}'&platform=goods`
-      window.location.replace(url)
-    }
-  },
-  render() {
-    return (
-      <div class={styles.payment}>
-        <Icon onClick={this.onClose} name="cross" size={20} />
-        <div class={[styles.title, 'van-hairline--bottom']}>选择支付方式</div>
-
-        <div class={styles.payAmount}>
-          <p>应付金额</p>
-          <div class={styles.amount}>
-            {(this as any).$filters.moneyFormat(
-              this.orderInfo.payMap.amount || 0
-            )}
-            <span>元</span>
-          </div>
-        </div>
-        <RadioGroup v-model={this.payType}>
-          <CellGroup border={false}>
-            <Cell
-              title="支付宝支付"
-              border={false}
-              center
-              onClick={() => {
-                // alipay
-                this.payType = 'ali_app'
-              }}
-              v-slots={{
-                icon: () => <Icon name="alipay" color="#009fe9" size={22} />,
-                'right-icon': () => <Radio name="ali_app" />
-              }}
-            ></Cell>
-            <Cell
-              title="微信支付"
-              border={false}
-              center
-              onClick={() => {
-                // wx_lite
-                this.payType = 'wx_app'
-              }}
-              v-slots={{
-                icon: () => (
-                  <Icon name="wechat-pay" color="#15c434" size={22} />
-                ),
-                'right-icon': () => <Radio name="wx_app" />
-              }}
-            ></Cell>
-          </CellGroup>
-        </RadioGroup>
-
-        <div class={styles.blank}></div>
-        <Button
-          type="primary"
-          class={styles.payBtn}
-          block
-          round
-          onClick={this.onSubmit}
-        >
-          确认支付
-        </Button>
-      </div>
-    )
-  }
-})
+import request from '@/helpers/request'
+import {
+  listenerMessage,
+  postMessage,
+  removeListenerMessage
+} from '@/helpers/native-message'
+import {
+  Button,
+  Cell,
+  CellGroup,
+  Icon,
+  RadioGroup,
+  Radio,
+  Dialog,
+  Toast
+} from 'vant'
+import { defineComponent, PropType } from 'vue'
+
+import styles from './index.module.less'
+import { state } from '@/state'
+import { validStudentUrl } from '@/helpers/utils'
+
+export default defineComponent({
+  name: 'payment',
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    /** 可以使用支付方式 */
+    paymentWay: {
+      type: Array,
+      default: () => ['wx', 'alipay']
+    },
+    orderInfo: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    onBackOut: {
+      type: Function,
+      default: () => {}
+    },
+    paymentType: {
+      type: String,
+      default: 'orderPay' as 'orderPay' | 'goodsPay'
+    }
+  },
+  data() {
+    return {
+      payType: 'ali_app',
+      pay_channel: '',
+      message: '',
+      isWx: true,
+      isAlipay: true
+    }
+  },
+  mounted() {
+    if (this.paymentWay.length > 0) {
+      this.isWx = this.paymentWay.indexOf('wx') != -1
+      this.isAlipay = this.paymentWay.indexOf('alipay') != -1
+      if (this.isAlipay) {
+        this.payType = 'ali_app'
+      }
+      if (this.isWx && !this.isAlipay) {
+        this.payType = 'wx_app'
+      }
+      if (!this.isAlipay) {
+        this.message = '温馨提示：由于支付宝支付升级，临时暂停支付通道'
+      } else if (!this.isWx) {
+        this.message = '温馨提示：由于微信支付升级，临时暂停支付通道'
+      }
+      console.log({
+        isWx: this.isWx,
+        isAlipay: this.isAlipay
+      })
+    }
+  },
+  methods: {
+    onClose() {
+      Dialog.confirm({
+        message: '是否放弃本次付款',
+        confirmButtonText: '继续付款',
+        cancelButtonText: '放弃'
+      })
+        .then(() => {})
+        .catch(async () => {
+          this.onCancel()
+        })
+    },
+    async onCancel(noBack?: boolean) {
+      // 不管接口是否报错,都返回
+      this.$emit('update:modelValue', false)
+
+      !noBack && this.$router.go(-1)
+      this.onBackOut && this.onBackOut()
+    },
+    async onSubmit() {
+      // 支付...
+      try {
+        console.log(this.orderInfo, 'orderInfo payment')
+        Toast.loading({
+          message: '支付中...',
+          forbidClick: true,
+          duration: 3000,
+          loadingType: 'spinner'
+        })
+
+        const pt = this.payType,
+          ua = window.navigator.userAgent.toLowerCase()
+        // 判断当前浏览器
+        if (ua.match(/MicroMessenger/i) + '' == 'micromessenger') {
+          // 微信浏览器
+          if (pt == 'ali_app') {
+            this.pay_channel = 'alipay_qr'
+            this.getCodePay('qrCode')
+          } else if (pt == 'wx_app') {
+            this.pay_channel = 'wx_pub'
+            this.getCodePay('pay')
+          }
+        } else if (ua.match(/AlipayClient/i) + '' == 'alipayclient') {
+          // 支付宝浏览器
+          if (pt == 'ali_app') {
+            this.pay_channel = 'alipay_wap'
+            // 支付宝 H5 支付
+            this.getCodePay('pay')
+          } else if (pt == 'wx_app') {
+            this.pay_channel = 'wx_pub'
+            this.getCodePay('qrCode')
+          }
+        } else {
+          if (pt == 'ali_app') {
+            this.pay_channel = 'alipay_qr'
+          } else if (pt == 'wx_app') {
+            this.pay_channel = 'wx_pub'
+          }
+          this.getCodePay('qrCode')
+        }
+        this.$emit('update:modelValue', false)
+
+        setTimeout(() => {
+          Toast.clear()
+        }, 1000)
+      } catch (e: any) {
+        console.log(e)
+      }
+    },
+    getCodePay(code) {
+      // 二维码页面， 唤起支付页面
+      let url = validStudentUrl()
+      if (code == 'qrCode') {
+        url += `/#/payQRCode`
+      } else {
+        url += `/#/payResult`
+      }
+      const orderInfo = this.orderInfo
+      orderInfo.payMap.returnUrl = orderInfo.payMap.returnUrl.replace(
+        /&/gi,
+        '^^'
+      )
+      const navHeight = sessionStorage.getItem('navHeight') || 0
+      // p 表示是商品购买，需要单独去学生端处理
+      url += `?payType=${this.pay_channel}&payment=${JSON.stringify(
+        this.orderInfo
+      )}&navHeight=${navHeight}'&platform=goods`
+      window.location.replace(url)
+    }
+  },
+  render() {
+    return (
+      <div class={styles.payment}>
+        <Icon onClick={this.onClose} name="cross" size={20} />
+        <div class={[styles.title, 'van-hairline--bottom']}>选择支付方式</div>
+
+        <div class={styles.payAmount}>
+          <p>应付金额</p>
+          <div class={styles.amount}>
+            {(this as any).$filters.moneyFormat(
+              this.orderInfo.payMap.amount || 0
+            )}
+            <span>元</span>
+          </div>
+        </div>
+        <RadioGroup v-model={this.payType}>
+          <CellGroup border={false}>
+            <Cell
+              title="支付宝支付"
+              border={false}
+              center
+              onClick={() => {
+                if (!this.isAlipay) return
+                // alipay
+                this.payType = 'ali_app'
+              }}
+              v-slots={{
+                icon: () => <Icon name="alipay" color="#009fe9" size={22} />,
+                'right-icon': () => (
+                  <Radio name="ali_app" disabled={!this.isAlipay} />
+                )
+              }}
+            ></Cell>
+            <Cell
+              title="微信支付"
+              border={false}
+              center
+              onClick={() => {
+                if (!this.isWx) return
+                // wx_lite
+                this.payType = 'wx_app'
+              }}
+              v-slots={{
+                icon: () => (
+                  <Icon name="wechat-pay" color="#15c434" size={22} />
+                ),
+                'right-icon': () => (
+                  <Radio name="wx_app" disabled={!this.isWx} />
+                )
+              }}
+            ></Cell>
+          </CellGroup>
+        </RadioGroup>
+
+        <div class={styles.blank}>
+          {this.message && <p class={styles.message}>{this.message}</p>}
+        </div>
+        <Button
+          type="primary"
+          class={styles.payBtn}
+          block
+          round
+          onClick={this.onSubmit}
+        >
+          确认支付
+        </Button>
+      </div>
+    )
+  }
+})