cashier_reserve_app/lib/home/reserve_view.dart

import 'package:cashier_reserve/common/base/ui.dart';
import 'package:cashier_reserve/common/base/ui_model.dart';
import 'package:cashier_reserve/home/reserve_view_model.dart';

import '../common/base/provider.dart';

class ReserveView extends BaseUI {
  @override
  Widget buildBody(BuildContext context) {
    ReserveViewModel provider =
        getProvider(context, listen: false) as ReserveViewModel;
    return Column(
      children: [
        _buildTopDateBar(context, provider),
        Expanded(child: _buildContentView(context, provider)),
      ],
    );
  }

  @override
  BaseUIModel getProvider(BuildContext context, {bool listen = true}) {
    return MyProvider.of<ReserveViewModel>(context, listen: listen);
  }

  @override
  String? getTitleStr(BuildContext context) {
    return "";
  }

  @override
  AppBar? getAppBar(BuildContext context) {
    return null;
  }

  Widget _buildTopDateBar(BuildContext context, ReserveViewModel provider) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(15, 5, 15, 5),
      child: Row(
        children: [
          _buildDateItem(context, provider),
          _buildDateSelectContent(context, provider),
          const SizedBox(
            width: 15,
          ),
          InkWell(
              onTap: () {},
            child: SizedBox(
              width: 40,
              height: 40,
              child: Center(
                child: Image.asset(
                  "images/reserve/lock.png",
                  width: 24,
                  height: 24,
                ),
              ),
            ),
          ),
          const SizedBox(
            width: 5,
          ),
          InkWell(
            onTap: () {},
            child: SizedBox(
              width: 40,
              height: 40,
              child: Center(
                child: Image.asset(
                  "images/reserve/phone.png",
                  width: 24,
                  height: 24,
                ),
              ),
            ),
          ),
          const SizedBox(
            width: 5,
          ),
          InkWell(
            onTap: () {},
            child: const SizedBox(
              width: 40,
              height: 40,
              child: Center(
                child: Text("刷新", style: TextStyle(fontSize: 15, color: Colors.blue),),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildContentView(BuildContext context, ReserveViewModel provider) {
    return Row(
      children: [],
    );
  }

  Widget _buildDateItem(BuildContext context, ReserveViewModel provider) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5),
        border: Border.all(color: const Color(0xffafafaf), width: 1),
      ),
      height: 40,
      padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
      child: Row(
        children: [
          Image.asset(
            "images/reserve/date.png",
            width: 24,
            height: 24,
          ),
          const SizedBox(width: 7),
          Text(
            provider.getCurrentDate(),
            style: const TextStyle(color: Color(0xff333333), fontSize: 14),
          )
        ],
      ),
    );
  }

  // Widget _buildCallRecordListWidget(BuildContext context, ReserveViewModel provider) {
  //   return ListView.builder(
  //     itemCount: provider.callRecordList.length,
  //     itemBuilder: (context, index) {
  //       return _buildCallRecordItem(context, provider.callRecordList[index]);
  //     },
  //   );
  // }

  Widget _buildDateSelectContent(
      BuildContext context, ReserveViewModel provider) {
    return Row(
      children: [
        _buildDateSelectItem(context,
            day: provider.getOffsetDay(0),
            week: provider.getOffsetWeekday(0),
            isToday: true),
        _buildDateSelectItem(context,
            day: provider.getOffsetDay(1), week: provider.getOffsetWeekday(1)),
        _buildDateSelectItem(context,
            day: provider.getOffsetDay(2), week: provider.getOffsetWeekday(2)),
      ],
    );
  }

  Widget _buildDateSelectItem(
    BuildContext context, {
    String day = "",
    String week = "",
    isToday = false,
  }) {
    const double itemHeight = 45;
    const double btnWidth = 60;
    return Container(
        height: itemHeight,
        margin: const EdgeInsets.only(left: 15),
        padding: const EdgeInsets.fromLTRB(10, 0, 6, 0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          border: Border.all(
              color:
                  isToday ? const Color(0xff318AFE) : const Color(0xffafafaf),
              width: 1),
        ),
        child: Row(
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  day,
                  style: TextStyle(
                    color: isToday
                        ? const Color(0xff6A8DC6)
                        : const Color(0xff333333),
                    fontSize: 13,
                  ),
                ),
                Text(
                  week,
                  style: TextStyle(
                    color: isToday
                        ? const Color(0xff6A8DC6)
                        : const Color(0xff333333),
                    fontSize: 13,
                  ),
                ),
              ],
            ),
            const SizedBox(width: 10),
            Container(
              width: 1,
              height: itemHeight,
              color: const Color(0xffafafaf),
            ),
            InkWell(
              onTap: () {},
              child: const SizedBox(
                width: btnWidth,
                child: Center(
                  child: Text(
                    "午餐",
                    style: TextStyle(fontSize: 16, color: Color(0xff333333)),
                  ),
                ),
              ),
            ),
            Container(
              width: 1,
              height: itemHeight,
              color: const Color(0xffafafaf),
            ),
            InkWell(
              onTap: () {},
              child: const SizedBox(
                width: btnWidth,
                child: Center(
                  child: Text(
                    "晚餐",
                    style: TextStyle(fontSize: 16, color: Color(0xff333333)),
                  ),
                ),
              ),
            ),
          ],
        ));
  }
}