twong-flutter/lib/widgets/product_item.dart

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_html/style.dart';

import 'package:twong/router/index.dart';
import 'package:twong/config/style.dart';
import 'package:twong/models/index.dart';
import 'package:twong/utils/index.dart';

class ProductItem extends StatelessWidget {
  final int _index;
  final List<Product> _data;

  bool _isVip = false;

  ProductItem(this._index, this._data, {Key key}) :super(key: key);

  @override
  Widget build(BuildContext context) {
    _isVip = Cache.user?.vip_level != null && Cache.user.vip_level > 0;

    var data = _data[_index];
    return GestureDetector(
      onTap: () {
        Navigator.pushNamed(context, RouteNames.productDetails, arguments: data.id);
      },
      child: Container(
        width: 150.px,
        height: 150.px,
        color: Colors.white,
        margin: EdgeInsets.only(bottom: 10),
        child: Row(
          children: <Widget>[
            CachedNetworkImage(
              width: 150.px,
              height: 150.px,
              fit: BoxFit.scaleDown,
              imageUrl: data.image,
              imageBuilder: (BuildContext context,
                  ImageProvider<dynamic> provider) {
                return Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                        image: provider,
                        fit: BoxFit.cover
                    ),
                  ),
                );
              },
              placeholder: (BuildContext context, String str) {
                return Container(decoration: BoxDecoration(
                    color: Colors.grey
                ));
              },
            ),
            Expanded(child: Container(
              margin: EdgeInsets.only(left: 10.px, right: 10.px),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    height: 40.px,
                    child: Text(data.store_name, style: TextStyle(fontWeight: FontWeight.bold)),
                  ),
                  Container(margin: EdgeInsets.only(top: 4.px), child: Text("官方正品 信誉保障", style: TextStyle(color: Colors.grey, fontSize: 12))),
                  Spacer(),
                  _genPrice(data)
                ],
              )),
            ),
          ],
        ),
      ),
    );
  }

  Widget _getVipPrice(dynamic price, { Color color, Widget leading }) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          child: leading,
          padding: EdgeInsets.only(right: 4.px),
        ),
        RichText(
            text: TextSpan(
                text: I18n.$, style: TextStyle(color: color, fontSize: 10.px),
                children: [
                  TextSpan(text: price,
                    style: TextStyle(color: color, fontSize: 14.px),
                  )
                ]
            )
        ),
      ],
    );
  }

  Widget _genPrice(Product data) {
    if (_isVip) {
      return Container(
        margin: EdgeInsets.only(bottom: 4.px, left: 6.px),
        child: Column(
          children: [
            _getVipPrice(data.price, color: Colors.red, leading: Text("会:")),
            _getVipPrice(data.price, color: Colors.black87, leading: Text("购:")),
            _getVipPrice(data.price, color: Colors.green, leading: Text("赚:")),
          ],
        ),
      );
    }
    return Container(
        margin: EdgeInsets.only(bottom: 4.px, left: 6.px),
        child: RichText(
            text: TextSpan(
                text: I18n.$, style: TextStyle(color: Colors.red, fontSize: 14.px),
                children: [
                  TextSpan(text: data.price,
                      style: TextStyle(color: Colors.red, fontSize: 20.px),
                      children: [
                        TextSpan(text: "  "),
                        TextSpan(text: Utils.formatRMB(data.price, show: true),
                            style: TextStyle(color: Colors.grey, fontSize: 14.px,
                                decoration: TextDecoration.lineThrough)
                        )
                      ]
                  )
                ]
            )
        )
    );
  }
}