优化我的收藏，活动报名，我的活动页面，活动页面页面，新增加载更多

zxl

2025-06-06 b87f40d077669eaceced44aadf7e02117f53671e

 pages/mine/activity/detail.vue

@@ -4,8 +4,12 @@
      <!-- 动态封面区域 -->
      <view class="cover-container">
        <!-- 图片类型 -->
        <block v-if="activityInfo.coverType === '图片' || activityInfo.coverType === '视频'">
          <image :src="getPreviewUrl(activityInfo.cover)" mode="aspectFill" class="activity-cover" />
        <block v-if="activityInfo.coverType === '图片'">
          <image :src="getUrl(activityInfo.cover)"  class="activity-cover" />
        </block>
        <block v-if=" activityInfo.coverType === '视频'">
           <video :src="getUrl(item.cover)"
               @play="handleVideoPlay"  class="activity-cover"></video>
        </block>
        <!-- 文字类型 -->
        <block v-if="activityInfo.coverType === '文字'">
@@ -53,18 +57,24 @@
      </view>
      <!-- 报名状态 -->
      <view class="status-bar" :style="{ backgroundColor: statusBarColor }">
         <button class="signup-btn" @click="activityReport()" :disabled="reportBtn" >{{ reportBtn ? '已报名': '立即报名'}}</button>
         <u-button class="signup-btn" @click.stop="activityReport()" :disabled="reportBtn" >{{ reportBtn ? '已报名': '立即报名'}}</u-button>
         <u-button class="signup-btn" @click.stop="collect()">{{ isCollect ? '取消收藏' : '收藏' }}</u-button>
      </view>
   </view>
</template>

<script>
   import {getPreviewUrl} from '@/api/common.js'
   import UButton from '@/uview-components/uview-ui/components/u-button/u-button.vue';
   import {changeCollect} from '@/api/collect.js'
   import {getFilePreviewUrl} from '@/api/common.js'
   import {
      getActivityDetail,
      activityReport
   } from '@/api/activity.js';
   export default {
      components: {
         UButton
      },
      data() {
         return {
            activityInfo: {
@@ -79,12 +89,17 @@
               activityType: '',
               limitUserNum:'',
            },
            isCollect:false,
            reportBtn:false,
            detailId: null, // 存储接收的参数
            reportFrom: {
               activityId: '',
               cancel: false, //报名接口默认我false
            }
            },
            collectForm:{
               collectType:'',
               refId:'',
            },
         };
      },
      onLoad(options) {
@@ -96,6 +111,20 @@
         }
      },
      methods: {
         collect(){
            this.collectForm.collectType = 'activity'
            this.collectForm.refId = this.detailId
            changeCollect(this.collectForm).then(res=>{
               if (res.statusCode === 200) {
                  this.isCollect = true;
                  uni.showToast({
                     title: res.data.msg, // 提示文字
                     icon: 'success', // 图标类型（success/loading/none）
                     mask: true // 是否显示透明蒙层（防止触摸穿透）
                  });
               }
            })
         },
         //报名
         activityReport() {
            this.reportFrom.activityId = this.detailId
@@ -111,8 +140,10 @@
               
            })
         },
         getPreviewUrl(params){
            return getPreviewUrl(params);
         getUrl(params){
            getFilePreviewUrl(params).then(res =>{
               return res.data.data
            })
         },
         getActivityDetail(id) {
            uni.showLoading({
@@ -120,6 +151,7 @@
            });
            getActivityDetail(id).then(res => {
               uni.hideLoading();
               console.log(res.data)
               if (res.statusCode === 200) {
                  //赋值
                  this.activityInfo.coverType = res.data.data.coverType;
@@ -132,7 +164,7 @@
                  this.activityInfo.activityType = res.data.data.activityType;
                  this.activityInfo.limitUserNum = res.data.data.limitUserNum;
                  this.reportBtn = res.data.data.isReport;
						
                  this.isCollect = res.data.data.isCollect;
               }
            })
         },
@@ -277,4 +309,10 @@
      height: 40rpx;
      margin-bottom: 10rpx;
   }
   .btn-container {
       display: flex;
       justify-content: center;
       align-items: center;
       margin-top: 8px; /* 与上方标题保持间距 */
   }
</style>