modify vip_detail.html

Helius

2020-12-16 9f0f265de03e582df2baca0dc2ae7ce5586b48b0

modify vip_detail.html

 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(