购物车点击事件，分享视频封面问题

zxl

2025-08-13 9e4ae356ed626e3089f31d5b40fb10a476efe7c4

 pages/mine/activity/detail.vue

@@ -1,5 +1,5 @@
<template>
   <view class="container"  @touchstart="touchStart" @touchend="touchEnd">
   <view class="container" @touchstart="touchStart" @touchend="touchEnd">
      <!-- 顶部海报图 -->
      <!-- 动态封面区域 -->
      <view class="cover-container">
@@ -7,11 +7,11 @@
         <block v-if="activityInfo.coverType === 'image'">
            <image :src="activityInfo.url" class="activity-cover" />
         </block>
         <block v-if=" activityInfo.coverType === 'video'">
         <block v-else-if=" activityInfo.coverType === 'video'">
            <video :src="activityInfo.url" @play="handleVideoPlay" class="activity-cover"></video>
         </block>
         <!-- 文字类型 -->
         <block v-if="activityInfo.coverType === 'text'">
         <block v-else-if="activityInfo.coverType === 'text'">
            <view class="text-cover">
               <text class="cover-text">{{ activityInfo.cover }}</text>
            </view>
@@ -40,7 +40,7 @@
               <text class="location">最大人数：{{ activityInfo.limitUserNum || '暂无' }}</text>
            </view>
            <view>
               <text class="location">活动类型：{{ activityInfo.activityType || '暂无' }}</text>
               <text class="location">活动类型：{{ activityInfo.activityType === 'online' ? '线上' : '线下' }}</text>
            </view>
         </view>
         <view class="tags">
@@ -55,8 +55,8 @@
         <rich-text :nodes="activityInfo.activityContent" class="rich-text-content"></rich-text>
      </view>
      <!-- 报名状态 -->
      <view class="status-bar" :style="{ backgroundColor: statusBarColor }">
         <u-button class="signup-btn" @click.stop="activityReport()"
      <view class="status-bar">
         <u-button type="success" 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"
@@ -67,23 +67,15 @@
</template>

<script>
   import UButton from '@/uview-components/uview-ui/components/u-button/u-button.vue';
   import UIcon from '@/uview-components/uview-ui/components/u-icon/u-icon.vue';
   import '@/components/uview-components/uview-ui';
   import {
      changeCollect
   } from '@/api/collect.js'
   import {
      getFilePreviewUrl
   } from '@/api/common.js'
   import {
      getActivityDetail,
      activityReport
   } from '@/api/activity.js';
   export default {
      components: {
         UButton,
         UIcon,
      },
      data() {
         return {
            startX: 0,
@@ -195,7 +187,9 @@
                  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>' + res.data.data.activityContent;
                  this.activityInfo.activityContent = '<h2>活动介绍</h2>' + this.processRichText(res.data.data.activityContent);
						
						
                  this.activityInfo.activityType = res.data.data.activityType;
                  this.activityInfo.limitUserNum = res.data.data.limitUserNum;
                  this.reportBtn = res.data.data.isReport;
@@ -203,6 +197,26 @@
                  this.activityInfo.url = res.data.data.url;
               }
            })
         },
         // 在获取富文本数据后处理
         processRichText(content) {
           // 处理图片
           content = content.replace(/<img[^>]*>/gi, (match) => {
             if (!/style=['"]/.test(match)) {
               return match.replace(/<img/, '<img style="max-width:100% !important;height:auto !important;display:block;margin:10px auto;border-radius:8rpx;"');
             }
             return match;
           });
			  
           // 处理视频
           content = content.replace(/<video[^>]*>/gi, (match) => {
             if (!/style=['"]/.test(match)) {
               return match.replace(/<video/, '<video style="max-width:100% !important;height:auto !important;display:block;margin:10px auto;"');
             }
             return match;
           });
			  
           return content;
         },
         loadDetailData() {
            //获得详情接口
@@ -221,7 +235,6 @@
      width: 100%;
      height: 400rpx;
      overflow: hidden;
      background-color: #f5f5f5;
   }

   /* 图片/视频封面样式 */
@@ -239,12 +252,12 @@
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      // background: linear-gradient(135deg, #38a169 0%, #48bb78 100%);
      padding: 40rpx;
   }

   .cover-text {
      color: #fff;
      color: #0c6343;
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
@@ -295,11 +308,25 @@
      margin-bottom: 15rpx;
   }

   /* 修改后的样式 */
   .status-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 10px 15px;
      padding: 20rpx 30rpx;
      justify-content: space-between;
      background-color: #fff;
      box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
      z-index: 100;
   }

   /* 调整容器底部内边距 */
   .container {
      padding-bottom: 120rpx;
   }

   .signup-btn {
@@ -355,53 +382,19 @@

   .rich-text-container {
      padding: 15px;
      overflow: hidden;
      /* 防止内容溢出 */
   }

   .rich-text-content {
      width: 100%;
      max-width: 100%;  /* 限制最大宽度 */
      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;
      font-size: 28rpx;
      word-wrap: break-word;
      /* 长单词换行 */
      overflow: hidden;
      /* 隐藏溢出内容 */
   }
</style>