xt / Flutter-ReserveApp · Commits

Go to a project

Commit 089cc473e745dd78f20f802aecd4464845d91049

Authored by wdn127929
1 parent 71a705f0
build: skipped

全店客情首页UI

Inline Side-by-side
Showing 4 changed files with 786 additions and 240 deletions
... ... @@ -69,52 +69,13 @@ class _BarChartWidgetState extends State<BarChartWidget> {
);
Widget getTitles(double value, TitleMeta meta) {
print(meta);
final style = TextStyle(
color: MyColours.color_999999,
fontSize: font(10),
);
String text;
switch (value.toInt()) {
case 0:
text = '1月';
break;
case 1:
text = '2月';
break;
case 2:
text = '3月';
break;
case 3:
text = '4月';
break;
case 4:
text = '5月';
break;
case 5:
text = '6月';
break;
case 6:
text = '7月';
break;
case 7:
text = '8月';
break;
case 8:
text = '9月';
break;
case 9:
text = '10月';
break;
case 10:
text = '11月';
break;
case 11:
text = '12月';
break;
default:
text = '';
break;
}
String text = (value.toInt() + 1).toString() + '月';
return SideTitleWidget(
axisSide: meta.axisSide,
space: w(6),
... ... @@ -123,16 +84,22 @@ class _BarChartWidgetState extends State<BarChartWidget> {
}
Widget leftTitles(double value, TitleMeta meta) {
if (value == meta.max) {
return Container();
}
// if (value == meta.max) {
// return Container();
// }
print(value);
print(meta);
print(meta.max);
print(meta.min);
TextStyle style =
TextStyle(fontSize: font(10), color: MyColours.color_999999);
return SideTitleWidget(
axisSide: meta.axisSide,
space: w(6),
child: Text(
meta.formattedValue,
// meta.formattedValue,
value.toInt().toString(),
style: style,
textAlign: TextAlign.right,
));
... ... @@ -153,7 +120,6 @@ class _BarChartWidgetState extends State<BarChartWidget> {
showTitles: true,
reservedSize: w(30),
getTitlesWidget: leftTitles,
// interval: 5
),
),
topTitles: AxisTitles(
... ... @@ -164,176 +130,19 @@ class _BarChartWidgetState extends State<BarChartWidget> {
),
);
FlBorderData get borderData => FlBorderData(
show: false,
);
LinearGradient get _barsGradient => LinearGradient(
colors: [
MyColours.color_8EBBBE,
MyColours.color_8EBBBE,
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
);
List<BarChartGroupData> getData(double barsWidth, double barsSpace) {
return [
BarChartGroupData(
x: 0,
barRods: [
BarChartRodData(
toY: 8,
// gradient: _barsGradient,
color: MyColours.color_8EBBBE,
borderRadius: BorderRadius.zero,
width: barsWidth,
)
],
showingTooltipIndicators: [0],
),
BarChartGroupData(
x: 1,
barRods: [
BarChartRodData(
toY: 10,
// gradient: _barsGradient,
borderRadius: BorderRadius.zero,
width: barsWidth,
color: MyColours.color_8EBBBE)
],
showingTooltipIndicators: [0],
),
BarChartGroupData(
x: 2,
barRods: [
BarChartRodData(
toY: 14,
borderRadius: BorderRadius.zero,
width: barsWidth,
// gradient: _barsGradient,
color: MyColours.color_8EBBBE)
],
showingTooltipIndicators: [0],
),
BarChartGroupData(
x: 3,
barRods: [
BarChartRodData(
toY: 15,
borderRadius: BorderRadius.zero,
width: barsWidth,
// gradient: _barsGradient,
color: MyColours.color_8EBBBE)
],
showingTooltipIndicators: [0],
),
BarChartGroupData(
x: 4,
barRods: [
BarChartRodData(
toY: 13,
borderRadius: BorderRadius.zero,
width: barsWidth,
// gradient: _barsGradient,
color: MyColours.color_8EBBBE)
],
showingTooltipIndicators: [0],
),
BarChartGroupData(
x: 5,
barRods: [
BarChartRodData(
toY: 10,
borderRadius: BorderRadius.zero,
width: barsWidth,
// gradient: _barsGradient,
color: MyColours.color_8EBBBE)
],
showingTooltipIndicators: [0],
),
BarChartGroupData(
x: 6,
barRods: [
BarChartRodData(
toY: 16,
borderRadius: BorderRadius.zero,
width: barsWidth,
// gradient: _barsGradient,
color: MyColours.color_8EBBBE)
],
showingTooltipIndicators: [0],
),
BarChartGroupData(
x: 7,
barRods: [
BarChartRodData(
toY: 16,
borderRadius: BorderRadius.zero,
width: barsWidth,
// gradient: _barsGradient,
color: MyColours.color_8EBBBE)
],
showingTooltipIndicators: [0],
),
BarChartGroupData(
x: 8,
barRods: [
BarChartRodData(
toY: 16,
borderRadius: BorderRadius.zero,
width: barsWidth,
// gradient: _barsGradient,
color: MyColours.color_8EBBBE)
],
showingTooltipIndicators: [0],
),
BarChartGroupData(
x: 9,
barRods: [
BarChartRodData(
toY: 16,
borderRadius: BorderRadius.zero,
width: barsWidth,
// gradient: _barsGradient,
color: MyColours.color_8EBBBE)
],
showingTooltipIndicators: [0],
),
BarChartGroupData(
x: 10,
barRods: [
BarChartRodData(
toY: 16,
borderRadius: BorderRadius.zero,
width: barsWidth,
// gradient: _barsGradient,
color: MyColours.color_8EBBBE)
],
showingTooltipIndicators: [0],
),
BarChartGroupData(
x: 11,
barRods: [
BarChartRodData(
toY: 16,
borderRadius: BorderRadius.zero,
width: barsWidth,
// gradient: _barsGradient,
color: MyColours.color_8EBBBE)
],
showingTooltipIndicators: [0],
),
];
}
@override
Widget build(BuildContext context) {
return BarChart(
BarChartData(
barTouchData: barTouchData,
titlesData: titlesData,
borderData: borderData,
borderData: FlBorderData(
show: true,
border: Border.symmetric(
horizontal: BorderSide(color: MyColours.color_DBDBDB, width: w(1)),
),
),
barGroups: widget.dataList.asMap().entries.map((e) {
final index = e.key;
final data = e.value;
... ... @@ -344,6 +153,7 @@ class _BarChartWidgetState extends State<BarChartWidget> {
);
}).toList(),
groupsSpace: w(10),
gridData: FlGridData(
show: true,
// checkToShowHorizontalLine: (value) => value % 10 == 0,
... ...
... ... @@ -11,6 +11,7 @@ import 'package:one_key/res/colors.dart';
import 'package:one_key/route/navigator_util.dart';
import 'package:one_key/utils/event_bus.dart';
import 'package:one_key/utils/utils.dart';
import 'package:one_key/widgets/MyDivider.dart';
import 'package:one_key/widgets/h_empty_view.dart';
import 'package:one_key/widgets/page_exception.dart';
import 'package:one_key/widgets/round_button.dart';
... ... @@ -31,26 +32,29 @@ class _StoreCustomerHomePageState extends State<StoreCustomerHomePage> {
ScrollController _controller = ScrollController();
CustomerProvider customerProvider;
bool showWarning = false;
int year;
int month;
List<BarData> dataList = [
BarData(MyColours.color_8EBBBE, 188),
BarData(MyColours.color_8EBBBE, 200),
BarData(MyColours.color_8EBBBE, 8),
BarData(MyColours.color_8EBBBE, 15),
BarData(MyColours.color_8EBBBE, 5),
BarData(MyColours.color_8EBBBE, 2),
BarData(MyColours.color_8EBBBE, 2),
BarData(MyColours.color_8EBBBE, 18),
BarData(MyColours.color_8EBBBE, 8),
BarData(MyColours.color_8EBBBE, 168),
BarData(MyColours.color_8EBBBE, 15),
BarData(MyColours.color_8EBBBE, 5),
BarData(MyColours.color_8EBBBE, 2),
BarData(MyColours.color_8EBBBE, 2),
BarData(MyColours.color_8EBBBE, null ?? 0),
BarData(MyColours.color_8EBBBE, 0),
];
@override
void initState() {
super.initState();
year = DateTime.now().year;
month = DateTime.now().month;
WidgetsBinding.instance.addPostFrameCallback((_) {
_getSellerGuestManage();
_getMarketingBySeller();
... ... @@ -227,28 +231,382 @@ class _StoreCustomerHomePageState extends State<StoreCustomerHomePage> {
}
Widget _chart() {
return AspectRatio(
aspectRatio: 1.4,
child: Padding(
padding: EdgeInsets.all(w(20)),
child: LayoutBuilder(builder: (context, constraints) {
return BarChartWidget(
dataList: dataList,
);
})));
// return Container(
// height: w(143),
// child: BarChart(
// BarChartData(
// barTouchData: barTouchData,
// titlesData: titlesData,
// borderData: borderData,
// barGroups: barGroups,
// gridData: FlGridData(show: false),
// alignment: BarChartAlignment.spaceAround,
// maxY: 20,
// ),
// ));
return Container(
// height: w(216),
padding: EdgeInsets.only(top: w(16), left: w(16), right: w(16)),
margin: EdgeInsets.all(w(10)),
decoration: BoxDecoration(
color: MyColours.color_ffffff,
borderRadius: BorderRadius.circular(r(8))),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: () {
setState(() {
year--;
});
// _getGuestReserve(showLoading: true);
},
child: Padding(
padding:
EdgeInsets.only(right: ScreenUtil().setWidth(20)),
child: Image.asset(
Utils.getImgPath('c_arrow_left'),
width: ScreenUtil().setWidth(24),
))),
Text(
'${year}年',
style: TextStyle(
fontSize: ScreenUtil().setSp(32),
color: MyColours.color_000000),
),
InkWell(
onTap: () {
if (year >= DateTime.now().year) {
return;
}
setState(() {
year++;
});
// _getGuestReserve(showLoading: true);
},
child: Padding(
padding: EdgeInsets.only(
left: ScreenUtil().setWidth(20),
),
child: Image.asset(
Utils.getImgPath(year != DateTime.now().year
? 'c_arrow_right'
: 'c_arrow_right_gray'),
width: ScreenUtil().setWidth(24),
)))
],
),
VEmptyView(80),
Container(
width: double.infinity,
height: w(177),
child: LayoutBuilder(builder: (context, constraints) {
return BarChartWidget(
dataList: dataList,
);
}))
],
),
);
}
Widget _monthWidget() {
return Container(
margin: EdgeInsets.symmetric(horizontal: w(10)),
padding: EdgeInsets.symmetric(horizontal: w(15), vertical: w(10)),
decoration: BoxDecoration(color: MyColours.color_ffffff),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: () {
if (month == 1) {
month = 12;
setState(() {});
} else {
setState(() {
month--;
});
}
// _getGuestReserve(showLoading: true);
},
child: Padding(
padding:
EdgeInsets.only(right: ScreenUtil().setWidth(20)),
child: Image.asset(
Utils.getImgPath('c_arrow_left'),
width: ScreenUtil().setWidth(24),
))),
Text(
'${month}月',
style: TextStyle(
fontSize: ScreenUtil().setSp(40),
color: MyColours.color_515151),
),
InkWell(
onTap: () {
if (month == 12) {
month = 1;
setState(() {});
} else {
setState(() {
month++;
});
}
// _getGuestReserve(showLoading: true);
},
child: Padding(
padding: EdgeInsets.only(
left: ScreenUtil().setWidth(20),
),
child: Image.asset(
Utils.getImgPath('c_arrow_right'),
width: ScreenUtil().setWidth(24),
)))
],
),
VEmptyView(20),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'预订',
style: TextStyle(
fontWeight: FontWeight.bold,
color: MyColours.color_515151,
fontSize: font(
(18),
)),
),
HEmptyView(10),
Text(
'1089单',
style: TextStyle(
color: MyColours.color_515151,
fontSize: font(
(14),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(15),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'1190桌',
style: TextStyle(
color: MyColours.color_515151,
fontSize: font(
(14),
)),
),
],
),
VEmptyView(15),
Wrap(
// crossAxisAlignment: WrapCrossAlignment.center,
// runAlignment: WrapAlignment.center,
// alignment: WrapAlignment.center,
children: [
Text(
'到店',
style: TextStyle(
fontWeight: FontWeight.bold,
color: MyColours.color_515151,
fontSize: font(
(18),
)),
),
HEmptyView(10),
Text(
'1089单',
style: TextStyle(
color: MyColours.color_515151,
fontSize: font(
(14),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(15),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'1190桌',
style: TextStyle(
color: MyColours.color_515151,
fontSize: font(
(14),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(15),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'1190人',
style: TextStyle(
color: MyColours.color_515151,
fontSize: font(
(14),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(15),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'1190取消',
style: TextStyle(
color: MyColours.color_515151,
fontSize: font(
(14),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(15),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'到客97.2%',
style: TextStyle(
color: MyColours.color_515151,
fontSize: font(
(14),
)),
),
],
),
VEmptyView(15),
MyDivider(
double.infinity,
w(1),
color: MyColours.color_DBDBDB,
),
VEmptyView(15),
Wrap(
// crossAxisAlignment: WrapCrossAlignment.start,
// runAlignment: WrapAlignment.center,
// alignment: WrapAlignment.center,
runSpacing: w(5),
children: [
Text(
'有金额订单 6000',
style: TextStyle(
color: MyColours.color_999999,
decoration: TextDecoration.underline,
fontSize: font(
(10),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(12),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'消费 9585800.00元',
style: TextStyle(
color: MyColours.color_999999,
decoration: TextDecoration.underline,
fontSize: font(
(10),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(12),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'人均 8885.58元',
style: TextStyle(
color: MyColours.color_999999,
decoration: TextDecoration.underline,
fontSize: font(
(10),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(12),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'桌均 95888.58元',
style: TextStyle(
color: MyColours.color_999999,
decoration: TextDecoration.underline,
fontSize: font(
(10),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(12),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'存酒 8位',
style: TextStyle(
color: MyColours.color_999999,
decoration: TextDecoration.underline,
fontSize: font(
(10),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(12),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'提前点餐 9位',
style: TextStyle(
color: MyColours.color_999999,
decoration: TextDecoration.underline,
fontSize: font(
(10),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(12),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'安排菜 9位',
style: TextStyle(
color: MyColours.color_999999,
decoration: TextDecoration.underline,
fontSize: font(
(10),
)),
),
],
),
],
),
);
}
@override
... ... @@ -424,8 +782,377 @@ class _StoreCustomerHomePageState extends State<StoreCustomerHomePage> {
uid: customerProvider
.storeSunmodel.sellerUser[index - 1].uid);
}),
VEmptyView(100),
_chart()
_chart(),
_monthWidget(),
VEmptyView(24),
ListView.builder(
itemCount: 10,
controller: _controller,
shrinkWrap: true,
padding: EdgeInsets.symmetric(horizontal: w(10)),
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.only(bottom: w(10)),
padding: EdgeInsets.symmetric(horizontal: w(10)),
decoration: BoxDecoration(
color: MyColours.color_ffffff,
borderRadius: BorderRadius.only(
topRight: Radius.circular(r(8)),
bottomRight: Radius.circular(r(8))),
),
child: Row(
children: [
Container(
width: w(122),
padding: EdgeInsets.symmetric(vertical: w(5)),
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: MyColours.color_f3f3f3,
width: w(1)))),
child: Column(
children: [
VEmptyView(24),
Align(
alignment: Alignment.centerLeft,
child: Container(
padding: EdgeInsets.symmetric(
vertical: w(4), horizontal: w(5)),
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(r(3)),
border: Border.all(
color: MyColours.color_999999,
width: w(1))),
child: Text(
'张珊珊',
style: TextStyle(
fontSize: font(12),
fontWeight: FontWeight.bold,
color: MyColours.color_999999),
),
),
),
VEmptyView(10),
Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Text(
'34',
style: TextStyle(
fontSize: font(24),
fontWeight: FontWeight.bold,
color: MyColours.color_438E93),
),
Text(
'位',
style: TextStyle(
fontSize: font(14),
color: MyColours.color_000000),
),
],
),
VEmptyView(10),
Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Text(
'23',
style: TextStyle(
fontSize: font(14),
fontWeight: FontWeight.bold,
color: MyColours.color_438E93),
),
MyDivider(
w(4),
w(1),
color: MyColours.color_999999,
),
Text(
'9',
style: TextStyle(
fontSize: font(14),
fontWeight: FontWeight.bold,
color: MyColours.color_E89243),
),
MyDivider(
w(4),
w(1),
color: MyColours.color_999999,
),
Text(
'2',
style: TextStyle(
fontSize: font(14),
fontWeight: FontWeight.bold,
color: MyColours.color_E34D59),
),
],
),
VEmptyView(24),
],
),
),
Expanded(
child: Container(
padding: EdgeInsets.only(
top: w(5), bottom: w(5), left: w(10)),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'预订',
style: TextStyle(
fontWeight: FontWeight.bold,
color: MyColours.color_515151,
fontSize: font(
(12),
)),
),
HEmptyView(10),
Text(
'1089单',
style: TextStyle(
color: MyColours.color_515151,
fontSize: font(
(10),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(15),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'1190桌',
style: TextStyle(
color: MyColours.color_515151,
fontSize: font(
(10),
)),
),
],
),
VEmptyView(10),
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'到店',
style: TextStyle(
fontWeight: FontWeight.bold,
color: MyColours.color_515151,
fontSize: font(
(12),
)),
),
HEmptyView(10),
Text(
'1089单',
style: TextStyle(
color: MyColours.color_515151,
fontSize: font(
(10),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(15),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'1190桌',
style: TextStyle(
color: MyColours.color_515151,
fontSize: font(
(10),
)),
),
],
),
VEmptyView(10),
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'1089人',
style: TextStyle(
color: MyColours.color_515151,
fontSize: font(
(10),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(15),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'1190取消',
style: TextStyle(
color: MyColours.color_515151,
fontSize: font(
(10),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(15),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'到客90.1%',
style: TextStyle(
color: MyColours.color_515151,
fontSize: font(
(10),
)),
),
],
),
VEmptyView(10),
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'有金额订单数 25',
style: TextStyle(
color: MyColours.color_999999,
fontSize: font(
(10),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(15),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'总消费 25800元',
style: TextStyle(
color: MyColours.color_999999,
fontSize: font(
(10),
)),
),
],
),
VEmptyView(10),
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'人均 103.2元',
style: TextStyle(
color: MyColours.color_999999,
fontSize: font(
(10),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(15),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'桌均 860元',
style: TextStyle(
color: MyColours.color_999999,
fontSize: font(
(10),
)),
),
],
),
VEmptyView(10),
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'存酒 1位',
style: TextStyle(
color: MyColours.color_999999,
fontSize: font(
(10),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(15),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'提前点餐 9位',
style: TextStyle(
color: MyColours.color_999999,
fontSize: font(
(10),
)),
),
HEmptyView(10),
MyDivider(
w(1),
w(15),
color: MyColours.color_DBDBDB,
),
HEmptyView(10),
Text(
'安排菜 9位',
style: TextStyle(
color: MyColours.color_999999,
fontSize: font(
(10),
)),
),
],
),
],
),
Image.asset(
Utils.getImgPath('arrow_right_new'),
width: w(12),
)
],
),
))
],
),
);
})
],
),
)),
... ...
import 'package:flutter/material.dart';
class MyColours {
static const Color color_E89243 = Color(0xFFE89243);
static const Color color_3E6F51 = Color(0xFF3E6F51);
static const Color color_877952 = Color(0xFF877952);
static const Color color_FBF6F1 = Color(0xFFFBF6F1);
... ...
... ... @@ -46,6 +46,14 @@ import '../models/recharge_list_model.dart';
typedef BookTimeSetCallback = void Function(bool needChange);
class Utils {
//得到当月最后一天
static getCurrentMonthLast(int month) {
var date = new DateTime(2013, month + 1, 0);
// print(date.day); // 28 for February
return date.day;
}
static randomGet(int min, int max) {
//实例化 Random类 并赋值给 私有变量 _random
final _random = new Random();
... ...