New file |
| | |
| | | <!DOCTYPE HTML> |
| | | <html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml"> |
| | | <head> |
| | | <meta charset="utf-8"> |
| | | <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> |
| | | <meta name="renderer" content="webkit|ie-comp|ie-stand"> |
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| | | <meta name="viewport" |
| | | content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> |
| | | <meta http-equiv="Cache-Control" content="no-siteapp"/> |
| | | <!-- 本框架基本脚本和样式 --> |
| | | <script type="text/javascript" th:src="@{/js/systools/MBaseVue.js}"></script> |
| | | <script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script> |
| | | <script type="text/javascript" th:src="@{/js/systools/MBase.js}"></script> |
| | | <link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}"> |
| | | |
| | | <script type="text/javascript" th:src="@{/js/function/vip.js}"></script> |
| | | <script type="text/javascript" th:src="@{/js/function/meiduCommon.js}"></script> |
| | | |
| | | <style type="text/css"> |
| | | .c { |
| | | cursor: pointer; |
| | | overflow: scroll; |
| | | height: 258px; |
| | | overflow-x: hidden; |
| | | } |
| | | |
| | | .c li:HOVER { |
| | | background: #efefef; |
| | | } |
| | | |
| | | .userList { |
| | | list-style: none; |
| | | padding-left: 0px; |
| | | border: 1px solid rgb(238, 238, 238); |
| | | position: fixed; |
| | | z-index: 99999999; |
| | | background: #FFFFFF; |
| | | box-shadow: 1px 2px 10px 1px #BFBFBF; |
| | | height: 300px; |
| | | overflow: scroll; |
| | | overflow-x: hidden; |
| | | } |
| | | |
| | | .userList li { |
| | | padding-left: 13px; |
| | | padding-top: 5px; |
| | | padding-bottom: 5px; |
| | | cursor: pointer; |
| | | border-bottom: 1px solid #efefef; |
| | | } |
| | | |
| | | .userList li:hover { |
| | | background: #eee; |
| | | } |
| | | |
| | | .ibox-content { |
| | | background-color: rgba(240, 242, 245, 1); |
| | | } |
| | | </style> |
| | | |
| | | </head> |
| | | <body onkeypress="dosearch(event)"> |
| | | <div class="ibox-content container-fluid" id="app"> |
| | | <el-container> |
| | | <el-header style="background-color: white; margin: 15px; line-height: 60px"> |
| | | <el-col :span="7"> |
| | | <el-col :span="19"> |
| | | <el-input placeholder="请输入内容"></el-input> |
| | | </el-col> |
| | | <el-col :span="1"> |
| | | <el-button type="primary">查询</el-button> |
| | | </el-col> |
| | | </el-col> |
| | | <el-col :offset="6" :span="10"> |
| | | <el-button type="primary" plain>充值</el-button> |
| | | <el-button type="info" plain>补交</el-button> |
| | | <el-button type="success" plain>收款</el-button> |
| | | <el-button type="warning" plain>开单</el-button> |
| | | <el-button type="primary" plain>服务单</el-button> |
| | | <el-button type="danger" plain>退款</el-button> |
| | | </el-col> |
| | | </el-header> |
| | | <el-container> |
| | | <el-aside style="background-color: white; margin:0 15px; width: 400px"> |
| | | <el-row type="flex" justify="center"> |
| | | <el-col :span="20" style="padding: 15px; text-align: center;"> |
| | | <el-avatar :size="150" :src="circleUrl"></el-avatar> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row type="flex" justify="center"> |
| | | <el-col :span="4" style="text-align: center;"><span style="font-weight: bolder">XXX</span></el-col> |
| | | <el-col :span="4" style="text-align: center;">金卡会员</el-col> |
| | | </el-row> |
| | | <el-row type="flex" justify="center"> |
| | | <el-col :span="4" style="text-align: center;">24岁</el-col> |
| | | <el-col :span="4" style="text-align: center;">湖南长沙</el-col> |
| | | <el-col :span="4" style="text-align: center;">13412341234</el-col> |
| | | </el-row> |
| | | </el-aside> |
| | | <el-main style="background-color: white; margin-right: 15px;"></el-main> |
| | | </el-container> |
| | | </el-container> |
| | | </div> |
| | | </body> |
| | | <script type="text/javascript" th:src="@{/js/systools/AjaxProxyVue.js}"></script> |
| | | <script type="text/javascript" th:src="@{/js/plugin/vue.js}"></script> |
| | | <script type="text/javascript" th:src="@{/plugin/element-ui/index.js}"></script> |
| | | <script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script> |
| | | <script th:inline="javascript"> |
| | | //初始带入vip的电话 |
| | | var key = $.query.get("vipPhone"); |
| | | if(key){ |
| | | selectList(key); |
| | | } |
| | | var app = new Vue({ |
| | | el: '#app', |
| | | data : { |
| | | circleUrl : "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", |
| | | }, |
| | | created : function() {}, |
| | | methods : {} |
| | | }) |
| | | $(function () { |
| | | $("#key").keyup( |
| | | function () { |
| | | var $input = $("#key"); |
| | | if ($input.val().length > 1) { |
| | | $.AjaxProxy({ |
| | | p: { |
| | | keyWord: $input.val(), |
| | | }, |
| | | c: false, |
| | | }) |
| | | .invoke( |
| | | basePath + "/admin/vipInfo/findUserByPhotoOrName", |
| | | function (loj) { |
| | | var html = ""; |
| | | for (var i = 0; i < loj |
| | | .getRowCount(); i++) { |
| | | html += '<li onclick="selectList(\'' + loj.getString(i, 'phone') + '\')" >' |
| | | + loj.getString(i, 'phone') + "-" + loj.getString(i, 'vipName') |
| | | + "-" + loj.getString(i, 'vipNo') |
| | | + '</li>'; |
| | | } |
| | | $("#userList").html(html).show(); |
| | | }); |
| | | } else { |
| | | $("#userList").hide(); |
| | | } |
| | | }); |
| | | updateHistory(); |
| | | $("#userList").mouseleave(function () { |
| | | $(this).hide(); |
| | | }) |
| | | }) |
| | | |
| | | |
| | | function selectList(phone) { |
| | | $("#userList").hide(); |
| | | $("#key").val(phone); |
| | | selectByKey(); |
| | | } |
| | | </script> |
| | | </body> |
| | | </html> |