1

src/api/index.js

@@ -129,3 +129,27 @@ export function getEduReceiptInfo(data) {
         data
     })
 }
+
+/**
+ * 学习园地列表
+ * @param {JSON参数} data
+ */
+export function getLearningGardenList(data) {
+    return request({
+        url: "/AppletIndex/GeLearningGardenPage",
+        method: 'post',
+        data
+    })
+}
+
+/**
+ * 学习园地详情
+ * @param {JSON参数} data
+ */
+export function getLearningGardenDetail(data) {
+    return request({
+        url: "/AppletIndex/GetLearningGarden",
+        method: 'post',
+        data
+    })
+}
\ No newline at end of file

src/pages/learningGarden/learningGardenDetails.vue

 <template>
   <view class="">
     <van-toast id="van-toast" />
+    <view class="detail-con">
+      <view class="title">{{ detailData.Title }}</view>
+      <view class="info flex flex_start_center">
+        <image class="headimg" :src="detailData.Ico ? detailData.Ico : logo" />
+        <view class="createname">{{ detailData.CreateByName }}</view>
+        <view class="time">{{ detailData.CreateTime }}</view>
+      </view>
+      <view v-html="richtext"></view>
+    </view>
+    <!-- <web-view :src="detailData.LinkUrl"></web-view> -->
   </view>
 </template>
 
 <script>
 import { reactive, toRefs, getCurrentInstance, onMounted } from "vue";
+import { getLearningGardenDetail } from "../../api/index";
 export default {
   setup(props, context) {
     let data = reactive({
-      Account: "",
-      Password: "",
+      logo: "http://staticfile.oytour.com/new/upload/edu/logo.png",
+      pageTitle: "日语学习园地",
+      msg: {
+        Id: 0,
+      },
+      richtext: "",
+      detailData: {},
     });
     let methods = {
       back() {
@@ -21,6 +37,27 @@ export default {
           url: "/pages/index/index",
         });
       },
+      async getData() {
+        let res = await getLearningGardenDetail(data.msg);
+        if (res) {
+          data.detailData = res.Data;
+          let tempRichtext = "";
+          tempRichtext = data.detailData.Content.replace(
+            /<img [^>]*data-src=['"]([^'"]+)[^>]*>/gi,
+            (match, capture) => {
+              match = match.replace(/data-src/gi, "src");
+              match = match.replace(
+                /style=\"(.*)\"/gi,
+                'style="max-width:100% !important"'
+              );
+              return match;
+            }
+          );
+          data.richtext = tempRichtext;
+          console.log(45, data.richtext);
+        }
+      },
+      getDateStr(date) {},
     };
     onMounted(() => {});
     let that = methods;
@@ -29,8 +66,51 @@ export default {
       ...methods,
     };
   },
+  onLoad(options) {
+    uni.setNavigationBarTitle({
+      title: this.pageTitle,
+    });
+    this.msg.Id = options.Id;
+    this.getData();
+  },
 };
 </script>
 
 <style scoped>
+.detail-con {
+  box-sizing: border-box;
+  padding: 15rpx 30rpx;
+  height: 100vh;
+  overflow-y: auto;
+}
+.title {
+  font-size: 36rpx;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #111111;
+  margin: 15rpx 0;
+}
+.info {
+  margin: 15rpx 0;
+}
+.headimg {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
+  margin-right: 15rpx;
+}
+.createname {
+  font-size: 26rpx;
+  font-family: PingFang SC;
+  font-weight: 500;
+  color: #111111;
+  margin-right: 30rpx;
+}
+.time {
+  font-size: 26rpx;
+  font-family: PingFang SC;
+  font-weight: 500;
+  color: #999999;
+}
 </style>

src/pages/learningGarden/learningGardenList.vue

 <template>
   <view class="">
     <van-toast id="van-toast" />
-    <view class="dataList">
+    <view class="list-con">
+      <van-empty description="暂无数据" v-if="dataList.length === 0" />
+      <scroll-view
+        :scroll-top="0"
+        scroll-y="true"
+        class="scroll-box"
+        @scrolltolower="lower"
+        v-if="dataList.length > 0"
+      >
         <view
           v-for="(item, index) in dataList"
           :key="index"
-        class="dataList-item"
+          class="list-item flex flex_between_center"
+          @click="jumpPage(item.Id)"
         >
-        <view class="left"> </view>
-        <view class="right one_line">
-          <view>{{ item.title }}</view>
-          <view>{{ item.desc }}</view>
+          <image class="left" :src="item.Img"></image>
+          <view class="right">
+            <view class="one_line title">{{ item.Title }}</view>
+            <view class="one_line digest">{{ item.Digest }}</view>
           </view>
         </view>
+        <Loadmore :state="pageState" />
+      </scroll-view>
     </view>
   </view>
 </template>
 
 <script>
 import { reactive, toRefs, getCurrentInstance, onMounted } from "vue";
+import { getLearningGardenList } from "../../api/index";
+import Loadmore from "../../components/loadmore.vue";
 export default {
+  components: {
+    Loadmore,
+  },
   setup(props, context) {
     let data = reactive({
-      pageTitle: "学习园地",
-      dataList: [
-        {
-          img: "",
-          title: "日语学习园地的课程名称",
-          desc: "课程的一些小简介课程的一些小简介课...",
-        },
-      ],
+      pageTitle: "日语学习园地",
+      msg: {
+        PageIndex: 1,
+        PageSize: 10,
+        rowsPerPage: 10,
+        Title: "",
+      },
+      dataList: [],
+      pageState: "more",
+      pageCount: 0,
     });
     let methods = {
       back() {
         uni.navigateBack();
       },
-      jumpPage() {
-        uni.reLaunch({
-          url: "/pages/index/index",
+      jumpPage(id) {
+        uni.navigateTo({
+          url: "/pages/learningGarden/learningGardenDetails?Id=" + id,
         });
       },
+      async getList() {
+        let res = await getLearningGardenList(data.msg);
+        if (res) {
+          if (data.msg.PageIndex === 1) {
+            data.dataList = res.Data.PageData;
+          } else {
+            data.dataList = [...res.Data.PageData, ...data.dataList];
+          }
+          data.pageCount = res.Data.PageCount;
+          if (data.msg.pageIndex >= res.Data.PageCount) {
+            data.pageState = "none";
+          } else {
+            data.pageState = "more";
+          }
+        }
+      },
+      lower(e) {
+        if (data.msg.pageIndex < data.PageCount) {
+          data.pageState = "loading";
+          data.msg.pageIndex++;
+          that.getList();
+        } else {
+          data.pageState = "none";
+        }
+      },
     };
-    onMounted(() => {});
+    onMounted(() => {
+      that.getList();
+    });
     let that = methods;
     return {
       ...toRefs(data),
@@ -50,13 +95,48 @@ export default {
   },
   onLoad() {
     uni.setNavigationBarTitle({
-      title: "日语学习园地",
+      title: this.pageTitle,
     });
   },
 };
 </script>
 
 <style scoped>
-.dataList-item {
+.list-con {
+  height: calc(100vh - 20rpx);
+  box-sizing: border-box;
+  padding: 15rpx 30rpx;
+  margin-top: 10rpx;
+}
+.scroll-box {
+  height: 100%;
+  width: 100%;
+}
+.list-item {
+  margin: 20rpx 0;
+}
+.left {
+  width: 220rpx;
+  height: 120rpx;
+  border-radius: 20rpx;
+  box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
+}
+.right {
+  width: 440rpx;
+  height: 120rpx;
+}
+.right .title {
+  font-size: 30rpx;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #111111;
+  line-height: 70rpx;
+}
+.right .digest {
+  font-size: 24rpx;
+  font-family: PingFang SC;
+  font-weight: 500;
+  color: #999999;
+  line-height: 30rpx;
 }
 </style>

src/utils/request.js

 //请求教育接口
 let host = ''
 if (process.env.NODE_ENV === "development") {
-	// host = 'http://192.168.20.17:8017/api'
-	host = 'http://192.168.20.24:8300/api'
+	host = 'http://192.168.20.17:8017/api'
+	// host = 'http://192.168.20.24:8300/api'
 } else {
 	host = 'https://eduapi.oytour.com/api'
 }