From df1b14344ba81cab80ddd118a12289d95f69e4a3 Mon Sep 17 00:00:00 2001 From: Helius <wangdoubleone@gmail.com> Date: Thu, 17 Dec 2020 21:45:02 +0800 Subject: [PATCH] modify vip_detail.html --- zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/vip_detail.html | 986 ++++++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 830 insertions(+), 156 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 cc7e68a..dc26623 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 @@ -1,5 +1,5 @@ <!DOCTYPE HTML> -<html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml"> +<html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> @@ -11,7 +11,9 @@ <!-- 本框架基本脚本和样式 --> <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="@{/plugin/moment.min.js}"></script> <script type="text/javascript" th:src="@{/js/systools/MBase.js}"></script> + <script type="text/javascript" th:src="@{/js/function/vip.js}"></script> <link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}"> <script type="text/javascript" th:src="@{/js/function/vip.js}"></script> @@ -83,28 +85,32 @@ 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-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 :span="6" style="float: right; margin-right: 20px;"> + <el-button type="primary" plain @click="recharge">充值</el-button> + <el-button type="warning" plain @click="addOrder">开单</el-button> + <el-button type="success" plain @click="addServiceOrder">开服务单</el-button> + <el-button type="danger" plain @click="returnMoney">退款</el-button> </el-col> </el-header> <el-container> @@ -116,31 +122,31 @@ </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-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">24岁</span> - <span class="col-style">湖南长沙</span> - <span class="col-style">13412341234</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>余额:0元</p> - <p>积分:123123</p> - <p>累计消费金额:10元</p> - <p>累计消费次数:1次</p> - <p>上次消费时间:2020-12-12 19:19:19</p> + <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" + :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" @@ -156,17 +162,9 @@ <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> @@ -174,35 +172,35 @@ </el-aside> <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="first"> + <el-tab-pane label="会员信息" name="vipInfo"> <el-row> <el-col :span="10"> - <p>生日 : 2020-12-31</p> - <p>会员状态 : 活跃</p> - <p>会员编号 : X1234567</p> - <p>注册时间 : 2020-12-31</p> - <p>到店途径 : 路过</p> + <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>会员卡类型 : 金卡会员</p> - <p>会员等级 : VIP2</p> - <p>生肖/星座 : 摩羯座</p> - <p>地址 : 宇宙银河系</p> - <p>健康顾问 : 奥特曼</p> + <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="second"> + <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-group v-model="projTab.projType" @change="refreshTable"> <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-select v-model="projTab.projIsValid" placeholder="请选择" @change="selectChange"> <el-option v-for="item in projTab.projOptions" :key="item.value" @@ -212,7 +210,7 @@ </el-select> </el-col> </el-row> - <el-row style="margin: 20px 0; padding: 20px 10px; border: 1px solid #DCDFE6;"> + <el-row class="table-style"> <el-table id="proj" v-show="projTab.projType=='proj'" :data="projTab.projTableData" style="width: 100%"> <el-table-column @@ -243,8 +241,9 @@ </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 v-if="scope.row.status!='有效'" type="text" size="small" @click="tabProjValid(scope.$index, scope.row)">有效</el-button> + <el-button v-if="scope.row.status!='无效'" type="text" size="small" @click="tabProjInvalid(scope.$index, scope.row)">无效</el-button> + <el-button v-if="scope.row.status!='冻结'" 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> @@ -277,8 +276,9 @@ </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 v-if="scope.row.status!='有效'" type="text" size="small" @click="tabProjValid(scope.$index, scope.row)">有效</el-button> + <el-button v-if="scope.row.status!='无效'" type="text" size="small" @click="tabProjInvalid(scope.$index, scope.row)">无效</el-button> + <el-button v-if="scope.row.status!='冻结'" 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> @@ -336,8 +336,9 @@ </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 v-if="scope.row.status!='有效'" type="text" size="small" @click="tabProjValid(scope.$index, scope.row)">有效</el-button> + <el-button v-if="scope.row.status!='无效'" type="text" size="small" @click="tabProjInvalid(scope.$index, scope.row)">无效</el-button> + <el-button v-if="scope.row.status!='冻结'" 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> @@ -350,15 +351,256 @@ @current-change="tabHandleCurrentChange" :current-page="projTab.page.currentPage" :page-sizes="[10, 20, 30, 50]" - :page-size="10" + :page-size="projTab.page.pageSize" layout="total, sizes, prev, pager, next, jumper" - :total="400"> + :total="projTab.page.total"> </el-pagination> </el-row> </el-tab-pane> - <el-tab-pane label="服务日志" name="third">服务日志</el-tab-pane> - <el-tab-pane label="消费记录" name="fourth">消费记录</el-tab-pane> - <el-tab-pane label="跟进记录" name="fifth">跟进记录</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="至" format="yyyy-MM-dd HH:mm" + 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" @click="serviceOrderQuery">查询</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="服务单号" + width="160"> + </el-table-column> + <el-table-column + prop="money" + label="消耗金额"> + </el-table-column> + <el-table-column + prop="createTime" + label="下单时间" width="160"> + </el-table-column> + <el-table-column + prop="yyTime" + label="预约时间" width="160" :formatter="dateFormat"> + </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 fixed="right" label="操作" width="200"> + <template slot-scope="scope"> + <el-button type="text" size="small" @click="lookServiceOrder(scope.$index, scope.row)">查看</el-button> + <el-button type="text" size="small" v-if="scope.row.state=='待预约'" @click="paiban(scope.$index, scope.row)">排班</el-button> + <el-button type="text" size="small" v-if="scope.row.state=='预约成功待处理'" @click="giveServiceOrder(scope.$index, scope.row)">派单</el-button> + <el-button type="text" size="small" v-if="scope.row.state=='预约成功待处理'" @click="modifyServiceOrder(scope.$index, scope.row)">修改</el-button> + <el-button type="text" size="small" v-if="scope.row.state=='需配料'" @click="peiliao(scope.$index, scope.row)">配料</el-button> + <el-button type="text" size="small" v-if="scope.row.state=='服务完成'" @click="openHKService(scope.$index, scope.row)">划扣</el-button> + <el-button type="text" size="small" @click="modifyTime(scope.$index, scope.row)">修改时间</el-button> + <el-button type="text" size="small" @click="cancelServiceOrder(scope.$index, scope.row)">取消</el-button> + </template> + </el-table-column> + </el-table> + </el-row> + <el-row> + <el-pagination + background + @size-change="serviceOrderSizeChange" + @current-change="serviceOrderCurrentChange" + :current-page="serviceOrderTab.page.currentPage" + :page-sizes="[10, 20, 30, 50]" + :page-size="serviceOrderTab.page.pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="serviceOrderTab.page.total"> + </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="orderTab.selectTime" + type="datetimerange" + range-separator="至" + format="yyyy-MM-dd HH:mm" + start-placeholder="开始日期" + end-placeholder="结束日期"> + </el-date-picker> + </el-col> + <el-col :span="5"> + <el-select v-model="orderTab.state" placeholder="请选择"> + <el-option + v-for="item in orderTab.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" @click="orderQuery">查询</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="订单号" width="180"> + </el-table-column> + <el-table-column + prop="orderTime" + label="下单时间" width="160"> + </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="备注" width="100"> + </el-table-column> + <el-table-column label="操作" fixed="right" width="160"> + <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="orderSizeChange" + @current-change="orderCurrentChange" + :current-page="orderTab.page.currentPage" + :page-sizes="[10, 20, 30, 50]" + :page-size="orderTab.page.pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="orderTab.page.total"> + </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="skinTab.selectTime" + type="daterange" + range-separator="至" + format="yyyy-MM-dd" + start-placeholder="开始日期" + end-placeholder="结束日期"> + </el-date-picker> + </el-col> + <el-col :span="6" style="margin-left: 5px;"> + <el-button type="primary" @click="skinCheckQuery">查询</el-button> + <el-button type="success" @click="addSkinCheck">新增</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="editSkinCheck(scope.$index, scope.row)">编辑</el-button> + <el-button type="text" size="small" @click="delSkinCheck(scope.$index, scope.row)">删除</el-button> + </template> + </el-table-column> + </el-table> + </el-row> + <el-row> + <el-pagination + background + @size-change="skinCheckSizeChange" + @current-change="skinCheckCurrentChange" + :current-page="skinTab.page.currentPage" + :page-sizes="[10, 20, 30, 50]" + :page-size="skinTab.page.pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="skinTab.page.total"> + </el-pagination> + </el-row> + </el-tab-pane> </el-tabs> </el-main> </el-container> @@ -370,78 +612,524 @@ <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/0/88/03b0d39583f48206768a7534e55bcpng.png", - activeName : 'second', + activeName : 'vipInfo', tags : { - tags : ['标签1', '标签2', '标签3', '这是什么标签啊啊啊啊', '这个标签是什么呢哈哈哈哈'], + tags : [], inputVisible: false, inputValue: '' }, + searchValue : "", + vipInfo : {}, + // 项目/套餐 tab projTab : { projType : "proj", - projOptions : [{ value : '有效', label : "有效" }, { value : '失效', label : "失效" }], + projOptions : [{ value : '', label : "全部" }, { value : '有效', label : "有效" }, { value : '无效', label : "无效" }, { value : "冻结", label : "冻结" }, { value : "转让", label : "转让" }, { value : "退款", label : "退款" }], projIsValid : "", - projTableData : [ - { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - ], - taocanTableData : [ - { id : 1, projName : '这个是套餐啊啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - { id : 2, projName : '这个是套餐啊啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - { id : 3, projName : '这个是套餐啊啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - { id : 4, projName : '这个是套餐啊啊111', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10', children : [ - { id : 11, projName : '这是啥项目啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - { id : 12, projName : '这是啥项目啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - ] }, - { id : 5, projName : '这个是套餐啊啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - { id : 6, projName : '这个是套餐啊啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - { id : 7, projName : '这个是套餐啊啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - { id : 8, projName : '这个是套餐啊啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - { id : 9, projName : '这个是套餐啊啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - { id : 10, projName : '这个是套餐啊啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' }, - ], - cardTableData : [ - { cardName : '储值卡', useTotal : 1, lastCount : 1, realMoney : 1000, giftMoney : 1000, source : '购买', status : '有效', isVipCar : '1', isOver : '2', failTime : '2020-10-10' }, - { cardName : '储值卡', useTotal : 1, lastCount : 1, realMoney : 1000, giftMoney : 1000, source : '购买', status : '有效', isVipCar : '1', isOver : '2', failTime : '2020-10-10' }, - { cardName : '储值卡', useTotal : 1, lastCount : 1, realMoney : 1000, giftMoney : 1000, source : '购买', status : '有效', isVipCar : '1', isOver : '2', failTime : '2020-10-10' }, - { cardName : '储值卡', useTotal : 1, lastCount : 1, realMoney : 1000, giftMoney : 1000, source : '购买', status : '有效', isVipCar : '1', isOver : '2', failTime : '2020-10-10' }, - { cardName : '储值卡', useTotal : 1, lastCount : 1, realMoney : 1000, giftMoney : 1000, source : '购买', status : '有效', isVipCar : '1', isOver : '2', failTime : '2020-10-10' }, - { cardName : '储值卡', useTotal : 1, lastCount : 1, realMoney : 1000, giftMoney : 1000, source : '购买', status : '有效', isVipCar : '1', isOver : '2', failTime : '2020-10-10' }, - { cardName : '储值卡', useTotal : 1, lastCount : 1, realMoney : 1000, giftMoney : 1000, source : '购买', status : '有效', isVipCar : '1', isOver : '2', failTime : '2020-10-10' }, - { cardName : '储值卡', useTotal : 1, lastCount : 1, realMoney : 1000, giftMoney : 1000, source : '购买', status : '有效', isVipCar : '1', isOver : '2', failTime : '2020-10-10' }, - ], + projTableData : [], + taocanTableData : [], + cardTableData : [], page : { - currentPage : 1 + currentPage : 1, + pageSize : 10, + total : 0 } }, - }, - created : function() {}, - methods : { - radioChange() { - console.log(this.projTab.projType); + // 服务单tab + serviceOrderTab : { + tableData : [], + selectTime : '', + state : '', + states : [ { value : '', label : '全部' }, { value : '待预约', label : '待预约' },{ value : '预约成功待处理', label : '待派单' },{ value : '需配料', label : '待配料' }, + { value : '配料完成', label : '待服务' },{ value : '服务中', label : '服务中' }, + { value : '服务完成', label : '服务完成' },{ value : '服务单结束', label : '服务单结束' }, ], + page : { + currentPage : 1, + pageSize : 10, + total : 0 + } }, - tabHandleClick() { + // 订单 tab + orderTab : { + orderTableData : [], + selectTime : '', + state : '', + states : [ { value : '', label : '全部' }, { value : '待付款', label : '待付款' }, { value : '已付款', label : '已付款' }, { value : '欠款', label : '欠款' }, { value : '已取消', label : '已取消' } ], + page : { + currentPage : 1, + pageSize : 10, + total : 0 + } + }, + // 皮肤检测tab + skinTab : { + skinTableDate : [], + selectTime : '', + page : { + currentPage : 1, + pageSize : 10, + total : 0 + } + } + }, + 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; + + 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; + _this.projTableQueryFn(); + }); + }, + 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); + } + } }, + + /** ############## 项目/套餐Tab页 start #################### **/ + projTabTableParams() { + let _this = this; + let currentPage = _this.projTab.page.currentPage; + let pageSize = _this.projTab.page.pageSize + return { + vipId: _this.vipInfo.id, + offset: (currentPage - 1) * pageSize, + limit: pageSize, + status: _this.projTab.projIsValid, + }; + }, + // 项目tab页,请求项目数据 + projTableQueryFn() { + let _this = this; + $.AjaxProxy({ + p:_this.projTabTableParams() + }).invoke(basePath + "/admin/projUser/showList", function (loj) { + _this.projTab.page.total = loj.getResult().total; + _this.projTab.projTableData = loj.getValue("rows"); + }); + }, + // 套餐表格数据请求 + taocanTableQueryFn() { + let _this = this; + $.AjaxProxy({ + p:_this.projTabTableParams() + }).invoke(basePath + "/admin/taoCanUser/showTc", function (loj) { + _this.projTab.page.total = loj.getResult().total; + _this.projTab.taocanTableData = loj.getValue("rows"); + }); + }, + // 卡项表格数据请求 + cardTableQueryFn() { + let _this = this; + $.AjaxProxy({ + p:_this.projTabTableParams() + }).invoke(basePath + "/admin/moneyCardUse/showVipMoneyCardList", function (loj) { + _this.projTab.page.total = loj.getResult().total; + _this.projTab.cardTableData = loj.getValue("rows"); + }); + }, + // 单选框切换 + refreshTable() { + let _this = this; + if (_this.projTab.projType === 'proj') { + _this.projTableQueryFn(); + } + + if (_this.projTab.projType === 'taocan') { + _this.taocanTableQueryFn(); + } + + if (_this.projTab.projType === 'card') { + _this.cardTableQueryFn(); + } + }, + // 下拉框选择 + selectChange() { + this.refreshTable(); + }, + tabProjValid(index, row) { + let _this = this; + let projType = _this.projTab.projType; + var url; + if (projType === 'proj') { + url = "/admin/projUser/activeProj"; + } + + if (projType === 'taocan') { + url = "/admin/taoCanUser/activeTc"; + } + + if (projType === 'card') { + url = "/admin/moneyCardUse/active"; + } + $.AjaxProxy({ + p : { + id : row.id + } + }).invoke(basePath + url, function(loj) { + if (projType === 'taocan') { + layer.alert(loj.getValue("info"), { + icon : 1 + }); + _this.refreshTable(); + } else { + var rs = loj.attr("result"); + console.log(rs); + if (rs.info == '已过期') { + layer.open({ + type : 2, + title : "设置过期日期", + area : [ "420px", '300px' ], + content : [ basePath+'/admin/redirect/vip/select-date-card?id=' + row.id ] + }); + } else { + layer.alert(loj.getValue("info"), { + icon : 1 + }); + _this.refreshTable(); + } + } + }); + + }, + tabProjEdit(index, row) { + let _this = this; + let projType = _this.projTab.projType; + var url; + if (projType === 'proj') { + url = '/admin/projUser/editForm?id='; + } + + if (projType === 'taocan') { + url = '/admin/taoCanUser/editForm?id='; + } + + if (projType === 'card') { + url = '/admin/moneyCardUse/editForm?id='; + } + + layer.open({ + type : 2, + title : "编辑", + area : MUI.SIZE_M, + maxmin : true, + content : [ basePath + url + row.id ] + }); + }, + tabProjInvalid(index, row) { + let _this = this; + let projType = _this.projTab.projType; + var url; + if (projType === 'proj') { + url = '/admin/projUser/invalidProj'; + } + + if (projType === 'taocan') { + url = '/admin/moneyCardUse/invalid'; + } + + if (projType === 'card') { + url = '/admin/taoCanUser/invalidTc'; + } + + _this.projTabQuery(row.id, url); + }, + tabProjCold(index, row) { + let _this = this; + let projType = _this.projTab.projType; + var url; + if (projType === 'proj') { + url = '/admin/projUser/freezeProj'; + } + + if (projType === 'taocan') { + url = '/admin/taoCanUser/freezeTc'; + } + + if (projType === 'card') { + url = '/admin/moneyCardUse/freeze'; + } + + _this.projTabQuery(row.id, url); + }, + projTabQuery(id, url) { + let _this = this; + $.AjaxProxy({ + p : { + id : id + } + }).invoke(basePath + url, function(loj) { + layer.alert(loj.getValue("info"), { + icon : 1 + }); + _this.refreshTable(); + }); + }, + /** ############## 项目/套餐Tab页 end #################### **/ + + /********* 服务单tab start ***********/ + serviceOrderQuery() { + this.serviceOrderTableQueryFn() + }, + serviceOrderTableQueryFn() { + let _this = this; + let serviceOrderTab = _this.serviceOrderTab; + let page = serviceOrderTab.page; + var params = {}; + params.limit = page.pageSize; + params.offset = (page.currentPage - 1) * page.pageSize; + params.state = serviceOrderTab.state; + params.vipId = _this.vipInfo.id; + if (serviceOrderTab.selectTime) { + params.beginTime = moment(serviceOrderTab.selectTime[0]).format("YYYY-MM-DD HH:mm"); + params.closureTime = moment(serviceOrderTab.selectTime[1]).format("YYYY-MM-DD HH:mm"); + } + $.AjaxProxy({ + p:params + }).invoke(basePath + "/admin/projService/showList", function (loj) { + serviceOrderTab.page.total = loj.getResult().total; + serviceOrderTab.tableData = loj.getValue("rows"); + }); + }, + serviceOrderSizeChange(val) { + this.serviceOrderTab.page.pageSize = val; + this.serviceOrderTableQueryFn() + }, + serviceOrderCurrentChange(val) { + this.serviceOrderTab.page.currentPage = val; + this.serviceOrderTableQueryFn() + }, + buildServiceOrderOperate(row, column) { + var html = '<el-button type="text" size="small" @click="tabProjInvalid('+row+', '+column+')">排班</el-button>' + return html; + }, + // 查看 + lookServiceOrder(index, row) { + selectFwz(row.id); + }, + // 排班 + paiban(index, row) { + openPb(row.id); + }, + // 派单 + giveServiceOrder(index, row) { + openPd(row.id); + }, + // 修改 + modifyServiceOrder(index, row) { + updatePd(row.id); + }, + // 配料 + peiliao(index, row) { + openEdit1(row.id); + }, + // 划扣 + openHkService(index, row) { + openHkServcie(row.id); + }, + // 取消 + cancelServiceOrder(index, row) { + qxPb(row.id); + }, + // 修改时间 + modifyTime(index, row) { + layer.open({ + type: 2, + title: "修改订单时间", + maxmin: true, + area: [MUI.SIZE_L, '500px'], + content: [basePath + '/admin/projService/toServiceOrderUpdateTime?id=' + row.id] + }); + }, + /********* 服务单tab end ***********/ + + /********* 订单Tab start ***********/ + orderQuery() { + this.orderTableDataQueryFn(); + }, + orderTableDataQueryFn() { + let _this = this; + let orderTab = _this.orderTab; + let page = orderTab.page; + var params = {}; + params.limit = page.pageSize; + params.offset = (page.currentPage - 1) * page.pageSize; + params.statu = orderTab.state; + params.vipId = _this.vipInfo.id; + if (orderTab.selectTime) { + params.beginTimeVo = moment(orderTab.selectTime[0]).format("YYYY-MM-DD HH:mm"); + params.endTimeVo = moment(orderTab.selectTime[1]).format("YYYY-MM-DD HH:mm"); + } + $.AjaxProxy({ + p:params + }).invoke(basePath + "/admin/order/showList", function (loj) { + orderTab.page.total = loj.getResult().total; + orderTab.orderTableData = loj.getValue("rows"); + }); + + }, + orderSizeChange(val) { + this.orderTab.page.pageSize = val; + this.orderTableDataQueryFn(); + }, + orderCurrentChange(val) { + this.orderTab.page.currentPage = val; + this.orderTableDataQueryFn(); + }, + /********* 订单Tab end ***********/ + + /************** 皮肤检测tab start **************/ + skinCheckQuery() { + this.skinCheckTableDataQueryFn(); + }, + skinCheckTableDataQueryFn() { + let _this = this; + let skinTab = _this.skinTab; + let page = skinTab.page; + var params = {}; + params.limit = page.pageSize; + params.offset = (page.currentPage - 1) * page.pageSize; + params.userId = _this.vipInfo.id; + if (skinTab.selectTime) { + params.beginTime = moment(skinTab.selectTime[0]).format("YYYY-MM-DD"); + params.endTime = moment(skinTab.selectTime[1]).format("YYYY-MM-DD"); + } + $.AjaxProxy({ + p:params + }).invoke(basePath + "/admin/sysSkinCheckRecord/showList", function (loj) { + skinTab.page.total = loj.getResult().total; + skinTab.skinTableDate = loj.getValue("rows"); + }); + }, + skinCheckSizeChange(val) { + this.skinTab.page.pageSize = val; + this.skinCheckTableDataQueryFn() + }, + skinCheckCurrentChange(val) { + this.skinTab.page.currentPage = val; + this.skinCheckTableDataQueryFn() + }, + addSkinCheck() { + let _this = this; + layer.full(layer.open({ + type : 2, + title : "新增皮肤检测", + area : [ MUI.SIZE_L, '400px' ], + maxmin : true, + content : [ basePath+'/admin/redirect/hive/vip/sysSkinCheckRecord-form?vipId=' + _this.vipInfo.id] + })); + }, + delSkinCheck(index, row) { + let _this = this; + $.AjaxProxy().invoke(basePath + "/admin/sysSkinCheckRecord/del?keys=" + row.id, function (loj) { + _this.skinCheckQuery(); + }); + }, + editSkinCheck(index, row) { + let _this = this; + layer.full(layer.open({ + type : 2, + title : "编辑皮肤检测", + area : [ MUI.SIZE_L, '400px' ], + maxmin : true, + content : [ basePath+'/admin/redirect/hive/vip/sysSkinCheckRecord-form?vipId='+ _this.vipInfo.id +'&id=' + row.id] + })); + }, + /************** 皮肤检测tab end **************/ + + // tab标签切换 + tabHandleClick(tab, event) { + let _this = this; + if (tab.name === "serviceOrder") { + if (_this.serviceOrderTab.tableData.length <= 0) { + this.serviceOrderTableQueryFn(); + } + } + + if (tab.name === "order") { + if (_this.orderTab.orderTableData.length <= 0) { + this.orderTableDataQueryFn(); + } + } + + if (tab.name === "skinCheck") { + if (_this.skinTab.skinTableDate.length <= 0) { + this.skinCheckTableDataQueryFn(); + } + } + }, + + /********** 标签代码 start ************/ handleClose(tag) { this.tags.tags.splice(this.tags.tags.indexOf(tag), 1); + this.delLabelFn(tag.id); }, showInput() { this.tags.inputVisible = true; @@ -452,62 +1140,48 @@ handleInputConfirm() { let inputValue = this.tags.inputValue; if (inputValue) { - this.tags.tags.push(inputValue); + this.addLabelFn(inputValue); } this.tags.inputVisible = false; this.tags.inputValue = ''; }, - tabProjInvalid(index, row) {}, - tabProjCold(index, row) {}, - tabProjEdit(index, row) {}, + /********** 标签代码 end ************/ + tabHandleSizeChange(val) { console.log(`每页 ${val} 条`); }, tabHandleCurrentChange(val) { console.log(`当前页: ${val}`); + }, + + /********** 顶部按钮 start **********/ + // 充值 + recharge() { + vipId = this.vipInfo.id; + openCz(); + }, + // 开服务单 + addServiceOrder() { + vipId = this.vipInfo.id; + openAddService(); + }, + // 开订单 + addOrder() { + vipId = this.vipInfo.id; + openAddOrder(); + }, + // 退款 + returnMoney() { + vipId = this.vipInfo.id; + toRefundOrder(); + }, + /********** 顶部按钮 start **********/ + + dateFormat(row, column) { + return moment(column.yyTime).format("YYYY-MM-DD HH:mm"); } } - }) - $(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> \ No newline at end of file -- Gitblit v1.9.1