index.vue

<template>
  <div class="ultraman_wrap_bg">
    <div class="ultraman_header">
      <img class="ultraman_header_title" src="@/static/home/logo.png" alt="" />
    </div>
    <div class="ultraman_logo_blk">
      <img class="ultraman_logo" src="@/static/home/bi.png" alt="" />
    </div>
    <div class="ultraman_btn_blk">
      <div class="ultraman_btn" @click="getCoin">领取习币</div>
      <div class="ultraman_btn2" @click="router.push('/home/transfer')">习币转账</div>
    </div>
    <div class="ultraman_page_title">中国习币</div>
    <div class="ultraman_content_blk">
      <div class="ultraman_content_tag">中国印钞造币</div>
      <div class="ultraman_content_name">习币价值实时更新</div>
      <div class="ultraman_content_label">强化国币 未来可期</div>
      <div class="chart-container" ref="chartRef"></div>
    </div>
    <div class="ultraman_foot">
      <img src="@/static/xbgz/gongan.png" alt="" />
    </div>
    <LandscapePopup ref="popup" :type="popupType" />
    <NoticeModal ref="noticeModal" :noticeList="guideList" />
  </div>
</template>

<script setup>
import request from '@/utils/request';
import { usePageHook } from '@/hooks/usePageHook';
import * as echarts from 'echarts';
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import NoticeModal from '@/components/NoticeModal.vue';
const router = useRouter();
const chartRef = ref(null);
let myChart = null;
const noticeModal = ref(null)
// 初始化图表
const initChart = (data) => {
  if (myChart) {
    myChart.dispose();
  }

  myChart = echarts.init(chartRef.value);

  // 处理数据
  const dates = data.map(item => item.a3);
  const prices = data.map(item => Number(item.a4));

  const option = {
    grid: {
      top: '10%',
      left: '5%',
      right: '5%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: dates,
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: 12,
        formatter: (value) => {
          // 只显示月-日
          return value.substring(5);
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '价格(元)',
      nameTextStyle: {
        color: '#666'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: '#eee'
        }
      }
    },
    series: [
      {
        data: prices,
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        itemStyle: {
          color: '#e4393c'
        },
        lineStyle: {
          color: '#e4393c',
          width: 2
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(228, 57, 60, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(228, 57, 60, 0.1)'
            }
          ])
        }
      }
    ],
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#e4393c',
      borderWidth: 1,
      textStyle: {
        color: '#333'
      },
      formatter: (params) => {
        const data = params[0];
        return `日期：${data.axisValue}<br/>价格：${data.data}元`;
      }
    }
  };

  myChart.setOption(option);
};
const getCoin = () => {
  request.get('/yw2/yqcj').then(res => {
    if (res.code == 200) {
      showSuccessToast('领取成功，请查收');
    } else {
      showToast({
        message: res.msg,
        wordBreak: 'break-all',
      });
    }
  })
}
// 获取数据并初始化图表
const fetchData = async () => {
  try {
    const res = await request.get('/yw1/list');
    if (res && res.data) {
      // 按日期排序
      const sortedData = res.data.sort((a, b) => new Date(a.a3) - new Date(b.a3));
      // 只显示状态为1的数据
      const filteredData = sortedData.filter(item => item.a5 === '1');
      initChart(filteredData);
    }
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

const userInfo = ref({})
const popup = ref(null)
const popupType = ref('app')
const guideList = ref([])
const getGuideList = async () => {
  try {
    const res = await request.get('/system/notice/list');
    guideList.value = res.rows.filter(item => item.noticeType == 0 || item.noticeType == 1 || item.noticeType == 2);
    if (userInfo.value.data == 'true') {
      noticeModal.value?.open()
    }
  } catch (error) {
    console.error('Failed to fetch notices:', error);
    showFailToast(error.msg || '获取通知信息失败'); // 提示用户获取通知信息失败
  }
};
onMounted(() => {

})
usePageHook({
  onPageShow: () => {
    fetchData();
    getGuideList()
    request.get('/system/user/').then(res => {
      userInfo.value = res
      console.log(userInfo.value)
      if (userInfo.value.data != 'true') {
        popupType.value = 'shiming'
        popup.value?.open()
      }
    })
  }
})


// 监听窗口大小变化，重绘图表
const handleResize = () => {
  myChart && myChart.resize();
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  if (myChart) {
    myChart.dispose();
    myChart = null;
  }
});
</script>

<style scoped>
/* Reset所有元素的外边距和内边距 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}

/* 清除所有链接的下划线 */
a {
  text-decoration: none;
}

ul {
  list-style: none;
  list-style-type: none;
  /* 去除项目符号 */
  padding: 0;
  /* 去除内边距 */
  margin: 0;
  /* 去除外边距 */
}

/* 移除按钮的默认样式 */
button,
input,
textarea,
select {
  border: none;
  outline: none;
  background: none;
  font: inherit;
}

/* 表格的边框清除 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 图片的默认边距清除 */
img {
  display: block;
  max-width: 100%;
}

.ultraman_flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ultraman_wrap_bg {
  max-width: 550px;
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 30px;
  background-position: center;
  overflow: scroll;
  /* 保留滚动功能 */
  background: url('@/static/home/beijing.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.ultraman_wrap_bg::-webkit-scrollbar {
  display: none;
  /* 隐藏滚动条 */
}

.ultraman_header {
  width: 50%;
  margin: 0 auto;
  margin-top: 30px;
}

.ultraman_header_title,
.ultraman_logo {
  width: 100%;
}

.ultraman_logo_blk {
  width: 67%;
  margin: 0 auto;
  margin-top: 20px;
}

.ultraman_btn_blk {
  width: 88%;
  margin: 0 auto;
  margin-top: 20px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ultraman_btn {
  width: 47%;
  font-size: 20px;
  font-weight: bold;
  line-height: 22px;
  padding: 9px 0;
  text-align: center;
  letter-spacing: 1.3px;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(107, 107, 107, 0.3),
    2px 2px 0 rgba(101, 101, 101, 0.2);
  background: url('@/static/home/lingqu.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.ultraman_btn2 {
  width: 47%;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1.3px;
  padding: 9px 0;
  line-height: 22px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(107, 107, 107, 0.3),
    2px 2px 0 rgba(101, 101, 101, 0.2);
  background: url('@/static/home/zhuanzhang.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.ultraman_page_title {
  width: 88%;
  margin: 0 auto;
  margin-top: 20px;
  padding: 6px 0 18px 0;
  text-align: center;
  font-size: 20px;
  letter-spacing: 1.2px;
  color: #8a2c20;
  font-weight: bold;
  background: url('@/static/home/xibi.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.ultraman_content_blk {
  width: 88%;
  margin: 0 auto;
  margin-top: -14px;
  border-radius: 15px;
  background-color: #fefefe;
  padding: 30px 12px 12px 12px;
  position: relative;
}

.ultraman_content_tag {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  color: #fff;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: bold;
  padding: 3px 15px;
  background: url('@/static/home/zhonguoyinzhi.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.ultraman_content_name {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1.5px;
}

.ultraman_content_label {
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1.5px;
  color: #c9caca;
}

.ultraman_content_img {
  display: none;
  /* 隐藏原有的图片 */
}

.ultraman_foot {
  width: 70%;
  margin: 0 auto;
  margin-top: 1rem;
}

/* 添加图表容器样式 */
.chart-container {
  width: 100%;
  height: 300px;
  margin-top: 20px;
}
</style>