| | |
| | | </style> |
| | | |
| | | </head> |
| | | <body onkeypress="dosearch(event)"> |
| | | <body> |
| | | <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-input v-model="searchValue" placeholder="输入会员姓名/手机号码/编号" @keyup.enter.native="searchVipInfo"></el-input> |
| | | </el-col> |
| | | <el-col :span="1"> |
| | | <el-button type="primary">查询</el-button> |
| | | <el-button type="primary" @click="searchVipInfo">查询</el-button> |
| | | </el-col> |
| | | </el-col> |
| | | <el-col :span="9" style="float: right; margin-right: 20px;"> |
| | |
| | | </el-row> |
| | | <el-row type="flex" justify="center"> |
| | | <el-col :span="4" style="text-align: center;"><span style="font-weight: bolder">{{vipInfo.vipName}}</span></el-col> |
| | | <el-col :span="4" style="text-align: center;">{{vipInfo.vipType}}</el-col> |
| | | <el-col :span="5" style="text-align: center;">{{vipInfo.vipType}}</el-col> |
| | | </el-row> |
| | | <el-row type="flex" justify="center"> |
| | | <span class="col-style">24岁</span> |
| | | <span class="col-style">{{vipInfo.addr}}</span> |
| | | <span class="col-style"><span v-if="vipInfo.age != null && vipInfo.age != ''">{{vipInfo.age}}</span><span v-else>-</span></span> |
| | | <span class="col-style"><span v-if="vipInfo.addr != null && vipInfo.addr != ''">{{vipInfo.addr}}</span><span v-else>-</span></span> |
| | | <span class="col-style">{{vipInfo.phone}}</span> |
| | | </el-row> |
| | | <el-row style="padding: 10px 20px;"> |
| | | <p>余额:<span v-if="vipInfo.bal != null">{{vipInfo.bal}}元</span></p> |
| | | <p>余额:<span v-if="vipInfo.balance != null">{{vipInfo.balance}}元</span></p> |
| | | <p>积分:<span v-if="vipInfo.pointAll != null">{{vipInfo.pointAll}}</span></p> |
| | | <p>累计消费金额:10元</p> |
| | | <p>累计消费次数:1次</p> |
| | | <p>上次消费时间:2020-12-12 19:19:19</p> |
| | | <p>累计消费金额:<span v-if="vipInfo.totalMoney != null">{{vipInfo.totalMoney}} 元</span></p> |
| | | <p>累计消费次数:<span v-if="vipInfo.totalTimes != null">{{vipInfo.totalTimes}} 次</span></p> |
| | | <p>上次消费时间:<span v-if="vipInfo.payTime">{{vipInfo.payTime}}</span></p> |
| | | </el-row> |
| | | <el-row style="border-top: 2px dashed #E4E7ED; border-bottom: 2px dashed #E4E7ED; padding: 10px 0px;"> |
| | | <h4>标签</h4> |
| | | <el-tag type="info" |
| | | size="small" |
| | | :key="tag" |
| | | :key="tag.label" |
| | | v-for="tag in tags.tags" |
| | | closable |
| | | :disable-transitions="false" |
| | | @close="handleClose(tag)"> |
| | | {{tag}} |
| | | {{tag.label}} |
| | | </el-tag> |
| | | <el-input |
| | | class="input-new-tag" |
| | |
| | | <el-row style="padding: 10px 0;"> |
| | | <h4>消费门店</h4> |
| | | <el-row style="text-align: center"> |
| | | <el-col :span="10"> |
| | | <el-col :span="10" v-for="item in vipInfo.shopNames"> |
| | | <el-avatar size="small" :src="circleUrl"></el-avatar> |
| | | <span class="col-style">龙华店</span> |
| | | </el-col> |
| | | <el-col :span="10"> |
| | | <el-avatar size="small" :src="circleUrl"></el-avatar> |
| | | <span class="col-style">星海店</span> |
| | | </el-col> |
| | | <el-col :span="10"> |
| | | <el-avatar size="small" :src="circleUrl"></el-avatar> |
| | | <span class="col-style">测试店</span> |
| | | <span class="col-style">{{item}}</span> |
| | | </el-col> |
| | | </el-row> |
| | | </el-row> |
| | |
| | | <el-tab-pane label="会员信息" name="vipInfo"> |
| | | <el-row> |
| | | <el-col :span="10"> |
| | | <p>生日 : {{vipInfo.birthday1}}}</p> |
| | | <p>生日 : {{vipInfo.birthday1}}</p> |
| | | <p>会员状态 : {{vipInfo.vipState}}</p> |
| | | <p>会员编号 : {{vipInfo.vipNo}}</p> |
| | | <p>注册时间 : {{vipInfo.createTime}}</p> |
| | | <p>到店途径 : {{vipInfo.arrivalWay}}}</p> |
| | | <p>到店途径 : {{vipInfo.arrivalWay}}</p> |
| | | </el-col> |
| | | <el-col :span="10"> |
| | | <p>会员卡类型 : {{vipInfo.vipType}}</p> |
| | | <p>会员等级 : {{vipInfo.levelName}}</p> |
| | | <p>生肖/星座 : {{vipInfo.constell}}</p> |
| | | <p>地址 : {{vipInfo.addr}}}</p> |
| | | <p>地址 : {{vipInfo.addr}}</p> |
| | | <p>健康顾问 : {{vipInfo.staffName}}</p> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <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 : { |
| | |
| | | inputVisible: false, |
| | | inputValue: '' |
| | | }, |
| | | searchValue : "", |
| | | vipInfo : {}, |
| | | // 项目/套餐 tab |
| | | projTab : { |
| | | projType : "proj", |
| | | projOptions : [{ value : '有效', label : "有效" }, { value : '失效', label : "失效" }], |
| | |
| | | currentPage : 1 |
| | | } |
| | | }, |
| | | // 服务单tab |
| | | serviceOrderTab : { |
| | | tableData : [], |
| | | selectTime : '', |
| | |
| | | currentPage : 1, |
| | | }, |
| | | }, |
| | | // 订单 tab |
| | | orderTab : { |
| | | orderTableData : [], |
| | | selectTime : '', |
| | |
| | | currentPage : 1, |
| | | }, |
| | | }, |
| | | // 皮肤检测tab |
| | | skinTab : { |
| | | skinTableDate : [], |
| | | selectTime : '', |
| | |
| | | let _this = this; |
| | | |
| | | if (key) { |
| | | vipInfo(key); |
| | | _this.vipInfoFn(key); |
| | | } |
| | | }, |
| | | methods : { |
| | | vipInfo(key) { |
| | | vipInfoFn(key) { |
| | | let _this = this; |
| | | // 请求用户信息 |
| | | $.AjaxProxy({ |
| | | p: { |
| | | keyWord: key |
| | | } |
| | | }).invoke(basePath + "/admin/vipInfo/showVipInfo", function (loj) {}); |
| | | }).invoke(basePath + "/admin/vipInfo/showVipInfo", function (loj) { |
| | | if (loj.getRowCount() == 0) { |
| | | layer.msg('未查询到客户信息', { |
| | | icon: 5 |
| | | }); |
| | | return false; |
| | | } |
| | | console.log(loj); |
| | | let data = loj[0].result.rows[0]; |
| | | _this.vipInfo = {}; |
| | | _this.vipInfo = data; |
| | | |
| | | if (data.sysOrder != null) { |
| | | _this.vipInfo.totalMoney = data.sysOrder.zkTotal; |
| | | _this.vipInfo.totalTimes = data.sysOrder.times; |
| | | _this.vipInfo.payTime = data.sysOrder.payTime; |
| | | |
| | | if (data.sysOrder.shopName) { |
| | | var shopNames = data.sysOrder.shopName.split(','); |
| | | _this.vipInfo.shopNames = shopNames; |
| | | } |
| | | } |
| | | |
| | | _this.tags.tags = data.labels; |
| | | }); |
| | | }, |
| | | radioChange() { |
| | | console.log(this.projTab.projType); |
| | | addLabelFn(key) { |
| | | let _this = this; |
| | | // 请求用户信息 |
| | | $.AjaxProxy({ |
| | | p: { |
| | | vipId: _this.vipInfo.id, |
| | | label : key |
| | | } |
| | | }).invoke(basePath + "/admin/label/add", function (loj) { |
| | | let label = loj.getResult().mapInfo.label; |
| | | _this.tags.tags.push(label); |
| | | }); |
| | | }, |
| | | delLabelFn(id) { |
| | | $.AjaxProxy({ |
| | | p: { |
| | | id: id |
| | | } |
| | | }).invoke(basePath + "/admin/label/del", function (loj) { |
| | | }); |
| | | }, |
| | | searchVipInfo() { |
| | | let _this = this; |
| | | let inputVisible = _this.tags.inputVisible; |
| | | console.log(inputVisible) |
| | | if (!inputVisible) { |
| | | if (_this.searchValue) { |
| | | _this.vipInfoFn(_this.searchValue); |
| | | } |
| | | } |
| | | |
| | | }, |
| | | radioChange() {}, |
| | | tabHandleClick() { |
| | | |
| | | }, |
| | | handleClose(tag) { |
| | | this.tags.tags.splice(this.tags.tags.indexOf(tag), 1); |
| | | this.delLabelFn(tag.id); |
| | | }, |
| | | showInput() { |
| | | this.tags.inputVisible = true; |
| | |
| | | handleInputConfirm() { |
| | | let inputValue = this.tags.inputValue; |
| | | if (inputValue) { |
| | | this.tags.tags.push(inputValue); |
| | | this.addLabelFn(inputValue); |
| | | } |
| | | this.tags.inputVisible = false; |
| | | this.tags.inputValue = ''; |
| | |
| | | console.log(`当前页: ${val}`); |
| | | } |
| | | } |
| | | }) |
| | | $(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> |