Skip to content

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

h5增加协议弹窗

上级 fb6467ae
显示空白字符变更
内嵌 并排
正在显示 包含 97 行增加 和 129 行删除
src/components/base/PreviewFiles.vue deleted 100644 → 0
浏览文件 @ fb6467ae
<script setup lang="ts">
const props = defineProps({
item: {
type: Object,
require: true
}
})
let isShowType = 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/main.ts
浏览文件 @ c12a528d
......@@ -8,7 +8,7 @@ import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
import { Overlay } from 'vant';
import { Overlay} from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';
import Vconsole from 'vconsole'
......
src/modules/pay/components/Confirm.vue
浏览文件 @ c12a528d
<script setup lang="ts">
import PreviewFiles from '@/components/base/PreviewFiles.vue'
import { ElMessage } from 'element-plus'
import { Check } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
......@@ -208,15 +207,10 @@ const changeProtocol = () => {
</div>
<div class="con_footer">
<div class="footer_left">
<el-checkbox v-model="isAgree"
><span style="color: #666666; font-size: 16px; font-weight: 400"
>同意</span
><a
style="color: #e3a232; font-size: 16px; font-weight: 400"
@click="dialogVisible = true"
>紫荆金保服务协议</a
></el-checkbox
>
<div class="left_top">
<el-checkbox v-model="isAgree"> <span>同意</span></el-checkbox
><a @click="dialogVisible = true">紫荆金保服务协议</a>
</div>
<div
class="left_desc"
:class="isAgree === false ? 'left_desc_active' : ''"
......@@ -300,15 +294,12 @@ const changeProtocol = () => {
</div>
</div>
<div class="argreement_con">
<el-checkbox v-model="isAgree"
><span style="color: #666666; font-size: 16px; font-weight: 400"
>同意</span
><a
style="color: #e3a232; font-size: 16px; font-weight: 400"
@click="dialogVisible = true"
>紫荆金保服务协议</a
></el-checkbox
>
<div class="left_top">
<el-checkbox v-model="isAgree">
<span>同意</span>
</el-checkbox>
<a @click="dialogVisible = true">紫荆金保服务协议</a>
</div>
<div
class="left_desc"
:class="isAgree === false ? 'left_desc_active' : ''"
......@@ -323,10 +314,29 @@ const changeProtocol = () => {
</div>
</div>
</div>
<el-dialog v-model="dialogVisible" title="提示" width="850px">
<PreviewFiles :item="item"></PreviewFiles>
<el-dialog v-model="dialogVisible" :width="!mobile ? '50%' : '90%'">
<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>
<el-button type="primary" @click="changeProtocol"
<el-button
type="primary"
@click="changeProtocol"
style="background-color: #e3a232; border: none"
>我已阅读并同意</el-button
>
</template>
......@@ -454,16 +464,35 @@ const changeProtocol = () => {
}
.argreement_con {
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 {
color: #8888;
margin-left: 0.3rem;
color: #999999;
font-size: 0.24rem;
margin-left: 0.9rem;
cursor: pointer;
}
.left_desc_active {
color: #aa1941;
}
}
.to_pay_main {
// position: fixed;
// bottom: 0;
// left: 0;
// right: 0;
margin: 3.5rem -0.3rem 0;
height: 1.2rem;
background: #fff;
......@@ -579,11 +608,29 @@ const changeProtocol = () => {
justify-content: space-between;
.footer_left {
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 {
font-size: 14px;
font-weight: 400;
color: #999999;
margin: 14px 0 0 21px;
cursor: pointer;
}
.left_desc_active {
color: #aa1941;
......@@ -664,4 +711,8 @@ const changeProtocol = () => {
color: #666666;
}
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
background: #e3a232;
border-color: #e3a232;
}
</style>
src/modules/shop/views/Index.vue
浏览文件 @ c12a528d
<script lang="ts" setup>
import CourseList from '../components/CourseList.vue'
import { useShopStore } from '@/stores/shop'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const shopStore = useShopStore()
const handleTabClick = (tab: any) => {
if (tab.index === '4') {
......@@ -152,4 +153,19 @@ const handleTabClick = (tab: any) => {
display: none;
}
}
:deep(.van-tab--active) {
.van-tab__text {
color: #c1ab85 !important;
font-size: 0.28rem;
}
}
:deep(.van-tab) {
.van-tab__text {
color: #333333;
font-size: 0.28rem;
}
}
:deep(.van-tabs__line) {
background: #c1ab85 !important;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论