feat(share): 新增 ShareGuideDialog 指引弹窗(打开App/用系统分享/取消,分享重构 §7.2)
This commit is contained in:
@@ -0,0 +1,96 @@
|
|||||||
|
/**
|
||||||
|
* 分享指引弹窗(渠道选定后弹出)。纯展示组件:动作经 onPick 回容器,
|
||||||
|
* 由容器一次性 resultEvent 回投 ShareProvider(同 SharePanel 模式,不持业务逻辑)。
|
||||||
|
* 文案按 contentKind:文本→"请打开XX粘贴分享";图片→"可在XX长按粘贴;或用系统分享"。
|
||||||
|
*/
|
||||||
|
@Component
|
||||||
|
export struct ShareGuideDialog {
|
||||||
|
/** 渠道:'wechat' | 'qq' | 'douyin'。 */
|
||||||
|
platform: string = 'wechat';
|
||||||
|
/** 内容类型:'text' | 'image'。 */
|
||||||
|
contentKind: string = 'text';
|
||||||
|
/** 动作回调:'open' | 'system' | 'cancel'。 */
|
||||||
|
onPick: (action: string) => void = () => { };
|
||||||
|
|
||||||
|
private appName(): string {
|
||||||
|
if (this.platform === 'qq') {
|
||||||
|
return 'QQ';
|
||||||
|
}
|
||||||
|
if (this.platform === 'douyin') {
|
||||||
|
return '抖音';
|
||||||
|
}
|
||||||
|
return '微信';
|
||||||
|
}
|
||||||
|
|
||||||
|
private appIcon(): Resource {
|
||||||
|
if (this.platform === 'qq') {
|
||||||
|
return $r('app.media.share_qq');
|
||||||
|
}
|
||||||
|
if (this.platform === 'douyin') {
|
||||||
|
return $r('app.media.share_douyin');
|
||||||
|
}
|
||||||
|
return $r('app.media.share_wechat');
|
||||||
|
}
|
||||||
|
|
||||||
|
private hint(): string {
|
||||||
|
const name: string = this.appName();
|
||||||
|
return this.contentKind === 'image'
|
||||||
|
? `图片已复制,可在${name}长按粘贴;或点下方用系统分享`
|
||||||
|
: `内容已复制,请打开${name}粘贴分享`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 })
|
||||||
|
|
||||||
|
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)
|
||||||
|
.fontColor('#666666')
|
||||||
|
.width('100%')
|
||||||
|
.textAlign(TextAlign.Center)
|
||||||
|
.padding({ top: 14, bottom: 14 })
|
||||||
|
.onClick(() => this.onPick('cancel'))
|
||||||
|
}
|
||||||
|
.width('100%')
|
||||||
|
.backgroundColor(Color.White)
|
||||||
|
.borderRadius({ topLeft: 16, topRight: 16 })
|
||||||
|
.onClick(() => { /* 消费点击,避免穿透到遮罩 */ })
|
||||||
|
}
|
||||||
|
.width('100%')
|
||||||
|
.height('100%')
|
||||||
|
.backgroundColor('rgba(0,0,0,0.45)')
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user