hookehuyr

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

替换原有的 nut-popup 实现,使用 NutActionSheet 组件简化分享和保存选项的弹窗逻辑
移除不必要的图标和样式代码,优化组件结构
......@@ -11,6 +11,7 @@ declare module 'vue' {
BottomNav: typeof import('./src/components/BottomNav.vue')['default']
GlassCard: typeof import('./src/components/GlassCard.vue')['default']
NavBar: typeof import('./src/components/navBar.vue')['default']
NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet']
NutButton: typeof import('@nutui/nutui-taro')['Button']
NutDatePicker: typeof import('@nutui/nutui-taro')['DatePicker']
NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-29 00:53:27
* @LastEditTime: 2025-08-29 10:21:27
* @FilePath: /lls_program/src/pages/ActivitiesCover/index.vue
* @Description: 活动海报页面 - 展示活动信息并处理定位授权
-->
......@@ -81,28 +81,14 @@
<BottomNav />
<!-- 分享选项弹窗 -->
<nut-popup
<nut-action-sheet
v-model:visible="show_share"
position="bottom"
:style="{ height: '40%' }"
class="share-popup"
>
<div class="share-title">立即分享给好友</div>
<div class="share-options">
<div
v-for="option in share_options"
:key="option.name"
class="share-option"
@click="onSelectShare({ detail: option })"
>
<div class="share-icon">{{ option.icon }}</div>
<div class="share-text">{{ option.name }}</div>
</div>
</div>
<nut-button class="cancel-button" @click="onCancelShare">
取消
</nut-button>
</nut-popup>
:menu-items="share_options"
@choose="onSelectShare"
@cancel="onCancelShare"
cancel-txt="取消"
title="立即分享"
/>
<!-- 海报预览弹窗 -->
<nut-popup
......@@ -127,28 +113,14 @@
/>
<!-- 保存选项弹窗 -->
<nut-popup
<nut-action-sheet
v-model:visible="show_save"
position="bottom"
:style="{ height: '30%' }"
class="share-popup"
>
<div class="share-title">保存选项</div>
<div class="share-options">
<div
v-for="option in actions_save"
:key="option.name"
class="share-option"
@click="onSelectSave({ detail: option })"
>
<div class="share-icon">💾</div>
<div class="share-text">{{ option.name }}</div>
</div>
</div>
<nut-button class="cancel-button" @click="onCancelSave">
取消
</nut-button>
</nut-popup>
:menu-items="actions_save"
@choose="onSelectSave"
@cancel="onCancelSave"
cancel-txt="取消"
title="操作选项"
/>
</view>
</template>
......@@ -159,7 +131,6 @@ import Taro from '@tarojs/taro'
import "./index.less"
import BottomNav from '../../components/BottomNav.vue'
import PosterBuilder from '../../components/PosterBuilder/index.vue'
import icon_share from '@/images/icon/share.svg'
/**
* 活动海报页面组件
......@@ -182,8 +153,8 @@ const avatar = ref('https://cdn.ipadbiz.cn/icon/tou@2x.png') // 用户头像
// 分享选项
const share_options = [
{ name: '微信', icon: 'wechat', openType: 'share' },
{ name: '生成海报', icon: icon_share },
// { name: '微信' },
{ name: '海报' },
]
// 保存选项
......@@ -329,9 +300,9 @@ const onCancelShare = () => {
/**
* 选择分享方式
*/
const onSelectShare = ({ detail }) => {
const onSelectShare = (item) => {
show_share.value = false
if (detail.name === '生成海报') {
if (item.name === '海报') {
show_post.value = true
startGeneratePoster()
}
......@@ -355,8 +326,8 @@ const onCancelSave = () => {
/**
* 选择保存方式
*/
const onSelectSave = ({ detail }) => {
if (detail.name === '保存至相册') {
const onSelectSave = (item) => {
if (item.name === '保存至相册') {
show_save.value = false
show_post.value = false
savePoster()
......