577 lines
12 KiB
Vue
577 lines
12 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div class="spacer"></div>
|
||
|
||
<div class="main-content">
|
||
<!-- 轮播图 -->
|
||
<div class="carousel">
|
||
<swiper
|
||
:modules="modules"
|
||
:slides-per-view="1"
|
||
:space-between="0"
|
||
:autoplay="{ delay: 3000, disableOnInteraction: false }"
|
||
:pagination="{ clickable: true }"
|
||
:loop="true"
|
||
>
|
||
<swiper-slide v-for="(item, index) in carouselItems" :key="index">
|
||
<img :src="item.image" :alt="item.title" class="carousel-img" />
|
||
<div class="carousel-title">{{ item.title }}</div>
|
||
</swiper-slide>
|
||
</swiper>
|
||
</div>
|
||
|
||
<!-- 头部导航 -->
|
||
<div class="header">
|
||
<router-link
|
||
v-for="(item, index) in headerItems"
|
||
:key="index"
|
||
:to="item.path"
|
||
class="header-item"
|
||
custom
|
||
v-slot="{ navigate }"
|
||
>
|
||
<div @click="navigate" class="header-item-content">
|
||
<img :src="item.image" :alt="item.text" class="header-image" />
|
||
<div class="header-text">{{ item.text }}</div>
|
||
</div>
|
||
</router-link>
|
||
</div>
|
||
|
||
<!-- 修改后的操作区域 - 三个部分等宽 -->
|
||
<div class="action-area">
|
||
<div class="action-grid">
|
||
<router-link to="/mymatching?autoStart=true" class="action-main">
|
||
<div class="matching-text">
|
||
<div>获取</div>
|
||
<div>融豆</div>
|
||
</div>
|
||
</router-link>
|
||
<div class="action-stack">
|
||
<div class="action-sub-item top">
|
||
<div class="action-icon">💎</div>
|
||
<div class="action-text">当前积分: {{ userPoints }}</div>
|
||
</div>
|
||
<router-link to="/myshop" class="action-sub-item bottom">
|
||
<div class="action-icon">🛒</div>
|
||
<div class="action-text">商城</div>
|
||
</router-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 热门资讯 -->
|
||
<div class="hot-news">
|
||
<div class="news-title">热门资讯</div>
|
||
<div class="news-list">
|
||
<div
|
||
class="news-item"
|
||
v-for="(item, index) in newsItems"
|
||
:key="index"
|
||
>
|
||
<span class="news-dot">•</span> {{ item }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 欢迎弹窗 -->
|
||
<el-dialog
|
||
v-model="showWelcomeDialog"
|
||
width="90%"
|
||
:style="{ maxWidth: '400px' }"
|
||
:show-close="true"
|
||
:close-on-click-modal="true"
|
||
:close-on-press-escape="true"
|
||
center
|
||
class="welcome-dialog"
|
||
>
|
||
<div class="welcome-content">
|
||
<div class="welcome-icon">🎉</div>
|
||
<h3>融汇通更新</h3>
|
||
<div class="welcome-features">
|
||
<div class="feature-item">
|
||
<span class="feature-icon">💎</span>
|
||
<span>获取融豆赚取积分</span>
|
||
</div>
|
||
<div class="feature-item">
|
||
<span class="feature-icon">🛒</span>
|
||
<span>积分商城兑换好礼</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="showWelcomeDialog = false">关闭</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||
import { Autoplay, Pagination } from 'swiper';
|
||
import { ref, onMounted, onUnmounted } from 'vue';
|
||
import { ElMessage, ElDialog, ElButton } from 'element-plus';
|
||
import { transferAPI } from '../utils/api';
|
||
import 'swiper/css';
|
||
import 'swiper/css/autoplay';
|
||
import 'swiper/css/pagination';
|
||
|
||
export default {
|
||
components: {
|
||
Swiper,
|
||
SwiperSlide,
|
||
},
|
||
setup() {
|
||
// 响应式数据
|
||
const userPoints = ref(0);
|
||
const showWelcomeDialog = ref(false);
|
||
const carouselItems = ref([
|
||
{ image: '/imgs/top/1.jpg', title: '限时优惠活动' },
|
||
{ image: '/imgs/top/2.jpg', title: '新用户专享' },
|
||
{ image: '/imgs/top/3.jpg', title: '积分兑换' },
|
||
]);
|
||
const headerItems = ref([
|
||
{
|
||
image: '/imgs/mainpage/jiaoyijilu.png',
|
||
text: '交易记录',
|
||
path: '/transfers',
|
||
},
|
||
{
|
||
image: '/imgs/mainpage/dingdanchaxun.png',
|
||
text: '订单查询',
|
||
path: '/points-history',
|
||
},
|
||
{
|
||
image: '/imgs/mainpage/kefuzhongxin.png',
|
||
text: '客服中心',
|
||
path: '/customerservice',
|
||
},
|
||
{
|
||
image: '/imgs/mainpage/xitonggonggao.png',
|
||
text: '系统公告',
|
||
path: '#',
|
||
},
|
||
]);
|
||
const newsItems = ref([
|
||
'最新活动：商城特惠',
|
||
'商城新品上架',
|
||
]);
|
||
|
||
// 获取用户积分
|
||
const getUserPoints = async () => {
|
||
try {
|
||
// 使用封装好的API获取用户账户信息
|
||
const {data} = await transferAPI.getUserAccount();
|
||
console.log(data);
|
||
|
||
// 根据实际API响应结构调整，以下是几种可能的取值方式
|
||
userPoints.value = data.data.points || 0;
|
||
} catch (error) {
|
||
console.error('获取积分信息失败', error);
|
||
userPoints.value = 0;
|
||
ElMessage.error('获取积分信息失败，请稍后重试');
|
||
}
|
||
};
|
||
|
||
// 定时刷新积分
|
||
let refreshInterval;
|
||
|
||
onMounted(() => {
|
||
getUserPoints();
|
||
// 每5分钟刷新一次积分（可根据需求调整时间）
|
||
refreshInterval = setInterval(getUserPoints, 5 * 60 * 1000);
|
||
|
||
// 显示欢迎弹窗
|
||
setTimeout(() => {
|
||
showWelcomeDialog.value = true;
|
||
}, 500); // 延迟500ms显示，让页面先加载完成
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
clearInterval(refreshInterval);
|
||
});
|
||
|
||
return {
|
||
modules: [Autoplay, Pagination],
|
||
userPoints,
|
||
carouselItems,
|
||
headerItems,
|
||
newsItems,
|
||
showWelcomeDialog,
|
||
getUserPoints, // 如果需要外部调用可以暴露
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 基础样式 */
|
||
:root {
|
||
--primary-color: #4361ee;
|
||
--secondary-color: #3f37c9;
|
||
--accent-color: #4895ef;
|
||
--light-color: #f8f9fa;
|
||
--dark-color: #212529;
|
||
--success-color: #4cc9f0;
|
||
--warning-color: #f8961e;
|
||
--danger-color: #f72585;
|
||
--border-radius: 12px;
|
||
--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
--transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 容器布局 */
|
||
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
width: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
background: linear-gradient(to bottom, #72c9ffae, #f3f3f3);
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
position: relative;
|
||
}
|
||
|
||
.main-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 16px;
|
||
gap: 16px;
|
||
max-width: 375px;
|
||
margin: 0 auto;
|
||
width: 100%;
|
||
}
|
||
|
||
.spacer {
|
||
height: 40px;
|
||
}
|
||
|
||
/* 轮播图样式 */
|
||
.carousel {
|
||
width: 343px;
|
||
height: 148px;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: var(--box-shadow);
|
||
position: relative;
|
||
margin: 0 auto;
|
||
opacity: 1;
|
||
}
|
||
|
||
.carousel-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.carousel-title {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
color: white;
|
||
padding: 8px 16px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 头部导航样式 */
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between; /* 保持元素均匀分布 */
|
||
width: 343px;
|
||
height: 50px;
|
||
padding: 0; /* 移除内边距 */
|
||
background-color: transparent;
|
||
margin: 0 auto;
|
||
position: relative; /* 为伪元素定位做准备 */
|
||
}
|
||
|
||
.header-item {
|
||
flex: 0 0 60px; /* 固定每个项目宽度为60px */
|
||
text-decoration: none;
|
||
}
|
||
|
||
.header-item-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
width: 100%; /* 确保内容占满整个项目宽度 */
|
||
}
|
||
|
||
.header-image {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-bottom: 2px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.header-text {
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
color: var(--dark-color);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 操作区域样式 */
|
||
.action-area {
|
||
width: 343px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.action-grid {
|
||
display: flex;
|
||
gap: 20px; /* 修改为20px间距 */
|
||
height: 204px;
|
||
}
|
||
|
||
.action-main {
|
||
width: 159px;
|
||
height: 204px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
|
||
color: white;
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
border-radius: 12px;
|
||
box-shadow: var(--box-shadow);
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
text-decoration: none;
|
||
padding: 63px 47px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.action-main:hover {
|
||
transform: scale(1.02);
|
||
box-shadow: 0 8px 15px rgba(67, 97, 238, 0.3);
|
||
}
|
||
|
||
.action-stack {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px; /* 修改为20px间距 */
|
||
width: 165px;
|
||
}
|
||
|
||
.action-sub-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: white;
|
||
border-radius: 12px;
|
||
box-shadow: var(--box-shadow);
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
text-decoration: none;
|
||
opacity: 1;
|
||
}
|
||
|
||
.action-sub-item.top {
|
||
width: 165px;
|
||
height: 92px;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.action-sub-item.bottom {
|
||
width: 165px;
|
||
height: 92px;
|
||
color: var(--success-color);
|
||
}
|
||
|
||
.action-sub-item:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.action-icon {
|
||
font-size: 20px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.action-text {
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 热门资讯 */
|
||
.hot-news {
|
||
width: 343px;
|
||
padding: 16px;
|
||
background-color: white;
|
||
border-radius: 12px;
|
||
box-shadow: var(--box-shadow);
|
||
margin: 0 auto;
|
||
opacity: 1;
|
||
}
|
||
|
||
.news-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--dark-color);
|
||
margin-bottom: 12px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.news-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.news-item {
|
||
font-size: 13px;
|
||
color: #555;
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.news-dot {
|
||
color: var(--primary-color);
|
||
margin-right: 8px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* Swiper分页样式 */
|
||
:deep(.swiper-pagination-bullet-active) {
|
||
background: var(--primary-color) !important;
|
||
}
|
||
|
||
/* 欢迎弹窗样式 */
|
||
:deep(.welcome-dialog .el-dialog__body) {
|
||
background-image: url('/imgs/mainpage/gengxintishi.png');
|
||
background-size: 100% 108%;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
position: relative;
|
||
/* 调整背景图透明度，值范围0-1，0为完全透明，1为完全不透明 */
|
||
opacity: 1;
|
||
}
|
||
|
||
:deep(.welcome-dialog .el-dialog__body::before) {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
/* 调整遮罩层透明度，最后一个数值控制透明度(0-1) */
|
||
background: rgba(255, 255, 255, 0.3);
|
||
z-index: 1;
|
||
}
|
||
|
||
.welcome-content {
|
||
text-align: center;
|
||
padding: 20px 0;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.welcome-icon {
|
||
font-size: 48px;
|
||
margin-bottom: 16px;
|
||
animation: bounce 2s infinite;
|
||
}
|
||
|
||
.welcome-content h3 {
|
||
color: var(--primary-color);
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
margin: 0 0 12px 0;
|
||
}
|
||
|
||
.welcome-content p {
|
||
color: #666;
|
||
font-size: 16px;
|
||
margin: 0 0 24px 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.welcome-features {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.feature-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
padding: 12px 16px;
|
||
border-radius: 8px;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.feature-item:hover {
|
||
background: #e9ecef;
|
||
transform: translateX(4px);
|
||
}
|
||
|
||
.feature-icon {
|
||
font-size: 20px;
|
||
margin-right: 12px;
|
||
width: 24px;
|
||
text-align: center;
|
||
}
|
||
|
||
.dialog-footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
@keyframes bounce {
|
||
0%, 20%, 50%, 80%, 100% {
|
||
transform: translateY(0);
|
||
}
|
||
40% {
|
||
transform: translateY(-10px);
|
||
}
|
||
60% {
|
||
transform: translateY(-5px);
|
||
}
|
||
}
|
||
|
||
/* 弹窗响应式样式 */
|
||
@media (max-width: 480px) {
|
||
.welcome-content {
|
||
padding: 16px 0;
|
||
}
|
||
|
||
.welcome-icon {
|
||
font-size: 40px;
|
||
}
|
||
|
||
.welcome-content h3 {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.welcome-content p {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.feature-item {
|
||
padding: 10px 12px;
|
||
}
|
||
|
||
.feature-icon {
|
||
font-size: 18px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
</style>
|