jurong_circle_frontdesk/src/views/MainPage.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>