From 50eac4101c827bc7202b8259534eed70aa909a49 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期三, 15 十月 2025 00:42:55 +0800
Subject: [PATCH] Merge branch 'dev_fix_sub' of http://42.193.1.25:9521/r/lmk-shop-wx into dev_fix_sub
---
pages/mine/activity/detail.vue | 290 ++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 223 insertions(+), 67 deletions(-)
diff --git a/pages/mine/activity/detail.vue b/pages/mine/activity/detail.vue
index 4c5bb5b..9c2680e 100644
--- a/pages/mine/activity/detail.vue
+++ b/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-else-if=" activityInfo.coverType === 'video'">
+ <video :src="activityInfo.url" @play="handleVideoPlay" class="activity-cover"></video>
+ </block>
+ <!-- 鏂囧瓧绫诲瀷 -->
+ <block v-else-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">
@@ -37,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">
@@ -45,28 +48,38 @@
</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>
+ <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"
+ :color="isCollect ? '#ffcc00' : '#999'"></u-icon>
+ </view>
</view>
</view>
</template>
<script>
- import {getPreviewUrl} from '@/api/common.js'
+ import '@/components/uview-components/uview-ui';
+ import {
+ changeCollect
+ } from '@/api/collect.js'
import {
getActivityDetail,
activityReport
} from '@/api/activity.js';
+ import { getSessionId, userAction } from "@/api/userAction.js";
export default {
data() {
return {
+ startX: 0,
activityInfo: {
coverType: '',
cover: '',
@@ -77,17 +90,58 @@
tags: [],
activityContent: '',
activityType: '',
- limitUserNum:'',
+ limitUserNum: '',
+ url: '',
},
- reportBtn:false,
+ isCollect: false,
+ reportBtn: false,
detailId: null, // 瀛樺偍鎺ユ敹鐨勫弬鏁�
reportFrom: {
activityId: '',
cancel: false, //鎶ュ悕鎺ュ彛榛樿鎴慺alse
- }
+ },
+ collectForm: {
+ collectType: '',
+ refId: '',
+ },
+ pageSessionNo:"",
+ sendOnShow:false,
+ actionParam:{
+ sessionId:'',
+ actionType:"PAGE",
+ joinType:"SELF",
+ pageCode:"ACTIVITY_DETAIL",
+ pageParams:"{}",
+ pageStatus:"JOIN",
+ pageType:"DETAIL"
+ }
};
},
+ onUnload() {
+ let param = Object.assign({}, this.actionParam);
+ if (this.sendOnShow)return
+ param.pageStatus = "LEAVE"
+ userAction(param)
+ },
+ onHide() {
+ this.startHidenTime = Date.now()
+ let param = Object.assign({}, this.actionParam);
+ this.sendOnShow = true;
+ param.pageStatus = "LEAVE"
+ userAction(param)
+ },
+ onShow() {
+ getSessionId().then(res=>{
+ this.pageSessionNo = res.data.data
+ this.actionParam.sessionId = this.pageSessionNo
+ if(this.pageSessionNo){
+ let param = Object.assign({}, this.actionParam);
+ userAction(param)
+ }
+ })
+ },
onLoad(options) {
+ this.actionParam.pageParams = JSON.stringify(options)
// 鎺ユ敹 URL 鍙傛暟
if (options.id) {
this.detailId = options.id;
@@ -96,6 +150,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', // 鍥炬爣绫诲瀷锛坰uccess/loading/none锛�
+ mask: true // 鏄惁鏄剧ず閫忔槑钂欏眰锛堥槻姝㈣Е鎽哥┛閫忥級
+ });
+ }
+ this.getActivityDetail(this.detailId);
+ })
+
+ },
//鎶ュ悕
activityReport() {
this.reportFrom.activityId = this.detailId
@@ -108,11 +204,9 @@
mask: true // 鏄惁鏄剧ず閫忔槑钂欏眰锛堥槻姝㈣Е鎽哥┛閫忥級
});
}
-
+
})
- },
- getPreviewUrl(params){
- return getPreviewUrl(params);
+
},
getActivityDetail(id) {
uni.showLoading({
@@ -120,6 +214,7 @@
});
getActivityDetail(id).then(res => {
uni.hideLoading();
+ console.log(res.data)
if (res.statusCode === 200) {
//璧嬪��
this.activityInfo.coverType = res.data.data.coverType;
@@ -128,16 +223,38 @@
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>' + 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;
-
+ this.isCollect = res.data.data.isCollect;
+ 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() {
-
//鑾峰緱璇︽儏鎺ュ彛
this.getActivityDetail(this.detailId);
@@ -150,39 +267,40 @@
<style lang="scss">
/* 灏侀潰瀹瑰櫒 */
.cover-container {
- position: relative;
- width: 100%;
- height: 400rpx;
- overflow: hidden;
- background-color: #f5f5f5;
+ position: relative;
+ width: 100%;
+ height: 400rpx;
+ overflow: hidden;
}
-
+
/* 鍥剧墖/瑙嗛灏侀潰鏍峰紡 */
.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, #38a169 0%, #48bb78 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: #0c6343;
+ 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;
@@ -226,28 +344,40 @@
margin-bottom: 15rpx;
}
+ /* 淇敼鍚庣殑鏍峰紡 */
.status-bar {
- padding: 25rpx 30rpx;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
display: flex;
- justify-content: space-between;
align-items: center;
- color: #fff;
- font-size: 28rpx;
- margin: 20rpx 0;
+ 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 {
- 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 +407,30 @@
height: 40rpx;
margin-bottom: 10rpx;
}
+
+ .btn-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 8px;
+ /* 涓庝笂鏂规爣棰樹繚鎸侀棿璺� */
+ }
+
+ .rich-text-container {
+ padding: 15px;
+ overflow: hidden;
+ /* 闃叉鍐呭婧㈠嚭 */
+ }
+
+ .rich-text-content {
+ width: 100%;
+ max-width: 100%; /* 闄愬埗鏈�澶у搴� */
+ line-height: 1.6;
+ color: #333;
+ font-size: 28rpx;
+ word-wrap: break-word;
+ /* 闀垮崟璇嶆崲琛� */
+ overflow: hidden;
+ /* 闅愯棌婧㈠嚭鍐呭 */
+ }
</style>
\ No newline at end of file
--
Gitblit v1.8.0