Skip to content

P
project-online-fi
提交 d333e3f4 authored 作者: matian's avatar matian
浏览文件
操作

updates

上级 2daf00e0
隐藏空白字符变更
内嵌 并排
正在显示 包含 22 行增加 和 244 行删除
src/modules/pay/components/Order.vue deleted 100644 → 0
浏览文件 @ 2daf00e0
<script setup lang="ts">
import { createOrder, getOrderList } from '../api'
import QrcodeVue from 'qrcode.vue'
import { useUserStore } from '@/stores/user'
const user = useUserStore()
const timer = ref()
const qrCodeUrl = ref('')
const payStatus = ref('')
const orderId = ref('')
const props = defineProps({
payMethod: {
type: Number
},
shopItem: {
type: Object
}
})
const emit = defineEmits<{
(e: 'update', params: object): void
}>()
onMounted(() => {
const params: any = {
shop_id: '6998523899570814976',
spu_id: '6998525810348916736',
sku_id: '6998525810365693952',
redirect_url: '',
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 (props.payMethod === 1) {
params.payment_method = '11'
// 微信扫码支付
} else if (props.payMethod === 2) {
params.payment_method = '1'
}
createOrder(params).then((res: any) => {
console.log(res)
qrCodeUrl.value = res.payment_url
timer.value = setInterval(() => {
// 通过定时器每间隔一会去请求查询微信支付状态（具体参数根据项目需要而定）
handleGetOrderList(res.order_detail_id)
}, 2000)
})
})
const handleGetOrderList = (id: any) => {
getOrderList({ order_detail_id: id }).then((res) => {
payStatus.value = res.data[0].order_status
orderId.value = res.data[0].order_id
if (payStatus.value === '4') {
const params = {
orderId: res.data[0].order_id,
payPrice: res.data[0].payment_money,
status: 'success',
payStatus: res.data[0].order_status
}
clearInterval(timer.value)
emit('update', params)
}
})
}
</script>
<template>
<div class="main">
<div class="main_order">
<div class="order_id">
<div class="id_tit">商品订单：</div>
<div class="id_num">{{ orderId }}</div>
</div>
<div class="order_price">
<div class="price_tit">支付金额：</div>
<div class="price_con">
<div class="con_icon">¥</div>
<div class="con_num">{{ shopItem?.price }}</div>
</div>
</div>
<div class="line"></div>
<div class="order_mode">
<div class="mode_tit">支付方式：</div>
<div class="mode_con">
<img
:src="
payMethod === 1
? 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/pay_ali.png'
: 'https://webapp-pub.ezijing.com/project_online/fi/pay_wechat.png'
"
class="con_style"
/>
<span class="radio_tit">{{
payMethod === 1 ? '支付宝支付' : '微信支付'
}}</span>
<img
src="https://webapp-pub.ezijing.com/project_online/fi/icon_pay_checked.png"
class="checked_img"
/>
</div>
</div>
<div class="order_qaCode">
<div class="qaCode_left">
<div class="left_code">
<qrcode-vue :value="qrCodeUrl" :size="197" level="H"></qrcode-vue>
</div>
<div
class="left_desc"
:class="payMethod === 1 ? 'left_desc_ali' : 'left_desc_wechat'"
>
{{
payMethod === 1
? '请打开手机支付宝，扫一扫完成支付'
: '请打开手机微信，扫一扫完成支付'
}}
</div>
</div>
<img
:src="
payMethod === 1
? 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/icon_aliPay_img1.png'
: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/icon_wechat_img1.png'
"
class="right_img"
/>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.main {
width: 100%;
padding: 50px 0 46px 0;
.main_order {
width: 1200px;
background: #ffffff;
margin: auto;
padding: 59px 0 137px 40px;
.order_id {
display: flex;
font-size: 16px;
font-weight: 400;
line-height: 34px;
.id_tit {
color: #333333;
}
.id_num {
color: #999999;
}
}
.order_price {
display: flex;
font-size: 16px;
font-weight: 400;
line-height: 34px;
margin-top: 22px;
.price_tit {
color: #333333;
}
.price_con {
display: flex;
.con_icon {
font-size: 22px;
font-weight: 400;
line-height: 34px;
color: #aa1941;
}
.con_num {
font-size: 36px;
font-weight: normal;
line-height: 34px;
color: #aa1941;
}
}
}
.line {
margin-top: 26px;
border-bottom: 1px solid #e6e6e6;
}
.order_mode {
.mode_tit {
font-size: 16px;
font-weight: 500;
line-height: 34px;
color: #333333;
}
.mode_con {
margin-top: 29px;
width: 160px;
height: 66px;
border: 1px solid #4586d0;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.con_style {
margin-right: 10px;
}
.checked_img {
position: absolute;
right: -1px;
bottom: -1px;
}
}
}
.order_qaCode {
display: flex;
margin-top: 39px;
.qaCode_left {
.left_code {
width: 197px;
}
.left_desc {
width: 197px;
height: 31px;
font-size: 12px;
font-weight: 400;
line-height: 31px;
color: #ffffff;
text-align: center;
}
.left_desc_ali {
background: #0f76fb;
}
.left_desc_wechat {
background: #01c71e;
}
}
.right_img {
margin: -11px 0 0 124px;
}
}
}
}
</style>
src/modules/pay/composables/usePay.ts
浏览文件 @ d333e3f4
......@@ -18,6 +18,10 @@ export function usePay() {
const openId = useStorage('openId', '')
const redirectURL = computed(() => {
return `${location.origin}/shop/order/${shopStore.shopItem?.id}`
})
// 支付
async function pay(options = {}) {
// 默认参数
......@@ -26,7 +30,7 @@ export function usePay() {
spu_id: shopStore.shopItem?.spu_id || '6998525810348916736',
sku_id: shopStore.shopItem?.sku_id || '6998525810365693952',
buy_count: '1',
redirect_url: `${location.origin}/shop/order/${shopStore.shopItem?.id}`,
redirect_url: redirectURL.value,
notify_url: `https://ep-lms-api.ezijing.com/v2/student/push?tenant=paa&sso_id=${userStore.user?.id}&class_id=${shopStore.shopItem?.class_id}&course_flag=1&course_id=${shopStore.shopItem?.course_id}`
})
const params = Object.assign(defaultParams, options)
......@@ -42,10 +46,20 @@ export function usePay() {
if (!payOrder.value) return
// 网页支付，直接唤起对应支付网页
if (params.payment_method === '4' || params.payment_method === '12') {
if (params.payment_method === '12') {
location.href = payOrder.value.payment_url
return
}
// 微信h5支付
if (params.payment_method === '4') {
const paymentUrl = `${payOrder.value.payment_url}&redirect_url=${encodeURIComponent(
`https://pages.ezijing.com/base/auth.html?redirect_uri=${encodeURIComponent(redirectURL.value)}`
)}`
location.href = `https://pages.ezijing.com/base/pay.html?payment_url=${encodeURIComponent(
paymentUrl
)}&redirect_url=${redirectURL.value}`
return
}
// 微信JS支付
if (params.payment_method === '3') {
wxJSPay()
......@@ -91,7 +105,7 @@ export function usePay() {
// 获取code
function getCode() {
const href = location.href.includes('?') ? `${location.href}&is_pay=true` : `${location.href}?is_pay=true`
const redirectURI = `https://pages.ezijing.com/given/auth.html?redirect_uri=${encodeURIComponent(href)}`
const redirectURI = `https://pages.ezijing.com/base/auth.html?redirect_uri=${encodeURIComponent(href)}`
location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx451c01d40d090d7a&redirect_uri=${redirectURI}&response_type=code&scope=snsapi_base`
}
......@@ -113,10 +127,11 @@ export function usePay() {
alert('订单创建错误')
return
}
const payInfo: any = JSON.parse(payOrder.value.payment_more_info)
;(window as any).WeixinJSBridge?.invoke('getBrandWCPayRequest', payInfo, (res: any) => {
console.log(res)
})
location.href = `https://pages.ezijing.com/base/pay.html?payment_more_info=${payOrder.value.payment_more_info}&redirect_url=${redirectURL.value}`
// const payInfo: any = JSON.parse(payOrder.value.payment_more_info)
// ;(window as any).WeixinJSBridge?.invoke('getBrandWCPayRequest', payInfo, (res: any) => {
// console.log(res)
// })
}
return { order, payOrder, pay }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论