Helius
2020-12-17 df1b14344ba81cab80ddd118a12289d95f69e4a3
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>