fix(mini): 大厅卡片宽度统一+活动详情页分享按钮

大厅卡片宽度:
- 移除hl-head/hl-hub/hl-cards/hl-detail/hl-post的额外左右margin
- 根容器已有padding 24rpx,卡片不再双重缩窄
- 与资讯页面卡片宽度保持一致

活动详情页分享:
- 添加useShareAppMessage分享配置(标题+路径+封面)
- 标题区右侧添加圆形分享按钮(openType=share)
- 资讯详情页已有分享按钮,无需修改
This commit is contained in:
Pine
2026-09-02 09:42:52 +08:00
parent ff0f5e6ed5
commit 327bc64893
3 changed files with 26 additions and 8 deletions
@@ -1,5 +1,5 @@
import { View, Text, Input, Picker, Button, Image, RichText } from '@tarojs/components';
import Taro from '@tarojs/taro';
import Taro, { useShareAppMessage } from '@tarojs/taro';
import { useState, useEffect } from 'react';
import { useRouter } from '@tarojs/taro';
import { getEventDetail, submitBooking, getMyBookingForEvent, fmtEvt, payBooking, bookingPayStatus, requestWxPay, priceText } from '@/utils/booking';
@@ -48,6 +48,15 @@ export default function EventDetail() {
const router = useRouter();
const id = router.params && router.params.id;
/* 分享配置 */
useShareAppMessage(() => {
return {
title: ev ? ev.title : '云超服活动',
path: `/pages-extra/event-detail/index?id=${id}`,
imageUrl: ev?.image || '',
};
});
const [ev, setEv] = useState(null);
const [err, setErr] = useState('');
const [loading, setLoading] = useState(true);
@@ -242,7 +251,12 @@ export default function EventDetail() {
</View>
<View className="ed-body">
<Text className="ed-title">{ev.title}</Text>
<View className="ed-title-row">
<Text className="ed-title">{ev.title}</Text>
<Button className="ed-share-btn" openType="share">
<View className="ic ic-share" />
</Button>
</View>
{ev.subtitle && <Text className="ed-sub">{ev.subtitle}</Text>}
<View className="ed-info">
@@ -29,7 +29,11 @@
/* 正文 */
.ed-body { padding: 30rpx 32rpx 8rpx; }
.ed-title { display: block; font-size: 40rpx; font-weight: 800; color: #23315c; line-height: 1.35; }
.ed-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16rpx; }
.ed-title { flex: 1; min-width: 0; display: block; font-size: 40rpx; font-weight: 800; color: #23315c; line-height: 1.35; }
.ed-share-btn { flex: none; width: 64rpx; height: 64rpx; padding: 0; margin: 0; border-radius: 50%; background: rgba(99,132,255,0.1); border: none; display: flex; align-items: center; justify-content: center; }
.ed-share-btn::after { border: none; }
.ed-share-btn .ic { width: 32rpx; height: 32rpx; color: #6b8bff; }
.ed-sub { display: block; font-size: 26rpx; color: #9aa4c6; margin-top: 10rpx; }
.ed-info { margin-top: 28rpx; background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1rpx solid rgba(255,255,255,0.12); border-radius: 16px; padding: 8rpx 28rpx; }
+5 -5
View File
@@ -13,7 +13,7 @@
.hl-scroll-pad { height: 200rpx; }
.hl-pad { padding-bottom: 60rpx; }
.hl-head {
margin: 8rpx 24rpx 20rpx;
margin: 8rpx 0 20rpx;
display: flex;
align-items: flex-end;
justify-content: space-between;
@@ -33,7 +33,7 @@
box-shadow: 0 8rpx 22rpx rgba(98,132,255,.28); } }
/* Hub 四宫格 */
.hl-hub { margin: 0 24rpx; display: grid; grid-template-columns: 1fr 1fr; gap: 20rpx; }
.hl-hub { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20rpx; }
.hl-hub-card { background: #fff; border-radius: 24rpx; padding: 30rpx 28rpx; box-shadow: 0 8rpx 30rpx rgba(60, 90, 180, .06);
&.hot { background: linear-gradient(135deg, #eef2ff, #f4efff); } }
.hl-hub-num { font-size: 44rpx; font-weight: 800; color: #3a5fe0; }
@@ -41,7 +41,7 @@
.hl-hub-desc { font-size: 21rpx; color: #9aa7bd; margin-top: 8rpx; line-height: 1.5; }
/* 通用卡片列表 */
.hl-cards { margin: 0 24rpx; }
.hl-cards { margin: 0; }
.hl-card { background: #fff; border-radius: 24rpx; padding: 26rpx 28rpx; margin-bottom: 20rpx;
box-shadow: 0 8rpx 30rpx rgba(60, 90, 180, .06); }
.hl-tags { display: flex; flex-wrap: wrap; gap: 10rpx; }
@@ -57,7 +57,7 @@
.hl-foot { display: flex; justify-content: space-between; margin-top: 14rpx; font-size: 21rpx; color: #9aa7bd; }
/* 详情 */
.hl-detail { margin: 24rpx 24rpx 20rpx; background: #fff; border-radius: 24rpx; padding: 30rpx 30rpx 34rpx;
.hl-detail { margin: 24rpx 0 20rpx; background: #fff; border-radius: 24rpx; padding: 30rpx 30rpx 34rpx;
box-shadow: 0 8rpx 30rpx rgba(60, 90, 180, .06); }
.hl-dtitle { display: block; font-size: 36rpx; font-weight: 800; color: #1c2b4a; margin-top: 14rpx; }
.hl-meta { display: flex; flex-wrap: wrap; gap: 20rpx; margin-top: 10rpx; font-size: 22rpx; color: #9aa7bd; }
@@ -81,7 +81,7 @@
color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34rpx; font-weight: 700; flex: none; }
/* 帖子 */
.hl-post { background: #fff; border-radius: 24rpx; padding: 26rpx 28rpx; margin: 0 24rpx 20rpx;
.hl-post { background: #fff; border-radius: 24rpx; padding: 26rpx 28rpx; margin: 0 0 20rpx;
box-shadow: 0 8rpx 30rpx rgba(60, 90, 180, .06); }
.hl-post-head { display: flex; align-items: center; gap: 16rpx; }
.hl-pauthor { font-size: 25rpx; font-weight: 600; color: #1c2b4a; }