fix(mini): 大厅卡片宽度统一+活动详情页分享按钮
大厅卡片宽度: - 移除hl-head/hl-hub/hl-cards/hl-detail/hl-post的额外左右margin - 根容器已有padding 24rpx,卡片不再双重缩窄 - 与资讯页面卡片宽度保持一致 活动详情页分享: - 添加useShareAppMessage分享配置(标题+路径+封面) - 标题区右侧添加圆形分享按钮(openType=share) - 资讯详情页已有分享按钮,无需修改
This commit is contained in:
@@ -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; }
|
||||
|
||||
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user