Skip to content

N
newydyl1
Commit 5b004ee6 authored by zhangsan's avatar zhangsan
Browse files
Options

1

parent 279dcc97
Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 168 deletions
src/components/GuideModal.vue
View file @ 5b004ee6
<template> <template>
<Teleport to="body"> <Teleport to="body">
<Transition name="fade"> <Transition name="fade">
<div v-if="visible" class="guide-modal-overlay" @click.self="handleClose"> <div v-if="visible" class="guide-modal-overlay" @click.self="handleClose">
<Transition :name="transitionName" mode="out-in" @before-leave="beforeLeave" @after-leave="afterLeave"> <Transition :name="transitionName" mode="out-in" @before-leave="beforeLeave" @after-leave="afterLeave">
<div class="guide-modal" :key="currentIndex"> <div class="guide-modal" :key="currentIndex">
<!-- 使用插槽或v-html展示内容 --> <!-- 使用插槽或v-html展示内容 -->
<div class="guide-content"> <div class="guide-content">
<slot :index="currentIndex"> <slot :index="currentIndex">
<div v-html="guideList[currentIndex]?.noticeContent"></div> <div v-html="guideList[currentIndex]?.noticeContent"></div>
</slot> </slot>
</div>
<div class="guide-footer">
<button class="guide-button" @click="handleAction">
{{ isLastPage ? '我知道了' : '下一页' }}
</button>
</div>
</div> </div>
</Transition>
</div> <div class="guide-footer guide-footer1" v-if="guideList[currentIndex]?.bh.includes('.html')">
</Transition> <button class="guide-button" @click="jumpto(guideList[currentIndex]?.bh)">
</Teleport> {{ guideList[currentIndex]?.noticeTitle }}
</template> </button>
<var-divider vertical style="margin: 0;" />
<script setup lang="ts"> <button class="guide-button" @click="handleAction">
import { ref, computed } from 'vue' {{ isLastPage ? '我知道了' : '下一页' }}
</button>
interface Props { </div>
guideList: string[] <div class="guide-footer" v-else>
modelValue: boolean <button class="guide-button" @click="handleAction">
} {{ isLastPage ? '我知道了' : '下一页' }}
</button>
const props = defineProps<Props>() </div>
const emit = defineEmits(['update:modelValue']) </div>
</Transition>
const currentIndex = ref(0) </div>
const slideDirection = ref('next') </Transition>
const transitionName = computed(() => `slide-${slideDirection.value}`) </Teleport>
</template>
const visible = computed({
get: () => props.modelValue, <script setup lang="ts">
set: (value) => emit('update:modelValue', value) import { ref, computed } from 'vue'
}) interface Props {
guideList: string[]
const isLastPage = computed(() => currentIndex.value === props.guideList.length - 1) modelValue: boolean
}
const handleAction = () => {
if (isLastPage.value) { const props = defineProps<Props>()
handleClose() const emit = defineEmits(['update:modelValue'])
} else {
slideDirection.value = 'next' const currentIndex = ref(0)
currentIndex.value++ const slideDirection = ref('next')
} const transitionName = computed(() => `slide-${slideDirection.value}`)
}
const visible = computed({
const handleClose = () => { get: () => props.modelValue,
visible.value = false set: (value) => emit('update:modelValue', value)
// 重置状态 })
setTimeout(() => { const jumpto = (url) => {
currentIndex.value = 0 window.location.href = window.location.origin + url
slideDirection.value = 'next' }
}, 300) const isLastPage = computed(() => currentIndex.value === props.guideList.length - 1)
}
const handleAction = () => {
const beforeLeave = () => { if (isLastPage.value) {
document.body.style.overflow = 'hidden' handleClose()
} } else {
slideDirection.value = 'next'
const afterLeave = () => { currentIndex.value++
document.body.style.overflow = '' }
} }
</script>
const handleClose = () => {
<style lang="scss" scoped> visible.value = false
.guide-modal-overlay { // 重置状态
position: fixed; setTimeout(() => {
top: 0; currentIndex.value = 0
left: 0; slideDirection.value = 'next'
right: 0; }, 300)
bottom: 0; }
background: rgba(0, 0, 0, 0.5);
display: flex; const beforeLeave = () => {
align-items: center; document.body.style.overflow = 'hidden'
justify-content: center; }
z-index: 1000;
} const afterLeave = () => {
document.body.style.overflow = ''
.guide-modal { }
background: #fff; </script>
border-radius: 5px;
width: 100%; // 调整宽度为90% <style lang="scss" scoped>
height: 80vh; // 设置高度为视口高度的70% .guide-modal-overlay {
position: relative; position: fixed;
display: flex; top: 0;
flex-direction: column; left: 0;
overflow: hidden; // 防止内容溢出 right: 0;
} bottom: 0;
background: rgba(0, 0, 0, 0.5);
.guide-content { display: flex;
flex: 1; align-items: center;
overflow-y: auto; // 内容过多时可滚动 justify-content: center;
padding: 20px; z-index: 1000;
}
// 允许v-html内容继承样式
:deep(*) { .guide-modal {
max-width: 100%; background: #fff;
height: auto; border-radius: 5px;
} width: 100%; // 调整宽度为90%
} height: 80vh; // 设置高度为视口高度的70%
position: relative;
.guide-footer { display: flex;
background: #fff; // 确保底部背景色 flex-direction: column;
border-top: 1px solid #eee; overflow: hidden; // 防止内容溢出
} }
.guide-content {
.guide-button { flex: 1;
width: 100%; // 按钮宽度设为90% overflow-y: auto; // 内容过多时可滚动
margin: 0 auto; padding: 20px;
display: block;
background: red; // 允许v-html内容继承样式
color: #fff; :deep(*) {
border: none; max-width: 100%;
padding: 12px 0; height: auto;
font-size: 16px; }
cursor: pointer; }
transition: opacity 0.3s;
} .guide-footer {
background: #fff; // 确保底部背景色
// 淡入淡出动画 border-top: 1px solid #eee;
.fade-enter-active, }
.fade-leave-active {
transition: opacity 0.3s ease; .guide-footer1 {
} display: flex;
}
.fade-enter-from,
.fade-leave-to { .guide-button {
opacity: 0; width: 100%; // 按钮宽度设为90%
} margin: 0 auto;
display: block;
// 滑动动画 background: red;
.slide-next-enter-active, color: #fff;
.slide-next-leave-active, border: none;
.slide-prev-enter-active, padding: 12px 0;
.slide-prev-leave-active { font-size: 16px;
transition: all 0.3s ease-out; cursor: pointer;
} transition: opacity 0.3s;
}
.slide-next-enter-from {
transform: translateX(100%); // 淡入淡出动画
opacity: 0; .fade-enter-active,
} .fade-leave-active {
transition: opacity 0.3s ease;
.slide-next-leave-to { }
transform: translateX(-100%);
opacity: 0; .fade-enter-from,
} .fade-leave-to {
opacity: 0;
.slide-prev-enter-from { }
transform: translateX(-100%);
opacity: 0; // 滑动动画
} .slide-next-enter-active,
.slide-next-leave-active,
.slide-prev-leave-to { .slide-prev-enter-active,
transform: translateX(100%); .slide-prev-leave-active {
opacity: 0; transition: all 0.3s ease-out;
} }
</style>
\ No newline at end of file .slide-next-enter-from {
transform: translateX(100%);
opacity: 0;
}
.slide-next-leave-to {
transform: translateX(-100%);
opacity: 0;
}
.slide-prev-enter-from {
transform: translateX(-100%);
opacity: 0;
}
.slide-prev-leave-to {
transform: translateX(100%);
opacity: 0;
}
</style>
\ No newline at end of file
src/pages/product/App.vue
View file @ 5b004ee6
...@@ -33,7 +33,11 @@ const fetchData = async () => { ...@@ -33,7 +33,11 @@ const fetchData = async () => {
} }
const handleJump = (item) => { const handleJump = (item) => {
window.location.href = window.location.origin + `/product/detail.html?id=${item.productId}` if(item.createMan){
window.location.href = window.location.origin + `/product/detail.html?id=${item.productId}`
}else{
showFailToast('暂未开放世界银行项目产品')
}
} }
fetchData() fetchData()
......
types/components.d.ts
View file @ 5b004ee6
...@@ -18,15 +18,22 @@ declare module 'vue' { ...@@ -18,15 +18,22 @@ declare module 'vue' {
VanEmpty: typeof import('vant/es')['Empty'] VanEmpty: typeof import('vant/es')['Empty']
VanIcon: typeof import('vant/es')['Icon'] VanIcon: typeof import('vant/es')['Icon']
VanList: typeof import('vant/es')['List'] VanList: typeof import('vant/es')['List']
VanPopup: typeof import('vant/es')['Popup']
VanRadio: typeof import('vant/es')['Radio'] VanRadio: typeof import('vant/es')['Radio']
VanRadioGroup: typeof import('vant/es')['RadioGroup'] VanRadioGroup: typeof import('vant/es')['RadioGroup']
VanTag: typeof import('vant/es')['Tag'] VanTag: typeof import('vant/es')['Tag']
VarAppBar: typeof import('@varlet/ui')['AppBar'] VarAppBar: typeof import('@varlet/ui')['AppBar']
VarButton: typeof import('@varlet/ui')['Button'] VarButton: typeof import('@varlet/ui')['Button']
VarDivider: typeof import('@varlet/ui')['Divider'] VarDivider: typeof import('@varlet/ui')['Divider']
VarForm: typeof import('@varlet/ui')['Form']
VarIcon: typeof import('@varlet/ui')['Icon'] VarIcon: typeof import('@varlet/ui')['Icon']
VarInput: typeof import('@varlet/ui')['Input']
VarLoading: typeof import('@varlet/ui')['Loading'] VarLoading: typeof import('@varlet/ui')['Loading']
VarOverlay: typeof import('@varlet/ui')['Overlay']
VarPaper: typeof import('@varlet/ui')['Paper'] VarPaper: typeof import('@varlet/ui')['Paper']
VarSpace: typeof import('@varlet/ui')['Space']
VarTab: typeof import('@varlet/ui')['Tab']
VarTabs: typeof import('@varlet/ui')['Tabs']
XModal: typeof import('./../src/components/x-modal/x-modal.vue')['default'] XModal: typeof import('./../src/components/x-modal/x-modal.vue')['default']
} }
export interface ComponentCustomProperties { export interface ComponentCustomProperties {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment