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 @@ ...@@ -13,7 +13,7 @@
13 <view class="popover-arrow"></view> 13 <view class="popover-arrow"></view>
14 <view class="popover-content"> 14 <view class="popover-content">
15 <view class="popover-item" style="padding: 0; padding-top: 8rpx;"> 15 <view class="popover-item" style="padding: 0; padding-top: 8rpx;">
16 - <button id="share" data-name="shareBtn" open-type="share" style="font-size: 28rpx;padding: 0; background-color: white; line-height: 2;">活动</button> 16 + <button id="share" data-name="shareBtn" open-type="share" class="share-native-button">活动</button>
17 </view> 17 </view>
18 <view class="popover-divider"></view> 18 <view class="popover-divider"></view>
19 <view @tap="handleSharePoster" class="popover-item"> 19 <view @tap="handleSharePoster" class="popover-item">
...@@ -164,6 +164,31 @@ const handleSharePoster = () => { ...@@ -164,6 +164,31 @@ const handleSharePoster = () => {
164 z-index: 9998; 164 z-index: 9998;
165 } 165 }
166 166
167 +// 原生button样式重置
168 +.share-native-button {
169 + border: none !important;
170 + outline: none !important;
171 + background: transparent !important;
172 + padding: 0 !important;
173 + margin: 0 !important;
174 + font-size: 28rpx !important;
175 + line-height: 2 !important;
176 + color: #333 !important;
177 + width: 100% !important;
178 + height: auto !important;
179 + text-align: center !important;
180 +
181 + // 去除微信小程序button的默认样式
182 + &::after {
183 + border: none !important;
184 + }
185 +
186 + // 去除点击态样式
187 + &:active {
188 + background: transparent !important;
189 + }
190 +}
191 +
167 // 动画 192 // 动画
168 @keyframes popoverFadeIn { 193 @keyframes popoverFadeIn {
169 from { 194 from {
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-06 18:09:54 4 + * @LastEditTime: 2025-09-07 11:09:26
5 * @FilePath: /lls_program/src/pages/ActivitiesCover/index.vue 5 * @FilePath: /lls_program/src/pages/ActivitiesCover/index.vue
6 * @Description: 活动海报页面 - 展示活动信息并处理定位授权 6 * @Description: 活动海报页面 - 展示活动信息并处理定位授权
7 --> 7 -->
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
30 <view class="tip-icon">📍</view> 30 <view class="tip-icon">📍</view>
31 <view class="tip-text">需要获取您的位置信息来参与活动</view> 31 <view class="tip-text">需要获取您的位置信息来参与活动</view>
32 </view> 32 </view>
33 - <view class="tip-retry">点击重新获取</view> 33 + <!-- <view class="tip-retry">点击重新获取</view> -->
34 </view> 34 </view>
35 35
36 <!-- 位置获取失败提示 --> 36 <!-- 位置获取失败提示 -->
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
39 <view class="tip-icon">⚠️</view> 39 <view class="tip-icon">⚠️</view>
40 <view class="tip-text">可能是网络问题，获取位置信息失败</view> 40 <view class="tip-text">可能是网络问题，获取位置信息失败</view>
41 </view> 41 </view>
42 - <view class="tip-retry">点击重新获取</view> 42 + <!-- <view class="tip-retry">点击重新获取</view> -->
43 </view> 43 </view>
44 44
45 <nut-button 45 <nut-button
...@@ -561,219 +561,219 @@ const onSelectSave = (item) => { ...@@ -561,219 +561,219 @@ const onSelectSave = (item) => {
561 /** 561 /**
562 * 开始生成海报 562 * 开始生成海报
563 */ 563 */
564 -const startGeneratePoster = async () => { 564 +// const startGeneratePoster = async () => {
565 - // 配置海报参数 565 +// // 配置海报参数
566 - base = { 566 +// base = {
567 - width: 1024, 567 +// width: 1024,
568 - height: 1334, 568 +// height: 1334,
569 - backgroundColor: '', 569 +// backgroundColor: '',
570 - debug: false, 570 +// debug: false,
571 - blocks: [ 571 +// blocks: [
572 - { // 上部分canvas画布高度 572 +// { // 上部分canvas画布高度
573 - x: 40, 573 +// x: 40,
574 - y: 20, 574 +// y: 20,
575 - width: 950, 575 +// width: 950,
576 - height: 950, 576 +// height: 950,
577 - paddingLeft: 0, 577 +// paddingLeft: 0,
578 - paddingRight: 0, 578 +// paddingRight: 0,
579 - borderWidth: 1, 579 +// borderWidth: 1,
580 - borderColor: '#fff', 580 +// borderColor: '#fff',
581 - backgroundColor: '#fff', 581 +// backgroundColor: '#fff',
582 - borderRadiusGroup: [16, 16, 0, 0], 582 +// borderRadiusGroup: [16, 16, 0, 0],
583 - }, 583 +// },
584 - { // 活动时间背景图 584 +// { // 活动时间背景图
585 - x: 40, 585 +// x: 40,
586 - y: 730, 586 +// y: 730,
587 - height: 75, 587 +// height: 75,
588 - paddingLeft: 80, 588 +// paddingLeft: 80,
589 - paddingRight: 0, 589 +// paddingRight: 0,
590 - borderWidth: 0, 590 +// borderWidth: 0,
591 - text: { 591 +// text: {
592 - x: 0, 592 +// x: 0,
593 - y: 0, 593 +// y: 0,
594 - text: activityData.value.dateRange, 594 +// text: activityData.value.dateRange,
595 - fontSize: 40, 595 +// fontSize: 40,
596 - color: '#222', 596 +// color: '#222',
597 - opacity: 1, 597 +// opacity: 1,
598 - baseLine: 'top', 598 +// baseLine: 'top',
599 - lineHeight: 48, 599 +// lineHeight: 48,
600 - lineNum: 2, 600 +// lineNum: 2,
601 - textAlign: 'left', 601 +// textAlign: 'left',
602 - zIndex: 0, 602 +// zIndex: 0,
603 - }, 603 +// },
604 - backgroundColor: '#FFF9F3', 604 +// backgroundColor: '#FFF9F3',
605 - borderRadiusGroup: [0, 25, 25, 0], 605 +// borderRadiusGroup: [0, 25, 25, 0],
606 - }, 606 +// },
607 - { // 活动地点背景图 607 +// { // 活动地点背景图
608 - x: 40, 608 +// x: 40,
609 - y: 830, 609 +// y: 830,
610 - height: 75, 610 +// height: 75,
611 - paddingLeft: 80, 611 +// paddingLeft: 80,
612 - paddingRight: 0, 612 +// paddingRight: 0,
613 - borderWidth: 0, 613 +// borderWidth: 0,
614 - text: { 614 +// text: {
615 - x: 0, 615 +// x: 0,
616 - y: 0, 616 +// y: 0,
617 - text: '上海市黄浦区南京东路', 617 +// text: '上海市黄浦区南京东路',
618 - fontSize: 40, 618 +// fontSize: 40,
619 - color: '#222', 619 +// color: '#222',
620 - opacity: 1, 620 +// opacity: 1,
621 - baseLine: 'top', 621 +// baseLine: 'top',
622 - lineHeight: 48, 622 +// lineHeight: 48,
623 - lineNum: 2, 623 +// lineNum: 2,
624 - textAlign: 'left', 624 +// textAlign: 'left',
625 - zIndex: 0, 625 +// zIndex: 0,
626 - }, 626 +// },
627 - backgroundColor: '#FFF9F3', 627 +// backgroundColor: '#FFF9F3',
628 - borderRadiusGroup: [0, 25, 25, 0], 628 +// borderRadiusGroup: [0, 25, 25, 0],
629 - }, 629 +// },
630 - { // 下部分canvas画布高度 630 +// { // 下部分canvas画布高度
631 - x: 40, 631 +// x: 40,
632 - y: 1060, 632 +// y: 1060,
633 - width: 950, 633 +// width: 950,
634 - height: 250, 634 +// height: 250,
635 - paddingLeft: 0, 635 +// paddingLeft: 0,
636 - paddingRight: 0, 636 +// paddingRight: 0,
637 - borderWidth: 1, 637 +// borderWidth: 1,
638 - borderColor: '#fff', 638 +// borderColor: '#fff',
639 - backgroundColor: '#fff', 639 +// backgroundColor: '#fff',
640 - borderRadiusGroup: [0, 0, 16, 16], 640 +// borderRadiusGroup: [0, 0, 16, 16],
641 - } 641 +// }
642 - ], 642 +// ],
643 - texts: [ 643 +// texts: [
644 - { 644 +// {
645 - x: 80, 645 +// x: 80,
646 - y: 630, 646 +// y: 630,
647 - text: activityData.value.title, 647 +// text: activityData.value.title,
648 - fontSize: 50, 648 +// fontSize: 50,
649 - color: '#000', 649 +// color: '#000',
650 - opacity: 1, 650 +// opacity: 1,
651 - baseLine: 'middle', 651 +// baseLine: 'middle',
652 - lineHeight: 60, 652 +// lineHeight: 60,
653 - lineNum: 2, 653 +// lineNum: 2,
654 - textAlign: 'left', 654 +// textAlign: 'left',
655 - width: 800, 655 +// width: 800,
656 - zIndex: 999, 656 +// zIndex: 999,
657 - fontFamily: 'Monospace', 657 +// fontFamily: 'Monospace',
658 - }, 658 +// },
659 - { 659 +// {
660 - x: 135, 660 +// x: 135,
661 - y: 770, 661 +// y: 770,
662 - text: activityData.value.dateRange, 662 +// text: activityData.value.dateRange,
663 - fontSize: 40, 663 +// fontSize: 40,
664 - color: '#222', 664 +// color: '#222',
665 - opacity: 1, 665 +// opacity: 1,
666 - baseLine: 'middle', 666 +// baseLine: 'middle',
667 - lineHeight: 48, 667 +// lineHeight: 48,
668 - lineNum: 2, 668 +// lineNum: 2,
669 - textAlign: 'left', 669 +// textAlign: 'left',
670 - zIndex: 999, 670 +// zIndex: 999,
671 - }, 671 +// },
672 - { 672 +// {
673 - x: 135, 673 +// x: 135,
674 - y: 870, 674 +// y: 870,
675 - text: '上海市黄浦区南京东路', 675 +// text: '上海市黄浦区南京东路',
676 - fontSize: 40, 676 +// fontSize: 40,
677 - color: '#222', 677 +// color: '#222',
678 - opacity: 1, 678 +// opacity: 1,
679 - baseLine: 'middle', 679 +// baseLine: 'middle',
680 - lineHeight: 48, 680 +// lineHeight: 48,
681 - lineNum: 2, 681 +// lineNum: 2,
682 - textAlign: 'left', 682 +// textAlign: 'left',
683 - zIndex: 999, 683 +// zIndex: 999,
684 - }, 684 +// },
685 - { 685 +// {
686 - x: 300, 686 +// x: 300,
687 - y: 1150, 687 +// y: 1150,
688 - text: nickname.value, 688 +// text: nickname.value,
689 - fontSize: 50, 689 +// fontSize: 50,
690 - color: '#333', 690 +// color: '#333',
691 - opacity: 1, 691 +// opacity: 1,
692 - baseLine: 'middle', 692 +// baseLine: 'middle',
693 - textAlign: 'left', 693 +// textAlign: 'left',
694 - lineHeight: 50, 694 +// lineHeight: 50,
695 - lineNum: 1, 695 +// lineNum: 1,
696 - zIndex: 999, 696 +// zIndex: 999,
697 - }, 697 +// },
698 - { 698 +// {
699 - x: 300, 699 +// x: 300,
700 - y: 1220, 700 +// y: 1220,
701 - text: '邀请你一起来活动！', 701 +// text: '邀请你一起来活动！',
702 - fontSize: 42, 702 +// fontSize: 42,
703 - color: '#8F9399', 703 +// color: '#8F9399',
704 - opacity: 1, 704 +// opacity: 1,
705 - baseLine: 'middle', 705 +// baseLine: 'middle',
706 - textAlign: 'left', 706 +// textAlign: 'left',
707 - lineHeight: 42, 707 +// lineHeight: 42,
708 - lineNum: 1, 708 +// lineNum: 1,
709 - zIndex: 999, 709 +// zIndex: 999,
710 - } 710 +// }
711 - ], 711 +// ],
712 - images: [ 712 +// images: [
713 - { 713 +// {
714 - url: qrcode_url, 714 +// url: qrcode_url,
715 - width: 949, 715 +// width: 949,
716 - height: 108, 716 +// height: 108,
717 - x: 40, 717 +// x: 40,
718 - y: 960, 718 +// y: 960,
719 - zIndex: 10, 719 +// zIndex: 10,
720 - }, 720 +// },
721 - { 721 +// {
722 - url: qrcode_url, 722 +// url: qrcode_url,
723 - width: 950, 723 +// width: 950,
724 - height: 500, 724 +// height: 500,
725 - x: 40, 725 +// x: 40,
726 - y: 20, 726 +// y: 20,
727 - borderRadiusGroup: [18, 18, 0, 0], 727 +// borderRadiusGroup: [18, 18, 0, 0],
728 - zIndex: 10, 728 +// zIndex: 10,
729 - }, 729 +// },
730 - { 730 +// {
731 - url: qrcode_url, 731 +// url: qrcode_url,
732 - width: 40, 732 +// width: 40,
733 - height: 40, 733 +// height: 40,
734 - x: 80, 734 +// x: 80,
735 - y: 750, 735 +// y: 750,
736 - borderRadius: 100, 736 +// borderRadius: 100,
737 - borderWidth: 0, 737 +// borderWidth: 0,
738 - zIndex: 10, 738 +// zIndex: 10,
739 - }, 739 +// },
740 - { 740 +// {
741 - url: qrcode_url, 741 +// url: qrcode_url,
742 - width: 35, 742 +// width: 35,
743 - height: 40, 743 +// height: 40,
744 - x: 80, 744 +// x: 80,
745 - y: 850, 745 +// y: 850,
746 - borderRadius: 100, 746 +// borderRadius: 100,
747 - borderWidth: 0, 747 +// borderWidth: 0,
748 - zIndex: 10, 748 +// zIndex: 10,
749 - }, 749 +// },
750 - { 750 +// {
751 - url: qrcode_url, 751 +// url: qrcode_url,
752 - width: 170, 752 +// width: 170,
753 - height: 170, 753 +// height: 170,
754 - x: 80, 754 +// x: 80,
755 - y: 1090, 755 +// y: 1090,
756 - borderRadius: 100, 756 +// borderRadius: 100,
757 - borderWidth: 0, 757 +// borderWidth: 0,
758 - zIndex: 10, 758 +// zIndex: 10,
759 - }, 759 +// },
760 - { 760 +// {
761 - url: qrcode_url, 761 +// url: qrcode_url,
762 - width: 170, 762 +// width: 170,
763 - height: 170, 763 +// height: 170,
764 - x: 750, 764 +// x: 750,
765 - y: 1090, 765 +// y: 1090,
766 - borderRadius: 100, 766 +// borderRadius: 100,
767 - borderWidth: 0, 767 +// borderWidth: 0,
768 - zIndex: 10, 768 +// zIndex: 10,
769 - }, 769 +// },
770 - ], 770 +// ],
771 - lines: [] 771 +// lines: []
772 - } 772 +// }
773 - 773 +
774 - startDraw.value = true 774 +// startDraw.value = true
775 - if (!posterPath.value) Taro.showLoading({ title: '生成海报中...' }) 775 +// if (!posterPath.value) Taro.showLoading({ title: '生成海报中...' })
776 -} 776 +// }
777 777
778 /** 778 /**
779 * 海报绘制成功回调 779 * 海报绘制成功回调
......