四端上传

2026-09-29 15:25:40 +08:00
1 parent 25bbb5f9c8
commit c6e2cb4d5b
@@ -0,0 +1,140 @@
+// pages/index/index.js
+const api = require('../../utils/api');
+const store = require('../../utils/store');
+const config = require('../../config/index');
+
+const app = getApp();
+const updateManager = wx.getUpdateManager();
+
+const PAGE_SIZE = 10;
+
+Page({
+  data: {
+    staticBase: config.STATIC_BASE_URL,
+    banners: [],
+    courseList: [],
+    freeCourseList: [],
+    articles: [],
+    page: 1,
+    articleTotal: 0,
+    loadingMore: false,
+    noMore: false,
+    title1: '',
+    title2: '',
+    title3: '',
+    footerText: '',
+  },
+
+  onLoad() {
+    // 等应用初始化完成再取配置，避免首屏读到空缓存
+    app.ready().then(() => this.applyConfig());
+    this.loadAll();
+  },
+
+  applyConfig() {
+    this.setData({
+      title1: store.cfg('home.title.paid', '付费课程'),
+      title2: store.cfg('home.title.trial', '试听课程'),
+      title3: store.cfg('home.title.public', '公开课程'),
+      footerText: store.cfg('home.footer_text', '我是有底线的！'),
+    });
+  },
+
+  loadAll() {
+    this.setData({ page: 1, noMore: false });
+
+    api
+      .getBanners()
+      .then((list) => this.setData({ banners: list || [] }))
+      .catch((err) => console.error('[index] 轮播加载失败', err));
+
+    api
+      .getHomeCourses()
+      .then((list) => this.setData({ courseList: list || [] }))
+      .catch((err) => console.error('[index] 新课加载失败', err));
+
+    api
+      .getHomeFreeCourses()
+      .then((list) => this.setData({ freeCourseList: list || [] }))
+      .catch((err) => console.error('[index] 试听列表加载失败', err));
+
+    api
+      .getArticles(1, PAGE_SIZE)
+      .then((res) => this.setData({ articles: res.items || [], articleTotal: res.total || 0, page: 1 }))
+      .catch((err) => console.error('[index] 文章加载失败', err));
+  },
+
+  onShow() {
+    updateManager.onCheckForUpdate(() => {});
+    updateManager.onUpdateReady(() => {
+      wx.showModal({
+        title: '更新提示',
+        showCancel: false,
+        content: '新版本已准备好，即将重启应用',
+        success: (res) => {
+          if (res.confirm) updateManager.applyUpdate();
+        },
+      });
+    });
+    updateManager.onUpdateFailed(() => {});
+  },
+
+  onPullDownRefresh() {
+    Promise.all([this.reload()]).then(() => wx.stopPullDownRefresh());
+  },
+
+  async reload() {
+    try {
+      const cfg = await api.getConfig();
+      store.setSiteConfig(cfg);
+      this.applyConfig();
+    } catch (err) {
+      console.warn('[index] 配置刷新失败', err);
+    }
+    this.loadAll();
+  },
+
+  onReachBottom() {
+    if (this.data.loadingMore || this.data.noMore) return;
+    const next = this.data.page + 1;
+    this.setData({ loadingMore: true });
+
+    api
+      .getArticles(next, PAGE_SIZE)
+      .then((res) => {
+        const merged = this.data.articles.concat(res.items || []);
+        this.setData({
+          articles: merged,
+          page: next,
+          loadingMore: false,
+          noMore: merged.length >= (res.total || 0),
+        });
+      })
+      .catch((err) => {
+        console.error('[index] 加载更多失败', err);
+        this.setData({ loadingMore: false });
+      });
+  },
+
+  toArticle(e) {
+    wx.navigateTo({ url: '/pages/WebPageDetails/WebPageDetails?id=' + e.currentTarget.dataset.id });
+  },
+
+  toNewCourse(e) {
+    wx.navigateTo({ url: '/pages/IndexNewCourseDetails/IndexNewCourseDetails?id=' + e.currentTarget.dataset.id });
+  },
+
+  toFreeCourse(e) {
+    wx.navigateTo({
+      url: '/pages/IndexFreeCourseDetails/IndexFreeCourseDetails?seriesNo=' + e.currentTarget.dataset.series,
+    });
+  },
+
+  onShareAppMessage() {
+    return { title: '叶雷讲数学', path: '/pages/index/index' };
+  },
+
+  onShareTimeline() {
+    return { title: '叶雷讲数学' };
+  },
+});
@@ -0,0 +1,7 @@
+{
+  "usingComponents": {
+    "van-loading": "@vant/weapp/loading/index"
+  },
+  "onReachBottomDistance":50,
+  "enablePullDownRefresh":true
+}
@@ -0,0 +1,60 @@
+<!--index.wxml-->
+
+<scroll-view class="container" scroll-y enable-flex type="custom">
+  <view class="banner">
+    <swiper class="bannerswiper" autoplay interval="20000" circular indicator-dots indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="rgba(255, 255, 255, 1.0)" indicator-type="normal" duration="1000" easing-function="easeOutCubic">
+      <swiper-item wx:for="{{banners}}" wx:for-item="item" wx:key="id" class="bannerswiperitem">
+        <image class="indeximage" src="{{item.imageUrl}}" mode="aspectFill" />
+      </swiper-item>
+    </swiper>
+  </view>
+
+  <!-- 新课上线 -->
+  <view class="shouyetupianlist">
+    <view wx:if="{{courseList.length > 0}}" class="biaoti01">
+      <image class="biaoti01img" src="{{staticBase}}/Images/Icon/xinke.png" mode="aspectFill" />
+      <text decode>&nbsp;{{title1}}</text>
+    </view>
+    <view class="shouyetupianlistcontent" wx:for="{{courseList}}" wx:for-item="item" wx:for-index="index" wx:key="id" data-id="{{item.id}}" bind:tap="toNewCourse">
+      <view class="hengxianglist">
+        <image class="indeximagelist" src="{{item.coverUrl}}" mode="aspectFill" />
+      </view>
+    </view>
+  </view>
+
+  <!-- 自我学习 -->
+  <view class="shouyetupianlist">
+    <view wx:if="{{freeCourseList.length > 0}}" class="biaoti01">
+      <image class="biaoti01img" src="{{staticBase}}/Images/Icon/ziwoxuexi.png" mode="aspectFill" />
+      <text decode>&nbsp;{{title2}}</text>
+    </view>
+    <view class="shouyetupianlistcontent" wx:for="{{freeCourseList}}" wx:for-item="item" wx:for-index="index" wx:key="id" data-series="{{item.seriesNo}}" bind:tap="toFreeCourse">
+      <view class="hengxianglist">
+        <image class="indeximagelist" src="{{item.coverUrl}}" mode="aspectFill" />
+      </view>
+    </view>
+  </view>
+
+  <!-- 知识速通 -->
+  <view class="shouyetupianlist">
+    <view wx:if="{{articles.length > 0}}" class="biaoti01">
+      <image class="biaoti01img" src="{{staticBase}}/Images/Icon/sutong.png" mode="aspectFill" />
+      <text decode>&nbsp;{{title3}}</text>
+    </view>
+
+    <view class="shouyetupianlistcontent01" wx:for="{{articles}}" wx:for-item="item" wx:for-index="index" wx:key="id" bind:tap="toArticle" data-id="{{item.id}}">
+      <view class="hengxianglist01">
+        <image class="indeximagelist01" src="{{item.thumbUrl}}" mode="aspectFill" />
+      </view>
+      <view class="indeximagelistmiaosu">{{item.title}}</view>
+      <view class="indeximagelistmiaosu01">
+        <text class="indeximagelistmiaosu0102">{{item.intro}}</text>
+      </view>
+    </view>
+    <view style="width: auto; margin: 0px auto; margin-bottom: 10px;">
+      <text wx:if="{{noMore}}">{{footerText}}</text>
+    </view>
+  </view>
+
+</scroll-view>
+
@@ -0,0 +1,137 @@
+/**index.wxss**/
+/* 暂时未用到
+page {
+
+} */
+
+
+.container {
+  padding:0;
+  align-items:center;
+  flex-direction:column;
+  justify-content:space-between;
+}
+.mulucontainer {
+  width: 710rpx;
+  height: 150rpx;
+  white-space: nowrap; /*强制子元素为一行 */
+  margin-left: 25rpx;
+}
+.navpage001 {
+  display: inline-block;
+  width: 150rpx;
+  height: 150rpx;
+  margin-right: 25rpx;
+  text-align: center;
+  font-size: 10px;
+  align-items: center;
+}
+.navpage001img {
+  margin:0 auto;
+  width: 60%;
+  height: 60%;
+}
+.mulucontainer .navpage001:last-child{
+  margin-right: 0;
+}
+.banner{
+  width: 100%;
+  height: 400rpx;
+}
+
+
+
+
+.shouyetupianlist {
+  display: flex;
+  flex-wrap: wrap;/* 允许内容换行 */
+  justify-content:space-between;/* 水平方向上两端对齐 */
+}
+.shouyetupianlistcontent {
+  /* display: inline; */
+  padding: 0;
+  margin: 20rpx;
+  height: 204rpx;
+  width: 334rpx; /* 每行两个图片，设置宽度为 48% 可以有一定的间距 */
+  border-radius: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+}
+.shouyetupianlistcontent01 {
+  position: relative;
+  padding: 0;
+  margin: 20rpx;
+  height: 260rpx;
+  width: 730rpx;
+  overflow: hidden;
+  border-radius: 20rpx;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+}
+.indeximagelist {
+  width: 100%;
+  height: 204rpx;
+}
+.indeximagelist01 {
+  width: 100%;
+  height: 100%;
+}
+
+.tupianwenzi {
+  display: block;
+}
+
+.biaoti01 {
+  display: flex;
+  width: 750rpx;
+  height: 60rpx;
+  align-items: center;
+  padding-left: 20rpx;
+}
+.biaoti01img {
+  width: 40rpx;
+  height: 40rpx;
+}
+.hengxianglist01 {
+  display: flex;
+  width: 300rpx;
+  height: inherit; /* 推荐尺寸在300*250rpx 即150*125px */
+  margin: 0;
+  overflow: hidden;
+  border-radius: 20rpx;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+}
+.indeximage{
+  border-radius: 20rpx;
+  height: 350rpx;
+  width: 710rpx;
+  transform: translate(20rpx, 30rpx);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+}
+
+.bannerswiper {
+  height: 390rpx;
+}
+.indeximagelistmiaosu {
+  font-size: 28rpx;
+  display:flex;
+  position: absolute;
+  top: 10rpx;
+  left: 300rpx;
+  height: 70rpx;
+  align-items: center;
+  padding-left: 20rpx;
+}
+.indeximagelistmiaosu01 {
+  display: inline;
+  position: absolute;
+  left: 300rpx;
+  top: 35px;
+  align-items: center;
+  padding-left: 20rpx;
+}
+.indeximagelistmiaosu0102 {
+  font-size: 20rpx;
+  position: relative;
+  top: -15px;
+  width: 370rpx;
+}