twong-flutter/lib/pages/user/customerChat.dart

import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:bot_toast/bot_toast.dart';
import 'package:image_picker/image_picker.dart';

import '../../utils/index.dart';
import '../../config/emoji.dart';
import 'package:twong/widgets/app_bar.dart';

class ChatPage extends StatefulWidget{
  ChatPage({Key key}): super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _ChatPageState();
  }
}

class _ChatPageState extends State<ChatPage> {
  ImagePicker _picker = new ImagePicker();
  FocusNode _inputFocus = new FocusNode();
  List<dynamic> _messageList = new List<dynamic>();
  List<List<String>> emojis = new List<List<String>>();
  ScrollController _scrollController = new ScrollController();
  TextEditingController _textController = new TextEditingController();

  @override
  void initState() {
    super.initState();

    initData();
    initEventListener();
  }

  @override
  void dispose() {
    super.dispose();
    print("chat dispose");
  }

  void initData() {
    initEmojis();

    // Http.getHistory(widget.user.uid).then((list) {
    //   setState(() {
    //     _messageList = list;
    //   });
    // }).catchError((err){
    //   print("history err: " + err.toString());
    // });
  }

  void initEmojis() {
    var idx = 1;
    var page = 0;
    emojis.add(new List<String>());
    for(var item in EmojiConf.list) {
      emojis[page].add(item);
      if(idx % 24 == 0){
        page++;
        emojis.add(new List<String>());
      }
      idx++;
    }
  }

  void initEventListener() {
    // Events.on<UserMessage>().listen((event) {
    //   if(!mounted) return;
    //   setState(() {
    //     _messageList.add(event.message);
    //     _scrollController.animateTo(0,
    //       duration: const Duration(milliseconds: 300),
    //       curve: Curves.easeOut,
    //     );
    //   });
    // });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: DAppBar("客服名字"),
      body: Column(children: <Widget>[
        new Flexible(
          child: new ListView.builder(
            reverse: true,
            controller: _scrollController,
            physics: BouncingScrollPhysics(),
            itemCount: _messageList.length,
            itemBuilder: (context, i) {
              return _buildMessage(i);
            },
          ),
        ),
        new Divider(height: 1.0),
        new Container(
          child: _buildComposer(),
          decoration:
          new BoxDecoration(color: Color.fromRGBO(241, 243, 244, 0.9)),
        ),
      ]),
    );
  }

  Widget _buildAvatar(String url) {
    return Container(
        padding: EdgeInsets.only(top: 4),
        child: ClipRRect(
            borderRadius: BorderRadius.circular(20.px),
            child: Image.network(url, width: 40.px, height: 40.px)
        ));
  }

  Widget _buildMsgBody(bool visitor, dynamic msg) {
    // return Flexible(child: Container(
    //   margin: EdgeInsets.only(left: 10, right: 10),
    //   child: Column(
    //     crossAxisAlignment: visitor ? CrossAxisAlignment.start : CrossAxisAlignment
    //         .end,
    //     children: [
    //       Text(visitor ? msg.visitor_name : user.name, textAlign: TextAlign.right,),
    //       Container(
    //           margin: EdgeInsets.only(top: 6),
    //           padding: EdgeInsets.all(10),
    //           decoration: BoxDecoration(
    //               color: _getBackground(visitor, msg),
    //               borderRadius: BorderRadius.all(Radius.circular(20))
    //           ),
    //           child: _buildMsgContent(msg)
    //       )
    //     ],
    //   ),
    // ));
  }

  Color _getBackground(bool visitor, dynamic msg) {
    if(msg.content.startsWith("face[")) {
      return visitor ? Colors.cyanAccent : Colors.greenAccent;
    }

    if(msg.content.startsWith("img[")) {
      return null;
    }

    if(msg.content.startsWith("product[")) {
      return Colors.white70;
    }

    if(msg.content.startsWith("order[")) {
      return null;
    }

    return visitor ? Colors.cyanAccent : Colors.greenAccent;
  }

  Widget _buildMsgContent(dynamic msg) {
    // if(msg.content.startsWith("face[")) {
    //   var name = msg.content.substring(5, msg.content.length - 1);
    //   return Container( height: 32, width: 32, child: Image.asset("assets/emojis/" + name + ".png"));
    // }
    //
    // if(msg.content.startsWith("img[")) {
    //   var url = msg.content.substring(4, msg.content.length - 1);
    //   return Image.network(url);
    // }
    //
    // if(msg.content.startsWith("product[")) {
    //   var url = msg.content.substring(8, msg.content.length - 1);
    //   print(url);
    //   var product = Product.fromJson(json.decode(url));
    //   return _buildProduct(product);
    // }
    //
    // if(msg.content.startsWith("order[")) {
    //   var url = msg.content.substring(6, msg.content.length - 1);
    //   print(url);
    //   var order = Order.fromJson(json.decode(url));
    //   return _buildOrder(order);
    // }
    //
    // return Text(msg.content);
  }

  Widget _buildOrder(dynamic order) {
    return Container(
        padding: EdgeInsets.all(10.px),
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(4.px)
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("订单号："),
            Row(
              children: [
                Expanded(child: Text(order.order_id, style: TextStyle(decoration:
                TextDecoration.underline, fontWeight: FontWeight.bold))),
                GestureDetector(
                  onTap: () { Utils.copyText(order.order_id); },
                  child: Container(
                    padding: EdgeInsets.only(left: 8.px,right: 8.px, top: 2.px, bottom: 2.px),
                    decoration: BoxDecoration(
                        color: Colors.blue,
                        borderRadius: BorderRadius.circular(4.px)
                    ),
                    child: Text("复制", style: TextStyle(color: Colors.white)),
                  ),
                )
              ],
            )
          ],
        ));
  }

  Widget _buildProduct(dynamic product) {
    return Container(
      padding: EdgeInsets.all(4.px),
      child: Column(
        children: [
          Image.network(product.image),
          Text(product.store_name, style: TextStyle(fontWeight: FontWeight.bold)),
          Row(
            children: [
              Expanded(child: RichText(
                text: TextSpan(
                    text: "会员价：",
                    style: TextStyle(color: Colors.black, fontSize: 14.px),
                    children: [
                      TextSpan(
                        text: "￥",
                        style: TextStyle(color: Colors.black, fontSize: 12.px),
                      ),
                      TextSpan(
                          text: product.vip_price,
                          style: TextStyle(color: Colors.red, fontSize: 16.px)
                      )
                    ]
                ),
              )),
              Expanded(child: RichText(
                text: TextSpan(
                    text: "售价：",
                    style: TextStyle(color: Colors.black, fontSize: 14.px),
                    children: [
                      TextSpan(
                        text: "￥",
                        style: TextStyle(color: Colors.black, fontSize: 12.px),
                      ),
                      TextSpan(
                          text: product.price,
                          style: TextStyle(color: Colors.red, fontSize: 16.px)
                      )
                    ]
                ),
              )),
            ],
          )
        ],
      ),
    );
  }

  Widget _buildMessage(idx) {
    var msg = _messageList[_messageList.length - idx - 1];
    // var visitor = msg.mes_type == "visitor";
    // var customer = AppData.get("info") as UserInfo;
    // return Container(
    //     padding: EdgeInsets.all(10),
    //     alignment: visitor ? Alignment.topLeft : Alignment.topRight,
    //     child: visitor ? Row(
    //       crossAxisAlignment: CrossAxisAlignment.start,
    //       mainAxisAlignment: MainAxisAlignment.start,
    //       children: [
    //         _buildAvatar(visitor ? msg.visitor_avator : customer.avator),
    //         _buildMsgBody(visitor, msg)
    //       ],
    //     ): Row(
    //       crossAxisAlignment: CrossAxisAlignment.start,
    //       mainAxisAlignment: MainAxisAlignment.end,
    //       children: [
    //         _buildMsgBody(visitor, msg),
    //         _buildAvatar(customer.avator)
    //       ],
    //     )
    // );
  }

  Widget _buildComposer() {
    return new IconTheme(
      data: new IconThemeData(color: Color.fromRGBO(241, 243, 244, 0.9)),
      child: new Container(
        alignment: Alignment.center,
        height: 45.0,
        margin: const EdgeInsets.all(3.0),
        child: new Row(
          children: <Widget>[
            IconButton(icon: Icon(Icons.emoji_emotions, color: Colors.black26, size: 30,), onPressed: _openFaces),
            Flexible(
              child: TextField(
                focusNode: _inputFocus,
                textInputAction: TextInputAction.send,
                controller: _textController,
                onSubmitted: _submitMsg,
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(10.0),
                  hintText: "想说点儿什么？",
                  fillColor: Colors.white,
                  filled: true,
                  border: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.all(Radius.circular(5)),
                  ),
                ),
              ),
            ),
            IconButton(
              icon: Icon(Icons.add_circle_outline),
              onPressed: _openAction,
              color: Colors.black26,
            ),
          ],
        ),
      ),
    );
  }

  void _submitMsg(String txt) async {
    FocusScope.of(context).requestFocus(_inputFocus);
    // await Http.sendMsg(widget.user.uid, txt).then((res) {
    //   var msg = HttpMessage();
    //   msg.content = txt;
    //   Events.fire(UserMessage(msg));
    //   _textController.text = "";
    // }).catchError((err) {
    //   print(err);
    //   Fluttertoast.showToast(msg: "发送失败!");
    // });
  }

  void _submitFace(String name) async {
    var code = "face[$name]";
    // await Http.sendMsg(widget.user.uid, code).then((res) {
    //   var msg = HttpMessage();
    //   msg.content = code;
    //   Events.fire(UserMessage(msg));
    //   Navigator.pop(context);
    // }).catchError((err) {
    //   print(err);
    //   Fluttertoast.showToast(msg: "发送失败!");
    // });
  }

  Widget _getAvatar(String name) {
    return InkWell(onTap: () => _submitFace(name), child: CircleAvatar(child:
    Container(child: Image.asset("assets/emojis/" + name + ".png"),
        margin: EdgeInsets.all(8)), radius: 20, backgroundColor: Colors.transparent));
  }

  Future _openFaces () {
    var pageWidgets = List<Widget>();
    for(var item in emojis) {
      var faceWidgets = List<Widget>();
      for(var face in item) {
        faceWidgets.add(_getAvatar(face));
      }
      pageWidgets.add(GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 8, //横轴三个子widget
            childAspectRatio: 1 //宽高比为1时，子widget
        ),
        children: faceWidgets,
      ));
    }

    return showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (BuildContext context) {
          return Container(
            height: 160,
            child: PageView(
              children: pageWidgets,
            ),
          );
        });
  }

  Future _openAction() {
    return showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              new ListTile(
                leading: Icon(Icons.photo_camera),
                title: Text("相机拍摄"),
                onTap: () async {
                  var image = await _picker.getImage(
                      source: ImageSource.camera);
                  Navigator.pop(context);
                },
              ),
              new ListTile(
                leading: Icon(Icons.photo_library),
                title: Text("照片库"),
                onTap: () async {
                  var image = await _picker.getImage(
                      source: ImageSource.gallery);
                  Navigator.pop(context);
                },
              ),
            ],
          );
        });
  }
}