flutter
/
zhiying_base_widget
4
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 139 Wiki Activity
Browse Source

添加商品分享页面

tags/0.0.1
Weller 4 years ago
parent
1b81cee0ab
commit
559c53d235
13 changed files with 851 additions and 1 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
     
  2. +33
    -0
      lib/pages/goods_share_page/goods_share_image/goods_share_image.dart
  3. +43
    -0
      lib/pages/goods_share_page/goods_share_link/goods_share_link.dart
  4. +33
    -0
      lib/pages/goods_share_page/goods_share_miniprogram/goods_share_miniprogram.dart
  5. +231
    -0
      lib/pages/goods_share_page/goods_share_page.dart
  6. +25
    -0
      lib/pages/goods_share_page/widgets/good_share_msg.dart
  7. +43
    -0
      lib/pages/goods_share_page/widgets/goods_share_alert_content.dart
  8. +121
    -0
      lib/pages/goods_share_page/widgets/goods_share_edit.dart
  9. +38
    -0
      lib/pages/goods_share_page/widgets/goods_share_item.dart
  10. +75
    -0
      lib/pages/goods_share_page/widgets/goods_share_link_widget.dart
  11. +69
    -0
      lib/pages/goods_share_page/widgets/goods_share_miniprogram_widget.dart
  12. +5
    -1
      lib/widgets/goods_details/footer/goods_details_footer_widget.dart
  13. +135
    -0
      lib/widgets/share/share_alert.dart

BIN
View File


+ 33
- 0
lib/pages/goods_share_page/goods_share_image/goods_share_image.dart View File

@@ -0,0 +1,33 @@
import 'package:flutter/material.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';

class GoodsShareImage extends StatefulWidget {
@override
_GoodsShareImageState createState() => _GoodsShareImageState();
}

class _GoodsShareImageState extends State<GoodsShareImage> {
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: 10),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
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'),
),
GoodsShareItem(
child: GoodsShareMessage('点击编辑模板可以自定义分享文案哦😄😄'),
),
],
),
),
);
}
}

+ 43
- 0
lib/pages/goods_share_page/goods_share_link/goods_share_link.dart View File

@@ -0,0 +1,43 @@
import 'package:flutter/material.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';
import 'package:zhiying_base_widget/pages/goods_share_page/widgets/goods_share_link_widget.dart';

class GoodsShareLink extends StatefulWidget {
@override
_GoodsShareLinkState createState() => _GoodsShareLinkState();
}

class _GoodsShareLinkState extends State<GoodsShareLink> {
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: 10),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
GoodsShareItem(
child: GoodsShareLinkWidget(
title: '小米10至尊纪念版5g手机120X变焦骁龙865小米官方旗舰店小米手机',
desc: '【原价】3999元【券后3989元【用嗨如意再省】19.74元復製(FRH51Lu9hYF',
imgGoods: '',
icon: '',
name: '智莺生活',
),
),
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'),
),
GoodsShareItem(
child: GoodsShareMessage('点击编辑模板可以自定义分享文案哦😄😄'),
),
],
),
),
);
}
}

+ 33
- 0
lib/pages/goods_share_page/goods_share_miniprogram/goods_share_miniprogram.dart View File

@@ -0,0 +1,33 @@
import 'package:flutter/material.dart';
import 'package:zhiying_base_widget/pages/goods_share_page/widgets/goods_share_item.dart';
import 'package:zhiying_base_widget/pages/goods_share_page/widgets/goods_share_miniprogram_widget.dart';

class GoodsShareMiniprogram extends StatefulWidget {
@override
_GoodsShareMiniprogramState createState() => _GoodsShareMiniprogramState();
}

class _GoodsShareMiniprogramState extends State<GoodsShareMiniprogram> {
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: 10),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
GoodsShareItem(
child: GoodsShareMiniprogramWidget(
title: '小米10至尊纪念版5g手机120X变焦骁龙865小米官方旗舰店小米手机',
imgGoods: '',
icon: '',
name: '智莺生活',
),
),
],
),
),
);
}
}

+ 231
- 0
lib/pages/goods_share_page/goods_share_page.dart View File

@@ -0,0 +1,231 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:zhiying_base_widget/pages/goods_share_page/goods_share_image/goods_share_image.dart';
import 'package:zhiying_base_widget/pages/goods_share_page/goods_share_link/goods_share_link.dart';
import 'package:zhiying_base_widget/pages/goods_share_page/goods_share_miniprogram/goods_share_miniprogram.dart';
import 'package:zhiying_base_widget/pages/goods_share_page/widgets/goods_share_alert_content.dart';
import 'package:zhiying_base_widget/widgets/share/share_alert.dart';
import 'package:zhiying_comm/zhiying_comm.dart';

class GoodsSharePage extends StatefulWidget {
@override
_GoodsSharePageState createState() => _GoodsSharePageState();
}

class _GoodsSharePageState extends State<GoodsSharePage>
with TickerProviderStateMixin {
TabController _tabController;
List<Widget> _tabs;
List<Widget> _contents;

@override
void initState() {
_tabController = TabController(length: 3, vsync: this);
_tabs = [
_createTabItem('分享图文'),
_createTabItem('分享链接'),
_createTabItem('分享小程序'),
];
_contents = [
GoodsShareImage(),
GoodsShareLink(),
GoodsShareMiniprogram(),
];
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xfff8f8f8),
appBar: _createNav(),
body: Column(
children: <Widget>[
_createCommission(),
Expanded(child: _createContent()),
_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: <Widget>[
Container(
width: 20,
height: 20,
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
color: Colors.redAccent,
borderRadius: BorderRadius.circular(10)),
),
Text(
'奖励预估收益 ¥ 12.35 元',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.bold,
color: Color(0xff333333)),
),
],
),
);
}

Widget _createContent() {
return Container(
margin: EdgeInsets.only(left: 12.5, right: 12.5, top: 4, bottom: 4),
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(8)),
child: Column(
children: <Widget>[
Container(
height: 40,
width: double.infinity,
child: TabBar(
controller: _tabController,
tabs: _tabs,
indicatorColor: Color(0xffff4242),
indicatorSize: TabBarIndicatorSize.label,
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: _contents,
),
)
],
),
);
}

Widget _createBottom() {
return SafeArea(
child: Container(
margin: EdgeInsets.only(left: 12.5, right: 12.5, top: 4, bottom: 4),
child: Row(
children: <Widget>[
Container(
width: 95,
height: 36,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(18),
),
child: Center(
child: Text(
'仅复制口令',
style: TextStyle(color: Colors.white),
),
),
),
Container(
margin: EdgeInsets.only(left: 5),
width: 95,
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),
// width: 95,
height: 36,
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(18),
),
child: Center(
child: Text(
'分享选中素材',
style: TextStyle(color: Colors.white),
),
),
),
onTap: () {
_showShare();
},
),
),
],
),
),
);
}

Widget _createTabItem(String title, {bool isSelected = false}) {
return Text(
title,
style: TextStyle(
fontSize: 13,
color: isSelected ? Color(0xffff4242) : Color(0xff333333),
fontWeight: FontWeight.bold,
),
);
}

void _showShare() async {
showCupertinoModalPopup(
context: context,
builder: (context) => ShareAlert(
child: GoodsShareAlertContent(),
),
);
}
}

+ 25
- 0
lib/pages/goods_share_page/widgets/good_share_msg.dart View File

@@ -0,0 +1,25 @@
import 'package:flutter/material.dart';

class GoodsShareMessage extends StatelessWidget {
final String message;

const GoodsShareMessage(this.message, {Key key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(left: 10, right: 10),
padding: EdgeInsets.only(left: 16, top: 10, right: 16, bottom: 10),
decoration: BoxDecoration(
color: Color(0xfff8f8f8), borderRadius: BorderRadius.circular(10)),
width: double.infinity,
child: Text(
message,
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.bold,
),
),
);
}
}

+ 43
- 0
lib/pages/goods_share_page/widgets/goods_share_alert_content.dart View File

@@ -0,0 +1,43 @@
import 'package:flutter/material.dart';

class GoodsShareAlertContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return UnconstrainedBox(
child: Container(
width: 220,
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
),
child: Column(
children: <Widget>[
Container(
width: 92,
height: 92,
color: Colors.redAccent,
margin: EdgeInsets.only(top: 20, bottom: 20),
),
Text(
'保存成功',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color(0xff333333),
fontSize: 18,
),
),
Text(
'快将保存的图片和文案与\n小伙伴分享吧',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xff999999),
fontSize: 11,
),
),
],
),
),
);
}
}

+ 121
- 0
lib/pages/goods_share_page/widgets/goods_share_edit.dart View File

@@ -0,0 +1,121 @@
import 'package:flutter/material.dart';

class GoodsShareEdit extends StatelessWidget {
final String message;

const GoodsShareEdit(this.message, {Key key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(left: 10, right: 10),
// padding: EdgeInsets.only(left: 16, top: 10, right: 16, bottom: 10),
decoration: BoxDecoration(
color: Color(0xfff8f8f8), borderRadius: BorderRadius.circular(10)),
width: double.infinity,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 16, top: 10, right: 16),
child: Text(
message,
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.bold,
),
),
),
Container(
padding:
const EdgeInsets.only(left: 16, top: 6, bottom: 6, right: 16),
width: double.infinity,
child: Wrap(
spacing: 10,
runSpacing: 6,
children: <Widget>[
GoodsShareCheckButton(
'标题',
isSelected: true,
),
GoodsShareCheckButton(
'收益',
isSelected: false,
),
GoodsShareCheckButton(
'邀请码',
isSelected: true,
),
GoodsShareCheckButton(
'链接',
isSelected: true,
),
],
),
),
Container(
width: double.infinity,
height: 0.5,
color: Color(0xffececec),
),
Container(
height: 44,
child: Row(
children: <Widget>[
Expanded(
child: GoodsShareCheckButton(
'编辑模版',
isSelected: true,
),
),
Container(
width: 0.5,
height: 20,
color: Color(0xffececec),
),
Expanded(
child: GoodsShareCheckButton(
'复制文案',
isSelected: false,
),
),
],
),
)
],
),
);
}
}

class GoodsShareCheckButton extends StatelessWidget {
final String title;
final bool isSelected;

const GoodsShareCheckButton(this.title, {Key key, this.isSelected = true})
: super(key: key);

@override
Widget build(BuildContext context) {
return UnconstrainedBox(
child: Row(
children: <Widget>[
Container(
width: 16,
height: 16,
margin: EdgeInsets.only(right: 6),
decoration: BoxDecoration(
color: isSelected ? Colors.redAccent : Colors.black12,
borderRadius: BorderRadius.circular(8),
),
),
Text(
title,
style: TextStyle(
fontSize: 11,
color: isSelected ? Colors.redAccent : Color(0xff333333)),
),
],
),
);
}
}

+ 38
- 0
lib/pages/goods_share_page/widgets/goods_share_item.dart View File

@@ -0,0 +1,38 @@
import 'package:flutter/material.dart';

class GoodsShareItem extends StatelessWidget {
final Widget child;

const GoodsShareItem({Key key, this.child}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(left: 15, right: 15, top: 5, bottom: 5),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(18),
),
),
Expanded(
child: child ?? Container(),
),
Container(
width: 18,
height: 18,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(9),
),
),
],
),
);
}
}

+ 75
- 0
lib/pages/goods_share_page/widgets/goods_share_link_widget.dart View File

@@ -0,0 +1,75 @@
import 'package:flutter/material.dart';

class GoodsShareLinkWidget extends StatelessWidget {
final String title;
final String desc;
final String imgGoods;
final String icon;
final String name;

const GoodsShareLinkWidget(
{Key key, this.title, this.desc, this.imgGoods, this.icon, this.name})
: super(key: key);

@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(left: 10, right: 10),
padding: EdgeInsets.only(left: 16, top: 10, right: 16, bottom: 10),
decoration: BoxDecoration(
color: Color(0xfff8f8f8), borderRadius: BorderRadius.circular(10)),
width: double.infinity,
child: Column(
children: <Widget>[
Text(
title ?? '',
style: TextStyle(
color: Color(0xff333333),
fontWeight: FontWeight.bold,
fontSize: 11,
),
),
Row(
children: <Widget>[
Expanded(
child: Text(
title ?? '',
maxLines: 3,
style: TextStyle(
color: Color(0xff999999),
fontWeight: FontWeight.normal,
fontSize: 11,
),
),
),
Container(
width: 48,
height: 48,
color: Colors.redAccent,
)
],
),
Container(
margin: EdgeInsets.only(top: 6, bottom: 6),
width: double.infinity,
height: 0.5,
color: Color(0xffeaeaea),
),
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 6),
width: 15,
height: 15,
color: Colors.redAccent,
),
Text(
name,
style: TextStyle(fontSize: 11, color: Color(0xff999999)),
)
],
)
],
));
}
}

+ 69
- 0
lib/pages/goods_share_page/widgets/goods_share_miniprogram_widget.dart View File

@@ -0,0 +1,69 @@
import 'package:flutter/material.dart';

class GoodsShareMiniprogramWidget extends StatelessWidget {
final String title;
final String imgGoods;
final String icon;
final String name;

const GoodsShareMiniprogramWidget(
{Key key, this.title, this.imgGoods, this.icon, this.name})
: super(key: key);

@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(left: 10, right: 10),
padding: EdgeInsets.only(left: 16, top: 10, right: 16, bottom: 10),
decoration: BoxDecoration(
color: Color(0xfff8f8f8), borderRadius: BorderRadius.circular(10)),
width: double.infinity,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 6),
width: 15,
height: 15,
color: Colors.redAccent,
),
Text(
name,
style: TextStyle(fontSize: 11, color: Color(0xff999999)),
)
],
),
Text(
title ?? '',
maxLines: 2,
style: TextStyle(
color: Color(0xff333333),
fontWeight: FontWeight.bold,
fontSize: 11,
),
),
Container(
margin: EdgeInsets.only(top: 10, bottom: 10),
width: double.infinity,
height: 180,
color: Colors.redAccent,
),
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 6),
width: 15,
height: 15,
color: Colors.redAccent,
),
Text(
'小程序',
style: TextStyle(fontSize: 11, color: Color(0xff333333)),
)
],
),
],
));
}
}

+ 5
- 1
lib/widgets/goods_details/footer/goods_details_footer_widget.dart View File

@@ -1,6 +1,7 @@
import 'package:cached_network_image/cached_network_image.dart'; import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:zhiying_base_widget/pages/goods_share_page/goods_share_page.dart';
import 'package:zhiying_base_widget/widgets/goods_details/footer/bloc/goods_details_footer_bloc.dart'; import 'package:zhiying_base_widget/widgets/goods_details/footer/bloc/goods_details_footer_bloc.dart';
import 'package:zhiying_base_widget/widgets/goods_details/footer/bloc/goods_details_footer_repository.dart'; import 'package:zhiying_base_widget/widgets/goods_details/footer/bloc/goods_details_footer_repository.dart';
import 'package:zhiying_base_widget/widgets/goods_details/footer/goods_details_footer_sk.dart'; import 'package:zhiying_base_widget/widgets/goods_details/footer/goods_details_footer_sk.dart';
@@ -45,7 +46,10 @@ class _GooddsDetailsFooterContainerState
void _collectOnClick() {} void _collectOnClick() {}


/// 分享 /// 分享
void _shareOnClick() {}
void _shareOnClick() {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => GoodsSharePage()));
}


/// 自购省 /// 自购省
void _savemoneyOnClick() {} void _savemoneyOnClick() {}


+ 135
- 0
lib/widgets/share/share_alert.dart View File

@@ -0,0 +1,135 @@
import 'dart:ui';

import 'package:flutter/material.dart';

class ShareAlert extends StatelessWidget {
final Widget child;

const ShareAlert({Key key, this.child}) : super(key: key); // 中间视图

@override
Widget build(BuildContext context) {
return GestureDetector(
child: Scaffold(
backgroundColor: Colors.transparent,
body: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), //背景
child: Container(
child: Column(
children: <Widget>[
Expanded(
child: Center(child: child ?? Container()),
),
_ShareAlertContent(),
],
),
), // 模糊化
),
),
onTap: () {
Navigator.of(context).pop();
},
);
}
}

class _ShareAlertContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {},
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
),
child: SafeArea(
top: false,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 8, bottom: 8),
width: 62,
height: 4,
decoration: BoxDecoration(
color: Color(0xffd8d8d8),
borderRadius: BorderRadius.circular(2)),
),
Text(
'分享至',
style: TextStyle(
fontSize: 15,
color: Color(0xff333333),
fontWeight: FontWeight.bold),
),
Container(
margin:
EdgeInsets.only(left: 12, right: 12, top: 10, bottom: 10),
child: _createIcons(),
),
GestureDetector(
child: Container(
margin: EdgeInsets.only(left: 12, right: 12, bottom: 10),
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Color(0xfff3f3f3),
borderRadius: BorderRadius.circular(8)),
child: Center(
child: Text(
'取消',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Color(0xff999999)),
),
),
),
onTap: () {
Navigator.of(context).pop();
},
)
],
),
),
),
);
}

Widget _createIcons() {
return Wrap(
spacing: 10,
runSpacing: 10,
children: List.generate(6, (index) {
return _createIcon();
}),
);
}

Widget _createIcon() {
return Container(
width: 60,
child: Column(
children: <Widget>[
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.redAccent),
),
Padding(
padding: const EdgeInsets.only(top: 2, bottom: 2),
child: Text(
'分享平台',
style: TextStyle(fontSize: 12, color: Color(0xff333333)),
),
),
],
),
);
}
}

Write Preview
Loading…
Cancel
Save