<!DOCTYPE HTML>
|
<html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml">
|
<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="@{/js/systools/MBase.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;
|
}
|
</style>
|
|
</head>
|
<body onkeypress="dosearch(event)">
|
<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-col>
|
<el-col :span="1">
|
<el-button type="primary">查询</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>
|
</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">XXX</span></el-col>
|
<el-col :span="4" style="text-align: center;">金卡会员</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>
|
</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>
|
</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"
|
v-for="tag in tags.tags"
|
closable
|
:disable-transitions="false"
|
@close="handleClose(tag)">
|
{{tag}}
|
</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">
|
<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>
|
</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="first">
|
<el-row>
|
<el-col :span="10">
|
<p>生日 : 2020-12-31</p>
|
<p>会员状态 : 活跃</p>
|
<p>会员编号 : X1234567</p>
|
<p>注册时间 : 2020-12-31</p>
|
<p>到店途径 : 路过</p>
|
</el-col>
|
<el-col :span="10">
|
<p>会员卡类型 : 金卡会员</p>
|
<p>会员等级 : VIP2</p>
|
<p>生肖/星座 : 摩羯座</p>
|
<p>地址 : 宇宙银河系</p>
|
<p>健康顾问 : 奥特曼</p>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane label="项目/套餐" name="second">
|
<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 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-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 style="margin: 20px 0; padding: 20px 10px; border: 1px solid #DCDFE6;">
|
<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 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="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: 'children', hasChildren: 'hasChildren'}">
|
<el-table-column
|
prop="projName"
|
label="名称"
|
width="180">
|
</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="操作">
|
<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="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="充值卡名称">
|
</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="是否是会籍卡">
|
</el-table-column>
|
<el-table-column
|
prop="isOver"
|
label="是否使用完成">
|
</el-table-column>
|
<el-table-column
|
prop="failTime"
|
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="tabProjEdit(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="projTab.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="third">服务日志</el-tab-pane>
|
<el-tab-pane label="消费记录" name="fourth">消费记录</el-tab-pane>
|
<el-tab-pane label="跟进记录" name="fifth">跟进记录</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">
|
//初始带入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',
|
tags : {
|
tags : ['标签1', '标签2', '标签3', '这是什么标签啊啊啊啊', '这个标签是什么呢哈哈哈哈'],
|
inputVisible: false,
|
inputValue: ''
|
},
|
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' },
|
],
|
page : {
|
currentPage : 1
|
}
|
},
|
},
|
created : function() {},
|
methods : {
|
radioChange() {
|
console.log(this.projTab.projType);
|
},
|
tabHandleClick() {
|
|
},
|
handleClose(tag) {
|
this.tags.tags.splice(this.tags.tags.indexOf(tag), 1);
|
},
|
showInput() {
|
this.tags.inputVisible = true;
|
this.$nextTick(_ => {
|
this.$refs.saveTagInput.$refs.input.focus();
|
});
|
},
|
handleInputConfirm() {
|
let inputValue = this.tags.inputValue;
|
if (inputValue) {
|
this.tags.tags.push(inputValue);
|
}
|
this.tags.inputVisible = false;
|
this.tags.inputValue = '';
|
},
|
tabProjInvalid(index, row) {},
|
tabProjCold(index, row) {},
|
tabProjEdit(index, row) {},
|
tabHandleSizeChange(val) {
|
console.log(`每页 ${val} 条`);
|
},
|
tabHandleCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
}
|
}
|
})
|
$(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>
|
