feat(notice): 首页添加公告轮播
This commit is contained in:
woody
parent
2c52f2f476
commit
5c52892f34
|
|
@ -0,0 +1,535 @@
|
|||
<template>
|
||||
<view class="notice-styles-demo">
|
||||
<view class="demo-title">公告样式演示</view>
|
||||
|
||||
<!-- 样式1: 渐变卡片式 -->
|
||||
<view class="demo-section">
|
||||
<view class="section-title">样式1: 渐变卡片式（推荐）</view>
|
||||
<simple-vertical-swiper
|
||||
:items="demoNotices"
|
||||
type="custom"
|
||||
:height="80"
|
||||
:autoplay="true"
|
||||
:interval="3000"
|
||||
:show-indicators="false"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<view class="notice-style-1">
|
||||
<view class="notice-icon-wrapper">
|
||||
<text class="notice-icon">📢</text>
|
||||
<view class="icon-pulse"></view>
|
||||
</view>
|
||||
<view class="notice-content">
|
||||
<view class="notice-header">
|
||||
<text class="notice-title">{{ item.title }}</text>
|
||||
<view class="notice-badge">公告</view>
|
||||
</view>
|
||||
<view class="notice-meta">
|
||||
<text class="notice-time">{{ item.creationTime }}</text>
|
||||
<text class="notice-arrow">→</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</simple-vertical-swiper>
|
||||
</view>
|
||||
|
||||
<!-- 样式2: 玻璃拟态风格 -->
|
||||
<view class="demo-section">
|
||||
<view class="section-title">样式2: 玻璃拟态风格</view>
|
||||
<simple-vertical-swiper
|
||||
:items="demoNotices"
|
||||
type="custom"
|
||||
:height="70"
|
||||
:autoplay="true"
|
||||
:interval="4000"
|
||||
:show-indicators="false"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<view class="notice-style-2">
|
||||
<view class="glass-effect"></view>
|
||||
<view class="notice-icon">🔔</view>
|
||||
<view class="notice-text">
|
||||
<text class="title">{{ item.title }}</text>
|
||||
<text class="time">{{ item.creationTime }}</text>
|
||||
</view>
|
||||
<view class="notice-indicator">
|
||||
<view class="indicator-dot"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</simple-vertical-swiper>
|
||||
</view>
|
||||
|
||||
<!-- 样式3: 扁平简约风格 -->
|
||||
<view class="demo-section">
|
||||
<view class="section-title">样式3: 扁平简约风格</view>
|
||||
<simple-vertical-swiper
|
||||
:items="demoNotices"
|
||||
type="custom"
|
||||
:height="60"
|
||||
:autoplay="true"
|
||||
:interval="2500"
|
||||
:show-indicators="false"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<view class="notice-style-3">
|
||||
<view class="notice-stripe"></view>
|
||||
<view class="notice-emoji">📋</view>
|
||||
<view class="notice-info">
|
||||
<text class="notice-text">{{ item.title }}</text>
|
||||
<text class="notice-time">{{ item.creationTime }}</text>
|
||||
</view>
|
||||
<view class="notice-chevron">
|
||||
<text>›</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</simple-vertical-swiper>
|
||||
</view>
|
||||
|
||||
<!-- 样式4: 霓虹发光风格 -->
|
||||
<view class="demo-section">
|
||||
<view class="section-title">样式4: 霓虹发光风格</view>
|
||||
<simple-vertical-swiper
|
||||
:items="demoNotices"
|
||||
type="custom"
|
||||
:height="75"
|
||||
:autoplay="true"
|
||||
:interval="3500"
|
||||
:show-indicators="false"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<view class="notice-style-4">
|
||||
<view class="neon-border"></view>
|
||||
<view class="notice-glow-icon">⚡</view>
|
||||
<view class="notice-glow-content">
|
||||
<text class="glow-title">{{ item.title }}</text>
|
||||
<text class="glow-time">{{ item.creationTime }}</text>
|
||||
</view>
|
||||
<view class="pulse-dot"></view>
|
||||
</view>
|
||||
</template>
|
||||
</simple-vertical-swiper>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SimpleVerticalSwiper from './simple-vertical-swiper.vue'
|
||||
|
||||
export default {
|
||||
name: 'NoticeStylesDemo',
|
||||
components: {
|
||||
SimpleVerticalSwiper,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
demoNotices: [
|
||||
{
|
||||
title: '系统维护通知：明日凌晨2:00-4:00进行系统升级',
|
||||
creationTime: '2024-01-15 10:30',
|
||||
},
|
||||
{
|
||||
title: '新功能上线：支持多语言切换功能',
|
||||
creationTime: '2024-01-14 16:20',
|
||||
},
|
||||
{
|
||||
title: '重要提醒：请及时更新您的个人信息',
|
||||
creationTime: '2024-01-13 09:15',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.notice-styles-demo {
|
||||
padding: 20rpx;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
min-height: 100vh;
|
||||
|
||||
.demo-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: 40rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
|
||||
.section-title {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-bottom: 20rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// 样式1: 渐变卡片式
|
||||
.notice-style-1 {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin: 0 10rpx;
|
||||
height: calc(100% - 48rpx);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
|
||||
|
||||
.notice-icon-wrapper {
|
||||
position: relative;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.notice-icon {
|
||||
font-size: 32rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.icon-pulse {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
animation: pulse-1 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
flex: 1;
|
||||
|
||||
.notice-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
|
||||
.notice-title {
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.notice-badge {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
color: #fff;
|
||||
font-size: 18rpx;
|
||||
padding: 4rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.notice-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.notice-time {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.notice-arrow {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 24rpx;
|
||||
animation: arrow-bounce-1 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 样式2: 玻璃拟态风格
|
||||
.notice-style-2 {
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
margin: 0 10rpx;
|
||||
height: calc(100% - 40rpx);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(10rpx);
|
||||
box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.37);
|
||||
|
||||
.glass-effect {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.1),
|
||||
rgba(255, 255, 255, 0)
|
||||
);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.notice-icon {
|
||||
font-size: 32rpx;
|
||||
margin-right: 16rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.notice-text {
|
||||
flex: 1;
|
||||
z-index: 2;
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
color: #333;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #666;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-indicator {
|
||||
z-index: 2;
|
||||
|
||||
.indicator-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background: #007aff;
|
||||
border-radius: 50%;
|
||||
animation: dot-blink 1.5s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 样式3: 扁平简约风格
|
||||
.notice-style-3 {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin: 0 10rpx;
|
||||
height: calc(100% - 40rpx);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.1);
|
||||
border-left: 6rpx solid #007aff;
|
||||
|
||||
.notice-stripe {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 6rpx;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, #007aff, #00d4aa);
|
||||
}
|
||||
|
||||
.notice-emoji {
|
||||
font-size: 28rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.notice-info {
|
||||
flex: 1;
|
||||
|
||||
.notice-text {
|
||||
display: block;
|
||||
color: #333;
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 4rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.notice-time {
|
||||
color: #999;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-chevron {
|
||||
color: #ccc;
|
||||
font-size: 32rpx;
|
||||
animation: chevron-move 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// 样式4: 霓虹发光风格
|
||||
.notice-style-4 {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
margin: 0 10rpx;
|
||||
height: calc(100% - 40rpx);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
.neon-border {
|
||||
position: absolute;
|
||||
top: 2rpx;
|
||||
left: 2rpx;
|
||||
right: 2rpx;
|
||||
bottom: 2rpx;
|
||||
border: 2rpx solid;
|
||||
border-image: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00) 1;
|
||||
border-radius: 14rpx;
|
||||
animation: neon-glow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.notice-glow-icon {
|
||||
font-size: 32rpx;
|
||||
margin-right: 16rpx;
|
||||
z-index: 2;
|
||||
text-shadow:
|
||||
0 0 10rpx #00ffff,
|
||||
0 0 20rpx #00ffff;
|
||||
animation: icon-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.notice-glow-content {
|
||||
flex: 1;
|
||||
z-index: 2;
|
||||
|
||||
.glow-title {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 4rpx;
|
||||
text-shadow: 0 0 10rpx rgba(255, 255, 255, 0.5);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.glow-time {
|
||||
color: #00ffff;
|
||||
font-size: 18rpx;
|
||||
text-shadow: 0 0 8rpx #00ffff;
|
||||
}
|
||||
}
|
||||
|
||||
.pulse-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background: #ff00ff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 20rpx #ff00ff;
|
||||
animation: pulse-glow 1.5s ease-in-out infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
// 动画定义
|
||||
@keyframes pulse-1 {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes arrow-bounce-1 {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(6rpx);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dot-blink {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes chevron-move {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(4rpx);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes neon-glow {
|
||||
0%,
|
||||
100% {
|
||||
filter: brightness(1) hue-rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
filter: brightness(1.5) hue-rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes icon-glow {
|
||||
0%,
|
||||
100% {
|
||||
text-shadow:
|
||||
0 0 10rpx #00ffff,
|
||||
0 0 20rpx #00ffff;
|
||||
}
|
||||
50% {
|
||||
text-shadow:
|
||||
0 0 20rpx #00ffff,
|
||||
0 0 40rpx #00ffff,
|
||||
0 0 60rpx #00ffff;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 20rpx #ff00ff;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
box-shadow:
|
||||
0 0 40rpx #ff00ff,
|
||||
0 0 60rpx #ff00ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,618 +0,0 @@
|
|||
<template>
|
||||
<view class="slot-swiper-example">
|
||||
<view class="demo-title">轮播组件插槽使用示例</view>
|
||||
|
||||
<!-- 示例1: 基础插槽使用 -->
|
||||
<view class="demo-section">
|
||||
<view class="section-title">1. 基础插槽 - 自定义卡片</view>
|
||||
<simple-vertical-swiper
|
||||
:items="customItems"
|
||||
:height="100"
|
||||
type="custom"
|
||||
:autoplay="true"
|
||||
:interval="3000"
|
||||
:show-indicators="true"
|
||||
>
|
||||
<template #default="{ item, index }">
|
||||
<view class="custom-card">
|
||||
<view class="card-header">
|
||||
<text class="card-icon">{{ item.icon }}</text>
|
||||
<text class="card-title">{{ item.title }}</text>
|
||||
</view>
|
||||
<text class="card-desc">{{ item.description }}</text>
|
||||
<view class="card-badge">#{{ index + 1 }}</view>
|
||||
</view>
|
||||
</template>
|
||||
</simple-vertical-swiper>
|
||||
</view>
|
||||
|
||||
<!-- 示例2: 通知类插槽 -->
|
||||
<view class="demo-section">
|
||||
<view class="section-title">2. 通知插槽 - 带按钮的通知</view>
|
||||
<simple-vertical-swiper
|
||||
:items="notificationItems"
|
||||
:height="80"
|
||||
type="custom"
|
||||
:autoplay="true"
|
||||
:interval="4000"
|
||||
:show-indicators="false"
|
||||
>
|
||||
<template #default="{ item, index }">
|
||||
<view class="notification-card">
|
||||
<view class="notification-content">
|
||||
<text class="notification-icon">{{ item.icon }}</text>
|
||||
<text class="notification-text">{{ item.message }}</text>
|
||||
</view>
|
||||
<view
|
||||
class="notification-action"
|
||||
@click="handleNotificationClick(item)"
|
||||
>
|
||||
<text class="action-text">{{ item.actionText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</simple-vertical-swiper>
|
||||
</view>
|
||||
|
||||
<!-- 示例3: 活动推广插槽 -->
|
||||
<view class="demo-section">
|
||||
<view class="section-title">3. 活动推广插槽 - 带图片和按钮</view>
|
||||
<simple-vertical-swiper
|
||||
:items="promotionItems"
|
||||
:height="120"
|
||||
type="custom"
|
||||
:autoplay="true"
|
||||
:interval="5000"
|
||||
:show-indicators="true"
|
||||
>
|
||||
<template #default="{ item, index }">
|
||||
<view class="promotion-card">
|
||||
<image
|
||||
class="promotion-bg"
|
||||
:src="item.bgImage"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="promotion-content">
|
||||
<view class="promotion-info">
|
||||
<text class="promotion-title">{{ item.title }}</text>
|
||||
<text class="promotion-subtitle">{{ item.subtitle }}</text>
|
||||
</view>
|
||||
<view class="promotion-btn" @click="handlePromotionClick(item)">
|
||||
<text class="btn-text">{{ item.btnText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</simple-vertical-swiper>
|
||||
</view>
|
||||
|
||||
<!-- 示例4: 复杂数据插槽 -->
|
||||
<view class="demo-section">
|
||||
<view class="section-title">4. 复杂数据插槽 - 用户动态</view>
|
||||
<simple-vertical-swiper
|
||||
:items="userActivityItems"
|
||||
:height="90"
|
||||
type="custom"
|
||||
:autoplay="true"
|
||||
:interval="6000"
|
||||
:circular="true"
|
||||
>
|
||||
<template #default="{ item, index }">
|
||||
<view class="activity-card">
|
||||
<view class="user-info">
|
||||
<image
|
||||
class="user-avatar"
|
||||
:src="item.user.avatar"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="user-details">
|
||||
<text class="user-name">{{ item.user.name }}</text>
|
||||
<text class="activity-time">{{ item.timestamp }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="activity-content">
|
||||
<text class="activity-text">{{ item.activity }}</text>
|
||||
<view v-if="item.tags" class="activity-tags">
|
||||
<text v-for="tag in item.tags" :key="tag" class="tag">{{
|
||||
tag
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</simple-vertical-swiper>
|
||||
</view>
|
||||
|
||||
<!-- 示例5: 交互式插槽 -->
|
||||
<view class="demo-section">
|
||||
<view class="section-title">5. 交互式插槽 - 可点击的项目</view>
|
||||
<simple-vertical-swiper
|
||||
:items="interactiveItems"
|
||||
:height="100"
|
||||
type="custom"
|
||||
:autoplay="false"
|
||||
:show-indicators="true"
|
||||
>
|
||||
<template #default="{ item, index }">
|
||||
<view class="interactive-card" @click="handleItemClick(item, index)">
|
||||
<view class="item-icon-wrapper">
|
||||
<text class="item-icon">{{ item.icon }}</text>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<text class="item-title">{{ item.title }}</text>
|
||||
<text class="item-value">{{ item.value }}</text>
|
||||
</view>
|
||||
<view class="item-arrow">
|
||||
<text class="arrow-icon">→</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</simple-vertical-swiper>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SimpleVerticalSwiper from './simple-vertical-swiper.vue'
|
||||
|
||||
export default {
|
||||
name: 'SlotSwiperExample',
|
||||
components: {
|
||||
SimpleVerticalSwiper,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 基础自定义数据
|
||||
customItems: [
|
||||
{
|
||||
icon: '🎉',
|
||||
title: '新功能上线',
|
||||
description: '体验全新的用户界面设计',
|
||||
},
|
||||
{
|
||||
icon: '🔥',
|
||||
title: '热门推荐',
|
||||
description: '发现最受欢迎的内容',
|
||||
},
|
||||
{
|
||||
icon: '⭐',
|
||||
title: '精选内容',
|
||||
description: '为您精心挑选的优质内容',
|
||||
},
|
||||
],
|
||||
|
||||
// 通知数据
|
||||
notificationItems: [
|
||||
{
|
||||
icon: '📦',
|
||||
message: '您的订单已发货，预计明天送达',
|
||||
actionText: '查看',
|
||||
orderId: '12345',
|
||||
},
|
||||
{
|
||||
icon: '💰',
|
||||
message: '恭喜获得5元优惠券',
|
||||
actionText: '使用',
|
||||
couponId: 'COUP001',
|
||||
},
|
||||
{
|
||||
icon: '🎁',
|
||||
message: '签到7天获得神秘礼品',
|
||||
actionText: '领取',
|
||||
giftId: 'GIFT001',
|
||||
},
|
||||
],
|
||||
|
||||
// 推广活动数据
|
||||
promotionItems: [
|
||||
{
|
||||
title: '双十一大促',
|
||||
subtitle: '全场5折起',
|
||||
btnText: '立即抢购',
|
||||
bgImage: '/static/images/promotion1.jpg',
|
||||
promoId: 'PROMO001',
|
||||
},
|
||||
{
|
||||
title: '新用户专享',
|
||||
subtitle: '注册送豪礼',
|
||||
btnText: '立即注册',
|
||||
bgImage: '/static/images/promotion2.jpg',
|
||||
promoId: 'PROMO002',
|
||||
},
|
||||
{
|
||||
title: '限时秒杀',
|
||||
subtitle: '每日10点开抢',
|
||||
btnText: '设置提醒',
|
||||
bgImage: '/static/images/promotion3.jpg',
|
||||
promoId: 'PROMO003',
|
||||
},
|
||||
],
|
||||
|
||||
// 用户动态数据
|
||||
userActivityItems: [
|
||||
{
|
||||
user: {
|
||||
name: '张小明',
|
||||
avatar: '/static/images/avatar1.jpg',
|
||||
},
|
||||
activity: '刚刚购买了iPhone 15 Pro',
|
||||
timestamp: '2分钟前',
|
||||
tags: ['数码', '热销'],
|
||||
},
|
||||
{
|
||||
user: {
|
||||
name: '李小红',
|
||||
avatar: '/static/images/avatar2.jpg',
|
||||
},
|
||||
activity: '分享了一篇关于旅行的文章',
|
||||
timestamp: '5分钟前',
|
||||
tags: ['旅行', '分享'],
|
||||
},
|
||||
{
|
||||
user: {
|
||||
name: '王小强',
|
||||
avatar: '/static/images/avatar3.jpg',
|
||||
},
|
||||
activity: '完成了今日运动目标',
|
||||
timestamp: '10分钟前',
|
||||
tags: ['运动', '健康'],
|
||||
},
|
||||
],
|
||||
|
||||
// 交互式数据
|
||||
interactiveItems: [
|
||||
{
|
||||
icon: '📊',
|
||||
title: '今日销售',
|
||||
value: '¥12,580',
|
||||
type: 'sales',
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
title: '新增用户',
|
||||
value: '156人',
|
||||
type: 'users',
|
||||
},
|
||||
{
|
||||
icon: '📈',
|
||||
title: '增长率',
|
||||
value: '+23.5%',
|
||||
type: 'growth',
|
||||
},
|
||||
{
|
||||
icon: '🎯',
|
||||
title: '完成率',
|
||||
value: '89.2%',
|
||||
type: 'completion',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理通知点击
|
||||
handleNotificationClick(item) {
|
||||
console.log('通知点击:', item)
|
||||
uni.showToast({
|
||||
title: `点击了: ${item.actionText}`,
|
||||
icon: 'none',
|
||||
})
|
||||
},
|
||||
|
||||
// 处理推广点击
|
||||
handlePromotionClick(item) {
|
||||
console.log('推广点击:', item)
|
||||
uni.showToast({
|
||||
title: `点击了: ${item.title}`,
|
||||
icon: 'none',
|
||||
})
|
||||
},
|
||||
|
||||
// 处理项目点击
|
||||
handleItemClick(item, index) {
|
||||
console.log('项目点击:', item, index)
|
||||
uni.showModal({
|
||||
title: item.title,
|
||||
content: `当前值: ${item.value}\n类型: ${item.type}`,
|
||||
showCancel: false,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.slot-swiper-example {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
|
||||
.demo-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: 30px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 2px solid #007aff;
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义卡片样式
|
||||
.custom-card {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
margin: 0 10px;
|
||||
color: white;
|
||||
height: calc(100% - 20px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.card-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.card-badge {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 2px 8px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// 通知卡片样式
|
||||
.notification-card {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin: 0 10px;
|
||||
height: calc(100% - 20px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
border-left: 4px solid #ff9500;
|
||||
|
||||
.notification-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.notification-icon {
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.notification-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-action {
|
||||
background-color: #007aff;
|
||||
border-radius: 16px;
|
||||
padding: 6px 12px;
|
||||
|
||||
.action-text {
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 推广卡片样式
|
||||
.promotion-card {
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
margin: 0 10px;
|
||||
height: calc(100% - 20px);
|
||||
overflow: hidden;
|
||||
|
||||
.promotion-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.promotion-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
|
||||
.promotion-info {
|
||||
.promotion-title {
|
||||
display: block;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.promotion-subtitle {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.promotion-btn {
|
||||
background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
|
||||
border-radius: 20px;
|
||||
padding: 8px 16px;
|
||||
|
||||
.btn-text {
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 用户动态样式
|
||||
.activity-card {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin: 0 10px;
|
||||
height: calc(100% - 20px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.user-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
margin-right: 10px;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
.user-name {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-content {
|
||||
.activity-text {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.activity-tags {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
|
||||
.tag {
|
||||
background-color: #f0f0f0;
|
||||
color: #666;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 交互式卡片样式
|
||||
.interactive-card {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin: 0 10px;
|
||||
height: calc(100% - 20px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.item-icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #74b9ff, #0984e3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
|
||||
.item-icon {
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
|
||||
.item-title {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #007aff;
|
||||
}
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
.arrow-icon {
|
||||
font-size: 16px;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -814,13 +814,6 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "我的门票"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/test-ticket",
|
||||
"style": {
|
||||
"navigationBarTitleText": "门票模块测试",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
|
|
|
|||
|
|
@ -29,15 +29,19 @@
|
|||
<view v-if="isEmpty(noticeList) == false" class="notice-wrapper">
|
||||
<simple-vertical-swiper
|
||||
:items="noticeList"
|
||||
type="text"
|
||||
:height="60"
|
||||
type="custom"
|
||||
:height="40"
|
||||
:autoplay="true"
|
||||
:interval="1500"
|
||||
:interval="3000"
|
||||
:show-indicators="false"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<view class="notice-item">
|
||||
<text class="notice-text">{{ item.text }}</text>
|
||||
<view @click="goNotice(item)" class="clean-notice-item">
|
||||
<text class="notice-icon">📢</text>
|
||||
<view class="notice-content">
|
||||
<text class="notice-text">{{ item.title }}</text>
|
||||
<text class="notice-time">{{ item.creationTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</simple-vertical-swiper>
|
||||
|
|
@ -402,6 +406,7 @@ export default {
|
|||
this.getGoodsInfo()
|
||||
this.getAreaGoods()
|
||||
this.getBanners()
|
||||
this.getNoticeList()
|
||||
// this.getLanguage();
|
||||
this.getService()
|
||||
},
|
||||
|
|
@ -431,7 +436,14 @@ export default {
|
|||
},
|
||||
getNoticeList() {
|
||||
ban.getNoticeList({ functionType: 1 }).then(res => {
|
||||
this.noticeList = res.data
|
||||
this.noticeList = res.rows || []
|
||||
})
|
||||
},
|
||||
goNotice(item) {
|
||||
console.log(item, '....item')
|
||||
return
|
||||
uni.navigateTo({
|
||||
url: '/pages/notice/index?id=' + item.id,
|
||||
})
|
||||
},
|
||||
goAreaUrl() {
|
||||
|
|
@ -894,7 +906,7 @@ header {
|
|||
// padding: 30rpx 0 0 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-bottom: 20rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.changeLanguages {
|
||||
|
|
@ -1007,4 +1019,189 @@ page {
|
|||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// 简洁实用的公告样式
|
||||
.notice-wrapper {
|
||||
margin-bottom: 20rpx;
|
||||
// border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
border: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.clean-notice-item {
|
||||
display: flex;
|
||||
padding: 16rpx 20rpx;
|
||||
background: #fff;
|
||||
margin: 0;
|
||||
height: calc(100% - 32rpx);
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
.notice-icon {
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.notice-text {
|
||||
color: #333;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.notice-time {
|
||||
color: #999;
|
||||
font-size: 22rpx;
|
||||
margin-top: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-arrow {
|
||||
color: #ccc;
|
||||
font-size: 32rpx;
|
||||
margin-left: 16rpx;
|
||||
margin-top: 8rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.index-left {
|
||||
font-weight: bold;
|
||||
|
||||
.english {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
margin-top: 2rpx;
|
||||
letter-spacing: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.index-top {
|
||||
// background: url('~@/static/images/tBgd.jpg') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// padding: 30rpx 20rpx; // height: 100rpx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
.index_t {
|
||||
padding: 30rpx 20rpx;
|
||||
}
|
||||
}
|
||||
.index-top1 {
|
||||
background: url('~@/static/images/tBgd.jpg') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// padding: 30rpx 20rpx; // height: 100rpx;
|
||||
// background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.index_t {
|
||||
padding: 30rpx 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.index-right {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.kf_A {
|
||||
position: fixed;
|
||||
background: rgba(256, 256, 256, 0.8);
|
||||
width: 62px;
|
||||
// height: 60px;
|
||||
z-index: 10;
|
||||
right: 40rpx;
|
||||
top: 11%;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.kf {
|
||||
image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
font-size: 10px;
|
||||
color: #333333;
|
||||
}
|
||||
.fly {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
background: #eee;
|
||||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// 动画定义
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes arrow-bounce {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(6rpx);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dot-fade {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,289 +0,0 @@
|
|||
<template>
|
||||
<view class="test-page">
|
||||
<view class="page-header">
|
||||
<text class="title">纵向轮播测试</text>
|
||||
<text class="subtitle">验证循环动画连续性</text>
|
||||
</view>
|
||||
|
||||
<!-- 3个项目的轮播测试 -->
|
||||
<view class="test-section">
|
||||
<text class="section-title">3项轮播测试 (重点测试循环)</text>
|
||||
<simple-vertical-swiper
|
||||
:items="threeItems"
|
||||
type="text"
|
||||
:height="60"
|
||||
:autoplay="true"
|
||||
:interval="2000"
|
||||
:show-indicators="true"
|
||||
@change="onThreeItemsChange"
|
||||
/>
|
||||
<text class="tip">观察从第3项到第1项的动画是否平滑</text>
|
||||
</view>
|
||||
|
||||
<!-- 4个项目的轮播测试 -->
|
||||
<view class="test-section">
|
||||
<text class="section-title">4项轮播测试</text>
|
||||
<simple-vertical-swiper
|
||||
:items="fourItems"
|
||||
type="notice"
|
||||
:height="50"
|
||||
:autoplay="true"
|
||||
:interval="1800"
|
||||
:show-indicators="true"
|
||||
@change="onFourItemsChange"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 5个项目的轮播测试 -->
|
||||
<view class="test-section">
|
||||
<text class="section-title">5项轮播测试</text>
|
||||
<simple-vertical-swiper
|
||||
:items="fiveItems"
|
||||
type="content"
|
||||
:height="80"
|
||||
:autoplay="true"
|
||||
:interval="2200"
|
||||
:show-indicators="true"
|
||||
@change="onFiveItemsChange"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 手动控制按钮 -->
|
||||
<view class="control-section">
|
||||
<text class="section-title">手动控制测试</text>
|
||||
<simple-vertical-swiper
|
||||
ref="manualSwiper"
|
||||
:items="threeItems"
|
||||
type="text"
|
||||
:height="60"
|
||||
:autoplay="false"
|
||||
:show-indicators="true"
|
||||
@change="onManualChange"
|
||||
/>
|
||||
<view class="control-buttons">
|
||||
<button @click="prevSlide" class="control-btn">上一页</button>
|
||||
<button @click="nextSlide" class="control-btn">下一页</button>
|
||||
<button @click="goToFirst" class="control-btn">第1页</button>
|
||||
<button @click="goToLast" class="control-btn">最后页</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 当前状态显示 -->
|
||||
<view class="status-section">
|
||||
<text class="section-title">状态信息</text>
|
||||
<text class="status-text">3项轮播当前索引: {{ currentIndex.three }}</text>
|
||||
<text class="status-text">4项轮播当前索引: {{ currentIndex.four }}</text>
|
||||
<text class="status-text">5项轮播当前索引: {{ currentIndex.five }}</text>
|
||||
<text class="status-text"
|
||||
>手动轮播当前索引: {{ currentIndex.manual }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SimpleVerticalSwiper from '@/components/simple-vertical-swiper.vue'
|
||||
|
||||
export default {
|
||||
name: 'TestSwiper',
|
||||
components: {
|
||||
SimpleVerticalSwiper,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 3项测试数据 - 重点测试循环
|
||||
threeItems: [
|
||||
'🎯 第1项 - 测试到第3项',
|
||||
'🎨 第2项 - 中间项目',
|
||||
'🎪 第3项 - 测试到第1项',
|
||||
],
|
||||
// 4项测试数据
|
||||
fourItems: [
|
||||
{ content: '🌟 公告1 - 欢迎使用轮播组件' },
|
||||
{ content: '🎁 公告2 - 新功能上线啦' },
|
||||
{ content: '🚀 公告3 - 性能全面优化' },
|
||||
{ content: '💫 公告4 - 修复循环动画' },
|
||||
],
|
||||
// 5项测试数据
|
||||
fiveItems: [
|
||||
{ title: '第1项', description: '循环动画测试项目' },
|
||||
{ title: '第2项', description: '正常切换动画' },
|
||||
{ title: '第3项', description: '中间项目测试' },
|
||||
{ title: '第4项', description: '倒数第二项' },
|
||||
{ title: '第5项', description: '最后一项到第一项' },
|
||||
],
|
||||
// 当前索引记录
|
||||
currentIndex: {
|
||||
three: 0,
|
||||
four: 0,
|
||||
five: 0,
|
||||
manual: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
console.log('轮播测试页面加载')
|
||||
},
|
||||
methods: {
|
||||
// 3项轮播变化
|
||||
onThreeItemsChange(e) {
|
||||
console.log('3项轮播变化:', e)
|
||||
this.currentIndex.three = e.current
|
||||
},
|
||||
|
||||
// 4项轮播变化
|
||||
onFourItemsChange(e) {
|
||||
console.log('4项轮播变化:', e)
|
||||
this.currentIndex.four = e.current
|
||||
},
|
||||
|
||||
// 5项轮播变化
|
||||
onFiveItemsChange(e) {
|
||||
console.log('5项轮播变化:', e)
|
||||
this.currentIndex.five = e.current
|
||||
},
|
||||
|
||||
// 手动轮播变化
|
||||
onManualChange(e) {
|
||||
console.log('手动轮播变化:', e)
|
||||
this.currentIndex.manual = e.current
|
||||
},
|
||||
|
||||
// 手动控制方法
|
||||
prevSlide() {
|
||||
if (this.$refs.manualSwiper) {
|
||||
this.$refs.manualSwiper.prev()
|
||||
}
|
||||
},
|
||||
|
||||
nextSlide() {
|
||||
if (this.$refs.manualSwiper) {
|
||||
this.$refs.manualSwiper.next()
|
||||
}
|
||||
},
|
||||
|
||||
goToFirst() {
|
||||
if (this.$refs.manualSwiper) {
|
||||
this.$refs.manualSwiper.goToSlide(0)
|
||||
}
|
||||
},
|
||||
|
||||
goToLast() {
|
||||
if (this.$refs.manualSwiper) {
|
||||
this.$refs.manualSwiper.goToSlide(this.threeItems.length - 1)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.test-page {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
}
|
||||
|
||||
.test-section {
|
||||
margin-bottom: 25px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.section-title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #34495e;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #e74c3c;
|
||||
margin-top: 10px;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.control-section {
|
||||
margin-bottom: 25px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.section-title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #34495e;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.control-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 15px;
|
||||
gap: 10px;
|
||||
|
||||
.control-btn {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-section {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.section-title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #34495e;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
margin-bottom: 8px;
|
||||
padding: 8px 12px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid #667eea;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
<!--
|
||||
* @Descripttion: 门票模块测试页面
|
||||
* @version: 1.0.0
|
||||
* @Author: Assistant
|
||||
* @Date: 2025-01-22
|
||||
-->
|
||||
<template>
|
||||
<view class="test-container">
|
||||
<view class="header">
|
||||
<text class="title">门票模块测试</text>
|
||||
</view>
|
||||
|
||||
<view class="button-list">
|
||||
<button class="test-btn" @click="goToTicketList">进入门票活动</button>
|
||||
|
||||
<button class="test-btn" @click="goToBuyTicket">测试购票页面</button>
|
||||
|
||||
<button class="test-btn" @click="goToTicketDetail">测试门票详情</button>
|
||||
</view>
|
||||
|
||||
<view class="info">
|
||||
<text class="info-text">点击按钮测试相应功能模块</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
// 进入门票活动列表
|
||||
goToTicketList() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/ticket/index',
|
||||
})
|
||||
},
|
||||
|
||||
// 测试购票页面
|
||||
goToBuyTicket() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/ticket/buy?activityId=12&activityName=测试活动&price=0.03',
|
||||
})
|
||||
},
|
||||
|
||||
// 测试门票详情
|
||||
goToTicketDetail() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/ticket/detail?ticketId=201',
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.test-container {
|
||||
padding: 20px;
|
||||
background: #f8f8f8;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.button-list {
|
||||
.test-btn {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #005bac;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
|
||||
.info-text {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue