refactor(article_info): 重构文章详情页面

- 移除了不必要的列表相关代码，简化了页面逻辑
- 优化了文章标题和内容的显示方式
-调整了页面样式，提高了可读性

pages/common/article_info.vue

@@ -4,8 +4,8 @@
 
     <view class="main_section">
       <view class="section_1">
-        <view class="titile">{{dataInfo.title}}</view>
-        <view class="content" v-html="dataInfo.content"></view>
+        <view class="titile">{{infoData.title}}</view>
+        <view class="content" v-html="infoData.content"></view>
       </view>
     </view>
   </view>
@@ -21,99 +21,59 @@ export default {
   },
   data() {
     return {
-      dataInfo: {
-        title: '',//文章标题
-        content: '',//文章内容
+      //筛选条件
+      filteredData:{
+        id: '1',
+      },
+
+      infoData: {
+        title: '文章标题xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx111111',//文章标题
+        content: `
+        <p>aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来</p>
+        <p><img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/cat-2.png" alt="uniapp" loading="lazy"></p>
+        `,//文章内容
       },//文章详情
     }
   },
   onLoad(options) {
-    this.filteredData.hair_staff_id = options.hair_staff_id//发信人id
+    this.filteredData.id = options.id//发信人id
   },
   onShow(){
     this.init()
   },
   //下拉刷新
   async onPullDownRefresh() {
-    //重置为第一页
-    await this.resetFilteredData()
-    await this.getList()
+    await this.getInfo()
   },
   methods: {
 //初始化
     async init(){
-      await this.getList();
+      await this.getInfo();
     },
-    //加载更多(下一页)
-    loadMoreData() {
-      //判断是否加载
-      if (!this.isReachedBottom) {
-        this.isReachedBottom = true;//设置为不可请求状态
-        this.getList();
-      }
-    },
-    //重置为第一页
-    async resetFilteredData() {
-      this.isReachedBottom = false; // 重置状态，以便下次触发加载更多
-
-      this.filteredData.page = 1//当前页码
-      this.filteredData.limit = 10//每页返回数据条数
-      this.filteredData.total = 10//数据总条数
-    },
-
-    //获取列表
-    async getList(){
-      this.loading = true
-
-      let data = {...this.filteredData}
-
-      //判断是否还有数据
-      if(this.filteredData.page * this.filteredData.limit > this.filteredData.total){
-        this.loading = false
-        uni.showToast({
-          title: '暂无更多',
-          icon: 'none'
-        })
-        return
-      }
-
-      if(data.page == 1){
-        this.tableList = []
-      }
-
-      let res = await commonApi.getContactMessage(data)//获取消息列表
-      this.loading = false
-      this.isReachedBottom = false;
-      if (res.code != 1){
+    //获取文章详情
+    //获取课程详情
+    async getInfo(){
+      let res = await memberApi.courseInfo({
+        id: this.filteredData.id,
+      })
+      if(res.code != 1){
         uni.showToast({
           title: res.msg,
           icon: 'none'
         })
         return
       }
-
-      this.tableList = this.tableList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中
-      // this.tableList.unshift(...res.data.data); // 将新数据插入到数组头部
-
-      console.log('列表',this.tableList)
-      this.filteredData.total = res.data.total
-      this.filteredData.page++
+      this.infoData = res.data
     },
-
-    //跳转文章详情
-    openViewArticleInfo(item){
-      uni.navigateTo({
-        url: '/pages/common/article_info?id='+item.id
-      })
-    },
-
   }
 }
 </script>
 
 <style lang="less" scoped>
 	.main_box {
-		background: #292929;
+		background: #fff;
+    word-wrap: break-word; /* 允许长单词或 URL 换行 */
+    word-break: break-all; /* 强制所有字符换行 */
 	}
 
 	//自定义导航栏
@@ -132,7 +92,7 @@ export default {
 
 	.main_section {
 		min-height: 100vh;
-		background: #292929 100%;
+		background: #fff;
 		padding: 0 0rpx;
 		padding-top: 32rpx;
 		padding-bottom: 150rpx;
@@ -150,34 +110,10 @@ export default {
       padding: 0 24rpx;
       display: flex;
       flex-direction: column;
+      gap: 30rpx;
+      .titile{
+        font-size: 40rpx;
 
-      .item{
-        margin-bottom: 38rpx;
-        display: flex;
-        flex-direction: column;
-
-        padding: 32rpx 24rpx;
-        border-radius: 14rpx;
-        background-color: rgba(255,255,255,1);
-        border: 2rpx solid rgba(187,187,187,1);
-
-        color: #4F4F4F;
-        font-size: 32rpx;
-
-        .title{
-        }
-        .img_box{
-          margin-top: 30rpx;
-          width: 100%;
-        }
-        .content{
-          margin-top: 30rpx;
-        }
-        .time{
-          display: flex;
-          justify-content: flex-end;
-          margin-top: 36rpx;
-        }
       }
     }