h5支付开发

src/components/layout/Index.vue

@@ -19,7 +19,10 @@ const props = defineProps<Props>()
       <router-view :key="$route.fullPath"></router-view>
     </section>
     <template
-      v-if="(!mobile && route.path !== '/shop/pay') || route.path !== '/shop'"
+      v-if="
+        (!mobile && !route.path.includes('/shop/pay')) ||
+        (!mobile && route.path !== '/shop')
+      "
     >
       <AppFooter></AppFooter>
     </template>

src/modules/pay/components/Confirm.vue

@@ -3,10 +3,11 @@ import { ElMessage } from 'element-plus'
 import { Check } from '@element-plus/icons-vue'
 import { useUserStore } from '@/stores/user'
 import { useDevice } from '@/composables/useDevice'
-import queryString from 'query-string'
-import { getOpenId, wxJSPay } from '@/utils/wxpay'
+import { wxJSPay } from '@/utils/wxpay'
 import { createOrder, getOrderList } from '../api'
+import { getOpenId } from '@/api/base'
 const router = useRouter()
+const route = useRoute()
 const { mobile, wechat, alipay } = useDevice()
 const user = useUserStore()
 const props = defineProps({
@@ -14,14 +15,14 @@ const props = defineProps({
     type: Object
   }
 })
-const orderInfo: any = ref([])
+// const defaultParams: any = ref({})
+const openId: any = ref(window.localStorage.getItem('openId'))
+const payment_method = ref('')
 const orderInfoDetail: any = ref([])
 const payMode = ref(1)
 const isAgree = ref(false)
 const currentCheck = ref('12')
-const query = $computed(() => {
-  return queryString.parse(location.search, { parseBooleans: true })
-})
+const timer = ref()
 function getDateTime(dayNum: any) {
   const dateDay = new Date()
   dateDay.setDate(dateDay.getDate() + dayNum) //获取dayNum天后的日期
@@ -39,22 +40,26 @@ const end_time = getDateTime(90)
 const emit = defineEmits<{
   (e: 'success', params: object): void
 }>()
+const checkdChange = (val: string) => {
+  currentCheck.value = val
+}
 
-// 创建订单
-const handleCreateOrder = () => {
-  if (wechat) {
-    const openId = localStorage.getItem('openId')
-    if (!openId) {
-      getOpenId(query.code, pay)
-      return Promise.reject('openId不存在')
-    }
-    pay()
-  } else if (alipay) {
-    pay()
+// 获取订单
+const getOrder = (val: any) => {
+  getOrderList({ order_detail_id: val }).then((resp) => {
+    orderInfoDetail.value = resp.data[0]
+    const params = {
+      status: 'success',
+      orderId: orderInfoDetail.value.order_id,
+      payPrice: orderInfoDetail.value.payment_money,
+      payStatus: orderInfoDetail.value.order_status
     }
+    clearInterval(timer.value)
+    emit('success', params)
+  })
 }
-// 去支付
-function pay() {
+// 创建订单
+const handleCreateOrder = () => {
   const params: any = {
     shop_id: '6998523899570814976',
     spu_id: '6998525810348916736',
@@ -63,37 +68,52 @@ function pay() {
     buy_count: '1',
     notify_url: `https://ep-lms-api.ezijing.com/v2/student/push?tenant=paa&sso_id=${user.user?.id}&class_id=${props.shopItem?.class_id}&course_flag=1&course_id=${props.shopItem?.course_id}`
   }
-  if (payMode.value === 4 && wechat) {
-    params.payment_method = '4'
-    // 微信扫码支付
-  } else if (payMode.value === 12 && alipay) {
-    params.payment_method = '12'
-  }
-  createOrder(params).then((order) => {
-    orderInfo.value = order
   if (wechat) {
-      wxJSPay(order, getOrder())
+    if (openId.value) {
+      params.open_id = openId.value
+      params.payment_method = '3'
+      fetchPlaceOrder(params)
+    }
   } else if (alipay) {
-      location.href = orderInfo.value[0]?.payment_url
+    params.payment_method = '12'
+    fetchPlaceOrder(params)
   }
+}
+const fetchPlaceOrder = (params: any) => {
+  createOrder(params).then((res) => {
+    placeOrderCallback(res)
   })
 }
-
-// 获取订单
-function getOrder() {
-  return getOrderList({
-    order_detail_id: orderInfo.value[0].order_detail_id
-  }).then((resp) => {
-    orderInfoDetail.value = resp.data[0]
-    const params = {
-      status: 'success',
-      orderId: orderInfoDetail.value.order_id,
-      payPrice: orderInfoDetail.value.payment_money,
-      payStatus: orderInfoDetail.value.order_status
+const placeOrderCallback = (res: any) => {
+  const payType = payment_method.value
+  if (payType === '3') {
+    // 微信内支付
+    if (typeof res.payment_more_info === 'string') {
+      const payInfo = JSON.parse(res.payment_more_info)
+      if (payInfo.appId) {
+        wxJSPay(res, getOrder)
+      }
+    }
+  } else if (payType === '4') {
+    // 微信外微信h5支付
+    window.location.href =
+      res.payment_url +
+      '&redirect_url=' +
+      encodeURIComponent(res.order_details_url)
+    timer.value = setInterval(() => {
+      // 通过定时器每间隔一会去请求查询微信支付状态（具体参数根据项目需要而定）
+      getOrder(res.order_detail_id)
+    }, 2000)
+  } else if (payType === '12') {
+    // 支付宝网页支付
+    window.location.href = res.payment_url
+    timer.value = setInterval(() => {
+      // 通过定时器每间隔一会去请求查询微信支付状态（具体参数根据项目需要而定）
+      getOrder(res.order_detail_id)
+    }, 2000)
   }
-    emit('success', params)
-  })
 }
+// 点击立即购买
 const handlePay = () => {
   if (isAgree.value === false) {
     ElMessage.warning('请先勾选紫荆金保服务协议')
@@ -106,6 +126,7 @@ const handlePay = () => {
         }
         emit('success', params)
       } else {
+        // H5创建订单
         handleCreateOrder()
       }
     } else {
@@ -115,9 +136,7 @@ const handlePay = () => {
     }
   }
 }
-const checkdChange = (val: string) => {
-  currentCheck.value = val
-}
+
 const handlePrev = () => {
   router.push({
     path: `/shop/detail/${props.shopItem?.id}`,
@@ -126,6 +145,36 @@ const handlePrev = () => {
     }
   })
 }
+const fetchOpenId = (code: any) => {
+  getOpenId({ code, identity: 'ezijing' }).then((res: any) => {
+    if (res.openid) {
+      openId.value = res.openid || ''
+      window.localStorage.setItem('openId', res.openid || '')
+    } else {
+      window.localStorage.removeItem('openId')
+      getCode()
+    }
+  })
+}
+const getCode = () => {
+  const redirectURI = `https://pages.ezijing.com/given/auth.html?redirect_uri=${encodeURIComponent(
+    window.location.href
+  )}`
+  window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx451c01d40d090d7a&redirect_uri=${redirectURI}&response_type=code&scope=snsapi_base#wechat_redirect`
+}
+if (
+  (openId.value === '' ||
+    openId.value === null ||
+    openId.value === undefined) &&
+  wechat
+) {
+  const { code } = route.query
+  if (code) {
+    fetchOpenId(code)
+  } else {
+    getCode()
+  }
+}
 </script>
 
 <template>