library-wechat/subpkg/pages/activity-detail/activity-detail.vue

<template>
	<view class="activity-detail">
		<image class="activity-img" :src="detail.imgUrl"></image>
    <view class="activity-base">
      <text class="title">{{ detail.title }}</text>
      <view class="time">
        <uni-icons class="detail-icon" custom-prefix="iconfont" type="icon-shijian" size="15"></uni-icons>
        <text>{{ detail.time }}</text>
      </view>
      <view class="location">
        <uni-icons class="detail-icon" type="location" size="20"></uni-icons>
        <text>{{ detail.location }}</text>
      </view>
    </view>
    
    <view class="activity-content">
      <text class="content-title">活动介绍</text>
      <text class="content-desc">{{ detail.content }}</text>
    </view>
    
    <view class="detail-bottom">
      <view class="detail-left">
        <!-- #ifdef MP-WEIXIN -->
        <button open-type="share" class="handle-btn">
          <uni-icons custom-prefix="iconfont" type="icon-fenxiang01" size="20"></uni-icons>
          <text class="share-text">分享</text>
        </button>
        <!-- #endif -->
        <button class="handle-btn" @click="toggleCollect">
          <!-- 已收藏 / 未收藏 自动切换图标 -->
          <uni-icons :type="isCollected ? 'heart-filled' : 'heart'" size="20" color="#ff4444"></uni-icons>
          <text class="share-text">{{ isCollected ? '已收藏' : '收藏' }}</text>
        </button>
      </view>
      
      <button class="join-btn" :class="detail.status === 0 ? 'disabled-btn' : ''">
        <text>{{ detail.status === 1 ? '我要参加' : '活动结束' }}</text>
      </button>
    </view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			detail: {
				imgUrl: "",
				title: "",
				time: "",
				location: "",
				content: "",
				status: 1 // 1=可参加 0=已结束
			},
			isCollected: false, // 收藏状态
			activityId: "" // 活动唯一标识（用标题作为唯一ID）
		};
	},
	
	onLoad(options) {
		const title = options.title || "";
		this.activityId = title; // 用活动标题作为唯一标识
		this.getActivityDetail(title);
	},
	
	methods: {
		/**
		 * 模拟 获取活动详情接口
		 * @param {String} title 活动标题
		 */
		getActivityDetail(title) {
			uni.showLoading({ title: "加载中..." });
			setTimeout(() => {
				const res = {
					imgUrl: "https://qiniu.aiyxlib.com/1605060269830",
					title: title,
					time: "2025-11-03 00:00 ~ 2025-11-09 00:00",
					location: "图书馆一楼",
					content: "“酷爱书荟书香满园”作为酷车小镇的品牌活动，此次活动以“世界读书日”为契机，旨在推动“全民阅读”的文化风尚，激发公众的阅读兴趣，营造浓厚的阅读氛围。",
					// 模拟状态：标题包含数字3/6/9则结束
					status: title.includes("3") || title.includes("6") || title.includes("9") ? 0 : 1
				};
				this.detail = res;
				// 加载完活动数据后，检查收藏状态
				this.checkCollectStatus();
				uni.hideLoading();
			}, 1000);
		},
		
		// 检查当前活动是否已收藏
		checkCollectStatus() {
			const collectList = uni.getStorageSync('activityCollectList') || [];
			this.isCollected = collectList.includes(this.activityId);
		},
		
		// 切换收藏 / 取消收藏
		toggleCollect() {
			let collectList = uni.getStorageSync('activityCollectList') || [];
			
			if (this.isCollected) {
				// 取消收藏
				collectList = collectList.filter(id => id !== this.activityId);
				uni.showToast({ title: '取消收藏成功', icon: 'success' });
			} else {
				// 添加收藏
				collectList.push(this.activityId);
				uni.showToast({ title: '收藏成功', icon: 'success' });
			}
			
			// 保存到本地缓存
			uni.setStorageSync('activityCollectList', collectList);
			// 更新状态
			this.isCollected = !this.isCollected;
		}

    // 真实接口示例（备用）
    // getActivityDetail(title) {
    //   uni.showLoading();
    //   uni.request({
    //     url: "https://xxx.com/api/activity/detail",
    //     method: "GET",
    //     data: { title: title },
    //     success: (res) => {
    //       this.detail = res.data;
    //       this.checkCollectStatus();
    //     },
    //     complete: () => {
    //       uni.hideLoading();
    //     }
    //   });
    // }
	},
	
	// 微信分享
	onShareAppMessage() {
		return {
			title: this.detail.title,
			path: "/subpkg/pages/activity-detail/activity-detail?title=" + this.detail.title,
			imageUrl: this.detail.imgUrl
		};
	}
};
</script>

<style lang="scss" scoped>
.activity-img{
  width: 100%;
  height: 150px;
}
.activity-base{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #fff;
  padding: 15px;
  .title{
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding-bottom: 10px;
  }
  .time,
  .location {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
    color: #999;
    .detail-icon{
      width: 20px;
    }
  }
  .time {
    padding-bottom: 10px;
    .detail-icon{
      margin-top: 2px;
      margin-left: 2px;
    }
  }
}
.activity-content{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #fff;
  margin-top: 20px;
  padding: 15px 0;
  
  .content-title{
    position: relative;
    font-size: 16px;
    font-weight: bold;
		color: #333;
    padding-left: 12px;
    &::before{
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -9px;
      content: "";
      width: 4px;
      height: 18px;
      background-color: #01a4fe;
    }
  }
  .content-desc{
    padding: 15px;
    font-size: 14px;
    line-height: 24px;
  }
}
</style>