From 6aeb3ccf08dc19cf0481d0610920dbe3b2770b8f Mon Sep 17 00:00:00 2001 From: Weller <1812208341@qq.com> Date: Sat, 26 Sep 2020 20:10:28 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=A8=A1=E6=9D=BF=E9=A2=84?= =?UTF-8?q?=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../goods_share_editor.dart | 230 ++++++++++++++++++ .../goods_share_preview.dart | 102 ++++++++ .../goods_share_image/goods_share_image.dart | 14 +- .../widgets/goods_share_edit.dart | 30 ++- lib/widgets/share/share_alert.dart | 5 +- 5 files changed, 372 insertions(+), 9 deletions(-) create mode 100644 lib/pages/goods_share_page/goods_share_editor/goods_share_editor.dart create mode 100644 lib/pages/goods_share_page/goods_share_editor/goods_share_preview.dart diff --git a/lib/pages/goods_share_page/goods_share_editor/goods_share_editor.dart b/lib/pages/goods_share_page/goods_share_editor/goods_share_editor.dart new file mode 100644 index 0000000..ccadcfb --- /dev/null +++ b/lib/pages/goods_share_page/goods_share_editor/goods_share_editor.dart @@ -0,0 +1,230 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:zhiying_base_widget/pages/goods_share_page/goods_share_editor/goods_share_preview.dart'; +import 'package:zhiying_comm/zhiying_comm.dart'; + +class GoodsShareEditor extends StatefulWidget { + @override + _GoodsShareEditorState createState() => _GoodsShareEditorState(); +} + +class _GoodsShareEditorState extends State { + TextEditingController _controller; + + @override + void initState() { + _controller = TextEditingController( + text: + '{标题}\n原价】{原价}元\n【券后价】{券后价}元\n【用嗨如意再省】{补贴省}元\n -------------\n 復製{淘口令},\n 用【Tao·寳】下单\n -------------\n 【商品链接】\n {商品链接}'); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: _createNav(), + body: GestureDetector( + onTap: () { + FocusScope.of(context).requestFocus(FocusNode()); + }, + child: SingleChildScrollView( + child: Column( + children: [ + _createCommission(), + _createInput(), + _createDesc(), + _createBottom(), + ], + ), + ), + ), + ); + } + + // 导航栏 + Widget _createNav() { + return CupertinoNavigationBar( + border: Border( + bottom: BorderSide( + width: 0.0, // One physical pixel. + style: BorderStyle.none, + ), + ), + // backgroundColor: HexColor.fromHex('#ffffff'), + leading: Navigator.canPop(context) + ? GestureDetector( + child: Container( + padding: EdgeInsets.zero, + child: Icon( + Icons.arrow_back_ios, + size: 20, + ), + ), + onTap: () { + if (Navigator.canPop(context)) { + Navigator.pop(context); + } + }, + ) + : Container(), + middle: Text( + '编辑模版', + style: TextStyle( + fontSize: 15, + color: HexColor.fromHex('#333333'), + ), + ), + ); + } + + Widget _createCommission() { + return Container( + margin: EdgeInsets.only(left: 12.5, right: 12.5, top: 4, bottom: 4), + padding: EdgeInsets.only(left: 10, right: 10), + width: double.infinity, + height: 32, + decoration: BoxDecoration( + color: Colors.white, borderRadius: BorderRadius.circular(8)), + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Container( + width: 20, + height: 20, + margin: EdgeInsets.only(right: 10), + decoration: BoxDecoration( + color: Colors.redAccent, + borderRadius: BorderRadius.circular(10)), + ), + Text( + '请不要修改 {} 之间的文字避免无法使用', + style: TextStyle( + fontSize: 13, + fontWeight: FontWeight.bold, + color: Color(0xff333333)), + ), + ], + ), + ); + } + + Widget _createBottom() { + return SafeArea( + child: Container( + margin: EdgeInsets.only(left: 12.5, right: 12.5, top: 4, bottom: 4), + child: Row( + children: [ + Expanded( + child: Container( + height: 36, + decoration: BoxDecoration( + color: Colors.red, + borderRadius: BorderRadius.circular(18), + ), + child: Center( + child: Text( + '恢复默认', + style: TextStyle(color: Colors.white), + ), + ), + ), + ), + Expanded( + child: Container( + margin: EdgeInsets.only(left: 5), + height: 36, + decoration: BoxDecoration( + color: Colors.orangeAccent, + borderRadius: BorderRadius.circular(18), + ), + child: Center( + child: Text( + '保存模板', + style: TextStyle(color: Colors.white), + ), + ), + ), + ), + Expanded( + child: GestureDetector( + child: Container( + margin: EdgeInsets.only(left: 5), + height: 36, + decoration: BoxDecoration( + color: Colors.amber, + borderRadius: BorderRadius.circular(18), + ), + child: Center( + child: Text( + '预览模板', + style: TextStyle(color: Colors.white), + ), + ), + ), + onTap: () { + _showPreview(); + }, + ), + ), + ], + ), + ), + ); + } + + Widget _createInput() { + return Container( + width: double.infinity, + margin: EdgeInsets.all(12), + padding: EdgeInsets.all(10), + height: 180, + decoration: BoxDecoration( + color: Colors.white, borderRadius: BorderRadius.circular(8)), + child: CupertinoTextField( + controller: _controller, + decoration: BoxDecoration(), + keyboardType: TextInputType.multiline, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.bold, + color: Color(0xff333333), + ), + maxLines: null, + ), + ); + } + + Widget _createDesc() { + return Container( + width: double.infinity, + margin: EdgeInsets.all(12), + decoration: BoxDecoration( + color: Colors.white, borderRadius: BorderRadius.circular(8)), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + margin: EdgeInsets.only(top: 10), + width: 70, + height: 30, + color: Colors.redAccent, + ), + Padding( + padding: EdgeInsets.all(10), + child: Text( + '1.{标题} 表示商品标题\n2.{商品原价} 表示在售价格\n3.{券后价} 表示券后价格\n4.{补贴省} 表示平台补贴\n5.{推荐理由} 表示商品的推荐词，可为空\n6.{淘口令} 表示商品下单的口令\n7.{商品链接} 表示商品的链接', + style: TextStyle(fontSize: 12, color: Color(0xff999999)), + ), + ) + ], + ), + ); + } + + void _showPreview() { + showCupertinoModalPopup( + context: context, + builder: (context) => GoodsSharePreview(), + ); + } +} diff --git a/lib/pages/goods_share_page/goods_share_editor/goods_share_preview.dart b/lib/pages/goods_share_page/goods_share_editor/goods_share_preview.dart new file mode 100644 index 0000000..1ad776f --- /dev/null +++ b/lib/pages/goods_share_page/goods_share_editor/goods_share_preview.dart @@ -0,0 +1,102 @@ +import 'dart:ui'; + +import 'package:flutter/material.dart'; +import 'package:zhiying_base_widget/pages/goods_share_page/widgets/goods_share_edit.dart'; +import 'package:zhiying_base_widget/pages/goods_share_page/widgets/goods_share_item.dart'; + +class GoodsSharePreview extends StatefulWidget { + @override + _GoodsSharePreviewState createState() => _GoodsSharePreviewState(); +} + +class _GoodsSharePreviewState extends State { + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: () { + Navigator.pop(context); + }, + child: Scaffold( + backgroundColor: Colors.transparent, + body: BackdropFilter( + filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), + child: Column( + children: [ + Expanded( + child: Container(), + ), + Container( + width: double.infinity, + padding: EdgeInsets.only(left: 12.5, right: 12.5, top: 15), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(13), + ), + child: SafeArea( + top: false, + child: Column( + children: [ + Padding( + padding: const EdgeInsets.only(bottom: 8.0), + child: Text( + '预览模版', + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.bold, + ), + ), + ), + GoodsShareItem( + child: GoodsShareEdit( + '至高减600【24期免息】xiaomi/小米10Pro 5G手机骁龙865智能游戏拍照手机官方旗舰店小米10青春正品k305g现货\n\n原价】3999元\n券后价】3989元\n【用智莺生活再省】19.74元\n-------------\n復製(FRH51Lu9hYF),\n用【Tao·寳】下单\n-------------\n商品链接】\nhttp://hsrj3.cn/ps/FRH51Lu9hYF.html)\n', + ), + ), + Padding( + padding: const EdgeInsets.only(top: 8), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Container( + margin: EdgeInsets.only(left: 5), + width: 110, + height: 36, + decoration: BoxDecoration( + color: Colors.orangeAccent, + borderRadius: BorderRadius.circular(18), + ), + child: Center( + child: Text( + '返回编辑', + style: TextStyle(color: Colors.white), + ), + ), + ), + Container( + margin: EdgeInsets.only(left: 40), + width: 110, + height: 36, + decoration: BoxDecoration( + color: Colors.orangeAccent, + borderRadius: BorderRadius.circular(18), + ), + child: Center( + child: Text( + '保存模板', + style: TextStyle(color: Colors.white), + ), + ), + ), + ], + ), + ), + ], + ), + ), + ), + ], + ), + ), + ), + ); + } +} diff --git a/lib/pages/goods_share_page/goods_share_image/goods_share_image.dart b/lib/pages/goods_share_page/goods_share_image/goods_share_image.dart index 6692be4..e4abacc 100644 --- a/lib/pages/goods_share_page/goods_share_image/goods_share_image.dart +++ b/lib/pages/goods_share_page/goods_share_image/goods_share_image.dart @@ -1,4 +1,6 @@ import 'package:flutter/material.dart'; +import 'package:fluttertoast/fluttertoast.dart'; +import 'package:zhiying_base_widget/pages/goods_share_page/goods_share_editor/goods_share_editor.dart'; import 'package:zhiying_base_widget/pages/goods_share_page/widgets/good_share_msg.dart'; import 'package:zhiying_base_widget/pages/goods_share_page/widgets/goods_share_edit.dart'; import 'package:zhiying_base_widget/pages/goods_share_page/widgets/goods_share_item.dart'; @@ -20,7 +22,17 @@ class _GoodsShareImageState extends State { children: [ GoodsShareItem( child: GoodsShareEdit( - '至高减600【24期免息】xiaomi/小米10Pro 5G手机骁龙865智能游戏拍照手机官方旗舰店小米10青春正品k305g现货\n\n原价】3999元\n券后价】3989元\n【用智莺生活再省】19.74元\n-------------\n復製(FRH51Lu9hYF),\n用【Tao·寳】下单\n-------------\n商品链接】\nhttp://hsrj3.cn/ps/FRH51Lu9hYF.html)\n'), + '至高减600【24期免息】xiaomi/小米10Pro 5G手机骁龙865智能游戏拍照手机官方旗舰店小米10青春正品k305g现货\n\n原价】3999元\n券后价】3989元\n【用智莺生活再省】19.74元\n-------------\n復製(FRH51Lu9hYF),\n用【Tao·寳】下单\n-------------\n商品链接】\nhttp://hsrj3.cn/ps/FRH51Lu9hYF.html)\n', + onCopyClick: () { + Fluttertoast.showToast(msg: '复制成功'); + }, + onEditorClick: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => GoodsShareEditor())); + }, + ), ), GoodsShareItem( child: GoodsShareMessage('点击编辑模板可以自定义分享文案哦😄😄'), diff --git a/lib/pages/goods_share_page/widgets/goods_share_edit.dart b/lib/pages/goods_share_page/widgets/goods_share_edit.dart index d3c153b..c868ed0 100644 --- a/lib/pages/goods_share_page/widgets/goods_share_edit.dart +++ b/lib/pages/goods_share_page/widgets/goods_share_edit.dart @@ -2,8 +2,12 @@ import 'package:flutter/material.dart'; class GoodsShareEdit extends StatelessWidget { final String message; + final VoidCallback onEditorClick; + final VoidCallback onCopyClick; - const GoodsShareEdit(this.message, {Key key}) : super(key: key); + const GoodsShareEdit(this.message, + {Key key, this.onEditorClick, this.onCopyClick}) + : super(key: key); @override Widget build(BuildContext context) { @@ -62,9 +66,15 @@ class GoodsShareEdit extends StatelessWidget { child: Row( children: [ Expanded( - child: GoodsShareCheckButton( - '编辑模版', - isSelected: true, + child: GestureDetector( + child: Container( + color: Colors.transparent, + child: GoodsShareCheckButton( + '编辑模版', + isSelected: true, + ), + ), + onTap: onEditorClick, ), ), Container( @@ -73,9 +83,15 @@ class GoodsShareEdit extends StatelessWidget { color: Color(0xffececec), ), Expanded( - child: GoodsShareCheckButton( - '复制文案', - isSelected: false, + child: GestureDetector( + child: Container( + color: Colors.transparent, + child: GoodsShareCheckButton( + '复制文案', + isSelected: false, + ), + ), + onTap: onCopyClick, ), ), ], diff --git a/lib/widgets/share/share_alert.dart b/lib/widgets/share/share_alert.dart index c7cc8d9..00fe308 100644 --- a/lib/widgets/share/share_alert.dart +++ b/lib/widgets/share/share_alert.dart @@ -125,7 +125,10 @@ class _ShareAlertContent extends StatelessWidget { padding: const EdgeInsets.only(top: 2, bottom: 2), child: Text( '分享平台', - style: TextStyle(fontSize: 12, color: Color(0xff333333)), + style: TextStyle( + fontSize: 12, + color: Color(0xff333333), + fontWeight: FontWeight.bold), ), ), ],