Skip to content

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

updates

上级 08936e03
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 0 行增加 和 543 行删除
src/modules/pay/components/Confirm.vue deleted 100644 → 0
浏览文件 @ 08936e03
差异被折叠。
src/modules/pay/components/Order.vue deleted 100644 → 0
浏览文件 @ 08936e03
<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'
// 微信扫码支付
}
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/components/PaySucess.vue deleted 100644 → 0
浏览文件 @ 08936e03
<script setup lang="ts">
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const router = useRouter()
const props = defineProps({
payInfo: {
type: Object
},
shopItem: {
type: Object
}
})
function getDateTime(dayNum: any) {
const dateDay = new Date()
dateDay.setDate(dateDay.getDate() + dayNum) //获取dayNum天后的日期
console.log(dateDay)
const y = dateDay.getFullYear()
const m =
dateDay.getMonth() + 1 < 10
? '0' + (dateDay.getMonth() + 1)
: dateDay.getMonth() + 1 //获取当前月份的日期，不足10补0
const d = dateDay.getDate() < 10 ? '0' + dateDay.getDate() : dateDay.getDate() //获取当前几号，不足10补0
return y + '-' + m + '-' + d
}
const start_time = getDateTime(0)
const end_time = getDateTime(90)
const handleStudy = () => {
window.open('https://paa-learning.ezijing.com')
}
const handlePrev = () => {
router.replace({
path: `/shop/detail/${props.shopItem?.id}`,
query: {
payStatus: props.payInfo?.payStatus
}
})
}
</script>
<template>
<div class="main_pay" v-if="!mobile">
<div class="pay_con">
<div class="con_top">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/icon_sucess.png"
alt=""
/>
<div class="top_tit">支付成功！</div>
</div>
<div class="con_info">
<div class="info_order">
<div class="order_tit">商品订单：</div>
<div class="order_id">{{ payInfo?.orderId }}</div>
</div>
<div class="info_price">
<div class="price_tit">支付金额：</div>
<div class="price_id">¥{{ payInfo?.payPrice }}</div>
</div>
<div class="info_tips">
若有疑问请与客服联系，我们将尽快为您提供服务
</div>
<div class="info_btn">
<div class="btn_prev" @click="handlePrev">返回</div>
<div class="btn_study" @click="handleStudy">开始学习</div>
</div>
</div>
</div>
</div>
<div class="main_pay_mobile" v-else>
<div class="con_nav">
<img
class="img1"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/prev_mini.png"
alt=""
srcset=""
@click="handlePrev"
/>
<div class="nav_title">
<img
class="img2"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/icon_sucess.png"
alt=""
/>
支付成功
</div>
</div>
<div class="course_con">
<img
src="https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
@click="handlePrev"
/>
<div class="course_dec">
<div class="info_title">{{ shopItem?.title }}</div>
<div class="info_date">有效期：{{ start_time }} 至 {{ end_time }}</div>
</div>
</div>
<div class="order_main">
<div class="order_num">
商品订单：<span>{{ payInfo?.orderId }}</span>
</div>
<div class="order_price">
支付金额：<span>{{ payInfo?.payPrice }}</span>
</div>
<div class="order_after_sales">
若有疑问请与客服联系，我们将尽快为您提供服务
</div>
</div>
<div class="start_study">
<div class="study_con" @click="handleStudy">开始学习</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.is-h5 {
.main_pay_mobile {
padding: 0 0.28rem;
.con_nav {
display: flex;
align-items: center;
justify-content: center;
position: relative;
.img1 {
position: absolute;
left: 0;
}
.nav_title {
height: 0.32rem;
font-size: 0.32rem;
font-weight: 500;
line-height: 0.34rem;
color: #333333;
.img2 {
width: 0.36rem;
height: 0.36rem;
}
}
}
.course_con {
margin: 0.3rem 0;
height: 1.97rem;
background: #ffffff;
opacity: 1;
border-radius: 0.12rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.28rem 0.2rem;
box-sizing: border-box;
gap: 0.2rem;
img {
width: 2.2rem;
height: 1.4rem;
}
.course_dec {
display: flex;
flex-direction: column;
gap: 0.2rem;
.info_title {
height: 0.64rem;
font-size: 0.28rem;
font-weight: 500;
line-height: 0.36rem;
color: #333333;
}
.info_date {
height: 0.22rem;
font-size: 0.22rem;
font-weight: 400;
line-height: 0.3rem;
color: #999999;
}
}
}
.order_main {
width: 100%;
background: #fff;
border-radius: 0.12rem;
margin-bottom: 1.91rem;
padding: 0.4rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 0.36rem;
font-weight: 400;
.order_num,
.order_price {
font-size: 0.24rem;
color: #333;
span {
color: #999;
}
}
.order_after_sales {
font-size: 0.22rem;
color: #999;
}
}
.start_study {
display: flex;
align-items: center;
justify-content: center;
.study_con {
width: 6.1rem;
height: 0.8rem;
background: linear-gradient(102deg, #f2ca8c 0%, #e69b1c 100%);
opacity: 1;
border-radius: 0.4rem;
text-align: center;
line-height: 0.8rem;
color: #fff;
font-size: 0.28rem;
}
}
}
}
.is-pc {
.main_pay {
width: 100%;
padding: 50px 0 60px 0;
.pay_con {
width: 1200px;
margin: auto;
background: #ffffff;
border-radius: 6px;
.con_top {
width: 1200px;
height: 106px;
background: #f4fff5;
border-radius: 6px 6px 0px 0px;
display: flex;
align-items: center;
padding: 40px 0 40px 67px;
box-sizing: border-box;
.top_tit {
margin-left: 14px;
}
}
.con_info {
padding: 0 0 82px 67px;
.info_order {
display: flex;
font-weight: 400;
margin-top: 43px;
.order_tit {
color: #333333;
}
.order_id {
color: #999999;
}
}
.info_price {
display: flex;
font-weight: 400;
margin-top: 29px;
.price_tit {
color: #333333;
}
.price_id {
color: #999999;
}
}
.info_tips {
font-size: 14px;
font-weight: 400;
color: #999999;
margin-top: 30px;
}
.info_btn {
margin-top: 46px;
display: flex;
.btn_prev {
width: 71px;
height: 32px;
border: 1px solid #999999;
border-radius: 16px;
line-height: 32px;
font-size: 16px;
font-weight: 400;
color: #666666;
text-align: center;
cursor: pointer;
}
.btn_study {
width: 96px;
height: 32px;
background: #edb24c;
border-radius: 24px;
font-size: 16px;
font-weight: 400;
line-height: 32px;
color: #ffffff;
text-align: center;
margin-left: 21px;
cursor: pointer;
}
}
}
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论