From 9f0f265de03e582df2baca0dc2ae7ce5586b48b0 Mon Sep 17 00:00:00 2001 From: Helius <wangdoubleone@gmail.com> Date: Wed, 16 Dec 2020 18:37:51 +0800 Subject: [PATCH] modify vip_detail.html --- zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/vip_detail.html | 379 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 363 insertions(+), 16 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..cc7e68a 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,32 @@ .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> @@ -83,22 +109,258 @@ </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">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;"></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="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> @@ -116,10 +378,95 @@ 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 : '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 : {} + 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( -- Gitblit v1.9.1