导入组件代码清理

zxl

3 天以前 2063c7f98867bf696bc0d1e9c6a069844d61528a

 pages/mine/activity/detail.vue

@@ -1,18 +1,21 @@
<template>
   <view class="container">
   <view class="container"  @touchstart="touchStart" @touchend="touchEnd">
      <!-- 顶部海报图 -->
      <!-- 动态封面区域 -->
      <view class="cover-container">
        <!-- 图片类型 -->
        <block v-if="activityInfo.coverType === '图片' || activityInfo.coverType === '视频'">
          <image :src="getPreviewUrl(activityInfo.cover)" mode="aspectFill" class="activity-cover" />
        </block>
        <!-- 文字类型 -->
        <block v-if="activityInfo.coverType === '文字'">
          <view class="text-cover">
            <text class="cover-text">{{ activityInfo.cover }}</text>
          </view>
        </block>
         <!-- 图片类型 -->
         <block v-if="activityInfo.coverType === 'image'">
            <image :src="activityInfo.url" class="activity-cover" />
         </block>
         <block v-if=" activityInfo.coverType === 'video'">
            <video :src="activityInfo.url" @play="handleVideoPlay" class="activity-cover"></video>
         </block>
         <!-- 文字类型 -->
         <block v-if="activityInfo.coverType === 'text'">
            <view class="text-cover">
               <text class="cover-text">{{ activityInfo.cover }}</text>
            </view>
         </block>
      </view>

      <!-- 活动基本信息 -->
@@ -23,7 +26,7 @@
               <text class="time">
                  开始时间：{{ activityInfo.startTime }}
               </text>
					

            </view>
            <view>
               <text class="time">
@@ -45,28 +48,32 @@
         </view>
      </view>

		


      <!-- 活动详情内容 -->
      <view class="content-section">
         <rich-text :nodes="activityInfo.activityContent"></rich-text>
      <view class="rich-text-container">
         <rich-text :nodes="activityInfo.activityContent" class="rich-text-content"></rich-text>
      </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>
         <view class="collect-icon" @click.stop="collect()">
            <u-icon :name="isCollect ? 'star-fill' : 'star'" size="52"
               :color="isCollect ? '#ffcc00' : '#999'"></u-icon>
         </view>
      </view>
   </view>
</template>

<script>
   import {getPreviewUrl} from '@/api/common.js'
   import {
      getActivityDetail,
      activityReport
   } from '@/api/activity.js';
import '@/components/uview-components/uview-ui';
   import {changeCollect} from '@/api/collect.js'
   import {getActivityDetail, activityReport} from '@/api/activity.js';
   export default {
      data() {
         return {
            startX: 0,
            activityInfo: {
               coverType: '',
               cover: '',
@@ -77,14 +84,20 @@
               tags: [],
               activityContent: '',
               activityType: '',
               limitUserNum:'',
               limitUserNum: '',
               url: '',
            },
            reportBtn:false,
            isCollect: false,
            reportBtn: false,
            detailId: null, // 存储接收的参数
            reportFrom: {
               activityId: '',
               cancel: false, //报名接口默认我false
            }
            },
            collectForm: {
               collectType: '',
               refId: '',
            },
         };
      },
      onLoad(options) {
@@ -96,6 +109,48 @@
         }
      },
      methods: {
         /**
          * 触摸开始
          * @param {Object} e
          */
         touchStart(e) {
            if (e.touches.length == 1) {
               //设置触摸起始点水平方向位置
               this.startX = e.touches[0].clientX;
            }
         },

         touchEnd(e) {
            if (e.changedTouches.length == 1) {
               //手指移动结束后水平位置
               var endX = e.changedTouches[0].clientX;
               let diff = endX - this.startX;
               if (Math.abs(diff) > 20) {
                  if (diff > 0) {
                     console.log("左滑...");

                  } else {
                     console.log("右滑...");
                  }
               }
            }
         },
         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 // 是否显示透明蒙层（防止触摸穿透）
                  });
               }
               this.getActivityDetail(this.detailId);
            })

         },
         //报名
         activityReport() {
            this.reportFrom.activityId = this.detailId
@@ -108,11 +163,9 @@
                     mask: true // 是否显示透明蒙层（防止触摸穿透）
                  });
               }
					

            })
         },
         getPreviewUrl(params){
            return getPreviewUrl(params);

         },
         getActivityDetail(id) {
            uni.showLoading({
@@ -120,6 +173,7 @@
            });
            getActivityDetail(id).then(res => {
               uni.hideLoading();
               console.log(res.data)
               if (res.statusCode === 200) {
                  //赋值
                  this.activityInfo.coverType = res.data.data.coverType;
@@ -128,16 +182,16 @@
                  this.activityInfo.startTime = res.data.data.startTime;
                  this.activityInfo.endTime = res.data.data.endTime;
                  this.activityInfo.activityLocation = res.data.data.activityLocation;
                  this.activityInfo.activityContent = '<h2>活动介绍</h2>' + '<p>' + res.data.data.activityContent  + '</p>';
                  this.activityInfo.activityContent = '<h2>活动介绍</h2>' + res.data.data.activityContent;
                  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;
                  this.activityInfo.url = res.data.data.url;
               }
            })
         },
         loadDetailData() {

            //获得详情接口
            this.getActivityDetail(this.detailId);

@@ -150,39 +204,41 @@
<style lang="scss">
   /* 封面容器 */
   .cover-container {
     position: relative;
     width: 100%;
     height: 400rpx;
     overflow: hidden;
     background-color: #f5f5f5;
      position: relative;
      width: 100%;
      height: 400rpx;
      overflow: hidden;
      background-color: #f5f5f5;
   }
	

   /* 图片/视频封面样式 */
   .activity-cover {
     width: 100%;
     height: 100%;
     border-radius: 0; /* 与列表页保持一致 */
      width: 100%;
      height: 100%;
      border-radius: 0;
      /* 与列表页保持一致 */
   }
	

   /* 文字封面样式 - 与列表页保持一致 */
   .text-cover {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
     padding: 40rpx;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      padding: 40rpx;
   }
	

   .cover-text {
     color: #fff;
     font-size: 36rpx;
     font-weight: bold;
     text-align: center;
     line-height: 1.4;
     text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
      color: #fff;
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
      line-height: 1.4;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
   }

   .header-image {
      width: 100%;
      height: 400rpx;
@@ -227,27 +283,25 @@
   }

   .status-bar {
      padding: 25rpx 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      font-size: 28rpx;
      margin: 20rpx 0;
      padding: 10px 15px;
      justify-content: space-between;
   }

   .signup-btn {
      background: #fff;
      color: #2196F3;
      padding: 10rpx 30rpx;
      border-radius: 50rpx;
      font-size: 28rpx;
      flex: 1;
      margin-right: 15px;
   }

   .content-section {
      padding: 30rpx;
      background: #fff;
      margin-top: 20rpx;
   .collect-icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f5f5f5;
      border-radius: 8px;
   }

   .footer {
@@ -277,4 +331,64 @@
      height: 40rpx;
      margin-bottom: 10rpx;
   }

   .btn-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 8px;
      /* 与上方标题保持间距 */
   }

   .rich-text-container {
      padding: 15px;
   }

   .rich-text-content {
      line-height: 1.6;
      color: #333;
      font-size: 16px;
   }

   .rich-text-content img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 10px auto;
   }

   .rich-text-content video {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 10px auto;
   }

   .rich-text-content p {
      margin-bottom: 10px;
   }

   .rich-text-content h1,
   .rich-text-content h2,
   .rich-text-content h3,
   .rich-text-content h4 {
      margin: 20px 0 10px;
      color: #222;
   }

   .rich-text-content h1 {
      font-size: 24px;
   }

   .rich-text-content h2 {
      font-size: 22px;
   }

   .rich-text-content h3 {
      font-size: 20px;
   }

   .rich-text-content h4 {
      font-size: 18px;
   }
</style>