feat(ActivitiesCover): 使用 NutActionSheet 替换分享和保存弹窗
替换原有的 nut-popup 实现,使用 NutActionSheet 组件简化分享和保存选项的弹窗逻辑 移除不必要的图标和样式代码,优化组件结构
Showing
2 changed files
with
22 additions
and
50 deletions
| ... | @@ -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() | ... | ... |
-
Please register or login to post a comment