From 2e03aab87f98c7923aa2992e458dfae6611509a7 Mon Sep 17 00:00:00 2001 From: wzy <wzy19931122ai@163.com> Date: Wed, 16 Dec 2020 23:04:44 +0800 Subject: [PATCH] modify vip_detail.html --- zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/vip_detail.html | 364 ++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 300 insertions(+), 64 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..07b43f8 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 @@ -83,6 +83,12 @@ margin-left: 10px; vertical-align: bottom; } + + .table-style { + margin: 20px 0; + padding: 20px 10px; + border: 1px solid #DCDFE6; + } </style> </head> @@ -98,12 +104,12 @@ <el-button type="primary">查询</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> @@ -116,17 +122,17 @@ </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="4" 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">{{vipInfo.addr}}</span> + <span class="col-style">{{vipInfo.phone}}</span> </el-row> <el-row style="padding: 10px 20px;"> - <p>余额:0元</p> - <p>积分:123123</p> + <p>余额:<span v-if="vipInfo.bal != null">{{vipInfo.bal}}元</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> @@ -174,25 +180,25 @@ </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"> @@ -212,7 +218,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 @@ -356,9 +362,230 @@ </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="至" + 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> @@ -379,61 +606,70 @@ 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: '' }, + vipInfo : {}, projTab : { projType : "proj", projOptions : [{ 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 } }, + serviceOrderTab : { + tableData : [], + selectTime : '', + state : '', + states : [ { value : '待预约', label : '待预约' },{ value : '预约成功待处理', label : '待派单' },{ value : '需配料', label : '待配料' }, + { value : '配料完成', label : '待服务' },{ value : '服务中', label : '服务中' }, + { value : '服务完成', label : '服务完成' },{ value : '服务单结束', label : '服务单结束' }, ], + page : { + currentPage : 1, + }, + }, + orderTab : { + orderTableData : [], + selectTime : '', + state : '', + states : [ { value : '待付款', label : '待付款' }, { value : '已付款', label : '已付款' }, { value : '欠款', label : '欠款' }, { value : '已取消', label : '已取消' } ], + page : { + currentPage : 1, + }, + }, + skinTab : { + skinTableDate : [], + selectTime : '', + page : { + currentPage : 1, + } + } }, - created : function() {}, + created : function() { + var key = $.query.get("vipPhone"); + let _this = this; + + if (key) { + vipInfo(key); + } + }, methods : { + vipInfo(key) { + // 请求用户信息 + $.AjaxProxy({ + p: { + keyWord: key + } + }).invoke(basePath + "/admin/vipInfo/showVipInfo", function (loj) {}); + }, radioChange() { console.log(this.projTab.projType); }, -- Gitblit v1.9.1