From f76c9c5beb39916771402de95f05be18f39a9db6 Mon Sep 17 00:00:00 2001 From: Helius <wangdoubleone@gmail.com> Date: Thu, 17 Dec 2020 14:34:33 +0800 Subject: [PATCH] finish vip_detail vipInfo fn --- zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/vip_detail.html | 723 ++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 657 insertions(+), 66 deletions(-) diff --git a/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/vip_detail.html b/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/vip_detail.html index a718c91..ff9bdd1 100644 --- a/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/vip_detail.html +++ b/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/vip_detail.html @@ -57,48 +57,529 @@ .ibox-content { background-color: rgba(240, 242, 245, 1); } + + .col-style { + line-height: 30px; + height: 30px; + text-align: center; + padding: 0 5px; + display: inline-block; + vertical-align: top; + } + + .el-tag + .el-tag { + margin-left: 10px; + margin-bottom: 10px; + } + .button-new-tag { + margin-left: 10px; + height: 24px; + line-height: 22px; + padding-top: 0; + padding-bottom: 0; + } + .input-new-tag { + width: 90px; + margin-left: 10px; + vertical-align: bottom; + } + + .table-style { + margin: 20px 0; + padding: 20px 10px; + border: 1px solid #DCDFE6; + } </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 :offset="6" :span="10"> + <el-col :span="9" style="float: right; margin-right: 20px;"> <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="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 style="margin-left: 26px; margin-right: 26px;"> + <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">{{vipInfo.vipName}}</span></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"><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.balance != null">{{vipInfo.balance}}元</span></p> + <p>积分:<span v-if="vipInfo.pointAll != null">{{vipInfo.pointAll}}</span></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.label" + v-for="tag in tags.tags" + closable + :disable-transitions="false" + @close="handleClose(tag)"> + {{tag.label}} + </el-tag> + <el-input + class="input-new-tag" + v-if="tags.inputVisible" + v-model="tags.inputValue" + ref="saveTagInput" + size="mini" + @keyup.enter.native="handleInputConfirm" + @blur="handleInputConfirm" + ></el-input> + <el-button v-else class="button-new-tag" size="mini" @click="showInput">+</el-button> + </el-row> + <el-row style="padding: 10px 0;"> + <h4>消费门店</h4> + <el-row style="text-align: center"> + <el-col :span="10" v-for="item in vipInfo.shopNames"> + <el-avatar size="small" :src="circleUrl"></el-avatar> + <span class="col-style">{{item}}</span> + </el-col> + </el-row> + </el-row> </el-row> </el-aside> - <el-main style="background-color: white; margin-right: 15px;"></el-main> + <el-main style="background-color: white; margin-right: 15px; padding: 20px 30px;"> + <el-tabs v-model="activeName" type="card" @tab-click="tabHandleClick"> + <el-tab-pane label="会员信息" name="vipInfo"> + <el-row> + <el-col :span="10"> + <p>生日 : {{vipInfo.birthday1}}</p> + <p>会员状态 : {{vipInfo.vipState}}</p> + <p>会员编号 : {{vipInfo.vipNo}}</p> + <p>注册时间 : {{vipInfo.createTime}}</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.staffName}}</p> + </el-col> + </el-row> + </el-tab-pane> + <el-tab-pane label="项目/套餐" name="proj"> + <el-row style="line-height: 40px;"> + <el-col :span="10" style="margin-left: 20px;"> + <el-radio-group v-model="projTab.projType" @change="radioChange"> + <el-radio label="proj">项目</el-radio> + <el-radio label="taocan">套餐</el-radio> + <el-radio label="card">卡项</el-radio> + </el-radio-group> + </el-col> + <el-col :span="3" style="float: right; margin-right: 20px;"> + <el-select v-model="projTab.projIsValid" placeholder="请选择"> + <el-option + v-for="item in projTab.projOptions" + :key="item.value" + :label="item.label" + :value="item.value"> + </el-option> + </el-select> + </el-col> + </el-row> + <el-row class="table-style"> + <el-table id="proj" v-show="projTab.projType=='proj'" :data="projTab.projTableData" + style="width: 100%"> + <el-table-column + prop="projName" + label="项目名称" + width="180"> + </el-table-column> + <el-table-column + prop="source" + label="来源" + width="180"> + </el-table-column> + <el-table-column + prop="status" + label="状态"> + </el-table-column> + <el-table-column + prop="balance" + label="项目余额"> + </el-table-column> + <el-table-column + prop="surplusCount" + label="余次"> + </el-table-column> + <el-table-column + prop="failTime" + label="到期时间"> + </el-table-column> + <el-table-column label="操作"> + <template slot-scope="scope"> + <el-button type="text" size="small" @click="tabProjInvalid(scope.$index, scope.row)">无效</el-button> + <el-button type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">冻结</el-button> + <el-button type="text" size="small" @click="tabProjEdit(scope.$index, scope.row)">编辑</el-button> + </template> + </el-table-column> + </el-table> + + <el-table id="taocan" v-show="projTab.projType=='taocan'" :data="projTab.taocanTableData" + style="width: 100%;" + row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> + <el-table-column + prop="projName" + label="名称" + width="180"> + </el-table-column> + <el-table-column + prop="status" + label="状态" + width="180"> + </el-table-column> + <el-table-column + prop="balance" + label="余额"> + </el-table-column> + <el-table-column + prop="surplusCount" + label="套餐余次"> + </el-table-column> + <el-table-column + prop="failTime" + label="到期时间"> + </el-table-column> + <el-table-column label="操作"> + <template slot-scope="scope"> + <el-button type="text" size="small" @click="tabProjInvalid(scope.$index, scope.row)">无效</el-button> + <el-button type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">冻结</el-button> + <el-button type="text" size="small" @click="tabProjEdit(scope.$index, scope.row)">编辑</el-button> + </template> + </el-table-column> + </el-table> + + <el-table id="card" v-show="projTab.projType=='card'" :data="projTab.cardTableData" + style="width: 100%;"> + <el-table-column + type="index" + width="50"> + </el-table-column> + <el-table-column + prop="cardName" + label="充值卡名称"> + </el-table-column> + <el-table-column + prop="useTotal" + label="总次数"> + </el-table-column> + <el-table-column + prop="lastCount" + label="剩余次数"> + </el-table-column> + <el-table-column + prop="realMoney" + label="本金"> + </el-table-column> + <el-table-column + prop="giftMoney" + label="赠送金额"> + </el-table-column> + <el-table-column + prop="source" + label="来源"> + </el-table-column> + <el-table-column + prop="status" + label="状态"> + </el-table-column> + <el-table-column + prop="isVipCar" + label="是否是会籍卡"> + </el-table-column> + <el-table-column + prop="isOver" + label="是否使用完成"> + </el-table-column> + <el-table-column + prop="failTime" + label="到期时间"> + </el-table-column> + <el-table-column + prop="remark" + label="备注"> + </el-table-column> + <el-table-column label="操作"> + <template slot-scope="scope"> + <el-button type="text" size="small" @click="tabProjInvalid(scope.$index, scope.row)">无效</el-button> + <el-button type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">冻结</el-button> + <el-button type="text" size="small" @click="tabProjEdit(scope.$index, scope.row)">编辑</el-button> + </template> + </el-table-column> + </el-table> + </el-row> + <el-row> + <el-pagination + background + @size-change="tabHandleSizeChange" + @current-change="tabHandleCurrentChange" + :current-page="projTab.page.currentPage" + :page-sizes="[10, 20, 30, 50]" + :page-size="10" + layout="total, sizes, prev, pager, next, jumper" + :total="400"> + </el-pagination> + </el-row> + </el-tab-pane> + <el-tab-pane label="服务单" name="serviceOrder"> + <el-row style="line-height: 40px;"> + <el-col :span="11"> + <span>选择时间:</span> + <el-date-picker v-model="serviceOrderTab.selectTime" + type="datetimerange" + range-separator="至" + start-placeholder="开始日期" + end-placeholder="结束日期"> + </el-date-picker> + </el-col> + <el-col :span="5"> + <el-select v-model="serviceOrderTab.state" placeholder="请选择"> + <el-option + v-for="item in serviceOrderTab.states" + :key="item.value" + :label="item.label" + :value="item.value"> + </el-option> + </el-select> + </el-col> + <el-col :span="1" style="margin-left: 5px;"> + <el-button type="primary">查询</el-button> + </el-col> + </el-row> + <el-row class="table-style"> + <el-table :data="serviceOrderTab.tableData" + style="width: 100%;"> + <el-table-column + type="index" + width="50"> + </el-table-column> + <el-table-column + prop="serviceNo" + label="服务单号"> + </el-table-column> + <el-table-column + prop="money" + label="消耗金额"> + </el-table-column> + <el-table-column + prop="createTime" + label="下单时间"> + </el-table-column> + <el-table-column + prop="yyTime" + label="预约时间"> + </el-table-column> + <el-table-column + prop="totalTime" + label="服务时长"> + </el-table-column> + <el-table-column + prop="isOverTime" + label="超时时间"> + </el-table-column> + <el-table-column + prop="createStaffName" + label="下单顾问"> + </el-table-column> + <el-table-column + prop="state" + label="状态"> + </el-table-column> + <el-table-column label="操作"> + <template slot-scope="scope"> + <el-button type="text" size="small" @click="tabProjInvalid(scope.$index, scope.row)">排班</el-button> + <el-button type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">修改时间</el-button> + <el-button type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">取消</el-button> + </template> + </el-table-column> + </el-table> + </el-row> + <el-row> + <el-pagination + background + @size-change="tabHandleSizeChange" + @current-change="tabHandleCurrentChange" + :current-page="serviceOrderTab.page.currentPage" + :page-sizes="[10, 20, 30, 50]" + :page-size="10" + layout="total, sizes, prev, pager, next, jumper" + :total="400"> + </el-pagination> + </el-row> + </el-tab-pane> + <el-tab-pane label="订单" name="order"> + <el-row style="line-height: 40px;"> + <el-col :span="11"> + <span>选择时间:</span> + <el-date-picker v-model="serviceOrderTab.selectTime" + type="datetimerange" + range-separator="至" + start-placeholder="开始日期" + end-placeholder="结束日期"> + </el-date-picker> + </el-col> + <el-col :span="5"> + <el-select v-model="serviceOrderTab.state" placeholder="请选择"> + <el-option + v-for="item in serviceOrderTab.states" + :key="item.value" + :label="item.label" + :value="item.value"> + </el-option> + </el-select> + </el-col> + <el-col :span="1" style="margin-left: 5px;"> + <el-button type="primary">查询</el-button> + </el-col> + </el-row> + <el-row class="table-style"> + <el-table :data="orderTab.orderTableData" + style="width: 100%;"> + <el-table-column + type="index" + width="50"> + </el-table-column> + <el-table-column + prop="orderNo" + label="订单号"> + </el-table-column> + <el-table-column + prop="orderTime" + label="下单时间"> + </el-table-column> + <el-table-column + prop="total" + label="总价"> + </el-table-column> + <el-table-column + prop="zkTotal" + label="折后价"> + </el-table-column> + <el-table-column + prop="staffName" + label="下单顾问"> + </el-table-column> + <el-table-column + prop="cashPay" + label="现金支付金额"> + </el-table-column> + <el-table-column + prop="cardPay" + label="卡支付金额"> + </el-table-column> + <el-table-column + prop="arrears" + label="欠款金额"> + </el-table-column> + <el-table-column + prop="statu" + label="订单状态"> + </el-table-column> + <el-table-column + prop="remark" + label="备注"> + </el-table-column> + <el-table-column label="操作"> + <template slot-scope="scope"> + <el-button type="text" size="small" @click="tabProjInvalid(scope.$index, scope.row)">结算</el-button> + <el-button type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">详情</el-button> + <el-button type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">取消</el-button> + </template> + </el-table-column> + </el-table> + </el-row> + <el-row> + <el-pagination + background + @size-change="tabHandleSizeChange" + @current-change="tabHandleCurrentChange" + :current-page="orderTab.page.currentPage" + :page-sizes="[10, 20, 30, 50]" + :page-size="10" + layout="total, sizes, prev, pager, next, jumper" + :total="400"> + </el-pagination> + </el-row> + </el-tab-pane> + <el-tab-pane label="皮肤检测" name="skinCheck"> + <el-row style="line-height: 40px;"> + <el-col :span="11"> + <span>选择时间:</span> + <el-date-picker v-model="serviceOrderTab.selectTime" + type="datetimerange" + range-separator="至" + start-placeholder="开始日期" + end-placeholder="结束日期"> + </el-date-picker> + </el-col> + <el-col :span="6" style="margin-left: 5px;"> + <el-button type="primary">查询</el-button> + <el-button type="success">新增</el-button> + </el-col> + </el-row> + <el-row class="table-style"> + <el-table :data="skinTab.skinTableDate" + style="width: 100%;"> + <el-table-column + type="index" + width="50"> + </el-table-column> + <el-table-column + prop="checkUserName" + label="检测人员"> + </el-table-column> + <el-table-column + prop="shopName" + label="门店"> + </el-table-column> + <el-table-column + prop="checkTime" + label="检测时间"> + </el-table-column> + <el-table-column label="操作"> + <template slot-scope="scope"> + <el-button type="text" size="small" @click="tabProjInvalid(scope.$index, scope.row)">编辑</el-button> + <el-button type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">删除</el-button> + </template> + </el-table-column> + </el-table> + </el-row> + </el-tab-pane> + </el-tabs> + </el-main> </el-container> </el-container> </div> @@ -108,59 +589,169 @@ <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(); + circleUrl : "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", + activeName : 'vipInfo', + tags : { + tags : [], + inputVisible: false, + inputValue: '' + }, + searchValue : "", + vipInfo : {}, + // 项目/套餐 tab + projTab : { + projType : "proj", + projOptions : [{ value : '有效', label : "有效" }, { value : '失效', label : "失效" }], + projIsValid : "", + + projTableData : [], + taocanTableData : [], + cardTableData : [], + page : { + currentPage : 1 } - }); - updateHistory(); - $("#userList").mouseleave(function () { - $(this).hide(); - }) - }) + }, + // 服务单tab + serviceOrderTab : { + tableData : [], + selectTime : '', + state : '', + states : [ { value : '待预约', label : '待预约' },{ value : '预约成功待处理', label : '待派单' },{ value : '需配料', label : '待配料' }, + { value : '配料完成', label : '待服务' },{ value : '服务中', label : '服务中' }, + { value : '服务完成', label : '服务完成' },{ value : '服务单结束', label : '服务单结束' }, ], + page : { + currentPage : 1, + }, + }, + // 订单 tab + orderTab : { + orderTableData : [], + selectTime : '', + state : '', + states : [ { value : '待付款', label : '待付款' }, { value : '已付款', label : '已付款' }, { value : '欠款', label : '欠款' }, { value : '已取消', label : '已取消' } ], + page : { + currentPage : 1, + }, + }, + // 皮肤检测tab + skinTab : { + skinTableDate : [], + selectTime : '', + page : { + currentPage : 1, + } + } + }, + created : function() { + var key = $.query.get("vipPhone"); + let _this = this; + if (key) { + _this.vipInfoFn(key); + } + }, + methods : { + vipInfoFn(key) { + let _this = this; + // 请求用户信息 + $.AjaxProxy({ + p: { + keyWord: key + } + }).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; - function selectList(phone) { - $("#userList").hide(); - $("#key").val(phone); - selectByKey(); - } + 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; + }); + }, + 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; + this.$nextTick(_ => { + this.$refs.saveTagInput.$refs.input.focus(); + }); + }, + handleInputConfirm() { + let inputValue = this.tags.inputValue; + if (inputValue) { + this.addLabelFn(inputValue); + } + this.tags.inputVisible = false; + this.tags.inputValue = ''; + }, + tabProjInvalid(index, row) {}, + tabProjCold(index, row) {}, + tabProjEdit(index, row) {}, + tabHandleSizeChange(val) { + console.log(`每页 ${val} 条`); + }, + tabHandleCurrentChange(val) { + console.log(`当前页: ${val}`); + } + } + }); </script> </body> </html> \ No newline at end of file -- Gitblit v1.9.1