wash_server_v2/admin-ui/src/views/app/user/index.vue

<template>
    <div class="app-container">
        <!-- 搜索区域 -->
        <el-card class="search-card" shadow="never">
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
                <el-form-item label="手机号" prop="phoneNumber">
                    <el-input v-model="queryParams.phoneNumber" placeholder="请输入手机号" clearable prefix-icon="el-icon-mobile-phone" style="width: 200px" @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="昵称" prop="nickName">
                    <el-input v-model="queryParams.nickName" placeholder="请输入昵称" clearable prefix-icon="el-icon-user" style="width: 200px" @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="姓名" prop="realName">
                    <el-input v-model="queryParams.realName" placeholder="请输入真实姓名" clearable prefix-icon="el-icon-user" style="width: 200px" @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 操作按钮区域 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd" v-hasPermi="['app:user:add']" v-if="userInfoVO.userType == '02'">新增会员</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <!-- 会员列表 -->
        <Page uri="/mapi/app/user/list" :request-params="queryParams" ref="pagination">
            <el-table-column label="编号" align="center" prop="id" width="100" />
            <el-table-column label="会员信息" align="left" min-width="300">
                <template slot-scope="scope">
                    <div class="user-info-cell">
                        <el-avatar :size="60" :src="scope.row.avatarUrl" icon="el-icon-user" class="user-avatar"></el-avatar>
                        <div class="info-content">
                            <div class="name-row">
                                <span class="real-name">{{ scope.row.realName }}</span>
                                <!-- <span class="nick-name text-gray">({{ scope.row.nickName }})</span> -->
                            </div>
                            <div class="phone-row text-gray">
                                <i class="el-icon-user"></i>
                                {{ scope.row.nickName }}
                            </div>
                            <!-- <div class="tags-row">
                <el-tag size="small" type="warning">Level {{ scope.row.level }}</el-tag>
              </div> -->
                        </div>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="手机号" align="phoneNumber" width="150">
                <template slot-scope="scope">
                    {{ scope.row.phoneNumber ? scope.row.phoneNumber : '-' }}
                </template>
            </el-table-column>

            <el-table-column label="性别" align="center" width="100">
                <template slot-scope="scope">
                    <el-tag size="small" type="info">
                        <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex" />
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="积分" align="center" width="120">
                <template slot-scope="scope">
                    {{ scope.row.point ? scope.row.point : 0 }}
                </template>
            </el-table-column>

            <!--            <el-table-column label="账户余额" align="center" min-width="320">-->
            <!--                <template slot-scope="scope">-->
            <!--                    <div class="balance-info">-->
            <!--                        <div class="balance-item">-->
            <!--                            <span class="label">充值余额</span>-->
            <!--                            <span class="value">¥{{ scope.row.rechargeBalance || '0.00' }}</span>-->
            <!--                        </div>-->
            <!--                        <div class="balance-item">-->
            <!--                            <span class="label">赠送余额</span>-->
            <!--                            <span class="value">¥{{ scope.row.giveBalance || '0.00' }}</span>-->
            <!--                        </div>-->
            <!--                        <div class="balance-item">-->
            <!--                            <span class="label">福利金</span>-->
            <!--                            <span class="value">¥{{ scope.row.welfareBalance || '0.00' }}</span>-->
            <!--                        </div>-->
            <!--                    </div>-->
            <!--                </template>-->
            <!--            </el-table-column>-->

            <el-table-column label="生日" align="center" width="140">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.birthday, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>

            <el-table-column label="注册时间" align="center" width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="180" fixed="right">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['app:user:edit']" v-if="userInfoVO.userType == '02'">编辑</el-button>
                    <el-button type="text" icon="el-icon-view" @click="handleView(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </Page>

        <!-- 会员详情弹窗 -->
        <el-dialog title="会员详情" :visible.sync="userViewType" width="80%" class="user-detail-dialog" :before-close="usercheckClose" append-to-body>
            <div class="user-detail">
                <!-- 基本信息卡片 -->
                <el-card class="detail-card" shadow="never">
                    <div slot="header">
                        <span class="card-title">基本信息</span>
                    </div>
                    <div class="user-basic-info">
                        <div class="avatar-section">
                            <div class="level-tag">
                                <el-tag type="warning">Level {{ userInfo.level }}</el-tag>
                            </div>
                        </div>
                        <el-descriptions :column="3" border>
                            <el-descriptions-item label="姓名">
                                <span class="primary-text">{{ userInfo.realName }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item label="手机号">
                                {{ userInfo.phoneNumber }}
                            </el-descriptions-item>
                            <el-descriptions-item label="性别">
                                <dict-tag :options="dict.type.sys_user_sex" :value="userInfo.sex" />
                            </el-descriptions-item>
                            <el-descriptions-item label="生日">
                                {{ parseTime(userInfo.birthday, '{y}-{m}-{d}') }}
                            </el-descriptions-item>
                            <el-descriptions-item label="地址" :span="2">
                                {{ getAddress(userInfo) ? getAddress(userInfo) : '暂无地址' }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                </el-card>

                <!-- 账户信息卡片 -->
                <el-card class="detail-card" shadow="never">
                    <div slot="header">
                        <span class="card-title">账户信息</span>
                    </div>
                    <div class="account-info">
                        <div class="balance-card">
                            <div class="balance-item">
                                <div class="label">充值余额</div>
                                <div class="value">¥{{ userInfo.rechargeBalance || '0.00' }}</div>
                            </div>
                            <div class="balance-item">
                                <div class="label">赠送余额</div>
                                <div class="value">¥{{ userInfo.giveBalance || '0.00' }}</div>
                            </div>
                            <div class="balance-item">
                                <div class="label">福利金余额</div>
                                <div class="value">¥{{ userInfo.welfareBalance || '0.00' }}</div>
                            </div>
                        </div>
                    </div>
                </el-card>

                <!-- 详情选项卡 -->
                <el-card class="detail-card" shadow="never">
                    <el-tabs v-model="activeValue" type="border-card" @tab-click="btn_chioc">
                        <el-tab-pane name="1">
                            <span slot="label"><i class="el-icon-s-ticket"></i> 优惠券</span>
                            <el-table v-loading="userloading" :data="userinfoData" border stripe>
                                <el-table-column label="优惠券信息" align="left" min-width="250">
                                    <template slot-scope="scope">
                                        <div class="coupon-info">
                                            <div class="title">{{ scope.row.couponTypeTitle }}</div>
                                            <div class="type">
                                                <dict-tag :options="dict.type.coupon_type" :value="scope.row.discountWay" />
                                            </div>
                                            <div class="value">
                                                <template v-if="scope.row.discountWay == 0"> 满{{ scope.row.minAmount }}元减{{ scope.row.deductAmount }}元 </template>
                                                <template v-if="scope.row.discountWay == 1"> 满{{ scope.row.minAmount }}件减{{ scope.row.deductAmount }}件 </template>
                                                <template v-if="scope.row.discountWay == 2"> {{ scope.row.discountRate }}%折扣 </template>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="有效期" align="center" width="300">
                                    <template slot-scope="scope">
                                        <div class="date-range">
                                            <div>{{ scope.row.startDate }}</div>
                                            <div class="separator">至</div>
                                            <div>{{ scope.row.endDate }}</div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="使用状态" align="center" width="120">
                                    <template slot-scope="scope">
                                        <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.isUsed" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="核销信息" align="center" min-width="200">
                                    <template slot-scope="scope">
                                        <template v-if="scope.row.isUsed === 'Y'">
                                            <div>{{ scope.row.usedOrgName }}</div>
                                            <div class="text-gray">{{ scope.row.usedTime }}</div>
                                        </template>
                                        <span v-else>-</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <pagination v-show="usertotal > 0" :total="usertotal" :page.sync="userViewForm.pageNum" :limit.sync="userViewForm.pageSize" @pagination="getMemberCouponData" />
                        </el-tab-pane>

                        <el-tab-pane name="2">
                            <span slot="label"><i class="el-icon-coin"></i> 消费明细</span>
                            <el-table v-loading="userloading" :data="userinfoData" fit highlight-current-row border stripe>
                                <el-table-column label="订单编号" align="center" prop="orderNo" min-width="200" />
                                <el-table-column label="订单类型" align="center" prop="orderType" width="150">
                                    <template slot-scope="scope">
                                        <dict-tag :options="dict.type.order_type" :value="scope.row.orderType" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="账单标题" align="center" prop="title" width="100" />
                                <el-table-column label="支付方式" align="center" prop="payType" width="100">
                                    <template slot-scope="scope">
                                        <dict-tag :options="dict.type.recharge_pay_type" :value="scope.row.payType" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="支付总金额" align="center" prop="payTotalAmount" width="100" />
                                <el-table-column label="现金支付金额" align="center" prop="cashPayAmount" width="100" />
                                <el-table-column label="充值余额支付金额" align="center" prop="rechargePayAmount" width="150" />
                                <el-table-column label="赠送余额支付金额" align="center" prop="givePayAmount" width="150" />
                                <el-table-column label="福利金余额支付金额" align="center" prop="welfarePayAmount" width="150" />
                                <el-table-column label="消费积分" align="center" prop="usePoint" width="80" />
                                <el-table-column label="获取积分" align="center" prop="receivePoint" width="80" />
                                <el-table-column label="是否退款" align="center" prop="isRefund" width="80" />
                            </el-table>
                            <pagination v-show="usertotal > 0" :total="usertotal" :page.sync="userViewForm.pageNum" :limit.sync="userViewForm.pageSize" @pagination="getMemberBillMstrData" />
                        </el-tab-pane>

                        <el-tab-pane name="3">
                            <span slot="label"><i class="el-icon-shopping-cart-1"></i> 商品订单</span>
                            <el-table v-loading="userloading" :data="userinfoData" fit highlight-current-row border stripe>
                                <el-table-column label="订单编号" align="center" prop="orderNo" width="150" />
                                <el-table-column label="订单总价（元）" align="center" prop="totalPrice" width="150" />
                                <el-table-column label="抵扣金额（元）" align="center" prop="deductAmount" width="150">
                                    <template slot-scope="scope">
                                        {{ scope.row.deductAmount ? scope.row.deductAmount : '0' }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="支付金额（元）" align="center" prop="payAmount" width="150" />
                                <el-table-column label="订单状态" align="center" prop="orderStatus" width="150">
                                    <template slot-scope="scope">
                                        <dict-tag :options="dict.type.order_goods_status" :value="scope.row.orderStatus" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="支付方式" align="center" prop="payType">
                                    <template slot-scope="scope">
                                        <dict-tag :options="dict.type.recharge_pay_type" :value="scope.row.payType" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="下单时间" align="center" prop="createTime" width="150" />
                                <el-table-column label="支付时间" align="center" prop="payTime" width="150" />
                            </el-table>
                            <pagination v-show="usertotal > 0" :total="usertotal" :page.sync="userViewForm.pageNum" :limit.sync="userViewForm.pageSize" @pagination="getMemberOrderGoodsData" />
                        </el-tab-pane>

                        <el-tab-pane name="4">
                            <span slot="label"><i class="el-icon-orange"></i> 洗衣订单</span>
                            <el-table v-loading="userloading" :data="userinfoData" fit highlight-current-row border stripe>
                                <el-table-column label="订单编号" align="center" prop="orderNo" min-width="150" />
                                <el-table-column label="门店/工厂名称" align="center" prop="sysOrg.name" width="150" />
                                <el-table-column label="数量" align="center" prop="orderClothCount" width="100" />
                                <el-table-column label="合计" align="center" prop="clothItemName" width="150">
                                    <template slot-scope="scope">
                                        <span>合计：{{ scope.row.payAmount }}元</span>
                                        <br />
                                        <span v-if="scope.row.payType == '0'">支付方式：微信</span>
                                        <span v-if="scope.row.payType == '1'">支付方式：支付宝</span>
                                        <span v-if="scope.row.payType == '2'">支付方式：现金</span>
                                        <span v-if="scope.row.payType == '3'">支付方式：余额</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="订单来源" align="center" width="150">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.orderSource == 'OFFLINE'">线下</span>
                                        <span v-else>线上</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="订单时间" align="center" prop="createTime" min-width="150" />
                                <el-table-column label="状态" align="center" width="150">
                                    <template slot-scope="scope">
                                        <dict-tag :options="dict.type.cloth_order_status" :value="scope.row.orderStatus" />
                                    </template>
                                </el-table-column>
                            </el-table>
                            <pagination v-show="usertotal > 0" :total="usertotal" :page.sync="userViewForm.pageNum" :limit.sync="userViewForm.pageSize" @pagination="getMemberOrderClothData" />
                        </el-tab-pane>

                        <el-tab-pane name="5">
                            <span slot="label"><i class="el-icon-bank-card"></i> 会员卡</span>
                            <el-table v-loading="userloading" :data="userinfoData" fit highlight-current-row border stripe>
                                <el-table-column label="卡号" align="center" prop="cardNo" width="150px" />
                                <el-table-column label="充值金额（元）" align="center" prop="rechargeAmount" width="150px" />
                                <el-table-column label="赠送金额（元）" align="center" prop="giveAmount" width="150px" />
                                <el-table-column label="充值余额（元）" align="center" prop="rechargeBalance" width="150px" />
                                <el-table-column label="赠送余额（元）" align="center" prop="giveBalance" width="150px" />
                                <el-table-column label="福利金额（元）" align="center" prop="welfareAmount" width="150px" />
                                <el-table-column label="福利金余额（元）" align="center" prop="welfareBalance" width="150px" />
                                <el-table-column label="赠送积分" align="center" prop="givePointAmount" width="150px" />
                                <el-table-column label="使用状态" align="center" prop="rechargeStatus" width="150px">
                                    <template slot-scope="scope">
                                        <el-tag v-if="scope.row.rechargeStatus == 1">已使用</el-tag>
                                        <el-tag type="info" v-else>未使用</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="充值门店" align="center" prop="rechargeStoreName" width="200px" />
                                <el-table-column label="充值时间" align="center" prop="rechargeTime" width="150px" />
                            </el-table>
                            <pagination v-show="usertotal > 0" :total="usertotal" :page.sync="userViewForm.pageNum" :limit.sync="userViewForm.pageSize" @pagination="getMemberCardData" />
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </div>
        </el-dialog>
        <!-- 编辑用户信息 -->
        <el-dialog :title="title" :visible.sync="open" width="60%" :before-close="closeDialog" append-to-body>
            <EditUser :dataSource="form" :isDisabled="isDisabled" @onSubmit="handleSubmit" />
        </el-dialog>
    </div>
</template>

<script>
import { listUser, getUser, delUser, addUser, updateUser, updateUserStatus, getMemberInfoById, getMemberCouponInfo, getMemberBillMstrInfo, getMemberOrderGoodsInfo, getMemberOrderClothInfo, getMemberCardInfoList } from '@/api/app/user'
import EditUser from './component/editUser'

export default {
    name: 'User',
    components: {
        EditUser
    },
    dicts: ['sys_user_sex', 'coupon_type', 'sys_yes_no', 'cloth_order_status', 'order_type', 'recharge_pay_type', 'order_goods_status'],
    data() {
        return {
            userInfoVO: null,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 用户表格数据
            userList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                phoneNumber: null,
                nickName: null,
                realName: null
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                nickName: [
                    {
                        required: true,
                        message: '昵称不能为空',
                        trigger: 'blur'
                    }
                ],
                realName: [
                    {
                        required: true,
                        message: '真实姓名不能为空',
                        trigger: 'blur'
                    }
                ],
                phoneNumber: [
                    {
                        required: true,
                        message: '手机号不能为空',
                        trigger: 'blur'
                    }
                ],
                sex: [
                    {
                        required: true,
                        message: '性别不能为空',
                        trigger: 'blur'
                    }
                ]
            },
            isDisabled: true,
            userViewType: false,
            userInfo: {},
            userViewForm: {
                appUserId: 0,
                pageNum: 1,
                pageSize: 10
            },
            usertotal: 0,
            userloading: false,
            userinfoData: [],
            activeValue: '1'
        }
    },
    created() {
        this.handleUser()
        this.getList()
    },
    methods: {
        handleUser() {
            this.userInfoVO = this.getUserInfo()
        },
        /** 查询用户列表 */
        getList() {
            this.$nextTick(() => {
                this.$refs.pagination.handleSearch(true)
            })
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                phoneNumber: null,
                nickName: null,
                realName: null,
                sex: null,
                birthday: null,
                avatarUrl: null,
                unionId: null,
                createTime: null,
                payPassword: null,
                isUsePayPassword: null,
                status: '0',
                level: null
            }
            this.resetForm('form')
        },
        // 编辑会员
        handleSubmit() {
            this.open = false
            this.getList()
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset()
            this.open = true
            this.isDisabled = false
            this.title = '添加用户'
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset()
            const id = row.id || this.ids
            getUser(id).then((response) => {
                console.log("AAAA")
                this.form = response.data
                this.open = true
                this.isDisabled = true
                this.title = '修改用户'
            })
        },
        /** 提交按钮 */
        submitForm() {
            // this.$refs["form"].validate(valid => {
            //   if (valid) {
            //     if (this.form.id != null) {
            //       updateUser(this.form).then(response => {
            //         this.$modal.msgSuccess("修改成功");
            //         this.open = false;
            //         this.getList();
            //       });
            //     } else {
            //       addUser(this.form).then(response => {
            //         this.$modal.msgSuccess("新增成功");
            //         this.open = false;
            //         this.getList();
            //       });
            //     }
            //   }
            // });
            this.open = false
            this.getList()
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids
            this.$modal
                .confirm('是否确认删除用户编号为"' + ids + '"的数据项？')
                .then(function () {
                    return delUser(ids)
                })
                .then(() => {
                    this.getList()
                    this.$modal.msgSuccess('删除成功')
                })
                .catch(() => {})
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                'mapi/app/user/export',
                {
                    ...this.queryParams
                },
                `user_${new Date().getTime()}.xlsx`
            )
        },
        checkClose(done) {
            this.$confirm('是否关闭表单，关闭后数据将丢失？')
                .then(function () {
                    done()
                })
                .then(() => {})
                .catch(() => {})
        },
        handleStatusChange(row) {
            let text = row.status === '0' ? '启用' : '停用'
            this.$confirm('确认要' + text + ' ' + row.name + ' 吗？')
                .then(function () {
                    return updateUserStatus(row.id, row.status)
                })
                .then(() => {
                    this.$modal.msgSuccess(text + '成功')
                })
                .catch(function () {
                    row.status = row.status === '0' ? '1' : '0'
                })
        },
        //客户详情弹框
        handleView(row) {
            getMemberInfoById({
                appUserId: row.id
            }).then((response) => {
                this.userViewType = true
                this.userInfo = response.data
                this.userViewForm = {
                    appUserId: row.id,
                    pageNum: 1,
                    pageSize: 15
                }
                this.activeValue = '1'
                this.getMemberCouponData()
            })
        },
        //获取会员优惠券列表
        getMemberCouponData() {
            this.userloading = true
            getMemberCouponInfo(this.userViewForm).then((response) => {
                this.userinfoData = response.rows
                this.usertotal = response.total
                this.userloading = false
            })
        },
        //获取会员消费明细
        getMemberBillMstrData() {
            this.userloading = true
            getMemberBillMstrInfo(this.userViewForm).then((response) => {
                this.userinfoData = response.data.records
                this.usertotal = response.data.total
                this.userloading = false
            })
        },
        //获取会员商品订单信息
        getMemberOrderGoodsData() {
            this.userloading = true
            getMemberOrderGoodsInfo(this.userViewForm).then((response) => {
                this.userinfoData = response.data.records
                this.usertotal = response.data.total
                this.userloading = false
            })
        },
        //获取会员洗衣订单信息
        getMemberOrderClothData() {
            this.userloading = true
            getMemberOrderClothInfo(this.userViewForm).then((response) => {
                this.userinfoData = response.data.records
                this.usertotal = response.data.total
                this.userloading = false
            })
        },
        //总部客户管理- 会员卡列表查询
        getMemberCardData() {
            this.userloading = true
            getMemberCardInfoList(this.userViewForm).then((response) => {
                this.userinfoData = response.data.records
                this.usertotal = response.data.total
                this.userloading = false
            })
        },
        getAddress(userInfo) {
            return userInfo.province + userInfo.city + userInfo.area + userInfo.address + userInfo.addressDetail
        },
        btn_chioc(tab, event) {
            console.log('tab.index', tab.index)
            this.userViewForm.pageNum = 1
            this.userinfoData = []
            if (tab.index === '0') {
                this.getMemberCouponData()
            } else if (tab.index === '1') {
                this.getMemberBillMstrData()
            } else if (tab.index === '2') {
                this.getMemberOrderGoodsData()
            } else if (tab.index === '3') {
                this.getMemberOrderClothData()
            } else {
                this.getMemberCardData()
            }
        },
        usercheckClose(done) {
            this.$confirm('是否关闭客户详情？')
                .then(function () {
                    done()
                })
                .then(() => {})
                .catch(() => {})
        },
        // 取消按钮
        usercancel() {
            this.userViewType = false
            this.userInfo = {}
        },
        closeDialog() {
            this.open = false
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    .search-card {
        margin-bottom: 16px;
    }

    .user-info-cell {
        display: flex;
        align-items: flex-start;
        padding: 8px 0;

        .user-avatar {
            margin-right: 16px;
            flex-shrink: 0;
        }

        .info-content {
            flex: 1;

            .name-row {
                margin-bottom: 8px;

                .real-name {
                    font-size: 15px;
                    font-weight: 500;
                    margin-right: 8px;
                }

                .nick-name {
                    font-size: 13px;
                }
            }

            .phone-row {
                margin-bottom: 8px;
                font-size: 13px;

                i {
                    margin-right: 4px;
                }
            }

            .tags-row {
                .el-tag + .el-tag {
                    margin-left: 8px;
                }
            }
        }
    }

    .balance-info {
        display: flex;
        justify-content: space-around;
        padding: 8px 0;

        .balance-item {
            text-align: center;

            .label {
                font-size: 13px;
                color: #909399;
                margin-bottom: 4px;
            }

            .value {
                font-size: 15px;
                font-weight: 500;
                color: #409eff;
            }
        }
    }
}

.user-detail-dialog {
    .user-detail {
        .detail-card {
            margin-bottom: 16px;

            &:last-child {
                margin-bottom: 0;
            }

            .card-title {
                font-size: 16px;
                font-weight: 500;
            }
        }

        .user-basic-info {
            display: flex;
            margin-bottom: 24px;

            .avatar-section {
                margin-right: 24px;
                text-align: center;

                .level-tag {
                    margin-top: 8px;
                }
            }

            .primary-text {
                font-weight: 500;
                color: #303133;
            }
        }

        .account-info {
            .balance-card {
                display: flex;
                justify-content: space-around;
                padding: 24px;
                background: #f5f7fa;
                border-radius: 4px;

                .balance-item {
                    text-align: center;

                    .label {
                        font-size: 14px;
                        color: #909399;
                        margin-bottom: 8px;
                    }

                    .value {
                        font-size: 24px;
                        font-weight: 500;
                        color: #409eff;
                    }
                }
            }
        }

        .coupon-info {
            .title {
                font-weight: 500;
                margin-bottom: 8px;
            }

            .type {
                margin-bottom: 4px;
            }

            .value {
                color: #f56c6c;
                font-size: 13px;
            }
        }

        .date-range {
            font-size: 13px;

            .separator {
                color: #909399;
                margin: 4px 0;
            }
        }
    }
}

.text-gray {
    color: #909399;
}
</style>