18.4 优惠券栏位

18.4 优惠券栏位

image-20220729103814223

实现步骤：

第 1 步：i18n 多语言

lib/common/i18n/locale_keys.dart

1
2
3
4
// 优惠码
static const promoCode = "promo_code";
static const promoDesc = "promo_desc";
static const promoEnterCodeTip = "promo_enter_code_tip";

lib/common/i18n/locales/locale_en.dart

1
2
3
4
5
// 优惠码
LocaleKeys.promoCode: 'Apply Promo Code',
LocaleKeys.promoDesc:
    'Promo Code is simply dummy text the printing and typesetting industry',
LocaleKeys.promoEnterCodeTip: 'Enter code here',

lib/common/i18n/locales/locale_zh.dart

1
2
3
4
// 优惠码
LocaleKeys.promoCode: '使用优惠码',
LocaleKeys.promoDesc: '促销代码只是印刷和排版行业的虚拟文本',
LocaleKeys.promoEnterCodeTip: '输入代码',

第 2 步：优惠券页面

控制器

lib/pages/cart/apply_promo_code/controller.dart

1
2
// 优惠券控制器
TextEditingController couponController = TextEditingController();
1
2
3
4
5
@override
void onClose() {
  super.onClose();
  couponController.dispose();
}

视图

lib/pages/cart/apply_promo_code/view.dart

1
2
// 应用优惠券
final Function(String) onApplyCouponCode;
1
2
3
4
const ApplyPromoCodePage({
  Key? key,
  required this.onApplyCouponCode,
}) : super(key: key);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 底部按钮
Widget _buildButtons() {
  return <Widget>[
    // cancel
    ButtonWidget.text(
      LocaleKeys.commonBottomCancel.tr,
      onTap: () => Get.back(),
    ),

    // apply
    ButtonWidget.text(
      LocaleKeys.commonBottomApply.tr,
      // 确认优惠券输入
      onTap: () {
        // 回调函数
        onApplyCouponCode(controller.couponController.text);
        Get.back();
      },
      textColor: AppColors.highlight,
      textWeight: FontWeight.w500,
    ),
  ].toRow(
    mainAxisAlignment: MainAxisAlignment.end,
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 主视图
Widget _buildView() {
  return <Widget>[
    // 标题
    TextWidget.title3(LocaleKeys.promoCode.tr)
        .paddingBottom(AppSpace.listRow),

    // 说明
    TextWidget.body2(
      LocaleKeys.promoDesc.tr,
      maxLines: 3,
      softWrap: true,
    ).paddingBottom(AppSpace.listRow),

    // 输入优惠券
    InputWidget.textBorder(
      controller: controller.couponController,
      hintText: "Enter your coupon code",
    ).paddingBottom(AppSpace.listRow),

    // 按钮
    _buildButtons(),
  ]
      .toColumn(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
      )
      .paddingAll(40)
      .backgroundColor(AppColors.background);
}
1
2
3
4
5
6
7
8
9
10
@override
Widget build(BuildContext context) {
  return GetBuilder<ApplyPromoCodeController>(
    init: ApplyPromoCodeController(),
    id: "apply_promo_code",
    builder: (_) {
      return _buildView();
    },
  );
}

第 3 步：控制器

lib/pages/cart/buy_now/controller.dart

1
2
3
4
5
6
7
8
// 优惠券列表
final List<CouponsModel> lineCoupons = [];

// 折扣
double get discount =>
    lineCoupons.fold<double>(0, (double previousValue, CouponsModel element) {
      return previousValue + (double.parse(element.amount ?? "0"));
    });
1
2
3
4
5
6
7
8
9
10
11
// 使用优惠券
bool _applyCoupon(CouponsModel item) {
  // 是否有重复
  int index = lineCoupons.indexWhere((element) => element.id == item.id);
  if (index >= 0) {
    return false;
  }
  // 添加
  lineCoupons.add(item);
  return true;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 显示输入优惠券 568935ab
void onEnterCouponCode() {
  ActionBottomSheet.popModal(
    child: ApplyPromoCodePage(
      onApplyCouponCode: (couponCode) async {
        // 判断优惠券是否存在
        if (couponCode.isEmpty) {
          Loading.error("Voucher code empty.");
          return;
        }
        CouponsModel? coupon = await CouponApi.couponDetail(couponCode);
        if (coupon != null) {
          couponCode = "";
          bool isSuccess = _applyCoupon(coupon);
          if (isSuccess) {
            Loading.success("Coupon applied.");
          } else {
            Loading.error("Coupon is already applied.");
          }
          update(["buy_now"]);
        } else {
          Loading.error("Coupon code is not valid.");
        }
      },
    ),
    safeAreaMinimum: EdgeInsets.fromLTRB(50.w, 0, 50.w, 140.w),
  );
}

第 4 步：视图

lib/pages/cart/buy_now/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 小计
Widget _buildPrice() {
    ...

    // Voucher Code:
    BuildPriceLine(
      titleString: LocaleKeys.placeOrderPriceVoucherCode.tr,
      rightWidget: ButtonWidget.text(
        ...
        onTap: controller.onEnterCouponCode, // 输入优惠券码
      ),
    ),

    ...

优惠券: 568935ab

提交代码到 git