SRM移动应用之消息列表模块

前言

最近一段时间，一直被其他事物干扰这，导致移动应用组件这块的开发进展比较缓慢，好在没有轻言放弃，一有空就折腾起基于ionic3框架开发的一套适合目前srm移动应用app用到的UI控件,虽然写的不是很完美，但是我会继续努力下去。

效果图

1.gif

业务需求

1.可对消息列表进行（删除，已读，以及指定操作）。
2.当消息被删除之后，如果有新消息时，那么该类型的消息要显示出来
3.当用户关闭应用是，用户对消息配置需要保存起来。

具体实现过程

定义一个数组用来接收用户消息列表的数据，然后通过操作单条消息记录来改变前端界面的渲染效果，废话不多说了代码撸起来.

消息列表组件类的主要业务处理

import { Component, ViewChild } from '@angular/core';
import { NavController, IonicPage, Events, ItemSliding } from 'ionic-angular';
import { config } from "../../../constant/config";
import { AppService } from '../../../app/app.service';

@IonicPage({
    name: 'message-page',
    segment: 'message'
})
/**
 * 普通消息列表
 *参考文档:https://ionicframework.com/docs/api/components/item/ItemSliding/
 *by wjb
 */
@Component({
    selector: 'page-message',
    templateUrl: 'message.html',
})
export class MessagePage {
    messageData: any;
    constructor(public navCtrl: NavController, public appService: AppService) {
        this.messageData = appService.getSortMessage(config.messageData);
    }
    goTolist(message) {}
    /**
     * 对消息进行删除操作
     * @params message
     */
    delMsg(message, slidingItem: ItemSliding) {
        slidingItem.close();
        message.isRemove = true;
        console.dir(message);
        this.appService.updateMessage(message);
    }
    /**
     *对消息进行未读操作
     * @params message
     */
    signNoRead(message, slidingItem: ItemSliding) {
        slidingItem.close();
        if(message.msgCount != 0) {
            message.isCancel = !message.isCancel;
        }
        this.appService.updateMessage(message);
        console.dir(message);
    }
    /**
     *对消息进行置顶操作
     * @params message
     */
    top(message, slidingItem: ItemSliding) {
        slidingItem.close();
        message.isTop = !message.isTop;
        if(message.isTop) {
            message.updateTime = new Date().getTime();
            this.messageData.sort((msg1, msg2) => {
                return msg2.updateTime - msg1.updateTime;
            })
        } else {
            message.updateTime = 0;
            this.messageData.sort((msg1, msg2) => {
                if(message.type == msg1.type || message.type == msg2.type) {
                    return msg1.type - msg2.type;
                }

            })
        }
        this.appService.updateMessage(message);
    }

}

消息组件业务层的处理关键代码

/*
     * 设置本地缓存
     *by weijb
     */
    setItem(key: string, obj: any) {
        try {
            var json = JSON.stringify(obj);
            window.localStorage[key] = json;
        } catch(e) {
            console.error("window.localStorage error:" + e);
        }
    }
    getItem(key: string, callback) {
        try {
            var json = window.localStorage[key];
            var obj = JSON.parse(json);
            callback(obj);
        } catch(e) {
            //callback([]);
            //console.error("window.localStorage error:" + e);
        }
    }
    remove(key: string) {
        localStorage.removeItem(key);
    }
    /**
     *对象消息进行处理
     *@params message 需要处理的数据
     *by weijb
     */
    updateMessage(message) {
        this.setItem('huiju-msg' + message.type, {
            type: message.type,
            updateTime: message.updateTime,
            isTop: message.isTop,
            isCancel: message.isCancel,
            isRemove :message.isRemove
        });

    }
    /**
     *获取本地消息进行排序
     *@params messageData 需要排序的数据源
     *by weijb
     */
    getSortMessage(messageData) {
        messageData.forEach(res1 => {
            this.getItem('huiju-msg' + res1.type, res2 => {
                res1.updateTime = res2.updateTime;
                res1.isTop = res2.isTop;
                res1.isCancel = res2.isCancel;
                if(res1.msgCount>0){
                    
                 res1.isRemove = false;
                }else{
                res1.isRemove = res2.isRemove;
                }
            })
        });
        messageData.sort((msg1, msg2) => {
            return msg2.updateTime - msg1.updateTime;
        });
        return messageData;
    }

消息组件模板页面的关键代码

<ion-list no-lines>
        <ion-item-sliding *ngFor="let message of messageData" tappable (click)="goTolist(message)" [hidden]="message.isRemove" #slidingItem>
            <ion-item [ngClass]="{'message-top':message.isTop}">
                <ion-avatar item-start class="type-{{message.type}}" [ngClass]="{'message-round':message.isCancel}">
                    <!--<i *ngIf="message.isCancel && message.msgCount!=0" id="message-round">●</i>-->
                    <ion-icon name="{{message.iconType}}"></ion-icon>
                </ion-avatar>
                <p class="f32">{{message.typeTitle}}</p>
                <p class="f28">{{message.firstTitle}}</p>
                <div item-end>
                    <p class="msg-time f24">6/13</p>
                    <p class="msg-count f24">
                        <ion-badge *ngIf="!message.isCancel && message.msgCount!=0">
                            {{message.msgCount>99?'99+':message.msgCount}}
                        </ion-badge>
                    </p>
                </div>
            </ion-item>
            <ion-item-options side="right" >
                <button ion-button  color="secondary" (click)="delMsg(message,slidingItem)">
     删除
      </button>
                <button ion-button color="light" (click)="signNoRead(message,slidingItem)" >
      标记未读
      </button>
        
        <button *ngIf="!message.isTop" ion-button color="primary" (click)= "top(message,slidingItem)">
      置顶
      </button>
      <button *ngIf="message.isTop" ion-button color="primary" (click)= "top(message,slidingItem)">
     取消置顶
      </button>
            </ion-item-options>
        </ion-item-sliding>
    </ion-list>
</ion-content>

总结

虽然消息组件的业务逻辑比较简单，但是当实现该过程的时候，也遇到不少的问题，比如如何实现消息的排序，删除消息之后，当有新消息出现的时候如何显示，当用户操作未读时，当有新消息是未读如何释放等等。不知道ionic3框架后面还有多少雷区需要踩踏过去。

以上有任何问题，可以加本人qq_- 771534408@qq.com，或者加本人微信

O`ZY3)C}2G5_EVNG%E6Y`D7.png