From 2e03aab87f98c7923aa2992e458dfae6611509a7 Mon Sep 17 00:00:00 2001
From: wzy <wzy19931122ai@163.com>
Date: Wed, 16 Dec 2020 23:04:44 +0800
Subject: [PATCH] modify vip_detail.html
---
zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/vip_detail.html | 621 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 602 insertions(+), 19 deletions(-)
diff --git a/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/vip_detail.html b/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/vip_detail.html
index a718c91..07b43f8 100644
--- a/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/vip_detail.html
+++ b/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/vip_detail.html
@@ -57,6 +57,38 @@
.ibox-content {
background-color: rgba(240, 242, 245, 1);
}
+
+ .col-style {
+ line-height: 30px;
+ height: 30px;
+ text-align: center;
+ padding: 0 5px;
+ display: inline-block;
+ vertical-align: top;
+ }
+
+ .el-tag + .el-tag {
+ margin-left: 10px;
+ margin-bottom: 10px;
+ }
+ .button-new-tag {
+ margin-left: 10px;
+ height: 24px;
+ line-height: 22px;
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .input-new-tag {
+ width: 90px;
+ margin-left: 10px;
+ vertical-align: bottom;
+ }
+
+ .table-style {
+ margin: 20px 0;
+ padding: 20px 10px;
+ border: 1px solid #DCDFE6;
+ }
</style>
</head>
@@ -72,33 +104,490 @@
<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>
<el-container>
<el-aside style="background-color: white; margin:0 15px; width: 400px">
- <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">
- <el-col :span="4" style="text-align: center;">24岁</el-col>
- <el-col :span="4" style="text-align: center;">湖南长沙</el-col>
- <el-col :span="4" style="text-align: center;">13412341234</el-col>
+ <el-row style="margin-left: 26px; margin-right: 26px;">
+ <el-row type="flex" justify="center">
+ <el-col :span="20" style="padding: 15px; text-align: center;">
+ <el-avatar :size="150" :src="circleUrl"></el-avatar>
+ </el-col>
+ </el-row>
+ <el-row type="flex" justify="center">
+ <el-col :span="4" style="text-align: center;"><span style="font-weight: bolder">{{vipInfo.vipName}}</span></el-col>
+ <el-col :span="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">{{vipInfo.addr}}</span>
+ <span class="col-style">{{vipInfo.phone}}</span>
+ </el-row>
+ <el-row style="padding: 10px 20px;">
+ <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>
+ </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;"></el-main>
+ <el-main style="background-color: white; margin-right: 15px; padding: 20px 30px;">
+ <el-tabs v-model="activeName" type="card" @tab-click="tabHandleClick">
+ <el-tab-pane label="会员信息" name="vipInfo">
+ <el-row>
+ <el-col :span="10">
+ <p>生日 : {{vipInfo.birthday1}}}</p>
+ <p>会员状态 : {{vipInfo.vipState}}</p>
+ <p>会员编号 : {{vipInfo.vipNo}}</p>
+ <p>注册时间 : {{vipInfo.createTime}}</p>
+ <p>到店途径 : {{vipInfo.arrivalWay}}}</p>
+ </el-col>
+ <el-col :span="10">
+ <p>会员卡类型 : {{vipInfo.vipType}}</p>
+ <p>会员等级 : {{vipInfo.levelName}}</p>
+ <p>生肖/星座 : {{vipInfo.constell}}</p>
+ <p>地址 : {{vipInfo.addr}}}</p>
+ <p>健康顾问 : {{vipInfo.staffName}}</p>
+ </el-col>
+ </el-row>
+ </el-tab-pane>
+ <el-tab-pane label="项目/套餐" name="proj">
+ <el-row style="line-height: 40px;">
+ <el-col :span="10" style="margin-left: 20px;">
+ <el-radio-group v-model="projTab.projType" @change="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 class="table-style">
+ <el-table id="proj" v-show="projTab.projType=='proj'" :data="projTab.projTableData"
+ style="width: 100%">
+ <el-table-column
+ prop="projName"
+ label="项目名称"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="source"
+ label="来源"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="status"
+ label="状态">
+ </el-table-column>
+ <el-table-column
+ prop="balance"
+ label="项目余额">
+ </el-table-column>
+ <el-table-column
+ prop="surplusCount"
+ label="余次">
+ </el-table-column>
+ <el-table-column
+ prop="failTime"
+ label="到期时间">
+ </el-table-column>
+ <el-table-column label="操作">
+ <template slot-scope="scope">
+ <el-button 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="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>
</el-container>
</div>
@@ -116,10 +605,104 @@
var app = new Vue({
el: '#app',
data : {
- circleUrl : "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+ circleUrl : "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+ activeName : 'vipInfo',
+ tags : {
+ tags : [],
+ inputVisible: false,
+ inputValue: ''
+ },
+ vipInfo : {},
+ projTab : {
+ projType : "proj",
+ projOptions : [{ value : '有效', label : "有效" }, { value : '失效', label : "失效" }],
+ projIsValid : "",
+
+ 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() {},
- methods : {}
+ 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);
+ },
+ 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(
--
Gitblit v1.9.1