hookehuyr

feat(ActivitiesCover): 使用 NutActionSheet 替换分享和保存弹窗

替换原有的 nut-popup 实现,使用 NutActionSheet 组件简化分享和保存选项的弹窗逻辑
移除不必要的图标和样式代码,优化组件结构
...@@ -11,6 +11,7 @@ declare module 'vue' { ...@@ -11,6 +11,7 @@ declare module 'vue' {
11 BottomNav: typeof import('./src/components/BottomNav.vue')['default'] 11 BottomNav: typeof import('./src/components/BottomNav.vue')['default']
12 GlassCard: typeof import('./src/components/GlassCard.vue')['default'] 12 GlassCard: typeof import('./src/components/GlassCard.vue')['default']
13 NavBar: typeof import('./src/components/navBar.vue')['default'] 13 NavBar: typeof import('./src/components/navBar.vue')['default']
14 + NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet']
14 NutButton: typeof import('@nutui/nutui-taro')['Button'] 15 NutButton: typeof import('@nutui/nutui-taro')['Button']
15 NutDatePicker: typeof import('@nutui/nutui-taro')['DatePicker'] 16 NutDatePicker: typeof import('@nutui/nutui-taro')['DatePicker']
16 NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview'] 17 NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']
......
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-08-29 00:53:27 4 + * @LastEditTime: 2025-08-29 10:21:27
5 * @FilePath: /lls_program/src/pages/ActivitiesCover/index.vue 5 * @FilePath: /lls_program/src/pages/ActivitiesCover/index.vue
6 * @Description: 活动海报页面 - 展示活动信息并处理定位授权 6 * @Description: 活动海报页面 - 展示活动信息并处理定位授权
7 --> 7 -->
...@@ -81,28 +81,14 @@ ...@@ -81,28 +81,14 @@
81 <BottomNav /> 81 <BottomNav />
82 82
83 <!-- 分享选项弹窗 --> 83 <!-- 分享选项弹窗 -->
84 - <nut-popup 84 + <nut-action-sheet
85 v-model:visible="show_share" 85 v-model:visible="show_share"
86 - position="bottom" 86 + :menu-items="share_options"
87 - :style="{ height: '40%' }" 87 + @choose="onSelectShare"
88 - class="share-popup" 88 + @cancel="onCancelShare"
89 - > 89 + cancel-txt="取消"
90 - <div class="share-title">立即分享给好友</div> 90 + title="立即分享"
91 - <div class="share-options"> 91 + />
92 - <div
93 - v-for="option in share_options"
94 - :key="option.name"
95 - class="share-option"
96 - @click="onSelectShare({ detail: option })"
97 - >
98 - <div class="share-icon">{{ option.icon }}</div>
99 - <div class="share-text">{{ option.name }}</div>
100 - </div>
101 - </div>
102 - <nut-button class="cancel-button" @click="onCancelShare">
103 - 取消
104 - </nut-button>
105 - </nut-popup>
106 92
107 <!-- 海报预览弹窗 --> 93 <!-- 海报预览弹窗 -->
108 <nut-popup 94 <nut-popup
...@@ -127,28 +113,14 @@ ...@@ -127,28 +113,14 @@
127 /> 113 />
128 114
129 <!-- 保存选项弹窗 --> 115 <!-- 保存选项弹窗 -->
130 - <nut-popup 116 + <nut-action-sheet
131 v-model:visible="show_save" 117 v-model:visible="show_save"
132 - position="bottom" 118 + :menu-items="actions_save"
133 - :style="{ height: '30%' }" 119 + @choose="onSelectSave"
134 - class="share-popup" 120 + @cancel="onCancelSave"
135 - > 121 + cancel-txt="取消"
136 - <div class="share-title">保存选项</div> 122 + title="操作选项"
137 - <div class="share-options"> 123 + />
138 - <div
139 - v-for="option in actions_save"
140 - :key="option.name"
141 - class="share-option"
142 - @click="onSelectSave({ detail: option })"
143 - >
144 - <div class="share-icon">💾</div>
145 - <div class="share-text">{{ option.name }}</div>
146 - </div>
147 - </div>
148 - <nut-button class="cancel-button" @click="onCancelSave">
149 - 取消
150 - </nut-button>
151 - </nut-popup>
152 </view> 124 </view>
153 </template> 125 </template>
154 126
...@@ -159,7 +131,6 @@ import Taro from '@tarojs/taro' ...@@ -159,7 +131,6 @@ import Taro from '@tarojs/taro'
159 import "./index.less" 131 import "./index.less"
160 import BottomNav from '../../components/BottomNav.vue' 132 import BottomNav from '../../components/BottomNav.vue'
161 import PosterBuilder from '../../components/PosterBuilder/index.vue' 133 import PosterBuilder from '../../components/PosterBuilder/index.vue'
162 -import icon_share from '@/images/icon/share.svg'
163 134
164 /** 135 /**
165 * 活动海报页面组件 136 * 活动海报页面组件
...@@ -182,8 +153,8 @@ const avatar = ref('https://cdn.ipadbiz.cn/icon/tou@2x.png') // 用户头像 ...@@ -182,8 +153,8 @@ const avatar = ref('https://cdn.ipadbiz.cn/icon/tou@2x.png') // 用户头像
182 153
183 // 分享选项 154 // 分享选项
184 const share_options = [ 155 const share_options = [
185 - { name: '微信', icon: 'wechat', openType: 'share' }, 156 + // { name: '微信' },
186 - { name: '生成海报', icon: icon_share }, 157 + { name: '海报' },
187 ] 158 ]
188 159
189 // 保存选项 160 // 保存选项
...@@ -329,9 +300,9 @@ const onCancelShare = () => { ...@@ -329,9 +300,9 @@ const onCancelShare = () => {
329 /** 300 /**
330 * 选择分享方式 301 * 选择分享方式
331 */ 302 */
332 -const onSelectShare = ({ detail }) => { 303 +const onSelectShare = (item) => {
333 show_share.value = false 304 show_share.value = false
334 - if (detail.name === '生成海报') { 305 + if (item.name === '海报') {
335 show_post.value = true 306 show_post.value = true
336 startGeneratePoster() 307 startGeneratePoster()
337 } 308 }
...@@ -355,8 +326,8 @@ const onCancelSave = () => { ...@@ -355,8 +326,8 @@ const onCancelSave = () => {
355 /** 326 /**
356 * 选择保存方式 327 * 选择保存方式
357 */ 328 */
358 -const onSelectSave = ({ detail }) => { 329 +const onSelectSave = (item) => {
359 - if (detail.name === '保存至相册') { 330 + if (item.name === '保存至相册') {
360 show_save.value = false 331 show_save.value = false
361 show_post.value = false 332 show_post.value = false
362 savePoster() 333 savePoster()
......