Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
0dc8f481 1 parent da3cf394

refactor(ShareButton): 将内联样式提取为CSS类并移除注释代码 

style(ActivitiesCover): 移除位置获取失败的重试按钮和注释代码
Inline Side-by-side
Showing 2 changed files with 242 additions and 217 deletions
......@@ -13,7 +13,7 @@
<view class="popover-arrow"></view>
<view class="popover-content">
<view class="popover-item" style="padding: 0; padding-top: 8rpx;">
<button id="share" data-name="shareBtn" open-type="share" style="font-size: 28rpx;padding: 0; background-color: white; line-height: 2;">活动</button>
<button id="share" data-name="shareBtn" open-type="share" class="share-native-button">活动</button>
</view>
<view class="popover-divider"></view>
<view @tap="handleSharePoster" class="popover-item">
......@@ -164,6 +164,31 @@ const handleSharePoster = () => {
z-index: 9998;
}
// 原生button样式重置
.share-native-button {
border: none !important;
outline: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
font-size: 28rpx !important;
line-height: 2 !important;
color: #333 !important;
width: 100% !important;
height: auto !important;
text-align: center !important;
// 去除微信小程序button的默认样式
&::after {
border: none !important;
}
// 去除点击态样式
&:active {
background: transparent !important;
}
}
// 动画
@keyframes popoverFadeIn {
from {
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-06 18:09:54
* @LastEditTime: 2025-09-07 11:09:26
* @FilePath: /lls_program/src/pages/ActivitiesCover/index.vue
* @Description: 活动海报页面 - 展示活动信息并处理定位授权
-->
......@@ -30,7 +30,7 @@
<view class="tip-icon">📍</view>
<view class="tip-text">需要获取您的位置信息来参与活动</view>
</view>
<view class="tip-retry">点击重新获取</view>
<!-- <view class="tip-retry">点击重新获取</view> -->
</view>
<!-- 位置获取失败提示 -->
......@@ -39,7 +39,7 @@
<view class="tip-icon">⚠️</view>
<view class="tip-text">可能是网络问题，获取位置信息失败</view>
</view>
<view class="tip-retry">点击重新获取</view>
<!-- <view class="tip-retry">点击重新获取</view> -->
</view>
<nut-button
......@@ -561,219 +561,219 @@ const onSelectSave = (item) => {
/**
* 开始生成海报
*/
const startGeneratePoster = async () => {
// 配置海报参数
base = {
width: 1024,
height: 1334,
backgroundColor: '',
debug: false,
blocks: [
{ // 上部分canvas画布高度
x: 40,
y: 20,
width: 950,
height: 950,
paddingLeft: 0,
paddingRight: 0,
borderWidth: 1,
borderColor: '#fff',
backgroundColor: '#fff',
borderRadiusGroup: [16, 16, 0, 0],
},
{ // 活动时间背景图
x: 40,
y: 730,
height: 75,
paddingLeft: 80,
paddingRight: 0,
borderWidth: 0,
text: {
x: 0,
y: 0,
text: activityData.value.dateRange,
fontSize: 40,
color: '#222',
opacity: 1,
baseLine: 'top',
lineHeight: 48,
lineNum: 2,
textAlign: 'left',
zIndex: 0,
},
backgroundColor: '#FFF9F3',
borderRadiusGroup: [0, 25, 25, 0],
},
{ // 活动地点背景图
x: 40,
y: 830,
height: 75,
paddingLeft: 80,
paddingRight: 0,
borderWidth: 0,
text: {
x: 0,
y: 0,
text: '上海市黄浦区南京东路',
fontSize: 40,
color: '#222',
opacity: 1,
baseLine: 'top',
lineHeight: 48,
lineNum: 2,
textAlign: 'left',
zIndex: 0,
},
backgroundColor: '#FFF9F3',
borderRadiusGroup: [0, 25, 25, 0],
},
{ // 下部分canvas画布高度
x: 40,
y: 1060,
width: 950,
height: 250,
paddingLeft: 0,
paddingRight: 0,
borderWidth: 1,
borderColor: '#fff',
backgroundColor: '#fff',
borderRadiusGroup: [0, 0, 16, 16],
}
],
texts: [
{
x: 80,
y: 630,
text: activityData.value.title,
fontSize: 50,
color: '#000',
opacity: 1,
baseLine: 'middle',
lineHeight: 60,
lineNum: 2,
textAlign: 'left',
width: 800,
zIndex: 999,
fontFamily: 'Monospace',
},
{
x: 135,
y: 770,
text: activityData.value.dateRange,
fontSize: 40,
color: '#222',
opacity: 1,
baseLine: 'middle',
lineHeight: 48,
lineNum: 2,
textAlign: 'left',
zIndex: 999,
},
{
x: 135,
y: 870,
text: '上海市黄浦区南京东路',
fontSize: 40,
color: '#222',
opacity: 1,
baseLine: 'middle',
lineHeight: 48,
lineNum: 2,
textAlign: 'left',
zIndex: 999,
},
{
x: 300,
y: 1150,
text: nickname.value,
fontSize: 50,
color: '#333',
opacity: 1,
baseLine: 'middle',
textAlign: 'left',
lineHeight: 50,
lineNum: 1,
zIndex: 999,
},
{
x: 300,
y: 1220,
text: '邀请你一起来活动！',
fontSize: 42,
color: '#8F9399',
opacity: 1,
baseLine: 'middle',
textAlign: 'left',
lineHeight: 42,
lineNum: 1,
zIndex: 999,
}
],
images: [
{
url: qrcode_url,
width: 949,
height: 108,
x: 40,
y: 960,
zIndex: 10,
},
{
url: qrcode_url,
width: 950,
height: 500,
x: 40,
y: 20,
borderRadiusGroup: [18, 18, 0, 0],
zIndex: 10,
},
{
url: qrcode_url,
width: 40,
height: 40,
x: 80,
y: 750,
borderRadius: 100,
borderWidth: 0,
zIndex: 10,
},
{
url: qrcode_url,
width: 35,
height: 40,
x: 80,
y: 850,
borderRadius: 100,
borderWidth: 0,
zIndex: 10,
},
{
url: qrcode_url,
width: 170,
height: 170,
x: 80,
y: 1090,
borderRadius: 100,
borderWidth: 0,
zIndex: 10,
},
{
url: qrcode_url,
width: 170,
height: 170,
x: 750,
y: 1090,
borderRadius: 100,
borderWidth: 0,
zIndex: 10,
},
],
lines: []
}
startDraw.value = true
if (!posterPath.value) Taro.showLoading({ title: '生成海报中...' })
}
// const startGeneratePoster = async () => {
// // 配置海报参数
// base = {
// width: 1024,
// height: 1334,
// backgroundColor: '',
// debug: false,
// blocks: [
// { // 上部分canvas画布高度
// x: 40,
// y: 20,
// width: 950,
// height: 950,
// paddingLeft: 0,
// paddingRight: 0,
// borderWidth: 1,
// borderColor: '#fff',
// backgroundColor: '#fff',
// borderRadiusGroup: [16, 16, 0, 0],
// },
// { // 活动时间背景图
// x: 40,
// y: 730,
// height: 75,
// paddingLeft: 80,
// paddingRight: 0,
// borderWidth: 0,
// text: {
// x: 0,
// y: 0,
// text: activityData.value.dateRange,
// fontSize: 40,
// color: '#222',
// opacity: 1,
// baseLine: 'top',
// lineHeight: 48,
// lineNum: 2,
// textAlign: 'left',
// zIndex: 0,
// },
// backgroundColor: '#FFF9F3',
// borderRadiusGroup: [0, 25, 25, 0],
// },
// { // 活动地点背景图
// x: 40,
// y: 830,
// height: 75,
// paddingLeft: 80,
// paddingRight: 0,
// borderWidth: 0,
// text: {
// x: 0,
// y: 0,
// text: '上海市黄浦区南京东路',
// fontSize: 40,
// color: '#222',
// opacity: 1,
// baseLine: 'top',
// lineHeight: 48,
// lineNum: 2,
// textAlign: 'left',
// zIndex: 0,
// },
// backgroundColor: '#FFF9F3',
// borderRadiusGroup: [0, 25, 25, 0],
// },
// { // 下部分canvas画布高度
// x: 40,
// y: 1060,
// width: 950,
// height: 250,
// paddingLeft: 0,
// paddingRight: 0,
// borderWidth: 1,
// borderColor: '#fff',
// backgroundColor: '#fff',
// borderRadiusGroup: [0, 0, 16, 16],
// }
// ],
// texts: [
// {
// x: 80,
// y: 630,
// text: activityData.value.title,
// fontSize: 50,
// color: '#000',
// opacity: 1,
// baseLine: 'middle',
// lineHeight: 60,
// lineNum: 2,
// textAlign: 'left',
// width: 800,
// zIndex: 999,
// fontFamily: 'Monospace',
// },
// {
// x: 135,
// y: 770,
// text: activityData.value.dateRange,
// fontSize: 40,
// color: '#222',
// opacity: 1,
// baseLine: 'middle',
// lineHeight: 48,
// lineNum: 2,
// textAlign: 'left',
// zIndex: 999,
// },
// {
// x: 135,
// y: 870,
// text: '上海市黄浦区南京东路',
// fontSize: 40,
// color: '#222',
// opacity: 1,
// baseLine: 'middle',
// lineHeight: 48,
// lineNum: 2,
// textAlign: 'left',
// zIndex: 999,
// },
// {
// x: 300,
// y: 1150,
// text: nickname.value,
// fontSize: 50,
// color: '#333',
// opacity: 1,
// baseLine: 'middle',
// textAlign: 'left',
// lineHeight: 50,
// lineNum: 1,
// zIndex: 999,
// },
// {
// x: 300,
// y: 1220,
// text: '邀请你一起来活动！',
// fontSize: 42,
// color: '#8F9399',
// opacity: 1,
// baseLine: 'middle',
// textAlign: 'left',
// lineHeight: 42,
// lineNum: 1,
// zIndex: 999,
// }
// ],
// images: [
// {
// url: qrcode_url,
// width: 949,
// height: 108,
// x: 40,
// y: 960,
// zIndex: 10,
// },
// {
// url: qrcode_url,
// width: 950,
// height: 500,
// x: 40,
// y: 20,
// borderRadiusGroup: [18, 18, 0, 0],
// zIndex: 10,
// },
// {
// url: qrcode_url,
// width: 40,
// height: 40,
// x: 80,
// y: 750,
// borderRadius: 100,
// borderWidth: 0,
// zIndex: 10,
// },
// {
// url: qrcode_url,
// width: 35,
// height: 40,
// x: 80,
// y: 850,
// borderRadius: 100,
// borderWidth: 0,
// zIndex: 10,
// },
// {
// url: qrcode_url,
// width: 170,
// height: 170,
// x: 80,
// y: 1090,
// borderRadius: 100,
// borderWidth: 0,
// zIndex: 10,
// },
// {
// url: qrcode_url,
// width: 170,
// height: 170,
// x: 750,
// y: 1090,
// borderRadius: 100,
// borderWidth: 0,
// zIndex: 10,
// },
// ],
// lines: []
// }
// startDraw.value = true
// if (!posterPath.value) Taro.showLoading({ title: '生成海报中...' })
// }
/**
* 海报绘制成功回调
......