页面构成

2026-01-05 18:07:57 +08:00
parent 66b2e3ddac
commit c2f0c46c4d
40 changed files with 2817 additions and 0 deletions
@@ -0,0 +1,256 @@
+// index.js
+const MyApi = require('../../Api/api.js');
+const updateManager = wx.getUpdateManager();
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    BaseURL: getApp().globalData.BaseURL,
+    imageList: [],
+    WebPages: [],
+    CourseList: [],
+    FreeCourseList: [],
+    webPageCount: 1,
+    hasTouchBottom:false,
+    bannerImgName:[]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    //获取首页banner图片
+    MyApi.ApiGetBannerImg()
+      .then(result => {
+        this.setData({
+          bannerImgName: result
+        });
+      })
+      .catch(err => {
+        console.error("请求失败：" + err);
+      });
+
+
+    //获取首页课程列表
+    wx.setStorageSync('IndexNewCourseData', []);
+
+    MyApi.ApiGetIndexCourseList()
+      .then(result => {
+        wx.setStorageSync('IndexNewCourseData', result.ListData);
+        this.setData({
+          CourseList: result.ListData
+        });
+      })
+      .catch(err => {
+        console.error("请求失败：" + err);
+      });
+
+      MyApi.ApiGetIndexFreeCourseList()
+      .then(result => {
+        wx.setStorageSync('IndexFreeCourseData', result.ListData);
+        this.setData({
+          FreeCourseList: result.ListData
+        });
+      })
+      .catch(err => {
+        console.error("请求失败：" + err);
+      });
+
+    //获取十个页面数据
+    MyApi.ApiGetWebPagesFromDB(1)
+      .then(result => {
+        wx.setStorageSync('WebPagesContent', result);
+        var tempWebPagesContent = wx.getStorageSync('WebPagesContent');
+        this.setData({
+          WebPages: tempWebPagesContent,
+        });
+      })
+      .catch(err => {
+        console.error("请求失败：" + err);
+      });
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+    //微信小程序更新
+updateManager.onCheckForUpdate(function (res) {
+  // 请求完新版本信息的回调
+  //console.log("是否有新版本:"+res.hasUpdate)
+})
+
+updateManager.onUpdateReady(function () {
+  wx.showModal({
+    title: '更新提示',
+    showCancel:false,
+    content: '新版本已准备好，即将重启应用',
+    success: function (res) {
+      if (res.confirm) {
+        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
+        updateManager.applyUpdate()
+      }
+    }
+  })
+})
+
+updateManager.onUpdateFailed(function () {
+  // 新版本下载失败
+})
+
+
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+    //逻辑同onLoad()一样，略有修改\
+    //获取首页banner图片
+    MyApi.ApiGetBannerImg()
+      .then(result => {
+        //增加停止下拉刷新显示
+        wx.stopPullDownRefresh();
+
+        this.setData({
+          bannerImgName: result
+        });
+      })
+      .catch(err => {
+        console.error("请求失败：" + err);
+      });
+    
+    //获取首页课程列表
+    wx.setStorageSync('IndexNewCourseData', []);
+
+    MyApi.ApiGetIndexCourseList()
+      .then(result => {
+
+        //增加停止下拉刷新显示
+        wx.stopPullDownRefresh();
+
+        wx.setStorageSync('IndexNewCourseData', result.ListData);
+        this.setData({
+          CourseList: result.ListData
+        });
+      })
+      .catch(err => {
+        console.error("请求失败：" + err);
+      });
+
+    MyApi.ApiGetIndexFreeCourseList()
+    .then(result => {
+      wx.setStorageSync('IndexFreeCourseData', result.ListData);
+      this.setData({
+        FreeCourseList: result.ListData
+      });
+    })
+    .catch(err => {
+      console.error("请求失败：" + err);
+    });
+
+    //获取十个页面数据
+    MyApi.ApiGetWebPagesFromDB(1)
+      .then(result => {
+        //增加停止下拉刷新显示
+        wx.stopPullDownRefresh();
+
+        wx.setStorageSync('WebPagesContent', result);
+        var tempWebPagesContent = wx.getStorageSync('WebPagesContent');
+        this.setData({
+          WebPages: tempWebPagesContent,
+        });
+      })
+      .catch(err => {
+        console.error("请求失败：" + err);
+      });
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+    MyApi.ApiGetWebPagesFromDB(this.data.webPageCount + 1)
+      .then(result => {
+        if (result) {
+          //使用展开运算符将两个JSON数据拼接在一起
+          var combinedJson = this.data.WebPages.concat(result);
+          var requireCount = this.data.webPageCount;
+          this.setData({
+            hasTouchBottom: false,
+            webPageCount: requireCount + 1,
+            WebPages: combinedJson
+          });
+
+          //更新缓存
+          wx.setStorageSync('WebPagesContent', combinedJson)
+
+        } else {
+          this.setData({
+            hasTouchBottom: true,
+          });
+        }
+
+      })
+      .catch(err => {
+        console.error("请求失败：" + err);
+      });
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+  NavigatorToWebPageDetails(e) {
+    var index = e.currentTarget.dataset.index;
+    wx.navigateTo({
+      url: '/pages/WebPageDetails/WebPageDetails?index=' + index,
+    })
+  },
+
+  NavigatorToIndexNewCourseDetails(e) {
+    var number = e.currentTarget.dataset.number;
+    wx.navigateTo({
+      url: '/pages/IndexNewCourseDetails/IndexNewCourseDetails?number=' + number,
+    })
+  },
+
+  NavigatorToIndexFreeCourseDetails(e) {
+    var number = e.currentTarget.dataset.number;
+    wx.navigateTo({
+      url: '/pages/IndexFreeCourseDetails/IndexFreeCourseDetails?number=' + number,
+    })
+  },
+
+  //允许分享到朋友圈
+  onShareTimeline(e) {
+
+  }
+})
@@ -0,0 +1,7 @@
+{
+  "usingComponents": {
+    "van-loading": "@vant/weapp/loading/index"
+  },
+  "onReachBottomDistance":50,
+  "enablePullDownRefresh":true
+}
@@ -0,0 +1,75 @@
+<!--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="{{bannerImgName}}" wx:for-item="item" wx:key="index" class="bannerswiperitem">
+        <image class="indeximage" src="{{BaseURL}}/Images/Banner/{{item['图片名']}}" mode="aspectFill" />
+      </swiper-item>
+    </swiper>
+  </view>
+
+
+
+  <!-- <scroll-view class="mulucontainer" scroll-x enable-flex style="flex-direction: row;" type="custom" show-scrollbar="{{false}}">
+
+    <navigator class="navpage001" url="/pages/test/test">
+      <image class="navpage001img" wx:if="{{BaseURL}}" src="{{BaseURL}}/Images/Icon/indeximgbtn1.png" mode="scaleToFill" />
+      <text class="tupianwenzi">精品好课</text>
+    </navigator>
+
+
+  </scroll-view> -->
+
+  <!-- 新课上线 -->
+  <view class="shouyetupianlist">
+    <view class="biaoti01">
+      <image class="biaoti01img" src="{{BaseURL}}/Images/Icon/xinke.png" mode="aspectFill" />
+      <text decode>&nbsp;新课上线</text>
+    </view>
+    <view class="shouyetupianlistcontent" wx:for="{{CourseList}}" wx:for-item="item" wx:for-index="index" wx:key="index" data-number="{{index}}" bind:tap="NavigatorToIndexNewCourseDetails">
+      <view class="hengxianglist" key="{{index}}">
+        <image class="indeximagelist" src="{{BaseURL}}/Images/NewCourse/{{item['课程名称']}}.png" mode="aspectFill" />
+      </view>
+    </view>
+  </view>
+
+
+  <!-- 免费课程 -->
+  <view class="shouyetupianlist">
+    <view class="biaoti01">
+      <image class="biaoti01img" src="{{BaseURL}}/Images/Icon/xinke.png" mode="aspectFill" />
+      <text decode>&nbsp;免费课程</text>
+    </view>
+    <view class="shouyetupianlistcontent" wx:for="{{FreeCourseList}}" wx:for-item="item" wx:for-index="index" wx:key="index" data-number="{{item['序号']}}"  bind:tap="NavigatorToIndexFreeCourseDetails">
+      <view class="hengxianglist" key="{{index}}">
+        <image class="indeximagelist" src="{{BaseURL}}/Images/FreeCourse/{{item['课程名称']}}.png" mode="aspectFill" />
+      </view>
+    </view>
+  </view>
+
+  <!-- 知识速通 -->
+  <view class="shouyetupianlist">
+    <view class="biaoti01">
+      <image class="biaoti01img" src="{{BaseURL}}/Images/Icon/sutong.png" mode="aspectFill" />
+      <text decode>&nbsp;知识速通</text>
+    </view>
+
+    <view class="shouyetupianlistcontent01" wx:for="{{WebPages}}" wx:for-item="imageshuzu" wx:for-index="index" wx:key="index" bind:tap="NavigatorToWebPageDetails" data-index="{{index}}">
+      <view class="hengxianglist01" key="{{index}}">
+        <image class="indeximagelist01" src="{{BaseURL}}/WebPages/{{imageshuzu['网页id']}}.png" mode="aspectFill" />
+      </view>
+      <view class="indeximagelistmiaosu">{{imageshuzu['网页标题']}}</view>
+      <view class="indeximagelistmiaosu01">
+        <text class="indeximagelistmiaosu0102">
+          {{imageshuzu['详细介绍']}}
+        </text>
+      </view>
+    </view>
+    <view style="width: auto; margin: 0px auto; margin-bottom: 10px;">
+      <text wx:if="{{hasTouchBottom}}">已经到底啦！</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: 100%;
+  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: 100%;
+  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;
+}