feat(share): 文本分享指引框重做为分步引导卡片(参考截图)，去掉系统分享
ShareGuideDialog: 居中卡片 标题{渠道}分享准备完成 + 内容已复制到剪贴板 + 微信/QQ/抖音三套分步指引
+ 两按钮(稍后分享/立即打开{渠道}，渠道主题色)。文本不再提供系统分享(移除onGuideAction system分支+systemText)。
容器移除 contentKind 接线。
This commit is contained in:
lanterngamescn
@@ -1,15 +1,13 @@
|
||||
/**
|
||||
* 分享指引弹窗（渠道选定后弹出）。纯展示组件：动作经 onPick 回容器，
|
||||
* 由容器一次性 resultEvent 回投 ShareProvider（同 SharePanel 模式，不持业务逻辑）。
|
||||
* 文案按 contentKind：文本→"请打开XX粘贴分享"；图片→"可在XX长按粘贴；或用系统分享"。
|
||||
* 分享指引弹窗（文本分享用；图片分享走系统分享面板、不经此）。居中卡片：
|
||||
* 标题「{渠道}分享准备完成」+「内容已复制到剪贴板」+ 分步指引 + 「稍后分享」/「立即打开{渠道}」。
|
||||
* 纯展示组件：动作经 onPick 回容器，由容器一次性 resultEvent 回投 ShareProvider。
|
||||
*/
|
||||
@Component
|
||||
export struct ShareGuideDialog {
|
||||
/** 渠道：'wechat' | 'qq' | 'douyin'。 */
|
||||
platform: string = 'wechat';
|
||||
/** 内容类型：'text' | 'image'。 */
|
||||
contentKind: string = 'text';
|
||||
/** 动作回调：'open' | 'system' | 'cancel'。 */
|
||||
/** 动作回调：'open'（立即打开App）| 'cancel'（稍后分享/点空白）。 */
|
||||
onPick: (action: string) => void = () => { };
|
||||
|
||||
private appName(): string {
|
||||
@@ -22,75 +20,108 @@ export struct ShareGuideDialog {
|
||||
return '微信';
|
||||
}
|
||||
|
||||
private appIcon(): Resource {
|
||||
/** 渠道主题色（标题序号徽标 + 打开按钮）。 */
|
||||
private appColor(): string {
|
||||
if (this.platform === 'qq') {
|
||||
return $r('app.media.share_qq');
|
||||
return '#12B7F5';
|
||||
}
|
||||
if (this.platform === 'douyin') {
|
||||
return $r('app.media.share_douyin');
|
||||
return '#FE2C55';
|
||||
}
|
||||
return $r('app.media.share_wechat');
|
||||
return '#07C160';
|
||||
}
|
||||
|
||||
private hint(): string {
|
||||
const name: string = this.appName();
|
||||
return this.contentKind === 'image'
|
||||
? `图片已复制，可在${name}长按粘贴；或点下方用系统分享`
|
||||
: `内容已复制，请打开${name}粘贴分享`;
|
||||
/** 各渠道"分享到好友或群聊"分步文案（差异主要在第 1 步进入聊天的入口）。 */
|
||||
private steps(): string[] {
|
||||
if (this.platform === 'qq') {
|
||||
return ['打开QQ，进入「消息」列表', '选择好友或群聊进入聊天', '在输入框长按粘贴内容', '点击发送即可分享'];
|
||||
}
|
||||
if (this.platform === 'douyin') {
|
||||
return ['打开抖音，点击右下角「消息」', '选择好友或群聊进入聊天', '在输入框长按粘贴内容', '点击发送即可分享'];
|
||||
}
|
||||
return ['打开微信，进入聊天列表', '选择好友或群聊进入聊天', '在输入框长按粘贴内容', '点击发送即可分享'];
|
||||
}
|
||||
|
||||
@Builder
|
||||
stepRow(index: number, text: string) {
|
||||
Row() {
|
||||
Text(`${index + 1}`)
|
||||
.fontSize(13)
|
||||
.fontColor(Color.White)
|
||||
.width(20)
|
||||
.height(20)
|
||||
.textAlign(TextAlign.Center)
|
||||
.backgroundColor(this.appColor())
|
||||
.borderRadius(4)
|
||||
Text(text)
|
||||
.fontSize(14)
|
||||
.fontColor('#333333')
|
||||
.margin({ left: 10 })
|
||||
.layoutWeight(1)
|
||||
}
|
||||
.width('100%')
|
||||
.margin({ top: 10 })
|
||||
.alignItems(VerticalAlign.Center)
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Blank()
|
||||
.layoutWeight(1)
|
||||
.width('100%')
|
||||
.onClick(() => this.onPick('cancel'))
|
||||
|
||||
Column() {
|
||||
Image(this.appIcon())
|
||||
.width(48)
|
||||
.height(48)
|
||||
.objectFit(ImageFit.Contain)
|
||||
.margin({ top: 16 })
|
||||
Text(this.hint())
|
||||
.fontSize(14)
|
||||
.fontColor('#333333')
|
||||
.textAlign(TextAlign.Center)
|
||||
.margin({ top: 12, bottom: 12 })
|
||||
.padding({ left: 20, right: 20 })
|
||||
Text(`${this.appName()}分享准备完成`)
|
||||
.fontSize(18)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.fontColor('#222222')
|
||||
.width('100%')
|
||||
|
||||
Divider().color('#EEEEEE')
|
||||
Text(`打开${this.appName()}`)
|
||||
.fontSize(16)
|
||||
.fontColor('#1989FA')
|
||||
.width('100%')
|
||||
.textAlign(TextAlign.Center)
|
||||
.padding({ top: 14, bottom: 14 })
|
||||
.onClick(() => this.onPick('open'))
|
||||
Divider().color('#EEEEEE')
|
||||
Text('用系统分享')
|
||||
.fontSize(16)
|
||||
.fontColor('#333333')
|
||||
.width('100%')
|
||||
.textAlign(TextAlign.Center)
|
||||
.padding({ top: 14, bottom: 14 })
|
||||
.onClick(() => this.onPick('system'))
|
||||
Divider().color('#EEEEEE')
|
||||
Text('取消')
|
||||
.fontSize(16)
|
||||
Row() {
|
||||
Text('✅').fontSize(15)
|
||||
Text('内容已复制到剪贴板')
|
||||
.fontSize(14)
|
||||
.fontColor('#333333')
|
||||
.margin({ left: 6 })
|
||||
}
|
||||
.width('100%')
|
||||
.margin({ top: 14 })
|
||||
|
||||
Text('🎯 分享到好友或群聊步骤：')
|
||||
.fontSize(14)
|
||||
.fontColor('#666666')
|
||||
.width('100%')
|
||||
.textAlign(TextAlign.Center)
|
||||
.padding({ top: 14, bottom: 14 })
|
||||
.onClick(() => this.onPick('cancel'))
|
||||
.margin({ top: 14 })
|
||||
|
||||
ForEach(this.steps(), (item: string, index: number) => {
|
||||
this.stepRow(index, item)
|
||||
})
|
||||
|
||||
Row() {
|
||||
Button('稍后分享')
|
||||
.fontSize(16)
|
||||
.fontColor('#666666')
|
||||
.backgroundColor('#F2F2F2')
|
||||
.layoutWeight(1)
|
||||
.onClick(() => this.onPick('cancel'))
|
||||
Button(`立即打开${this.appName()}`)
|
||||
.fontSize(16)
|
||||
.fontColor(Color.White)
|
||||
.backgroundColor(this.appColor())
|
||||
.layoutWeight(1)
|
||||
.margin({ left: 12 })
|
||||
.onClick(() => this.onPick('open'))
|
||||
}
|
||||
.width('100%')
|
||||
.margin({ top: 22 })
|
||||
}
|
||||
.width('100%')
|
||||
.width('82%')
|
||||
.padding(20)
|
||||
.backgroundColor(Color.White)
|
||||
.borderRadius({ topLeft: 16, topRight: 16 })
|
||||
.borderRadius(16)
|
||||
.onClick(() => { /* 消费点击，避免穿透到遮罩 */ })
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
.backgroundColor('rgba(0,0,0,0.45)')
|
||||
.justifyContent(FlexAlign.Center)
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.onClick(() => this.onPick('cancel'))
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user