modify vip_detail.html

wzy

2020-12-16 2e03aab87f98c7923aa2992e458dfae6611509a7

modify vip_detail.html

 zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/vip_detail.html

@@ -83,6 +83,12 @@
            margin-left: 10px;
            vertical-align: bottom;
        }

        .table-style {
            margin: 20px 0;
            padding: 20px 10px;
            border: 1px solid #DCDFE6;
        }
    </style>

</head>
@@ -98,12 +104,12 @@
                    <el-button type="primary">查询</el-button>
                </el-col>
            </el-col>
            <el-col :offset="6" :span="10">
            <el-col :span="9" style="float: right; margin-right: 20px;">
                <el-button type="primary" plain>充值</el-button>
                <el-button type="info" plain>补交</el-button>
                <el-button type="success" plain>收款</el-button>
                <el-button type="warning" plain>开单</el-button>
                <el-button type="primary" plain>服务单</el-button>
                <el-button type="primary" plain>开服务单</el-button>
                <el-button type="danger" plain>退款</el-button>
            </el-col>
        </el-header>
@@ -116,17 +122,17 @@
                        </el-col>
                    </el-row>
                    <el-row type="flex" justify="center">
                        <el-col :span="4" style="text-align: center;"><span style="font-weight: bolder">XXX</span></el-col>
                        <el-col :span="4" style="text-align: center;">金卡会员</el-col>
                        <el-col :span="4" style="text-align: center;"><span style="font-weight: bolder">{{vipInfo.vipName}}</span></el-col>
                        <el-col :span="4" style="text-align: center;">{{vipInfo.vipType}}</el-col>
                    </el-row>
                    <el-row type="flex" justify="center">
                        <span class="col-style">24岁</span>
                        <span class="col-style">湖南长沙</span>
                        <span class="col-style">13412341234</span>
                        <span class="col-style">{{vipInfo.addr}}</span>
                        <span class="col-style">{{vipInfo.phone}}</span>
                    </el-row>
                    <el-row style="padding: 10px 20px;">
                        <p>余额：0元</p>
                        <p>积分：123123</p>
                        <p>余额：<span v-if="vipInfo.bal != null">{{vipInfo.bal}}元</span></p>
                        <p>积分：<span v-if="vipInfo.pointAll != null">{{vipInfo.pointAll}}</span></p>
                        <p>累计消费金额：10元</p>
                        <p>累计消费次数：1次</p>
                        <p>上次消费时间：2020-12-12 19:19:19</p>
@@ -174,25 +180,25 @@
            </el-aside>
            <el-main style="background-color: white; margin-right: 15px; padding: 20px 30px;">
                <el-tabs v-model="activeName" type="card" @tab-click="tabHandleClick">
                    <el-tab-pane label="会员信息" name="first">
                    <el-tab-pane label="会员信息" name="vipInfo">
                        <el-row>
                            <el-col :span="10">
                                <p>生日 : 2020-12-31</p>
                                <p>会员状态 : 活跃</p>
                                <p>会员编号 : X1234567</p>
                                <p>注册时间 : 2020-12-31</p>
                                <p>到店途径 : 路过</p>
                                <p>生日 : {{vipInfo.birthday1}}}</p>
                                <p>会员状态 : {{vipInfo.vipState}}</p>
                                <p>会员编号 : {{vipInfo.vipNo}}</p>
                                <p>注册时间 : {{vipInfo.createTime}}</p>
                                <p>到店途径 : {{vipInfo.arrivalWay}}}</p>
                            </el-col>
                            <el-col :span="10">
                                <p>会员卡类型 : 金卡会员</p>
                                <p>会员等级 : VIP2</p>
                                <p>生肖/星座 : 摩羯座</p>
                                <p>地址 : 宇宙银河系</p>
                                <p>健康顾问 : 奥特曼</p>
                                <p>会员卡类型 : {{vipInfo.vipType}}</p>
                                <p>会员等级 : {{vipInfo.levelName}}</p>
                                <p>生肖/星座 : {{vipInfo.constell}}</p>
                                <p>地址 : {{vipInfo.addr}}}</p>
                                <p>健康顾问 : {{vipInfo.staffName}}</p>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="项目/套餐" name="second">
                    <el-tab-pane label="项目/套餐" name="proj">
                        <el-row style="line-height: 40px;">
                            <el-col :span="10" style="margin-left: 20px;">
                                <el-radio-group v-model="projTab.projType" @change="radioChange">
@@ -212,7 +218,7 @@
                                </el-select>
                            </el-col>
                        </el-row>
                        <el-row style="margin: 20px 0; padding: 20px 10px; border: 1px solid #DCDFE6;">
                        <el-row class="table-style">
                            <el-table id="proj" v-show="projTab.projType=='proj'" :data="projTab.projTableData"
                                    style="width: 100%">
                                <el-table-column
@@ -356,9 +362,230 @@
                            </el-pagination>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="服务日志" name="third">服务日志</el-tab-pane>
                    <el-tab-pane label="消费记录" name="fourth">消费记录</el-tab-pane>
                    <el-tab-pane label="跟进记录" name="fifth">跟进记录</el-tab-pane>
                    <el-tab-pane label="服务单" name="serviceOrder">
                        <el-row style="line-height: 40px;">
                            <el-col :span="11">
                                <span>选择时间:</span>
                                <el-date-picker v-model="serviceOrderTab.selectTime"
                                        type="datetimerange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                            </el-col>
                            <el-col :span="5">
                                <el-select v-model="serviceOrderTab.state" placeholder="请选择">
                                    <el-option
                                            v-for="item in serviceOrderTab.states"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="1" style="margin-left: 5px;">
                                <el-button type="primary">查询</el-button>
                            </el-col>
                        </el-row>
                        <el-row class="table-style">
                            <el-table :data="serviceOrderTab.tableData"
                                      style="width: 100%;">
                                <el-table-column
                                        type="index"
                                        width="50">
                                </el-table-column>
                                <el-table-column
                                        prop="serviceNo"
                                        label="服务单号">
                                </el-table-column>
                                <el-table-column
                                        prop="money"
                                        label="消耗金额">
                                </el-table-column>
                                <el-table-column
                                        prop="createTime"
                                        label="下单时间">
                                </el-table-column>
                                <el-table-column
                                        prop="yyTime"
                                        label="预约时间">
                                </el-table-column>
                                <el-table-column
                                        prop="totalTime"
                                        label="服务时长">
                                </el-table-column>
                                <el-table-column
                                        prop="isOverTime"
                                        label="超时时间">
                                </el-table-column>
                                <el-table-column
                                        prop="createStaffName"
                                        label="下单顾问">
                                </el-table-column>
                                <el-table-column
                                        prop="state"
                                        label="状态">
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="text" size="small" @click="tabProjInvalid(scope.$index, scope.row)">排班</el-button>
                                        <el-button type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">修改时间</el-button>
                                        <el-button type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">取消</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-row>
                        <el-row>
                            <el-pagination
                                    background
                                    @size-change="tabHandleSizeChange"
                                    @current-change="tabHandleCurrentChange"
                                    :current-page="serviceOrderTab.page.currentPage"
                                    :page-sizes="[10, 20, 30, 50]"
                                    :page-size="10"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="400">
                            </el-pagination>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="订单" name="order">
                        <el-row style="line-height: 40px;">
                            <el-col :span="11">
                                <span>选择时间:</span>
                                <el-date-picker v-model="serviceOrderTab.selectTime"
                                                type="datetimerange"
                                                range-separator="至"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期">
                                </el-date-picker>
                            </el-col>
                            <el-col :span="5">
                                <el-select v-model="serviceOrderTab.state" placeholder="请选择">
                                    <el-option
                                            v-for="item in serviceOrderTab.states"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="1" style="margin-left: 5px;">
                                <el-button type="primary">查询</el-button>
                            </el-col>
                        </el-row>
                        <el-row class="table-style">
                            <el-table :data="orderTab.orderTableData"
                                      style="width: 100%;">
                                <el-table-column
                                        type="index"
                                        width="50">
                                </el-table-column>
                                <el-table-column
                                        prop="orderNo"
                                        label="订单号">
                                </el-table-column>
                                <el-table-column
                                        prop="orderTime"
                                        label="下单时间">
                                </el-table-column>
                                <el-table-column
                                        prop="total"
                                        label="总价">
                                </el-table-column>
                                <el-table-column
                                        prop="zkTotal"
                                        label="折后价">
                                </el-table-column>
                                <el-table-column
                                        prop="staffName"
                                        label="下单顾问">
                                </el-table-column>
                                <el-table-column
                                        prop="cashPay"
                                        label="现金支付金额">
                                </el-table-column>
                                <el-table-column
                                        prop="cardPay"
                                        label="卡支付金额">
                                </el-table-column>
                                <el-table-column
                                        prop="arrears"
                                        label="欠款金额">
                                </el-table-column>
                                <el-table-column
                                        prop="statu"
                                        label="订单状态">
                                </el-table-column>
                                <el-table-column
                                        prop="remark"
                                        label="备注">
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="text" size="small" @click="tabProjInvalid(scope.$index, scope.row)">结算</el-button>
                                        <el-button type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">详情</el-button>
                                        <el-button type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">取消</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-row>
                        <el-row>
                            <el-pagination
                                    background
                                    @size-change="tabHandleSizeChange"
                                    @current-change="tabHandleCurrentChange"
                                    :current-page="orderTab.page.currentPage"
                                    :page-sizes="[10, 20, 30, 50]"
                                    :page-size="10"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="400">
                            </el-pagination>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="皮肤检测" name="skinCheck">
                        <el-row style="line-height: 40px;">
                            <el-col :span="11">
                                <span>选择时间:</span>
                                <el-date-picker v-model="serviceOrderTab.selectTime"
                                                type="datetimerange"
                                                range-separator="至"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期">
                                </el-date-picker>
                            </el-col>
                            <el-col :span="6" style="margin-left: 5px;">
                                <el-button type="primary">查询</el-button>
                                <el-button type="success">新增</el-button>
                            </el-col>
                        </el-row>
                        <el-row class="table-style">
                            <el-table :data="skinTab.skinTableDate"
                                      style="width: 100%;">
                                <el-table-column
                                        type="index"
                                        width="50">
                                </el-table-column>
                                <el-table-column
                                        prop="checkUserName"
                                        label="检测人员">
                                </el-table-column>
                                <el-table-column
                                        prop="shopName"
                                        label="门店">
                                </el-table-column>
                                <el-table-column
                                        prop="checkTime"
                                        label="检测时间">
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="text" size="small" @click="tabProjInvalid(scope.$index, scope.row)">编辑</el-button>
                                        <el-button type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
@@ -379,61 +606,70 @@
        el: '#app',
        data : {
            circleUrl : "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
            activeName : 'second',
            activeName : 'vipInfo',
            tags : {
                tags : ['标签1', '标签2', '标签3', '这是什么标签啊啊啊啊', '这个标签是什么呢哈哈哈哈'],
                tags : [],
                inputVisible: false,
                inputValue: ''
            },
            vipInfo : {},
            projTab : {
                projType : "proj",
                projOptions : [{ value : '有效', label : "有效" }, { value : '失效', label : "失效" }],
                projIsValid : "",

                projTableData : [
                    { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                    { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                    { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                    { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                    { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                    { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                    { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                    { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                    { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                    { projName : '这是啥项目啊', source : '购买', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                ],
                taocanTableData : [
                    { id : 1, projName : '这个是套餐啊啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                    { id : 2, projName : '这个是套餐啊啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                    { id : 3, projName : '这个是套餐啊啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                    { id : 4, projName : '这个是套餐啊啊111', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10', children : [
                            { id : 11, projName : '这是啥项目啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                            { id : 12, projName : '这是啥项目啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                        ] },
                    { id : 5, projName : '这个是套餐啊啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                    { id : 6, projName : '这个是套餐啊啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                    { id : 7, projName : '这个是套餐啊啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                    { id : 8, projName : '这个是套餐啊啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                    { id : 9, projName : '这个是套餐啊啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                    { id : 10, projName : '这个是套餐啊啊', status : '有效', balance : 10000, surplusCount : 10, failTime : '2020-10-10' },
                ],
                cardTableData : [
                    { cardName : '储值卡', useTotal : 1, lastCount : 1, realMoney : 1000, giftMoney : 1000, source : '购买', status : '有效', isVipCar : '1', isOver : '2', failTime : '2020-10-10' },
                    { cardName : '储值卡', useTotal : 1, lastCount : 1, realMoney : 1000, giftMoney : 1000, source : '购买', status : '有效', isVipCar : '1', isOver : '2', failTime : '2020-10-10' },
                    { cardName : '储值卡', useTotal : 1, lastCount : 1, realMoney : 1000, giftMoney : 1000, source : '购买', status : '有效', isVipCar : '1', isOver : '2', failTime : '2020-10-10' },
                    { cardName : '储值卡', useTotal : 1, lastCount : 1, realMoney : 1000, giftMoney : 1000, source : '购买', status : '有效', isVipCar : '1', isOver : '2', failTime : '2020-10-10' },
                    { cardName : '储值卡', useTotal : 1, lastCount : 1, realMoney : 1000, giftMoney : 1000, source : '购买', status : '有效', isVipCar : '1', isOver : '2', failTime : '2020-10-10' },
                    { cardName : '储值卡', useTotal : 1, lastCount : 1, realMoney : 1000, giftMoney : 1000, source : '购买', status : '有效', isVipCar : '1', isOver : '2', failTime : '2020-10-10' },
                    { cardName : '储值卡', useTotal : 1, lastCount : 1, realMoney : 1000, giftMoney : 1000, source : '购买', status : '有效', isVipCar : '1', isOver : '2', failTime : '2020-10-10' },
                    { cardName : '储值卡', useTotal : 1, lastCount : 1, realMoney : 1000, giftMoney : 1000, source : '购买', status : '有效', isVipCar : '1', isOver : '2', failTime : '2020-10-10' },
                ],
                projTableData : [],
                taocanTableData : [],
                cardTableData : [],
                page : {
                    currentPage : 1
                }
            },
            serviceOrderTab : {
                tableData : [],
                selectTime : '',
                state : '',
                states : [ { value : '待预约', label : '待预约' },{ value : '预约成功待处理', label : '待派单' },{ value : '需配料', label : '待配料' },
                    { value : '配料完成', label : '待服务' },{ value : '服务中', label : '服务中' },
                    { value : '服务完成', label : '服务完成' },{ value : '服务单结束', label : '服务单结束' }, ],
                page : {
                    currentPage : 1,
                },
            },
            orderTab : {
                orderTableData : [],
                selectTime : '',
                state : '',
                states : [ { value : '待付款', label : '待付款' }, { value : '已付款', label : '已付款' }, { value : '欠款', label : '欠款' }, { value : '已取消', label : '已取消' } ],
                page : {
                    currentPage : 1,
                },
            },
            skinTab : {
                skinTableDate : [],
                selectTime : '',
                page : {
                    currentPage : 1,
                }
            }
        },
        created : function() {},
        created : function() {
            var key = $.query.get("vipPhone");
            let _this = this;

            if (key) {
                vipInfo(key);
            }
        },
        methods : {
            vipInfo(key) {
                // 请求用户信息
                $.AjaxProxy({
                    p: {
                        keyWord: key
                    }
                }).invoke(basePath + "/admin/vipInfo/showVipInfo", function (loj) {});
            },
            radioChange() {
                console.log(this.projTab.projType);
            },