Skip to content

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

h5新增协议弹窗

上级 0e5a351b
隐藏空白字符变更
内嵌 并排
正在显示 包含 183 行增加 和 207 行删除
src/components/base/PreviewFiles.vue deleted 100644 → 0
浏览文件 @ 0e5a351b
<script setup lang="ts">
const props = defineProps({
item: {
type: Object,
require: true
}
})
const isShowType: any = ref(1)
// 判断用什么标签展示内容
if (
props.item?.url?.indexOf('.pdf') !== -1 ||
props.item?.url?.indexOf('.txt') !== -1
) {
isShowType.value = 2
} else if (props.item?.url?.indexOf('.mp4') !== -1) {
isShowType.value = 3
} else if (props.item?.url?.indexOf('.mp3') !== -1) {
isShowType.value = 4
} else if (
props.item?.url?.indexOf('.png') !== -1 ||
props.item?.url?.indexOf('.jpg') !== -1 ||
props.item?.url?.indexOf('.jpeg') !== -1
) {
isShowType.value = 5
} else if (
props.item?.url?.indexOf('.rar') !== -1 ||
props.item?.url?.indexOf('.zip') !== -1
) {
isShowType.value = 6
}
</script>
<template>
<el-card>
<div class="max-w-h">
<iframe
v-if="isShowType === 1"
:src="`https://view.officeapps.live.com/op/view.aspx?src=${props.item?.url}`"
></iframe>
<embed :src="props.item?.url" v-else-if="isShowType === 2" />
<video v-else-if="isShowType === 3" controls id="video">
<source :src="props.item?.url" />
</video>
<audio
v-else-if="isShowType === 4"
:src="props.item?.url"
controls
></audio>
<img v-else-if="isShowType === 5" :src="props.item?.url" />
<div v-else-if="isShowType === 6" class="zip_con">
<a :href="props.item?.url" style="color: #aa1941">
<img
v-if="props.item?.url?.indexOf('.rar') !== -1"
src="https://webapp-pub.ezijing.com/center_resource/rar.png"
class="img_zip"
/>
<img
v-else-if="props.item?.url?.indexOf('.zip') !== -1"
src="https://webapp-pub.ezijing.com/center_resource/zip.png"
class="img_zip"
/>
{{ props.item?.name }}
</a>
<div class="zip_tips">
* 该文件格式暂不支持预览,可点击上方文件名下载
</div>
</div>
</div>
</el-card>
</template>
<style lang="scss" scoped>
.max-w-h {
// max-width: 1200px;
width: 100%;
height: 600px;
margin: 0 auto;
display: flex;
justify-content: center;
iframe,
embed,
video {
width: 100%;
height: 100%;
}
.zip_con {
border: 1px solid #ccc;
width: 100%;
display: block;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.img_zip {
width: 100px;
height: 100px;
margin: auto;
}
.zip_tips {
font-size: 14px;
margin-top: 10px;
}
img {
width: 100%;
display: block;
}
}
</style>
src/modules/pay/components/Confirm.vue
浏览文件 @ e2a881ee
<script setup lang="ts"> <script setup lang="ts">
import PreviewFiles from '@/components/base/PreviewFiles.vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { Check } from '@element-plus/icons-vue' import { Check } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user' import { useUserStore } from '@/stores/user'
import { useDevice } from '@/composables/useDevice' import { useDevice } from '@/composables/useDevice'
import queryString from 'query-string' import { wxJSPay, getOpenId } from '@/utils/wxpay'
import { getOpenId, wxJSPay } from '@/utils/wxpay'
import { createOrder, getOrderList } from '../api' import { createOrder, getOrderList } from '../api'
import queryString from 'query-string'
const router = useRouter() const router = useRouter()
const { mobile, wechat, alipay } = useDevice() const { mobile, wechat, alipay } = useDevice()
const user = useUserStore() const user = useUserStore()
...@@ -19,14 +18,11 @@ const dialogVisible = ref(false) ...@@ -19,14 +18,11 @@ const dialogVisible = ref(false)
const item = ref({ const item = ref({
url: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/%E7%B4%AB%E8%8D%86%E6%95%99%E8%82%B2%E7%94%A8%E6%88%B7%E5%85%A5%E9%A9%BB%E5%8F%8A%E7%BD%91%E7%BB%9C%E6%95%99%E5%AD%A6%E8%B5%84%E6%BA%90%E5%8D%8F%E8%AE%AE(1).docx' url: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/%E7%B4%AB%E8%8D%86%E6%95%99%E8%82%B2%E7%94%A8%E6%88%B7%E5%85%A5%E9%A9%BB%E5%8F%8A%E7%BD%91%E7%BB%9C%E6%95%99%E5%AD%A6%E8%B5%84%E6%BA%90%E5%8D%8F%E8%AE%AE(1).docx'
}) })
const orderInfo: any = ref([]) const orderInfo: any = ref({})
const orderInfoDetail: any = ref([])
const payMode = ref(1) const payMode = ref(1)
const isAgree = ref(false) const isAgree = ref(false)
const currentCheck = ref('12') const currentCheck = ref('4')
const query = $computed(() => { const orderInfoDetail: any = ref([])
return queryString.parse(location.search, { parseBooleans: true })
})
function getDateTime(dayNum: any) { function getDateTime(dayNum: any) {
const dateDay = new Date() const dateDay = new Date()
dateDay.setDate(dateDay.getDate() + dayNum) //获取dayNum天后的日期 dateDay.setDate(dateDay.getDate() + dayNum) //获取dayNum天后的日期
...@@ -41,77 +37,41 @@ function getDateTime(dayNum: any) { ...@@ -41,77 +37,41 @@ function getDateTime(dayNum: any) {
} }
const start_time = getDateTime(0) const start_time = getDateTime(0)
const end_time = getDateTime(90) const end_time = getDateTime(90)
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'success', params: object): void (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()
}
}
// 去支付
function pay() {
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 (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())
} else if (alipay) {
location.href = orderInfo.value[0]?.payment_url
}
})
} }
const optionParams = reactive({
shop_id: '6998523899570814976',
spu_id: '6998525810348916736',
sku_id: '6998525810365693952',
redirect_url: '',
buy_count: '1',
payment_method: '',
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}`
})
// 获取订单 // 点击立即购买
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
}
emit('success', params)
})
}
const handlePay = () => { const handlePay = () => {
if (isAgree.value === false) { if (isAgree.value === false) {
ElMessage.warning('请先勾选紫荆金保服务协议') ElMessage.warning('请先勾选紫荆金保服务协议')
} else { } else {
if (user.isLogin) { if (user.isLogin) {
if (!mobile.value) { if (!mobile.value) {
//pc
const params = { const params = {
payMode: payMode.value, payMode: payMode.value,
status: 'order' status: 'order'
} }
emit('success', params) emit('success', params)
} else { } else {
handleCreateOrder() //H5
if (mobile && (wechat || alipay)) {
pay()
}
} }
} else { } else {
window.location.href = `${ window.location.href = `${
...@@ -120,8 +80,72 @@ const handlePay = () => { ...@@ -120,8 +80,72 @@ const handlePay = () => {
} }
} }
} }
const checkdChange = (val: string) => {
currentCheck.value = val // 去支付
const pay = () => {
console.log('999')
createOrderHandle().then((order: any) => {
orderInfo.value = order
if (wechat) {
wxJSPay(order, payCallback(optionParams))
} else {
location.href = order.payment_url // '4' \ '12'
getOrder()
}
})
}
// 支付回调
const payCallback = async (options: any) => {
const { callback } = options
const order = await getOrder()
callback && callback(order)
const params = {
status: 'success',
orderId: order.order_id,
payPrice: order.payment_money,
payStatus: order.order_status
}
orderInfoDetail.value = order.order_status
emit('success', params)
}
// 创建订单
const createOrderHandle = () => {
let defaultParams = {}
// 微信内
if (wechat) {
const openId = localStorage.getItem('openId')
if (!openId) {
getOpenId(
queryString.parse(location.search, { parseBooleans: true }).code,
pay
)
return Promise.reject('openId不存在')
}
defaultParams = { open_id: openId, payment_method: '3' }
}
// 支付宝网页支付
if (currentCheck.value === '12') {
defaultParams = { payment_method: '12' }
}
//微信外微信h5支付
if (currentCheck.value === '4') {
defaultParams = { payment_method: '4' }
}
const params = Object.assign(optionParams, defaultParams)
return createOrder(params).then((resp: any) => resp.data)
}
// 获取订单
function getOrder() {
return getOrderList({
order_detail_id: orderInfo.value.order_detail_id
}).then((resp) => {
return resp.data[0]
})
} }
const handlePrev = () => { const handlePrev = () => {
router.push({ router.push({
...@@ -135,7 +159,6 @@ const changeProtocol = () => { ...@@ -135,7 +159,6 @@ const changeProtocol = () => {
dialogVisible.value = false dialogVisible.value = false
} }
</script> </script>
<template> <template>
<div> <div>
<div class="main_con" v-if="!mobile"> <div class="main_con" v-if="!mobile">
...@@ -184,15 +207,10 @@ const changeProtocol = () => { ...@@ -184,15 +207,10 @@ const changeProtocol = () => {
</div> </div>
<div class="con_footer"> <div class="con_footer">
<div class="footer_left"> <div class="footer_left">
<el-checkbox v-model="isAgree" <div class="left_top">
><span style="color: #666666; font-size: 16px; font-weight: 400" <el-checkbox v-model="isAgree"> <span>同意</span></el-checkbox
>同意</span ><a @click="dialogVisible = true">紫荆金保服务协议</a>
><a </div>
style="color: #e3a232; font-size: 16px; font-weight: 400"
@click="dialogVisible = true"
>紫荆金保服务协议</a
></el-checkbox
>
<div <div
class="left_desc" class="left_desc"
:class="isAgree === false ? 'left_desc_active' : ''" :class="isAgree === false ? 'left_desc_active' : ''"
...@@ -221,7 +239,13 @@ const changeProtocol = () => { ...@@ -221,7 +239,13 @@ const changeProtocol = () => {
<div class="nav_title">确认订单</div> <div class="nav_title">确认订单</div>
</div> </div>
<div class="course_con"> <div class="course_con">
<img :src="shopItem?.image_url" alt="" /> <img
:src="
shopItem?.image_url ||
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fb%2F56e7995e3501f.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671671981&t=0eb627c761e6567a3a0a29163b31aac0'
"
alt=""
/>
<div class="course_dec"> <div class="course_dec">
<div class="info_title">{{ shopItem?.title }}</div> <div class="info_title">{{ shopItem?.title }}</div>
<div class="info_date"> <div class="info_date">
...@@ -241,7 +265,9 @@ const changeProtocol = () => { ...@@ -241,7 +265,9 @@ const changeProtocol = () => {
/> />
<div class="radio_tit">支付宝支付</div> <div class="radio_tit">支付宝支付</div>
<div <div
:class="payMode === 1 ? 'radio_check_active' : 'radio_check'" :class="
currentCheck === '12' ? 'radio_check_active' : 'radio_check'
"
@click="checkdChange('12')" @click="checkdChange('12')"
> >
<template v-if="currentCheck === '12'"> <template v-if="currentCheck === '12'">
...@@ -255,7 +281,9 @@ const changeProtocol = () => { ...@@ -255,7 +281,9 @@ const changeProtocol = () => {
/> />
<div class="radio_tit">微信支付</div> <div class="radio_tit">微信支付</div>
<div <div
:class="payMode === 2 ? 'radio_check_active' : 'radio_check'" :class="
currentCheck === '4' ? 'radio_check_active' : 'radio_check'
"
@click="checkdChange('4')" @click="checkdChange('4')"
> >
<template v-if="currentCheck === '4'"> <template v-if="currentCheck === '4'">
...@@ -266,13 +294,12 @@ const changeProtocol = () => { ...@@ -266,13 +294,12 @@ const changeProtocol = () => {
</div> </div>
</div> </div>
<div class="argreement_con"> <div class="argreement_con">
<el-checkbox v-model="isAgree" <div class="left_top">
><span style="color: #666666; font-size: 16px; font-weight: 400" <el-checkbox v-model="isAgree">
>同意</span <span>同意</span>
><a style="color: #e3a232; font-size: 16px; font-weight: 400" </el-checkbox>
>紫荆金保服务协议</a <a @click="dialogVisible = true">紫荆金保服务协议</a>
></el-checkbox </div>
>
<div <div
class="left_desc" class="left_desc"
:class="isAgree === false ? 'left_desc_active' : ''" :class="isAgree === false ? 'left_desc_active' : ''"
...@@ -287,10 +314,29 @@ const changeProtocol = () => { ...@@ -287,10 +314,29 @@ const changeProtocol = () => {
</div> </div>
</div> </div>
</div> </div>
<el-dialog v-model="dialogVisible" title="提示" width="850px"> <el-dialog v-model="dialogVisible" :width="!mobile ? '50%' : '90%'">
<PreviewFiles :item="item"></PreviewFiles> <div style="height: 600px" v-if="!mobile">
<iframe
:src="`https://view.officeapps.live.com/op/view.aspx?src=${item?.url}`"
frameborder="0"
width="100%"
height="100%"
></iframe>
</div>
<div v-else style="height: 8rem">
<iframe
:src="`https://view.xdocin.com/xdoc?_xdoc=${item?.url}`"
frameborder="0"
width="100%"
height="100%"
></iframe>
</div>
<template #footer> <template #footer>
<el-button type="primary" @click="changeProtocol" <el-button
type="primary"
@click="changeProtocol"
style="background-color: #e3a232; border: none"
>我已阅读并同意</el-button >我已阅读并同意</el-button
> >
</template> </template>
...@@ -346,11 +392,11 @@ const changeProtocol = () => { ...@@ -346,11 +392,11 @@ const changeProtocol = () => {
color: #333333; color: #333333;
} }
.info_date { .info_date {
height: 0.22rem;
font-size: 0.22rem; font-size: 0.22rem;
font-weight: 400; font-weight: 400;
line-height: 0.3rem; line-height: 0.3rem;
color: #999999; color: #999999;
white-space: nowrap;
} }
} }
} }
...@@ -418,17 +464,36 @@ const changeProtocol = () => { ...@@ -418,17 +464,36 @@ const changeProtocol = () => {
} }
.argreement_con { .argreement_con {
text-align: center; text-align: center;
.left_top {
display: flex;
justify-content: center;
align-items: center;
.el-checkbox__label {
span {
color: #666666;
font-size: 0.24rem;
font-weight: 400;
}
}
a {
font-weight: 400;
font-size: 0.24rem;
color: #e3a232 !important;
margin-top: 0.02rem;
}
}
.left_desc { .left_desc {
color: #8888; color: #999999;
margin-left: 0.3rem; font-size: 0.24rem;
margin-left: 0.9rem;
cursor: pointer;
}
.left_desc_active {
color: #aa1941;
} }
} }
.to_pay_main { .to_pay_main {
position: fixed; margin: 3.5rem -0.3rem 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 1.2rem; height: 1.2rem;
background: #fff; background: #fff;
opacity: 1; opacity: 1;
...@@ -543,11 +608,29 @@ const changeProtocol = () => { ...@@ -543,11 +608,29 @@ const changeProtocol = () => {
justify-content: space-between; justify-content: space-between;
.footer_left { .footer_left {
padding-top: 12px; padding-top: 12px;
.left_top {
display: flex;
align-items: center;
.el-checkbox__label {
span {
color: #666666;
font-size: 16px;
font-weight: 400;
}
}
a {
color: #e3a232;
font-size: 16px;
font-weight: 400;
margin-top: -1px;
}
}
.left_desc { .left_desc {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
margin: 14px 0 0 21px; margin: 14px 0 0 21px;
cursor: pointer;
} }
.left_desc_active { .left_desc_active {
color: #aa1941; color: #aa1941;
...@@ -628,4 +711,8 @@ const changeProtocol = () => { ...@@ -628,4 +711,8 @@ const changeProtocol = () => {
color: #666666; color: #666666;
} }
} }
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
background: #e3a232;
border-color: #e3a232;
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论