platform-b2c/src/main/webapp/resources/view/common/modal/messageBoard.html

<style>
    body,textarea,button.btn{
        font-family: "MicrosoftYaHei Regual", "微软雅黑" !important;
    }
	.clearfix{
		clear: both;
	}
	.messageBoard {
		width: 680px;
		font-size: 14px;
		background: #fff;
	}
	.messageBoard .modal-header {
		position: relative;
		background: url("static/img/msg/msg_nav.png") no-repeat left center;
		min-height: 0;
		padding: 11.5px;
		text-align: center;
	}
    .messageBoard .modal-header i{
		position: absolute;
		top: 5px;
		left: 650px;
		font-size: 20px;
		color: #fff;
		cursor: pointer;
	}
	.messageBoard .modal-header>h3{
		font-size: 18px;
        color: #000;
	}
	.messageBoard .modal-header .modal-title {
		margin-left: 30px;
        text-align: center;
		color: #fff;
	}
    .messageBoard .modal-header .modal-title span{
        vertical-align: middle;
    }
	.messageBoard .modal-body {
		padding: 10px;
        min-height: 445px;
        margin: 0 auto;
        width: 680px;
	}
	.messageBoard .modal-body h3{
        width: 680px;
		text-align: center;
		font-size: 14px;
		color: #333;
		margin: 0 0 10px 0;
	}
	.messageBoard .modal-body h3 span{
		color: #5078cb;
	}
	.messageBoard .modal-body form{
        width: 680px;
		text-align: center;
	}
    .messageBoard .modal-body form .txtArea{
        position: relative;
    }
	.messageBoard .modal-body form textarea {
        padding: 10px 10px 20px 10px;
        width: 576px;
        height: 110px;
        color: #333;
        border: #c5c5c5 1px solid;
        font-size: 13px;
        letter-spacing: 1px;
        line-height: 18px;
	}
	.messageBoard .modal-body form span.count_tip{
        position: absolute;
        bottom: 4px;
        right: 55px;
        display: inline-block;
        width: 564px;
        height: 20px;
        color: #979797;
        line-height: 20px;
        font-size: 12px;
        background: #fff;
        text-align: right;
        padding-right: 5px;
	}
	.messageBoard .modal-body form p{
		padding-left: 40px;
		text-align: left;
		font-size: 14px;
		margin: 5px;
		color: #333;
	}
    .messageBoard .modal-body .ng-table-pager{
        padding: 0 85px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    .messageBoard .modal-body p.radioCheck{
        padding-left: 65px;
    }
	.messageBoard .modal-body form input{
        padding: 0 10px;
        margin-left: 20px;
        height: 30px;
        width: 290px;
		font-size: 14px;
		color: #656565;
        border: #c5c5c5 1px solid;
		vertical-align: sub;
	}
	.messageBoard .modal-body form label{
		margin-right: 25px;
	}
	.messageBoard .modal-body form .img-warp{
		position: relative;
		overflow: hidden;
		width: 80%;
		margin: 0 auto;
		text-align: center;
	}
	.messageBoard .modal-body form div.img-item{
		position: relative;
		float: left;
		margin-right: 23px;
		width: 84px;
		height: 70px;
		cursor:  pointer;
		border: #C9C9C9 1px solid;
		font-size: 14px;
	}
	.messageBoard .modal-body form div.img-item:last-child{
		margin-right: 0;
	}
	.messageBoard .modal-body form div.img-item input[type="file"]{
		position: absolute;
		top: 0;
		left: -20px;
		width: 84px;
		height: 70px;
		opacity: 0;
	}
	.messageBoard .modal-body form div.img-item img{
		display: inline-block;
		max-width: 80px;
		max-height: 60px;
		z-index: 10;
	}
	.messageBoard .modal-body form p.tip{
		text-align: left;
		color: #999;
		font-size: 12px;
		padding-left: 68px;
	}
	.messageBoard .modal-body form label{
		margin-bottom: 10px;
		font-size: 14px;
		font-weight: normal;
	}
	.messageBoard .modal-body form input[type='text']{
		width: 295px;
	}
	.messageBoard .modal-body form button{
		margin: 10px auto;
		width: 100px;
		height: 35px;
		background: #4777C6;
		color: #fff;
		border-radius: 0;
		text-align: center;
	}
	.messageBoard .modal-body form .msg-message>label{
		font-size: 14px;
	}
	.messageBoard .modal-body form .msg-message span{
		margin: 0 auto;
		font-size: 12px;
	}
	.messageBoard .modal-body form .input-style span{
		color: #666;
	}
	.messageBoard .modal-body form .msg-message span i{
		padding-right: 5px;
		color: #4777C6;
	}
	.messageBoard .modal-body form b{
		margin-right: 5px;
		font-weight: bold;
		color: #FF5A5C;
	}
	.messageBoard .modal-body form b.first{
		position: relative;
		top: -95px;
		left: 2px;
	}
	.messageBoard .modal-body .history{
        border-collapse: collapse;
        margin: 10px auto;
        padding: 0 20px;
        width: 500px;
        min-height: 105px;
        font-size: 16px;
        color: #333;
        border-bottom: 1px dashed #c5c5c5;
	}
    .messageBoard .modal-body .msg-table{
        position: relative;
        overflow: auto;
        height: 372px;
        /* width: 670px; */
        width: 100%;
        margin-top: 10px;
    }
    .messageBoard .modal-body .msg-table .form-group{
        margin-bottom: 15px;
    }
	.messageBoard .modal-body .msgDate {
		padding-right: 55px;
        text-align: right;
        font-size: 13px;
	}
    .messageBoard .modal-body .question{
        margin-bottom: 10px;
    }
	.messageBoard .modal-body .answer{
        margin-bottom: 10px;
		color: #fa842d;
	}
	.messageBoard .msg-slide1{
        position: absolute;
        right: 0;
        top: 50%;
        width: 33px;
		height: 100px;
		margin-top: -50px;
		background: url("static/img/msg/circle-left.png") no-repeat top right;
		color: #fff;
        cursor: pointer;
	}
	.messageBoard .msg-slide1 span{
        display: inline-block;
		width: 20px;
        height: 40px;
        padding-top: 16px;
        margin-left: 13px;
        text-align: center;
        vertical-align: middle;
	}
	.messageBoard .msg-slide1 i{
		position: absolute;
		top: 50%;
		left: 2px;
        line-height: 20px;
        margin-top: -10px;
		font-size: 26px;
	}
	.messageBoard .msg-slide2{
		width: 33px;
		height: 100px;
		position: absolute;
        top: 50%;
        left: 0;
		margin-top: -50px;
		background: url("static/img/msg/circle-right.png") no-repeat top right;
		color: #fff;
        cursor: pointer;
    }

	.messageBoard .msg-slide2 span{
        display: inline-block;
        width: 20px;
        height: 40px;
        padding-top: 16px;
        margin-right: 13px;
        text-align: center;
        vertical-align: middle;
	}
	.messageBoard .msg-slide2 i{
        position: absolute;
        top: 50%;
        right: 2px;
        line-height: 20px;
        margin-top: -10px;
        font-size: 26px;
	}
	/*遮罩层*/
	.hover-show{
		position: absolute;
		width: 100%;
		height: 100%;
        top: 101%;
		left: 0;
		background: rgba(0,0,0,.5);
        z-index: 10;
        display: block;
	}
	.messageBoard  .img-warp .img-item:hover .hover-show{
		top: 0;
	}
	.hover-show .delete{
		position: absolute;
		top: 5px;
		right: 0px;
		padding: 0;
		width: 30px;
		height: 30px;
		float: right;
		text-align: center;
	}
	.hover-show .delete:hover{
		cursor: pointer;
	}
	.hover-show .delete i{
		color: #fff;
		font-size: 18px;
	}
	.hover-show .view{
		position: absolute;
		display: inline-block;
        top: 50%;
        left: 50%;
        margin-top: -8px;
        margin-left: -21px;
		font-size: 14px;
		color: #fff;
		text-align: center;
	}
	.hover-show a i{
		position: absolute;
		left: 5px;
		top: 22px;
		margin-right: 5px;
		font-size: 16px;
	}
	.msg-message{
		height: 30px;
		line-height: 30px;
	}
	.messageBoard .modal-body form p.radioLabel{
		margin-bottom: 10px;
	}
    .radioLabel {
        line-height: 20px;
        cursor: pointer;
        color: #666;
    }
	.radioLabel label{
		width: 16px;
		height: 16px;
		background: url(static/img/user/images/radio.png);
		background-position: 0 -1px;
		margin-right: 2px;
		vertical-align: middle;
		margin-bottom: 0 !important;
		margin-right: 0 !important;
	}
	.radioLabel input[type="radio"]:checked + label {
		background-position: -19px -1px;
	}
	.radioLabel input[type="radio"]:checked + label + span{
		color: #5078cb;
	}
	.radioLabel input[type="radio"]{
		display: none;
	}
	.msg-message{
		text-align: left;
		margin-bottom: 5px;
	}
	.msg-message .msg-content label{
		margin-left: 75px;
		margin-right: 0 !important;
	}
	.msg-message .modal-body div.txtArea{
		padding-left: 55px;
	}
	.preview{
		line-height: 70px;
		height: 70px;
	}
    .messageBoard .ng-table-pagination a {
        border: none;
        font-size: 12px;
        cursor: pointer;
    }
    .pagination li:first-child a, .pagination li:last-child a{
        font-size: 20px;
    }
    .messageBoard ul.pagination.ng-table-pagination > li > a > span {
        height: 17px;
        line-height: 17px;
    }

    .messageBoard div.ng-table-pager  input.page-number {
        display: inline-block;
        margin-bottom: 10px;
        width: 37px;
        height: 30px;
        font-size: 12px;
        line-height: 1.42857143;
        color: #9B9792;
        text-align: center;
        background-color: #F6F5F4;
        background-image: none;
        border: 1px solid #ccc;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }

    .messageBoard div.ng-table-pager a.page-a {
        color: #fff;
        cursor: pointer;
        background-color: #4574E8;
        border-color: #4574E8;
        font-size: 12px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        text-decoration: none;
    }

    .messageBoard div.ng-table-pager div.page-go-block {
        float: right;
        font-size: 0;
        height: 31px;
        line-height: 31px;
    }
    .messageBoard .ng-table-pager .ng-table-pagination{
        float: left;
        text-align: center;
        max-width: 460px;
    }
    .messageBoard .ng-table-pager .ng-table-pagination a{
        color: #4574E8 !important;
        height: 31px;
        line-height: 13px;
    }

    .pagination li.active a span{
        background-color: #4574E8;
        color: white !important;
    }
    .form-group{
        margin-bottom: 6px;
    }
    .messageBoard .modal-body .history:nth-of-type(3){
        border-bottom: none;
    }
    .modal.in .modal-dialog{
        width: 680px;
    }
    .modal.in .modal-dialog .modal-content{
        width: 100%;
    }
</style>
<!--游客状态-->
<div class="messageBoard">
	<div class="modal-header">
		<h3 class="modal-title f18">
            <span ng-show="!showHistory">留言板</span>
            <span ng-show="showHistory">留言记录</span>
        </h3>
		<a ng-click="cancel()"><i class="fa fa-remove"></i></a>
	</div>
    <div class="modal-body msg-body">
        <div ng-show="!showHistory">
            <h3>亲爱的&nbsp;<span ng-bind="user.userName || '游客'">&nbsp;</span>,您的意见对我们很重要！</h3>
            <form name="messageBoardForm">
                <div class="txtArea">
                    <b class="first">*</b>
                    <textarea placeholder="请将您在使用当前页面遇到的任何问题、建议或意见反馈给我们。注意：不要输入您的隐私信息，如：账户密码等。" ng-model="messageBoard.question" maxlength="500"></textarea>
                    <span class="count_tip"><span ng-bind="messageBoard.question.length || 0"></span>/500</span>
                </div>
                <p><b>*</b>您的身份是：</p>
                <p class="radioCheck">
                    <label for="buyer01" class="radioLabel">
                        <input type="radio" name="role" value="buyer" ng-model="messageBoard.role" id="buyer01"/>
                        <label for="buyer01" class="txtContact"></label>
                        <span>我是买家</span>
                    </label>
                    <label for="buyer02" class="radioLabel">
                        <input type="radio" name="role" value="seller" ng-model="messageBoard.role" id="buyer02" checked/>
                        <label for="buyer02" class="txtContact"></label>
                        <span>我是卖家</span>
                    </label>
                </p>
                <p><b>*</b>您反馈的内容类型是：</p>
                <p class="radioCheck">
                    <label for="contentType01" class="radioLabel">
                        <input type="radio" name="type" value="展示效果" ng-model="messageBoard.type" id="contentType01"/>
                        <label for="contentType01" class="txtContact"></label>
                        <span>展示效果</span>
                    </label>
                    <label for="contentType02" class="radioLabel">
                        <input type="radio" name="type" value="页面功能" ng-model="messageBoard.type" id="contentType02" checked/>
                        <label for="contentType02" class="txtContact"></label>
                        <span>页面功能</span>
                    </label>
                    <label for="contentType03" class="radioLabel">
                        <input type="radio" name="type" value="异常报错" ng-model="messageBoard.type" id="contentType03"/>
                        <label for="contentType03" class="txtContact"></label>
                        <span>异常报错</span>
                    </label>
                    <label for="contentType04" class="radioLabel">
                        <input type="radio" name="type" value="其他方面" ng-model="messageBoard.type" id="contentType04"/>
                        <label for="contentType04" class="txtContact"></label>
                        <span>其他方面</span>
                    </label>
                </p>
                <p>&nbsp;&nbsp;&nbsp;添加图片：</p>
                <div class="img-warp">
                    <div ng-repeat="index in [0, 1, 2, 3, 4]" class="img-item">
                        <input type="file" ng-if="!imgs[index].img" image-upload data-src="static/img/msg/msg_uploadPic.png" on-success="onUpload($data, index)" non-preview="true" />
                        <div ng-if="imgs[index].img" style="line-height: 66px;">
                            <img class="previewImage" ng-src="{{imgs[index].img}}">
                        </div>
                        <div class="hover-show" ng-if="imgs[index].img">
                            <span class="delete" title="删除" ng-click="deleteImg(index)"><i class="fa fa-trash" ng-click="deleteImg(index)"></i></span>
                            <span class="view" ng-click="showImg(imgs[index].img)"><i class="fa fa-search" style="margin-right: 5px;"></i>查看</span>
                        </div>
                    </div>
                </div>
                <p class="tip clearfix">提示：最多可上传五张图片，每张大小不超过500KB,仅支持JPG、PNG、GIF格式.</p>
                <p ng-if="!user.userUU"><b>*</b>您当前尚未登录，请留下您的联系方式,我们会不定期发布一些有奖体验活动</p>
                <div class="msg-message" ng-if="!user.userUU">
                    <div class="msg-content">
                        <label>手机：</label>
                        <input type="text" name="userTel" ng-model="messageBoard.userTel" ng-pattern="/^[\d]{8,11}$/" autocomplete="off"/>
                        <span ng-show="messageBoardForm.userTel.$invalid"><i class="glyphicon glyphicon-info-sign x-icon-left"></i>请输入正确的号码</span>
                    </div>
                </div>
                <div class="msg-message" ng-if="!user.userUU">
                    <div class="msg-content">
                        <label>邮箱：</label>
                        <input type="text" name="email" ng-model="messageBoard.email" ng-pattern="/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/"  autocomplete="off"/>
                        <span ng-show="messageBoardForm.email.$invalid"><i class="glyphicon glyphicon-info-sign x-icon-left"></i>请输入正确的邮箱</span>
                    </div>
                </div>
                <button ng-click="confirm()" class="btn">提交</button>
            </form>
        </div>

        <div ng-show="user.userUU && showHistory" class="msg-table">
            <div ng-repeat="message in messageBoardCurrent" class="history">
                <div class="form-group row">
                    <div ng-bind="message.type" class="col-xs-8"></div>
                    <div class="msgDate col-xs-4" ng-bind="message.createDate | date : 'yyyy-MM-dd'"></div>
                </div>
                <div class="question">
                    <span>问题：</span><span ng-bind="message.question" style="word-break: break-all"></span>
                </div>
                <div class="answer" ng-show="message.answer" style="margin-bottom: 10px;">
                    <span>回复：</span>
                    <span ng-bind="message.answer" style="word-break: break-all"></span>
                </div>
            </div>
            <div ng-if="messageBoardCurrent.length == 0" class="text-center">
                <div>无留言记录</div>
            </div>
        </div>

        <div class="ng-cloak ng-table-pager text-center" ng-show="user.userUU && showHistory" ng-if="pages.length">
            <ul class="pagination ng-table-pagination">
                <li ng-class="{'disabled': !page.active && !page.current, 'active': page.current}" ng-repeat="page in pages" ng-switch="page.type">
                    <a ng-switch-when="prev" ng-click="setPage(page.type, -1)">&laquo;</a>
                    <a ng-switch-when="first" ng-click="setPage(page.type, page.number)"><span ng-bind="page.number"></span></a>
                    <a ng-switch-when="page" ng-click="setPage(page.type, page.number)"><span ng-bind="page.number"></span></a>
                    <a ng-switch-when="more" ng-click="setPage(page.type, -1)">&#8230;</a>
                    <a ng-switch-when="last" ng-click="setPage(page.type, page.number)"><span ng-bind="page.number"></span></a>
                    <a ng-switch-when="next" ng-click="setPage(page.type, -1)">&raquo;</a>
                </li>
            </ul>
            <div class="page-go-block">
                <input class="page-number" type="text" ng-model="params.currentPage" ng-keydown="listenEnter()"/>
                <a class="page-a" ng-click="setPage('page', params.currentPage)">GO</a>
            </div>
        </div>

        <div ng-if="user.userUU && !showHistory" class="msg-slide1" ng-click="openHistory()">
            <i class="fa fa-angle-left"></i><span>留言记录</span>
        </div>
        <div class="msg-slide2" ng-show="user.userUU && showHistory" ng-click="hideHistory()">
            <i class="fa fa-angle-right"></i><span>关闭记录</span>
        </div>
    </div>
</div>