SteamCloudGame/lib/tools/shop/shop_page.dart

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:game/network/NetworkConfig.dart';
import 'package:game/tools/shop/shop_model.dart';

import '../../beans/create_order_bean.dart';
import '../../beans/mall_bean.dart';
import '../../common/EventBusUtil.dart';
import '../../common/Global.dart';

class ShopPage extends StatefulWidget {
  const ShopPage({super.key});

  @override
  State<ShopPage> createState() => _ShopPageState();
}

class _ShopPageState extends State<ShopPage> {
  late StreamSubscription subscription;
  final ShopModel _viewModel = ShopModel();
  StreamSubscription<PaySuccess>? _paySuccess;

  List<MallBean> goodList = [];

  int goodIndex = 0;

  String paymentMethod = "wx";

  int payType = 0; //0 微信  1 支付宝

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    //支付完成 验单
    _paySuccess = EventBusUtil.listen((event) {
      _viewModel.getOrderRewardsInfo();
    });

    subscription = _viewModel.streamController.stream.listen((event) {
      String code = event['code'];
      if (code.isNotEmpty) {
        switch (code) {
          case "getDiamondMall":
            goodList = event['data'];
            break;

          case "createOrderWx": //微信支付
            CreateOrderBean createOrderBean = event['data'];

            Map<String, dynamic> map = {
              "orderInfoWx": createOrderBean.payment,
            };
            invokeNativeMethod("WxPay", map);

            break;

          case "createOrderZfb": //支付宝支付
            CreateOrderBean createOrderBean = event['data'];

            Map<String, dynamic> map = {
              "orderInfoZfb": createOrderBean.payment,
            };
            invokeNativeMethod("Alipay", map);
            break;

          case "getOrderRewardsInfo": //获取订单状态
            loadData();
            EasyLoading.showToast(event['data']);
            EventBusUtil.fire(RefreshUserdata());
            break;
        }
        setState(() {});
      }
    });
    loadData();
  }

  loadData() {
    _viewModel.getDiamondMall();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    subscription.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Color(0xFF17181A),
      body: Column(
        children: [
          Container(
            width: size.width,
            height: 25,
            alignment: Alignment.center,
            margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
            child: Text(
              "钻石商城",
              style: TextStyle(color: Color(0xFFD6D6D7), fontSize: 16),
            ),
          ),
          Container(
            width: size.width,
            margin: const EdgeInsets.only(left: 14, right: 14, top: 36),
            child: Stack(
              children: [
                const Image(image: AssetImage('assets/images/diamond_bg.png')),
                Positioned(
                    left: 18,
                    top: 17,
                    child: Text(
                      "当前钻石数量",
                      style: TextStyle(fontSize: 11, color: Color(0xFFE2F3FF)),
                    )),
                Positioned(
                    left: 18,
                    top: 35,
                    child: Text(
                      "${NetworkConfig.userInfoBean!.diamond}",
                      style: TextStyle(fontSize: 29, color: Colors.white),
                    )),
              ],
            ),
          ),

          ///商品列表
          Expanded(
            child: Container(
              margin: EdgeInsets.only(left: 14, right: 14),
              child: GridView.count(
                crossAxisCount: 2,
                crossAxisSpacing: 18,
                mainAxisSpacing: 36,
                childAspectRatio: 0.844,
                children: _goodItem(),
              ),
            ),
          ),

          ///支付
          Container(
            width: size.width,
            height: 140,
            color: Color(0xFF171A22),
            padding: EdgeInsets.symmetric(horizontal: 14),
            child: Column(
              children: [
                ///支付方式
                Container(
                  margin: EdgeInsets.only(top: 20),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      ///微信
                      GestureDetector(
                        onTap: () {
                          setState(() {
                            payType = 0;
                            paymentMethod = "wx";
                          });
                        },
                        child: Container(
                          width: 157,
                          height: 36,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                            color: Color(payType == 0 ? 0xFF2E3443 : 0xFF20242F),
                            borderRadius: BorderRadius.all(Radius.circular(11)),
                          ),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Image(width: 20, height: 17, image: AssetImage('assets/images/ic_wx.png')),
                              Container(
                                margin: EdgeInsets.only(left: 11),
                                child: Text(
                                  "微信支付",
                                  style: TextStyle(fontSize: 13, color: Color(0xFFD6D6D7)),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),

                      ///支付宝
                      GestureDetector(
                        onTap: () {
                          setState(() {
                            payType = 1;
                            paymentMethod = "zfb";
                          });
                        },
                        child: Container(
                          width: 157,
                          height: 36,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                            color: Color(payType == 1 ? 0xFF2E3443 : 0xFF20242F),
                            borderRadius: BorderRadius.all(Radius.circular(11)),
                          ),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Image(width: 17, height: 17, image: AssetImage('assets/images/ic_zfb.png')),
                              Container(
                                margin: EdgeInsets.only(left: 11),
                                child: Text(
                                  "支付宝支付",
                                  style: TextStyle(fontSize: 13, color: Color(0xFFD6D6D7)),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),

                ///支付按钮
                GestureDetector(
                  onTap: () {
                    _viewModel.createOrder(goodList[goodIndex].productId, paymentMethod);
                  },
                  child: Container(
                    width: size.width,
                    height: 44,
                    margin: EdgeInsets.only(top: 20),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: Color(0xFF074CE7),
                      borderRadius: BorderRadius.all(Radius.circular(22)),
                    ),
                    child: Text(
                      "确认支付",
                      style: TextStyle(fontSize: 14, color: Colors.white),
                    ),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  _goodItem() {
    return goodList.map((value) {
      int index = goodList.indexOf(value);
      return GestureDetector(
        onTap: () {
          setState(() {
            goodIndex = index;
          });
        },
        child: Stack(
          alignment: Alignment.center,
          children: [
            Image(width: 157, image: AssetImage(goodIndex == index ? 'assets/images/good_s.png' : 'assets/images/good_n.png')),
            Positioned(
                top: 78,
                child: Text(
                  "${goodList[index].productName}",
                  style: TextStyle(fontSize: 18, color: Colors.white),
                )),
            // Positioned(
            //     top: 106,
            //     child: Text(
            //       "首充赠送60钻石",
            //       style: TextStyle(fontSize: 11, color: Color(goodIndex == index ? 0xFFE59400 : 0xFF02D5F3)),
            //     )),
            Positioned(
                bottom: 25,
                child: SizedBox(
                  height: 20,
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text(
                        "￥",
                        style: TextStyle(fontSize: 11, color: Colors.white),
                      ),
                      Text(
                        "${goodList[index].price}",
                        style: TextStyle(fontSize: 16, color: Colors.white),
                      ),
                    ],
                  ),
                )),
          ],
        ),
      );
    }).toList();
  }

  // 获取原生的值
  invokeNativeMethod(String method, Map<String, dynamic> map) async {
    dynamic args;
    try {
      args = await Global.method.invokeMethod(method, map);
    } on PlatformException catch (e) {}
  }
}