lib/pages/shopping/view.dart

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wow_english/common/extension/string_extension.dart';
import 'package:wow_english/models/product_entity.dart';
import '../../common/core/assets_const.dart';
import '../../common/widgets/we_app_bar.dart';
import '../../utils/image_util.dart';
import '../../utils/log_util.dart';
import 'bloc.dart';
import 'event.dart';
import 'state.dart';
Widget buildRadioOption({
  required int value,
  required ImageProvider icon,
  required String text,
  required int groupValue,
  required ValueChanged onChanged,
}) {
  return Row(
    children: [
      Image(image: icon,
          width: 20.0.w,
          height: 20.0.h,
          fit: BoxFit.contain),
      const SizedBox(width: 10.0),
      // Expanded(
      //   child: Text(
      //     text,
      //     style: TextStyle(color: Color(0xFF333333), fontSize: 12.5.sp),
      //   ),
      // ),
      Text(
        text,
        style: TextStyle(color: Color(0xFF333333), fontSize: 12.5.sp),
      ),
      Radio(
          value: value,
          groupValue: groupValue,
          onChanged: onChanged
      ),
    ],
  );
}
class ShoppingPage extends StatelessWidget {
  const ShoppingPage({super.key, this.productEntity});
  final ProductEntity? productEntity;
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (BuildContext context) =>
      ShoppingBloc(productEntity)
        ..add(InitEvent()),
      child: _ShoppingView(),
    );
  }
}
class _ShoppingView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final bloc = BlocProvider.of<ShoppingBloc>(context);
    // var title1 = bloc.productData?.name ?? '';
    return BlocListener<ShoppingBloc, ShoppingState>(
      listener: (context, state) {
        Log.d("wqf state=$state");
        if (state is PaySuccessState) {
          Navigator.pop(context);
        }
      },
      child: Scaffold(
        appBar: const WEAppBar(
          //标题传进来的
          titleText: "商品详情",
        ),
        body: Container(
          margin: const EdgeInsets.only(left: 80.0, top: 28.0, right: 56.0),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              CachedNetworkImage(
                imageUrl: bloc.productData?.detailPicUrl ?? '',
                imageBuilder: (context, imageProvider) =>
                    Container(
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: imageProvider,
                          fit: BoxFit.cover,
                        ),
                        borderRadius: BorderRadius.circular(5.0),
                      ),
                    ),
                placeholder: (context, url) => const CircularProgressIndicator(),
                // errorWidget: (context, url, error) => const Icon(Icons.error),
                height: 210.0.h,
                width: 210.0.w,
              ),
              const SizedBox(width: 35.5),
              _paymentWidget(),
            ],
          ),
        ),
      ),);
  }
}
Widget _paymentWidget() =>
    BlocBuilder<ShoppingBloc, ShoppingState>
      (
      builder: (context, state) {
        final bloc = BlocProvider.of<ShoppingBloc>(context);
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('套餐价格：${bloc.productData?.price ?? ''}',
                style: TextStyle(
                    color: const Color(0xFF333333), fontSize: 16.sp)),
            const SizedBox(height: 15.0),
            Text('套餐名称：${bloc.productData?.name ?? ''}',
                style: TextStyle(
                    color: const Color(0xFF333333), fontSize: 16.sp)),
            const SizedBox(height: 15.0),
            Container(
              padding:
              EdgeInsets.symmetric(horizontal: 6.w, vertical: 10.h),
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: ImageUtil.getImageProviderOnDefault(
                          AssetsConst.bgUserInformationText),
                      fit: BoxFit.fill)),
              child: const Text('支付方式选择',
                  style: TextStyle(
                      color: Color(0xFF333333),
                      fontSize: 12,
                      fontFamily: 'PingFangSC-Regular')),
            ),
            const SizedBox(height: 15.0),
            buildRadioOption(
              value: PaymentChannel.wechatPay.payChannelType,
              icon: AssetImage('weixin'.assetPng),
              text: PaymentChannel.wechatPay.payChannelName,
              groupValue: bloc.curPaymentChannel.payChannelType,
              onChanged: (newValue) {
                bloc.add(
                    ChangePaymentChannelEvent(PaymentChannel.wechatPay));
              },
            ),
            buildRadioOption(
              value: PaymentChannel.aliPay.payChannelType,
              icon: AssetImage('zhifubao'.assetPng),
              text: PaymentChannel.aliPay.payChannelName,
              groupValue: bloc.curPaymentChannel.payChannelType,
              onChanged: (newValue) {
                bloc.add(ChangePaymentChannelEvent(PaymentChannel.aliPay));
              },
            ),
            const SizedBox(height: 15.0),
            // 确认支付按钮
            InkWell(
              onTap: () {
                Log.d('点击支付按钮 ${bloc.productData}');
                bloc.add(DoPayEvent(bloc.productData, bloc.curPaymentChannel));
              },
              child: Image(
                width: 125.w,
                height: 45.h,
                image: AssetImage('btn_pay'.assetPng),
              ),
            ),
          ],
        );
      },
    );