xt / Flutter-ReserveApp · Commits

Go to a project

Commit 0877ebca3c81a958d8b4de39b4d236553f8ebb79

Authored by wdn127929
1 parent f174a346
build: skipped

多时段部分UI

Inline Side-by-side
Showing 6 changed files with 722 additions and 19 deletions
import 'package:flutter/material.dart';
import 'package:one_key/widgets/MyDivider.dart';
import 'package:one_key/widgets/system_app_bar.dart';
import 'package:one_key/widgets/v_empty_view.dart';
import '../../../models/filter_btn_model.dart';
import '../../../res/colors.dart';
import '../../../utils/dialog_util.dart';
import '../../../utils/screen_util.dart';
import '../../../utils/utils.dart';
import '../../../widgets/h_empty_view.dart';
import '../../../widgets/round_button.dart';
/**
* 多时段编辑页面
*/
class BookTimeSettingEditPage extends StatefulWidget {
const BookTimeSettingEditPage();
@override
State<BookTimeSettingEditPage> createState() =>
_BookTimeSettingEditPageState();
}
class _BookTimeSettingEditPageState extends State<BookTimeSettingEditPage> {
bool isTime = true;
bool isWeek = false;
List<FilterBtnModel> weekData = [];
String weekShow = '点击选择日期（可多选）';
@override
void initState() {
super.initState();
_initWeekData();
WidgetsBinding.instance.addPostFrameCallback((_) {});
}
_initWeekData() {
FilterBtnModel filterBtnModel = FilterBtnModel();
filterBtnModel.selectNoon = false;
filterBtnModel.selectNig = false;
filterBtnModel.title = '周日';
weekData.add(filterBtnModel);
for (int i = 1; i < 7; i++) {
FilterBtnModel filterBtnModel = FilterBtnModel();
filterBtnModel.selectNoon = false;
filterBtnModel.selectNig = false;
filterBtnModel.title = '周${Utils.formatWeekDayNum(i)}';
weekData.add(filterBtnModel);
}
}
_itemRadioWidget(bool select, String title, {GestureTapCallback onTap}) {
return InkWell(
onTap: onTap,
child: Row(children: [
Image.asset(
Utils.getImgPath(
select ? 'plan_dish_select' : 'plan_dish_unselect'),
width: w(20),
),
HEmptyView(6),
Text(
title,
style: TextStyle(color: MyColours.color_515151, fontSize: font(16)),
),
]));
}
///时间选择
Widget _select1(String title, GestureTapCallback onTap) {
return InkWell(
onTap: onTap,
child: Container(
padding: EdgeInsets.only(left: w(16)),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
// height: ScreenUtil().setWidth(40),
// color: Colors.red,
child: Text(
title,
style: TextStyle(
height: 1.5,
color: title == '点击选择日期（可多选）'
? MyColours.color_999999
: MyColours.color_515151,
fontSize: font(16)),
),
),
// HEmptyView(20),
Spacer(),
// Text(hintText,
// style: TextStyle(
// color: hintText == '点击设置开始日期' || hintText == '点击设置结束日期'
// ? MyColours.color_999999
// : MyColours.color_515151,
// fontSize: font(16),
// )),
HEmptyView(20),
Image.asset(
Utils.getImgPath('arrow_right_new'),
width: w(9),
),
HEmptyView(32),
],
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: MyColours.color_ffffff,
appBar: SystemAppBar('多时段预订详情'),
body: Column(
children: [
Expanded(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.symmetric(
horizontal: w(16),
vertical: w(12),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'选择日期：',
style: TextStyle(
color: MyColours.color_515151, fontSize: font(16)),
),
VEmptyView(30),
Row(
children: [
HEmptyView(32),
_itemRadioWidget(isTime, '指定日期', onTap: () {
if (!isTime) {
setState(() {
isTime = true;
isWeek = false;
weekShow = '点击选择日期（可多选）';
//清空选择的周数据
weekData = [];
});
}
}),
HEmptyView(80),
_itemRadioWidget(isWeek, '每周', onTap: () {
if (!isWeek) {
setState(() {
isWeek = true;
isTime = false;
weekShow = '点击选择日期（可多选）';
//清空选择的日期数据
});
}
}),
HEmptyView(30),
],
),
VEmptyView(30),
_select1(weekShow, () async {
if (isWeek) {
FocusScope.of(context)
.requestFocus(FocusNode()); //点击空白处隐藏键盘
//弹出时间选择器
// showPickerDateTime(context);
// showDateSelWidget = false;
List<FilterBtnModel> data =
await DialogUtil.openWeekSelectModalBottomSheet(
context, weekData);
if (data != null) {
//改变了
weekData = [];
weekData.addAll(data);
weekShow = '';
weekData.forEach((element) {
if (element.select) {
weekShow += '${element.title} ';
}
});
if (weekShow.endsWith(' ')) {
weekShow =
weekShow.substring(0, weekShow.length - 1);
}
if (weekShow == '') {
weekShow = '点击选择日期（可多选）';
}
setState(() {});
}
} else {
DateTime dateTime = DateTime.now();
DialogUtil.showCalendarDialogMultiple(context, dateTime)
.then((day) async {
if (day != null) {
// createDateText1(context, day);
// bool success =
// await tableManagerModel.getTableListOrReserve(
// context,
// currTimeIndex,
// dateTime,
// selectNumber,
// showLoading: true,
// );
}
});
}
}),
],
),
),
VEmptyView(24),
Padding(
padding: EdgeInsets.only(left: w(16)),
child: MyDivider(
double.infinity,
w(1),
color: MyColours.color_DBDBDB,
),
)
],
),
)),
Container(
color: MyColours.color_ffffff,
padding: EdgeInsets.only(
left: w(45), top: w(12), bottom: w(25), right: w(45)),
child: RoundButton(
text: '保存',
// width: ScreenUtil().setWidth(280 * 2),
height: w(41),
radius: r(5),
isBold: true,
fontSize: 32,
onPressed: () {}))
],
),
);
}
}
... ...
import 'package:flutter/material.dart';
import 'package:one_key/res/colors.dart';
import 'package:one_key/route/navigator_util.dart';
import 'package:one_key/widgets/h_empty_view.dart';
import 'package:one_key/widgets/system_app_bar.dart';
import 'package:one_key/widgets/v_empty_view.dart';
... ... @@ -21,26 +23,40 @@ class BookTimeSettingListPage extends StatefulWidget {
class _BookTimeSettingListPageState extends State<BookTimeSettingListPage> {
List<Widget> listWidget() {
List<Widget> datas = [];
for (int i = 0; i < 10; i++) {
datas.add(
Text(
'25-01-28 除夕',
for (int i = 0; i < 3; i++) {
datas.add(Container(
child: Text(
'2024-01-28 除夕',
style: TextStyle(fontSize: font(10), color: MyColours.color_515151),
),
);
));
}
return datas;
}
List<Widget> listWidgetTime() {
List<Widget> listWidgetTime() {
List<Widget> datas = [];
for (int i = 0; i < 10; i++) {
datas.add(
Text(
'25-01-28 除夕',
style: TextStyle(fontSize: font(10), color: MyColours.color_515151),
for (int i = 0; i < 3; i++) {
datas.add(Padding(
padding: EdgeInsets.only(left: w(12), right: w(12), bottom: w(5)),
child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'午餐',
style:
TextStyle(fontSize: font(10), color: MyColours.color_999999),
),
Spacer(),
Text(
'10:00-13:00',
style:
TextStyle(fontSize: font(10), color: MyColours.color_999999),
),
HEmptyView(80)
],
),
);
));
}
return datas;
}
... ... @@ -62,33 +78,63 @@ class _BookTimeSettingListPageState extends State<BookTimeSettingListPage> {
margin: EdgeInsets.only(
left: w(20), right: w(20), bottom: w(10)),
decoration: BoxDecoration(
color: MyColours.color_ffffff,
boxShadow: [
BoxShadow(
offset: Offset(0, w(4)),
blurRadius: r(4),
color: MyColours.color_40000000)
],
borderRadius: BorderRadius.circular(r(8))),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.symmetric(horizontal: w(12)),
height: w(33),
decoration: BoxDecoration(
color: MyColours.color_438E93,
color: true
? MyColours.color_438E93
: MyColours.color_999999,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(r(8)),
topRight: Radius.circular(r(8)),
)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'每周固定/指定日期',
style: TextStyle(
fontSize: font(18),
color: MyColours.color_ffffff),
),
RoundButton(
width: w(32),
height: w(19),
radius: r(5),
text: true ? '停用' : '启用',
fontSize: 24,
textColor: MyColours.color_ffffff,
gradientStart: Colors.transparent,
gradientEnd: Colors.transparent,
borderColor: MyColours.color_ffffff,
// onPressed: widget.onPressedSwich,
)
],
),
),
VEmptyView(16),
Wrap(
spacing: w(10),
children: listWidget(),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: w(12)),
child: Wrap(
spacing: w(5),
children: listWidget(),
)),
VEmptyView(16),
Column(
children: listWidgetTime(),
)
],
),
);
... ... @@ -98,13 +144,15 @@ class _BookTimeSettingListPageState extends State<BookTimeSettingListPage> {
padding: EdgeInsets.only(
left: w(45), top: w(12), bottom: w(25), right: w(45)),
child: RoundButton(
text: '保存',
text: '创建新的多时段预订规则',
// width: ScreenUtil().setWidth(280 * 2),
height: w(41),
radius: r(5),
isBold: true,
fontSize: 32,
onPressed: () {}))
onPressed: () {
NavigatorUtil.goBookTimeSettingEditPage(context);
}))
],
),
);
... ...
... ... @@ -2278,5 +2278,18 @@ class NavigatorUtil {
replace: replace);
}
///多时段预订设置列表编辑页面
static Future<dynamic> goBookTimeSettingEditPage(
BuildContext context, {
replace = false,
}) {
return _navigateTo(context, "${Routes.book_time_setting_edit_page}",
replace: replace);
}
}
... ...
... ... @@ -199,6 +199,7 @@ import '../pages/login/collect_store_info_page.dart';
import '../pages/login/complete_create_store.dart';
import '../pages/login/web_page.dart';
import '../pages/message/message_recharge_info_page.dart';
import '../pages/my/book_time_setting/book_time_setting_edit_page.dart';
import '../pages/my/book_time_setting/book_time_setting_list_page.dart';
import '../pages/my/comment_manage/comment_manage_home_page.dart';
import '../pages/my/customer_type/my_customer/my_customer_home_page.dart';
... ... @@ -3911,3 +3912,21 @@ var bookTimeSettingListPageHandle = new Handler(
child: BookTimeSettingListPage());
});
///多时段预订设置编辑页面
var bookTimeSettingEditPageHandle = new Handler(
handlerFunc: (BuildContext context, Map<String, List<Object>> params) {
// String rid = params["rid"].first;
// // String smsTemplate = params["smsTemplate"].first;
// CouponUse use = CouponUse.fromJson(
// json.decode(FluroConvertUtils.fluroCnParamsDecode(params["use"].first)));
// CouponSunModel couponSunModel = CouponSunModel.fromJson(json.decode(
// FluroConvertUtils.fluroCnParamsDecode(params["couponSunModel"].first)));
return ChangeNotifierProvider<MarketingCenterProvider>(
create: (_) => MarketingCenterProvider(),
child: BookTimeSettingEditPage());
});
... ...
... ... @@ -394,6 +394,13 @@ class Routes {
static String book_time_setting_list_page =
"/book_time_setting_list_page"; //多时段预订列表
static String book_time_setting_edit_page =
"/book_time_setting_edit_page"; //多时段预订列表编辑页面
... ... @@ -742,6 +749,11 @@ router.define(select_table_f_or_reserve, handler: handleSelectTableFOrReserveHan
router.define(book_time_setting_list_page, handler:bookTimeSettingListPageHandle);
router.define(book_time_setting_edit_page, handler:bookTimeSettingEditPageHandle);
}
... ...
... ... @@ -7255,6 +7255,366 @@ class DialogUtil {
}
}
//显示日历弹框
static Future<DateTime> showCalendarDialogMultiple(
BuildContext context, DateTime selectDateTime) {
CalendarController _calendarController = CalendarController();
final _selectedDay = DateTime.now();
Map<DateTime, List> _events = {
_selectedDay: ['Event A7', 'Event B7', 'Event C7', 'Event D7'],
_selectedDay.add(Duration(days: 1)): [
'Event A8',
'Event B8',
'Event C8',
'Event D8'
],
_selectedDay.add(Duration(days: 2)):
Set.from(['Event A9', 'Event A9', 'Event B9']).toList(),
};
return showModalBottomSheet<DateTime>(
context: context,
isScrollControlled: true,
builder: (BuildContext context) {
BuildContext dialogContext = context;
Widget widget = StatefulBuilder(builder: (context, _setState) {
return Container(
color: MyColours.color_ffffff,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TableCalendar(
// rowHeight: ScreenUtil().setWidth(100),
calendarController: _calendarController,
initialSelectedDay: _selectedDay,
onDaySelected: (day, events, holidays) {
Navigator.of(dialogContext).pop(day);
},
// holidays: _holidays,
availableGestures: AvailableGestures.none,
events: _events,
locale: "zh_CN",
initialCalendarFormat: CalendarFormat.month,
headerStyle: HeaderStyle(
decoration:
BoxDecoration(color: MyColours.color_2bb5b7),
headerPadding: EdgeInsets.zero,
formatButtonVisible: false,
centerHeaderTitle: false,
titleTextBuilder: (dateTime, _) {
return dateTime.year.toString() +
"年-" +
Utils.addZeroNumber(dateTime.month) +
"月";
},
titleTextStyle: TextStyle(
color: MyColours.color_ffffff,
fontSize: ScreenUtil().setSp(30)),
leftChevronIcon: const Icon(Icons.chevron_left,
color: Colors.white),
rightChevronIcon: const Icon(Icons.chevron_right,
color: Colors.white),
),
calendarStyle: CalendarStyle(
contentPadding: EdgeInsets.only(
bottom: ScreenUtil().setWidth(8)),
weekdayStyle: TextStyle(
color: MyColours.color_2bb5b7,
fontSize: ScreenUtil().setSp(32)),
weekendStyle: TextStyle(
color: MyColours.color_f49a5e,
fontSize: ScreenUtil().setSp(32)),
selectedColor: MyColours.color_2bb5b7,
outsideDaysVisible: false,
),
builders: CalendarBuilders(
dowWeekdayBuilder: (context, weekday) {
return Container(
color: MyColours.color_2bb5b7,
alignment: Alignment.center,
margin: EdgeInsets.only(
bottom: ScreenUtil().setWidth(30)),
padding: EdgeInsets.symmetric(
vertical: ScreenUtil().setWidth(15)),
child: Text(
weekday,
style: TextStyle(
color: MyColours.color_97e9ea,
fontSize: ScreenUtil().setSp(28)),
),
);
},
dayBuilder: (context, date, _) {
return Container(
// height: ScreenUtil().setWidth(210),
decoration: BoxDecoration(
// shape: BoxShape.circle,
// color: Colors.blue,
),
// alignment: Alignment.center,
// margin: EdgeInsets.fromLTRB(
// ScreenUtil().setWidth(12),
// ScreenUtil().setWidth(12),
// ScreenUtil().setWidth(12),
// ScreenUtil().setWidth(10)),
// padding: EdgeInsets.symmetric(
// // horizontal: ScreenUtil().setWidth(12),
// vertical: ScreenUtil().setWidth(8),
// ),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
// "${_parseDateDay(date)}",
'${Utils.addZeroNumber(date.day)}',
style: TextStyle().copyWith(
fontSize: ScreenUtil().setSp(32),
color: MyColours.color_353535,
fontWeight: FontWeight.bold)),
// Text(
// // "${_parseDateDay(date)}",
// '${Utils.getLunarSpecialDate(date)}',
// style: TextStyle().copyWith(
// fontSize: ScreenUtil().setSp(22),
// color: MyColours.color_353535),
// ),
Text(
"${_parseDateDay(date)}",
style: TextStyle().copyWith(
fontSize: ScreenUtil().setSp(18),
color: MyColours.color_353535),
),
],
),
);
},
selectedDayBuilder: (context, date, _) {
return Container(
// alignment: Alignment.center,
// margin: EdgeInsets.fromLTRB(
// ScreenUtil().setWidth(12),
// ScreenUtil().setWidth(12),
// ScreenUtil().setWidth(12),
// ScreenUtil().setWidth(32)),
padding: EdgeInsets.only(
bottom: ScreenUtil().setWidth(10),
left: ScreenUtil().setWidth(5),
right: ScreenUtil().setWidth(5),
top: ScreenUtil().setWidth(10)),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
ScreenUtil().setWidth(10)),
color: Color.fromRGBO(42, 110, 109, 1)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
// "${_parseDateDay(date)}",
'${Utils.addZeroNumber(date.day)}',
style: TextStyle().copyWith(
color: MyColours.color_ffffff,
fontSize: ScreenUtil().setSp(32),
fontWeight: FontWeight.bold),
),
Text(
"${_parseDateDay(date)}",
// '${Utils.lunarCalendarHolidaysShow(date)}',
style: TextStyle().copyWith(
fontSize: ScreenUtil().setSp(22),
color: MyColours.color_ffffff),
)
],
),
),
);
},
todayDayBuilder: (context, date, _) {
return Container(
// alignment: Alignment.center,
// margin: EdgeInsets.fromLTRB(
// ScreenUtil().setWidth(12),
// ScreenUtil().setWidth(12),
// ScreenUtil().setWidth(12),
// ScreenUtil().setWidth(32)),
padding: EdgeInsets.only(
bottom: ScreenUtil().setWidth(10),
left: ScreenUtil().setWidth(5),
right: ScreenUtil().setWidth(5),
top: ScreenUtil().setWidth(10)),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
ScreenUtil().setWidth(10)),
color: MyColours.color_2bb5b7),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
// "${_parseDateDay(date)}",
'${Utils.addZeroNumber(date.day)}',
style: TextStyle().copyWith(
color: MyColours.color_ffffff,
fontSize: ScreenUtil().setSp(32),
fontWeight: FontWeight.bold),
),
Text(
"${_parseDateDay(date)}",
// '${Utils.lunarCalendarHolidaysShow(date)}',
style: TextStyle().copyWith(
fontSize: ScreenUtil().setSp(22),
color: MyColours.color_ffffff),
)
],
),
),
);
// return Container(
// decoration: BoxDecoration(
// shape: BoxShape.circle,
// border: Border.all(
// color: MyColours.color_2bb5b7,
// width: ScreenUtil().setWidth(2))),
// alignment: Alignment.center,
// margin: EdgeInsets.fromLTRB(
// ScreenUtil().setWidth(12),
// ScreenUtil().setWidth(12),
// ScreenUtil().setWidth(12),
// ScreenUtil().setWidth(32)),
// padding: EdgeInsets.only(
// bottom: ScreenUtil().setWidth(8),
// left: ScreenUtil().setWidth(16),
// right: ScreenUtil().setWidth(16),
// top: ScreenUtil().setWidth(8)),
// child: Text(
// // '今',
// '${Utils.addZeroNumber(date.day)}',
// style: TextStyle().copyWith(
// fontSize: ScreenUtil().setSp(32),
// color: MyColours.color_2bb5b7),
// ),
// );
},
markersBuilder: (context, date, events, holidays) {
final children = <Widget>[];
// if (events.isNotEmpty) {
// children.add(
// Positioned(
// right: 1,
// bottom: 1,
// child: _buildEventsMarker(date, events),
// ),
// );
// }
// if (holidays.isNotEmpty) {
// children.add(
// Positioned(
// right: ScreenUtil().setWidth(27),
// bottom: 0,
// top: ScreenUtil().setWidth(30),
// child: buildMarker(date)),
// Align(
// alignment: Alignment.bottomCenter,
// child: buildMarker(date),
// )
// );
// }
return [];
},
// singleMarkerBuilder: (context, dateTime, event) {
// return Container(
// width: ScreenUtil().setWidth(6),
// height: ScreenUtil().setWidth(6),
// margin:
// const EdgeInsets.symmetric(horizontal: 0.3),
// decoration: BoxDecoration(
// shape: BoxShape.circle,
// color: MyColours.color_ff0000,
// ),
// );
// },
),
),
VEmptyView(4),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
RoundButton(
onPressed: () async {
_calendarController
.setSelectedDay(DateTime.now());
_setState(() {});
},
text: '回到今天',
fontSize: 28,
isBold: false,
height: ScreenUtil().setWidth(70),
width: ScreenUtil().setWidth(220),
gradientStart: MyColours.color_2bb5b7,
gradientEnd: MyColours.color_2bb5b7,
radius: ScreenUtil().setWidth(10),
),
RoundButton(
onPressed: () async {
Navigator.pop(context);
},
text: '取消',
fontSize: 28,
isBold: false,
textColor: MyColours.color_333333,
borderColor: Color.fromRGBO(119, 119, 119, 1),
height: ScreenUtil().setWidth(70),
width: ScreenUtil().setWidth(220),
gradientStart: Colors.transparent,
gradientEnd: Colors.transparent,
radius: ScreenUtil().setWidth(10),
)
],
),
VEmptyView(40)
],
))
// Positioned(
// right: ScreenUtil().setWidth(62),
// bottom: ScreenUtil().setHeight(20),
// child: Container(
// child: GestureDetector(
// onTap: () {
// _calendarController.setSelectedDay(DateTime.now());
// _setState(() {});
// },
// child: Container(
// child: ClipOval(
// child: Container(
// width: ScreenUtil().setWidth(100),
// height: ScreenUtil().setWidth(100),
// alignment: Alignment.center,
// color: MyColours.color_2bb5b7,
// child: Text(
// "回到\n今天",
// style: TextStyle(
// color: MyColours.color_ffffff,
// fontSize: ScreenUtil().setSp(26)),
// ),
// )),
// ),
// ),
// ),
// )
// ],
;
});
return SizedBox(
width: double.infinity,
// height: ScreenUtil().setWidth(975),
child: widget,
);
});
}
//显示日历弹框
static Future<DateTime> showCalendarDialog(
BuildContext context, DateTime selectDateTime) {
... ...