<!DOCTYPE HTML>
|
<html xmlns:th="http://www.thymeleaf.org">
|
<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="@{/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>
|
<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);
|
}
|
|
.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;
|
}
|
|
.el-autocomplete {
|
display: block !important;
|
}
|
|
.vip-info {
|
padding: 30px 20px;
|
}
|
|
.vip-info p {
|
line-height: 30px;
|
}
|
</style>
|
|
</head>
|
<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-autocomplete
|
:fetch-suggestions="querySearch"
|
:trigger-on-focus="false"
|
@select="handleSelect"
|
v-model="searchValue" placeholder="输入会员姓名/手机号码/编号"
|
@keyup.enter.native="searchVipInfo"></el-autocomplete>
|
</el-col>
|
<el-col :span="1">
|
<el-button type="primary" @click="searchVipInfo">查询</el-button>
|
</el-col>
|
</el-col>
|
<el-col :span="8" 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>
|
<el-aside style="background-color: white; margin:0 15px; width: 400px">
|
<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; padding: 20px 30px;">
|
<el-tabs v-model="activeName" type="card" @tab-click="tabHandleClick">
|
<el-tab-pane label="会员信息" name="vipInfo">
|
<el-row class="vip-info">
|
<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="refreshTable(1)">
|
<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="请选择" @change="selectChange">
|
<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 matrix:btn="vipInfo-youxiao" v-if="scope.row.status!='有效'" type="text" size="small" @click="tabProjValid(scope.$index, scope.row)">有效</el-button>
|
<el-button matrix:btn="vipInfo-wuxiao" v-if="scope.row.status!='无效'" type="text" size="small" @click="tabProjInvalid(scope.$index, scope.row)">无效</el-button>
|
<el-button matrix:btn="vipInfo-dongjie" v-if="scope.row.status!='冻结'" type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">冻结</el-button>
|
<el-button matrix:btn="vipInfo-cardEdit" 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: 'taocanProjUse', hasChildren: 'hasChildren'}">
|
<el-table-column
|
prop="projName"
|
label="名称"
|
width="240">
|
</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="操作" fixed="right" width="160">
|
<template slot-scope="scope">
|
<el-button matrix:btn="vipInfo-youxiao" v-if="scope.row.status!='有效' && scope.row.taocanId == null" type="text" size="small" @click="tabProjValid(scope.$index, scope.row)">有效</el-button>
|
<el-button matrix:btn="vipInfo-wuxiao" v-if="scope.row.status!='无效' && scope.row.taocanId == null" type="text" size="small" @click="tabProjInvalid(scope.$index, scope.row)">无效</el-button>
|
<el-button matrix:btn="vipInfo-dongjie" v-if="scope.row.status!='冻结' && scope.row.taocanId == null" type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">冻结</el-button>
|
<el-button matrix:btn="vipInfo-cardEdit" v-if="scope.row.taocanId == null" 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="充值卡名称" width="160">
|
</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="是否是会籍卡" :formatter="cardIsVipFormatter">
|
</el-table-column>
|
<el-table-column
|
prop="isOver"
|
label="是否使用完成" :formatter="cardIsOrderFormatter">
|
</el-table-column>
|
<el-table-column
|
prop="failTime"
|
label="到期时间" width="160">
|
</el-table-column>
|
<el-table-column
|
prop="remark"
|
label="备注">
|
</el-table-column>
|
<el-table-column label="操作" fixed="right" width="160">
|
<template slot-scope="scope">
|
<el-button matrix:btn="vipInfo-youxiao" v-if="scope.row.status!='有效'" type="text" size="small" @click="tabProjValid(scope.$index, scope.row)">有效</el-button>
|
<el-button matrix:btn="vipInfo-wuxiao" v-if="scope.row.status!='无效'" type="text" size="small" @click="tabProjInvalid(scope.$index, scope.row)">无效</el-button>
|
<el-button matrix:btn="vipInfo-dongjie" v-if="scope.row.status!='冻结'" type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">冻结</el-button>
|
<el-button matrix:btn="vipInfo-cardEdit" 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="projTabSizeChange"
|
@current-change="projTabCurrentPage"
|
:current-page="projTab.page.currentPage"
|
:page-sizes="[10, 20, 30, 50]"
|
:page-size="projTab.page.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="projTab.page.total">
|
</el-pagination>
|
</el-row>
|
|
<el-dialog title="设置过期时间" :visible.sync="projTab.failTimeDialog">
|
<el-form>
|
<el-form-item label="选择过期时间">
|
<el-date-picker v-model="projTab.failTime"
|
type="date"
|
format="yyyy-MM-dd"
|
placeholder="选择日期时间">
|
</el-date-picker>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="updateFailTimeFn">确 定</el-button>
|
<el-button @click="projTab.failTimeDialog = false">取 消</el-button>
|
</div>
|
</el-dialog>
|
</el-tab-pane>
|
<el-tab-pane label="服务单" name="serviceOrder">
|
<el-row style="line-height: 40px;">
|
<el-col :span="11">
|
<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 matrix:btn="serviceClub-paiban" type="text" size="small" v-if="scope.row.state=='待预约'" @click="paiban(scope.$index, scope.row)">排班</el-button>
|
<el-button matrix:btn="serviceClub-paidan" type="text" size="small" v-if="scope.row.state=='预约成功待处理'" @click="giveServiceOrder(scope.$index, scope.row)">派单</el-button>
|
<el-button matrix:btn="serviceClub-edit" type="text" size="small" v-if="scope.row.state=='预约成功待处理'" @click="modifyServiceOrder(scope.$index, scope.row)">修改</el-button>
|
<el-button matrix:btn="serviceClub-peiliao" type="text" size="small" v-if="scope.row.state=='需配料'" @click="peiliao(scope.$index, scope.row)">配料</el-button>
|
<el-button matrix:btn="serviceClub-huakou" type="text" size="small" v-if="scope.row.state=='服务完成'" @click="hkService(scope.$index, scope.row)">划扣</el-button>
|
<el-button matrix:btn="serviceClub-edit" type="text" size="small" @click="modifyTime(scope.$index, scope.row)">修改时间</el-button>
|
<el-button matrix:btn="serviceClub-del" type="text" size="small" v-if="scope.row.state!='预约取消'" @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">
|
<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" :formatter="oderTimeFormat">
|
</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="lookOrderInfo(scope.$index, scope.row)">查看</el-button>
|
<el-button matrix:btn="orderClub-payment" v-if="scope.row.statu == '欠款'" type="text" size="small" @click="bjMoney(scope.$index, scope.row)">补交</el-button>
|
<el-button matrix:btn="orderClub-gathering" v-if="scope.row.statu == '待付款'" type="text" size="small" @click="skMoney(scope.$index, scope.row)">收款</el-button>
|
<el-button matrix:btn="orderClub-edit" type="text" size="small" @click="updateTime(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">
|
<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>
|
</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">
|
var app = new Vue({
|
el: '#app',
|
data : {
|
circleUrl : "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
|
activeName : 'vipInfo',
|
tags : {
|
tags : [],
|
inputVisible: false,
|
inputValue: ''
|
},
|
searchValue : "",
|
vipInfo : {},
|
// 项目/套餐 tab
|
projTab : {
|
projType : "proj",
|
projTypeBak : "proj",
|
projOptions : [{ value : '', label : "全部" }, { value : '有效', label : "有效" }, { value : '无效', label : "无效" }, { value : "冻结", label : "冻结" }, { value : "转让", label : "转让" }, { value : "退款", label : "退款" }],
|
projIsValid : "",
|
failTimeDialog : false,
|
failTime : "",
|
row : '',
|
|
projTableData : [],
|
taocanTableData : [],
|
cardTableData : [],
|
page : {
|
currentPage : 1,
|
pageSize : 10,
|
total : 0
|
}
|
},
|
// 服务单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
|
}
|
},
|
// 订单 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 : {
|
querySearch(queryString, cb) {
|
$.AjaxProxy({
|
p: {
|
keyWord: queryString,
|
},
|
c: false,
|
}).invoke( basePath + "/admin/vipInfo/findUserByPhotoOrName", function (loj) {
|
var results = [];
|
for (var i = 0; i < loj.getRowCount(); i++) {
|
var result = {};
|
result.value = loj.getString(i, 'phone') + "-" + loj.getString(i, 'vipName') + "-" + loj.getString(i, 'vipNo');
|
result.key = loj.getString(i, 'phone');
|
results.push(result);
|
}
|
cb(results);
|
});
|
},
|
handleSelect(row) {
|
this.vipInfoFn(row.key);
|
},
|
// 请求会员信息
|
vipInfoFn(key) {
|
let _this = this;
|
if (!key) {
|
key = _this.vipInfo.phone;
|
}
|
// 请求用户信息
|
$.AjaxProxy({
|
p: {
|
keyWord: key
|
}
|
}).invoke(basePath + "/admin/vipInfo/showVipInfo", function (loj) {
|
if (loj.getRowCount() == 0) {
|
layer.msg('未查询到客户信息', {
|
icon: 5
|
});
|
return false;
|
}
|
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();
|
_this.serviceOrderTableQueryFn();
|
_this.orderTableDataQueryFn();
|
_this.skinCheckTableDataQueryFn();
|
_this.refreshTable();
|
});
|
},
|
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");
|
});
|
},
|
cardIsVipFormatter (row, column) {
|
if (column.isVipCar === 'Y') {
|
return "是";
|
} else {
|
return "否"
|
}
|
},
|
cardIsOrderFormatter(row, column) {
|
if (column.isOver === 'Y') {
|
return '是';
|
} else {
|
return "否";
|
}
|
},
|
projTabSizeChange(val) {
|
this.projTab.page.pageSize = val;
|
this.refreshTable();
|
},
|
projTabCurrentPage(val) {
|
this.projTab.page.currentPage = val;
|
this.refreshTable();
|
},
|
// 单选框切换
|
refreshTable(val) {
|
let _this = this;
|
if (val) {
|
this.projTab.page = {
|
currentPage : 1,
|
pageSize : 10,
|
total : 0
|
};
|
}
|
|
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, val) {
|
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";
|
}
|
|
var params = {
|
id : row.id,
|
};
|
if (val === 1) {
|
if (_this.projTab.failTime) {
|
params.failTime = moment(_this.projTab.failTime).format("YYYY-MM-DD");
|
} else {
|
this.$message.error('过期时间不能为空');
|
return;
|
}
|
}
|
|
$.AjaxProxy({
|
p : params
|
}).invoke(basePath + url, function(loj) {
|
var rs = loj.attr("result");
|
if (rs.info == '已过期') {
|
_this.projTab.failTimeDialog = true;
|
_this.projTab.row = row;
|
} else {
|
layer.alert(loj.getValue("info"), {
|
icon : 1
|
});
|
_this.refreshTable();
|
}
|
|
if (val === 1) {
|
_this.projTab.failTimeDialog = false;
|
}
|
});
|
|
},
|
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/taoCanUser/invalidTc';
|
}
|
|
if (projType === 'card') {
|
url = '/admin/moneyCardUse/invalid';
|
}
|
|
_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();
|
});
|
},
|
updateFailTimeFn() {
|
this.tabProjValid(1, this.projTab.row, 1);
|
},
|
/** ############## 项目/套餐Tab页 end #################### **/
|
|
/********* 服务单tab start ***********/
|
serviceOrderQuery() {
|
this.serviceOrderTableQueryFn()
|
},
|
serviceOrderTableQueryFn() {
|
let _this = this;
|
let serviceOrderTab = _this.serviceOrderTab;
|
let page = serviceOrderTab.page;
|
var params = {};
|
|
if (!_this.vipInfo.id) {
|
return;
|
}
|
|
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()
|
},
|
// 查看
|
lookServiceOrder(index, row) {
|
selectFwz(row.id);
|
},
|
// 排班
|
paiban(index, row) {
|
openPb(row.id);
|
},
|
// 派单
|
giveServiceOrder(index, row) {
|
MTools.handleItem(basePath + "/admin/projService/paidan?id=" + row.id, "确定派单吗？", this.serviceOrderQuery)
|
},
|
// 修改
|
modifyServiceOrder(index, row) {
|
updatePd(row.id);
|
},
|
// 配料
|
peiliao(index, row) {
|
layer.full(layer.open({
|
type: 2,
|
title: "开始配料",
|
maxmin: true,
|
area: [MUI.SIZE_L, '450px'],
|
content: [basePath + '/admin/projService/startpl?id=' + row.id]
|
}));
|
},
|
// 划扣
|
hkService(index, row) {
|
openHkServcie(row.id);
|
},
|
// 取消
|
cancelServiceOrder(index, row) {
|
MTools.handleItem(basePath + "/admin/projService/cancelOrder?id=" + row.row, "确定取消订单吗？", this.serviceOrderQuery);
|
},
|
// 修改时间
|
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 = {};
|
|
if (!_this.vipInfo.id) {
|
return;
|
}
|
|
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();
|
},
|
lookOrderInfo(index, row) {
|
layer.full(layer.open({
|
type : 2,
|
title : "订单详情",
|
maxmin : true,
|
area : [ MUI.SIZE_L, '500px' ],
|
content : [ basePath + '/admin/order/orderItem?id=' + row.id ]
|
}));
|
},
|
bjMoney(index, row) {
|
layer.full(layer.open({
|
type : 2,
|
title : "补交",
|
area : [ MUI.SIZE_L, '400px' ],
|
maxmin : true,
|
content : [ basePath+'/admin/moneyCardUse/toBj?id=' + row.id]
|
}));
|
},
|
skMoney(index, row) {
|
layer.full(layer.open({
|
type : 2,
|
title : "收款",
|
area : [ MUI.SIZE_L, '400px' ],
|
maxmin : true,
|
content : [ basePath+'/admin/redirect/hive/beautySalon/order-form?id=' + row.id]
|
}));
|
},
|
updateTime(index, row) {
|
layer.open({
|
type : 2,
|
title : "修改订单时间",
|
maxmin : true,
|
area : [ MUI.SIZE_L, '500px' ],
|
content : [ basePath + '/admin/order/toUpdateTime?id=' + row.id ]
|
});
|
},
|
/********* 订单Tab end ***********/
|
|
/************** 皮肤检测tab start **************/
|
skinCheckQuery() {
|
this.skinCheckTableDataQueryFn();
|
},
|
skinCheckTableDataQueryFn() {
|
let _this = this;
|
let skinTab = _this.skinTab;
|
let page = skinTab.page;
|
var params = {};
|
|
if (!_this.vipInfo.id) {
|
return;
|
}
|
|
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;
|
if (!this.vipInfo.id) {
|
this.$message.error('请选择用户');
|
return;
|
}
|
|
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() {
|
if(!this.vipInfo.id) {
|
this.$message.error('请选择用户');
|
return;
|
}
|
|
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 = '';
|
},
|
/********** 标签代码 end ************/
|
|
/********** 顶部按钮 start **********/
|
// 充值
|
recharge() {
|
if (!this.vipInfo.id) {
|
this.$message.error('请选择用户');
|
return;
|
}
|
vipId = this.vipInfo.id;
|
openCz();
|
},
|
// 开服务单
|
addServiceOrder() {
|
if (!this.vipInfo.id) {
|
this.$message.error('请选择用户');
|
return;
|
}
|
vipId = this.vipInfo.id;
|
openAddService();
|
},
|
// 开订单
|
addOrder() {
|
if (!this.vipInfo.id) {
|
this.$message.error('请选择用户');
|
return;
|
}
|
vipId = this.vipInfo.id;
|
openAddOrder();
|
},
|
// 退款
|
returnMoney() {
|
if (!this.vipInfo.id) {
|
this.$message.error('请选择用户');
|
return;
|
}
|
vipId = this.vipInfo.id;
|
toRefundOrder();
|
},
|
/********** 顶部按钮 start **********/
|
|
dateFormat(row, column) {
|
return moment(column.yyTime).format("YYYY-MM-DD HH:mm");
|
},
|
oderTimeFormat(row, column) {
|
return moment(column.orderTime).format("YYYY-MM-DD HH:mm:ss");
|
},
|
}
|
});
|
</script>
|
</body>
|
</html>
|
