antissoft / lvqianmeiye_ERP

<template>
  <div class="dashboard-page">
    <!-- 顶部：门店信息 + 快速会员搜索 -->
    <div class="top-bar">
      <div class="store-info">
        <div class="store-name">绿纤门店 · 工作台</div>
        <div class="store-subtitle">今日邀约 · 预约 · 开单，一眼总览</div>
      </div>
      <div class="member-search">
        <el-input v-model="memberKeyword" class="member-search-input" clearable placeholder="快速查询会员：手机号 / 姓名 / 会员卡号"
          prefix-icon="el-icon-search" @keyup.enter.native="handleMemberSearch">
          <el-button slot="append" type="primary" @click="handleMemberSearch">查询</el-button>
        </el-input>
      </div>
      <div class="top-meta">
        <div class="today-text">{{ todayLabel }}</div>
        <div class="user-info">
          <div class="user-avatar">{{ userInitial }}</div>
          <span class="user-name">{{ userName }}</span>
        </div>
      </div>
    </div>

    <div class="layout-grid">
      <!-- 左侧：概览 + 六大板块 -->
      <div class="left-column">
        <!-- 今日概览 -->
        <div class="overview-row">
          <el-row :gutter="16">
            <el-col v-for="item in overviewStats" :key="item.key" :span="8">
              <el-card shadow="hover" class="overview-card">
                <div class="overview-meta">
                  <span class="label">{{ item.label }}</span>
                  <span class="tag" v-if="item.tag">{{ item.tag }}</span>
                </div>
                <div class="overview-value">{{ item.value }}</div>
                <div class="overview-sub">{{ item.subText }}</div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- 六大业务板块 -->
        <div class="modules-grid">
          <el-row :gutter="16">
            <el-col v-for="module in modules" :key="module.key" :span="8">
              <el-card shadow="hover" class="module-card" :body-style="{ padding: '18px 18px 16px' }"
                @click.native="handleModuleSecondary(module)">
                <div class="module-header">
                  <div class="module-title-wrap">
                    <div class="module-title">{{ module.title }}</div>
                    <div class="module-subtitle">{{ module.subtitle }}</div>
                  </div>
                  <div class="module-icon" :style="{ background: module.iconBg }">
                    <i :class="module.icon"></i>
                  </div>
                </div>
                <div class="module-meta">
                  <div class="meta-value">{{ module.metricValue }}</div>
                  <div class="meta-label">{{ module.metricLabel }}</div>
                </div>
                <div class="module-actions">
                  <span class="primary-action" @click.stop="handleModulePrimary(module)">
                    {{ module.primaryAction }}
                  </span>
                  <span class="secondary-text" @click.stop="handleModuleSecondary(module)">{{ module.secondaryText
                    }}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>

      <!-- 右侧：今日邀约 / 预约 -->
      <div class="right-column">
        <el-card shadow="hover" class="today-card" :body-style="{ padding: '16px 16px 12px' }">
          <div slot="header" class="today-header">
            <div class="today-title">今日邀约 / 预约</div>
            <div class="today-badge">门店实时动态</div>
          </div>
          <el-tabs v-model="todayTab">
            <el-tab-pane label="今日邀约" name="invite">
              <div v-if="todayInvite.length" class="timeline-list">
                <div v-for="item in todayInvite" :key="item.id" class="timeline-item">
                  <div class="time">{{ item.time }}</div>
                  <div class="content">
                    <div class="line-main">
                      <span class="name">{{ item.name }}</span>
                      <span class="mobile">{{ item.mobile }}</span>
                    </div>
                    <div class="line-sub">
                      <span class="project">
                        电话是否有效：{{ item.dhsfyx }} · {{ item.lxjl }}
                      </span>
                      <button type="button" class="quick-book-btn" @click="handleQuickBooking(item)">
                        快速预约
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="empty-tip">今日暂无邀约记录</div>
            </el-tab-pane>
            <el-tab-pane label="今日预约" name="booking">
              <div v-if="todayBooking.length" class="timeline-list">
                <div v-for="item in todayBooking" :key="item.id" class="timeline-item">
                  <div class="time">{{ item.time }}</div>
                  <div class="content">
                    <div class="line-main">
                      <span class="name">{{ item.name }}</span>
                      <span class="mobile">{{ item.mobile }}</span>
                    </div>
                    <div class="line-sub">
                      <span class="project">
                        预约项目：{{ item.project }} · 预约时间：{{ item.date }} {{ item.timeRange }}
                      </span>
                      <button type="button" class="quick-order-btn" @click="handleQuickBilling(item)">
                        快速开单
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="empty-tip">今日暂无预约记录</div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </div>
    <member-profile-dialog :visible.sync="memberDialogVisible" :member="activeMember || {}" />
    <tuoke-lead-dialog :visible.sync="tuokeDialogVisible" />
    <invite-add-dialog :visible.sync="inviteDialogVisible" />
    <booking-dialog :visible.sync="bookingDialogVisible" :prefill="bookingPrefill" />
    <billing-dialog :visible.sync="billingDialogVisible" :prefill="billingPrefill" />
    <consume-dialog :visible.sync="consumeDialogVisible" />
    <refund-dialog :visible.sync="refundDialogVisible" />
    <tuoke-list-dialog :visible.sync="tuokeListVisible" />
    <invite-list-dialog :visible.sync="inviteListVisible" />
    <booking-calendar-dialog :visible.sync="bookingCalendarVisible" />
    <billing-list-dialog :visible.sync="billingListVisible" />
    <consume-list-dialog :visible.sync="consumeListVisible" />
    <refund-list-dialog :visible.sync="refundListVisible" />
  </div>
</template>

<script>
import MemberProfileDialog from '@/components/MemberProfileDialog.vue'
import TuokeLeadDialog from '@/components/TuokeLeadDialog.vue'
import InviteAddDialog from '@/components/InviteAddDialog.vue'
import BookingDialog from '@/components/BookingDialog.vue'
import BillingDialog from '@/components/BillingDialog.vue'
import ConsumeDialog from '@/components/ConsumeDialog.vue'
import RefundDialog from '@/components/RefundDialog.vue'
import TuokeListDialog from '@/components/TuokeListDialog.vue'
import InviteListDialog from '@/components/InviteListDialog.vue'
import BookingCalendarDialog from '@/components/BookingCalendarDialog.vue'
import BillingListDialog from '@/components/BillingListDialog.vue'
import ConsumeListDialog from '@/components/ConsumeListDialog.vue'
import RefundListDialog from '@/components/RefundListDialog.vue'

export default {
  name: 'Dashboard',
  components: {
    MemberProfileDialog,
    TuokeLeadDialog,
    InviteAddDialog,
    BookingDialog,
    BillingDialog,
    ConsumeDialog,
    RefundDialog,
    TuokeListDialog,
    InviteListDialog,
    BookingCalendarDialog,
    BillingListDialog,
    ConsumeListDialog,
    RefundListDialog
  },
  data() {
    return {
      memberKeyword: '',
      memberDialogVisible: false,
      activeMember: null,
      todayTab: 'invite',
      overviewStats: [
        {
          key: 'invite',
          label: '今日邀约',
          value: 0,
          subText: '待联系 0 · 已到店 0',
          tag: '潜客'
        },
        {
          key: 'booking',
          label: '今日预约',
          value: 0,
          subText: '进行中 0 · 已完成 0',
          tag: '到店'
        },
        {
          key: 'order',
          label: '今日业绩',
          value: '¥0',
          subText: '开单 0 · 客次 0',
          tag: '收银'
        }
      ],
      modules: [
        {
          key: 'tuoke',
          title: '拓客管理',
          subtitle: '',
          icon: 'el-icon-connection',
          iconBg: 'linear-gradient(135deg, #6366f1, #a855f7)',
          metricValue: 0,
          metricLabel: '今日新增潜客',
          primaryAction: '新建拓客',
          secondaryText: '查看拓客数据'
        },
        {
          key: 'invite',
          title: '邀约管理',
          subtitle: '',
          icon: 'el-icon-phone-outline',
          iconBg: 'linear-gradient(135deg, #0ea5e9, #22c55e)',
          metricValue: 0,
          metricLabel: '待跟进邀约',
          primaryAction: '新建邀约',
          secondaryText: '查看邀约记录'
        },
        {
          key: 'booking',
          title: '预约管理',
          subtitle: '',
          icon: 'el-icon-date',
          iconBg: 'linear-gradient(135deg, #f97316, #facc15)',
          metricValue: 0,
          metricLabel: '今日预约',
          primaryAction: '新建预约',
          secondaryText: '打开预约日历'
        },
        {
          key: 'order',
          title: '开单管理',
          subtitle: '',
          icon: 'el-icon-s-order',
          iconBg: 'linear-gradient(135deg, #3b82f6, #2563eb)',
          metricValue: 0,
          metricLabel: '今日开单',
          primaryAction: '新建开单',
          secondaryText: '查看开单记录'
        },
        {
          key: 'consume',
          title: '消耗管理',
          subtitle: '',
          icon: 'el-icon-magic-stick',
          iconBg: 'linear-gradient(135deg, #22c55e, #16a34a)',
          metricValue: 0,
          metricLabel: '今日消耗人次',
          primaryAction: '新建消耗',
          secondaryText: '查看消耗记录'
        },
        {
          key: 'refund',
          title: '退卡管理',
          subtitle: '',
          icon: 'el-icon-refresh-left',
          iconBg: 'linear-gradient(135deg, #f97316, #ef4444)',
          metricValue: 0,
          metricLabel: '今日退卡',
          primaryAction: '新建退卡',
          secondaryText: '查看退卡记录'
        }
      ],
      todayInvite: [
        {
          id: 'TI202603020001',
          time: '09:10',
          name: '林小纤',
          mobile: '13800138000',
          dhsfyx: '是',
          lxjl: '邀约周末面部深层护理体验，客户有兴趣。'
        },
        {
          id: 'TI202603020002',
          time: '09:35',
          name: '王丽',
          mobile: '13800138001',
          dhsfyx: '是',
          lxjl: '介绍肩颈调理活动，已确认可到店。'
        },
        {
          id: 'TI202603020003',
          time: '10:05',
          name: '张敏',
          mobile: '13800138002',
          dhsfyx: '否',
          lxjl: '电话无人接听，准备稍后再次联系。'
        },
        {
          id: 'TI202603020004',
          time: '10:40',
          name: '赵云',
          mobile: '13800138003',
          dhsfyx: '是',
          lxjl: '邀约身体舒缓护理体验，客户需与家人确认时间。'
        },
        {
          id: 'TI202603020005',
          time: '11:20',
          name: '刘芳',
          mobile: '13800138004',
          dhsfyx: '是',
          lxjl: '眼周护理体验回访，客户反馈效果不错。'
        },
        {
          id: 'TI202603020006',
          time: '13:15',
          name: '陈洁',
          mobile: '13800138005',
          dhsfyx: '是',
          lxjl: '面部护理加购邀约，客户考虑本周安排。'
        },
        {
          id: 'TI202603020007',
          time: '14:00',
          name: '周雪',
          mobile: '13800138006',
          dhsfyx: '否',
          lxjl: '电话为空号，准备核实客户信息。'
        },
        {
          id: 'TI202603020008',
          time: '15:10',
          name: '李楠',
          mobile: '13800138007',
          dhsfyx: '是',
          lxjl: '身体护理活动邀约，客户希望下班后再联系。'
        },
        {
          id: 'TI202603020009',
          time: '16:25',
          name: '何倩',
          mobile: '13800138008',
          dhsfyx: '是',
          lxjl: '生日关怀邀约，初步定周末到店。'
        },
        {
          id: 'TI202603020010',
          time: '17:40',
          name: '孙悦',
          mobile: '13800138009',
          dhsfyx: '是',
          lxjl: '眼周护理复查邀约，客户暂不方便到店。'
        }
      ],
      todayBooking: [
        {
          id: 'TB202603020001',
          time: '09:30',
          date: '2026-03-02',
          timeRange: '09:30-10:00',
          name: '林小纤',
          mobile: '13800138000',
          project: '面部深层护理',
          staffName: '小李',
          status: 'pending',
          statusText: '待服务'
        },
        {
          id: 'TB202603020002',
          time: '10:00',
          date: '2026-03-02',
          timeRange: '10:00-10:30',
          name: '王丽',
          mobile: '13800138001',
          project: '肩颈调理',
          staffName: '小王',
          status: 'pending',
          statusText: '待服务'
        },
        {
          id: 'TB202603020003',
          time: '10:45',
          date: '2026-03-02',
          timeRange: '10:45-11:15',
          name: '张敏',
          mobile: '13800138002',
          project: '春季补水套餐',
          staffName: '小李',
          status: 'done',
          statusText: '已完成'
        },
        {
          id: 'TB202603020004',
          time: '11:30',
          date: '2026-03-02',
          timeRange: '11:30-12:00',
          name: '赵云',
          mobile: '13800138003',
          project: '身体舒缓护理',
          staffName: '小王',
          status: 'pending',
          statusText: '待服务'
        },
        {
          id: 'TB202603020005',
          time: '13:00',
          date: '2026-03-02',
          timeRange: '13:00-13:30',
          name: '刘芳',
          mobile: '13800138004',
          project: '眼周护理套餐',
          staffName: '小李',
          status: 'cancel',
          statusText: '已取消'
        },
        {
          id: 'TB202603020006',
          time: '14:20',
          date: '2026-03-02',
          timeRange: '14:20-14:50',
          name: '陈洁',
          mobile: '13800138005',
          project: '面部深层护理',
          staffName: '小李',
          status: 'pending',
          statusText: '待服务'
        },
        {
          id: 'TB202603020007',
          time: '15:10',
          date: '2026-03-02',
          timeRange: '15:10-15:40',
          name: '周雪',
          mobile: '13800138006',
          project: '肩颈调理',
          staffName: '小王',
          status: 'done',
          statusText: '已完成'
        },
        {
          id: 'TB202603020008',
          time: '16:00',
          date: '2026-03-02',
          timeRange: '16:00-16:30',
          name: '李楠',
          mobile: '13800138007',
          project: '身体舒缓护理',
          staffName: '小王',
          status: 'pending',
          statusText: '待服务'
        },
        {
          id: 'TB202603020009',
          time: '16:45',
          date: '2026-03-02',
          timeRange: '16:45-17:15',
          name: '何倩',
          mobile: '13800138008',
          project: '眼周护理套餐',
          staffName: '小李',
          status: 'pending',
          statusText: '待服务'
        },
        {
          id: 'TB202603020010',
          time: '17:30',
          date: '2026-03-02',
          timeRange: '17:30-18:00',
          name: '孙悦',
          mobile: '13800138009',
          project: '面部深层护理',
          staffName: '小李',
          status: 'pending',
          statusText: '待服务'
        }
      ],
      tuokeDialogVisible: false,
      inviteDialogVisible: false,
      bookingDialogVisible: false,
      bookingPrefill: {
        name: '',
        phone: ''
      },
      billingDialogVisible: false,
      billingPrefill: {},
      consumeDialogVisible: false,
      refundDialogVisible: false,
      tuokeListVisible: false,
      inviteListVisible: false,
      bookingCalendarVisible: false,
      billingListVisible: false,
      consumeListVisible: false,
      refundListVisible: false
    }
  },
  computed: {
    todayLabel() {
      const d = new Date()
      const year = d.getFullYear()
      const month = `${d.getMonth() + 1}`.padStart(2, '0')
      const day = `${d.getDate()}`.padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    userName() {
      return (this.$store && this.$store.state && this.$store.state.user && this.$store.state.user.realName) || '门店前台'
    },
    userInitial() {
      return this.userName ? this.userName[0] : '店'
    }
  },
  methods: {
    handleModulePrimary(module) {
      if (module.key === 'tuoke') {
        this.tuokeDialogVisible = true
        return
      }
      if (module.key === 'invite') {
        this.inviteDialogVisible = true
        return
      }
      if (module.key === 'booking') {
        this.bookingPrefill = { name: '', phone: '' }
        this.bookingDialogVisible = true
        return
      }
      if (module.key === 'order') {
        this.billingPrefill = {}
        this.billingDialogVisible = true
        return
      }
      if (module.key === 'consume') {
        this.consumeDialogVisible = true
        return
      }
      if (module.key === 'refund') {
        this.refundDialogVisible = true
        return
      }
    },
    handleMemberSearch() {
      const keyword = (this.memberKeyword || '').trim()
      if (!keyword) return
      this.activeMember = {
        id: 'GK2020082505128',
        dah: 'GK2020082505128',
        khmc: '刘泽蓉',
        sjh: '15982188353',
        xb: '女',
        gsmdName: '静居寺',
        khlxName: '高端客户',
        zcsj: '2020-08-25',
        jdqd: '19.9卡',
        tjrName: '—',
        mainHealthUserName: '董顺秀',
        subHealthUserName: '张丽',
        expandUserName: '—',
        lxdz: '--',
        bz: '--',
        totalConsumeAmount: 290473.63,
        totalBillingAmount: 1028692.14,
        remainingRightsAmount: 738218.51,
        sleepDays: 6,
        firstVisitTime: '2025-10-08',
        lastVisitTime: '2026-02-08 14:45',
        lastConsumeTime: '2026-02-08 14:45',
        consumeLevel: 5,
        yanglsr: '1990-06-15',
        yinlsr: '五月廿三',
        isBeautyMember: 1,
        isMedicalMember: 1,
        isTechMember: 1,
        isEducationMember: 0,
        RemainingItems: [
          { ItemName: '美拉-面部', ItemPrice: 2800, SourceType: '购买', TotalPurchased: 12, ConsumedCount: 8, RefundedCount: 0, DeductCount: 0, RemainingCount: 4 },
          { ItemName: '美拉-眼部', ItemPrice: 1500, SourceType: '购买', TotalPurchased: 10, ConsumedCount: 6, RefundedCount: 0, DeductCount: 0, RemainingCount: 4 },
          { ItemName: '逆龄胶原-眼部', ItemPrice: 9800, SourceType: '购买', TotalPurchased: 4, ConsumedCount: 1, RefundedCount: 0, DeductCount: 0, RemainingCount: 3 },
          { ItemName: '生命之波', ItemPrice: 680, SourceType: '购买', TotalPurchased: 20, ConsumedCount: 15, RefundedCount: 0, DeductCount: 0, RemainingCount: 5 },
          { ItemName: 'CELL神经', ItemPrice: 580, SourceType: '购买', TotalPurchased: 15, ConsumedCount: 10, RefundedCount: 0, DeductCount: 0, RemainingCount: 5 },
          { ItemName: '精雕', ItemPrice: 3500, SourceType: '购买', TotalPurchased: 6, ConsumedCount: 4, RefundedCount: 0, DeductCount: 0, RemainingCount: 2 },
          { ItemName: '微雕-面部', ItemPrice: 12000, SourceType: '购买', TotalPurchased: 3, ConsumedCount: 1, RefundedCount: 0, DeductCount: 0, RemainingCount: 2 }
        ],
        inviteRecords: [
          { InviteDate: '2026-01-17 14:06', StoreName: '静居寺', InviterName: '张丽', ContactTime: '2026-01-17 14:06', ContactRecord: '媳妇3:30过来', PhoneValid: '是' },
          { InviteDate: '2026-01-16 19:13', StoreName: '静居寺', InviterName: '张丽', ContactTime: '2026-01-16 19:13', ContactRecord: '14:00去468做科技部', PhoneValid: '是' },
          { InviteDate: '2025-12-21 18:52', StoreName: '静居寺', InviterName: '张丽', ContactTime: '2025-12-21 18:52', ContactRecord: '媳妇过来做', PhoneValid: '是' },
          { InviteDate: '2025-12-17 20:46', StoreName: '静居寺', InviterName: '张丽', ContactTime: '2025-12-17 20:46', ContactRecord: '去医院做项目', PhoneValid: '是' }
        ],
        bookingRecords: [
          { AppointmentDate: '2026-01-17 15:30', StoreName: '静居寺', InviterName: '张丽', HealthCoachName: '张丽', ExperienceItem: '美拉-面部+眼部+颈部', Status: '已确认', NoDealRemark: '' },
          { AppointmentDate: '2026-01-16 13:30', StoreName: '静居寺', InviterName: '张丽', HealthCoachName: '张丽', ExperienceItem: '逆龄胶原-眼部+颈部', Status: '已确认', NoDealRemark: '' },
          { AppointmentDate: '2025-12-21 14:30', StoreName: '静居寺', InviterName: '张丽', HealthCoachName: '张丽', ExperienceItem: 'CELL+生命之波', Status: '已预约', NoDealRemark: '' },
          { AppointmentDate: '2025-12-17 09:00', StoreName: '静居寺', InviterName: '张丽', HealthCoachName: '张丽', ExperienceItem: '微雕-面部+精雕', Status: '已预约', NoDealRemark: '' },
          { AppointmentDate: '2025-12-02 13:30', StoreName: '静居寺', InviterName: '张丽', HealthCoachName: '张丽', ExperienceItem: '精雕+太极神灸', Status: '已预约', NoDealRemark: '' }
        ],
        billingRecords: [
          { BillingDate: '2026-01-30 16:39', StoreName: '静居寺', CreatorName: '陈怡名', HealthCoachNames: '静居寺T区', TechTeacherNames: '科技一部T区', Items: '美拉-面部、美拉-眼部', Amount: 0, DebtAmount: 0, ActivityName: '' },
          { BillingDate: '2026-01-17 10:30', StoreName: '静居寺', CreatorName: '陈怡名', HealthCoachNames: '静居寺T区', TechTeacherNames: '科技一部T区', Items: '美拉-面部、美拉-眼部、美拉-颈部', Amount: 0, DebtAmount: 0, ActivityName: '' },
          { BillingDate: '2026-01-16 18:47', StoreName: '静居寺', CreatorName: '樊琳', HealthCoachNames: '张丽、董顺秀', TechTeacherNames: '杨琴、王方贤', Items: '逆龄胶原-眼部、逆龄胶原-颈部', Amount: 33240, DebtAmount: 0, ActivityName: '' },
          { BillingDate: '2025-12-17 16:38', StoreName: '静居寺', CreatorName: '樊琳', HealthCoachNames: '张丽、董顺秀', TechTeacherNames: '', Items: '微雕-面部、医美精雕', Amount: 96000, DebtAmount: 0, ActivityName: '' },
          { BillingDate: '2025-11-27 20:04', StoreName: '静居寺', CreatorName: '樊琳', HealthCoachNames: '董顺秀', TechTeacherNames: '', Items: '直播-精雕定金、直播-富贵包定金、直播-脂间艺术定金', Amount: 597, DebtAmount: 0, ActivityName: '' }
        ],
        consumeRecords: [
          { ConsumeDate: '2026-02-08 22:45', StoreName: '绿纤静居寺店', OperatorName: '董顺秀', HealthCoachNames: '董顺秀', TechTeacherNames: '', Items: '生命之波、CELL神经', Amount: 1036.90, LaborCost: 38 },
          { ConsumeDate: '2026-02-05 19:32', StoreName: '绿纤静居寺店', OperatorName: '陈怡名', HealthCoachNames: '静居寺T区', TechTeacherNames: '科技一部T区', Items: '冻龄宝宝、BIO、宝马仪器、水氧-面部、水氧-眼部、水氧-颈部、维密包', Amount: 50143.96, LaborCost: 1155 },
          { ConsumeDate: '2026-01-30 16:37', StoreName: '绿纤静居寺店', OperatorName: '陈怡名', HealthCoachNames: '静居寺T区', TechTeacherNames: '', Items: '日式温背、RETVS、护理（盛世）、精雕、太极神灸、胸腺保养、水氧-面部、砭石床', Amount: 25330.57, LaborCost: 684 },
          { ConsumeDate: '2026-01-27 21:50', StoreName: '绿纤静居寺店', OperatorName: '董顺秀', HealthCoachNames: '董顺秀', TechTeacherNames: '', Items: '生命之波、鼎轩-童颜女神', Amount: 4905.73, LaborCost: 40 },
          { ConsumeDate: '2026-01-27 20:18', StoreName: '绿纤静居寺店', OperatorName: '张丽', HealthCoachNames: '张丽', TechTeacherNames: '', Items: 'CELL、鼎轩-青春美肤（9D）', Amount: 1182, LaborCost: 74 }
        ],
        serviceLogRecords: [
          { CreateTime: '2026-01-17 22:50', CreatorName: '张丽', Remark: '罗米伽 刘姐媳妇 有抗衰和医美需求 但是目前对我们不信任 需要多相处 今天店长给她送了暖心客情 送了2盒医院面膜 修复她的皮肤 还是很开心', KjbRemark: '' },
          { CreateTime: '2026-01-16 22:17', CreatorName: '张丽', Remark: '陪刘姐去468做科技部 今天消耗了美拉+淋巴+眼部框架 对效果认可 很认可王专家 成交33240 送她一次大手臂的逆龄胶原', KjbRemark: '' },
          { CreateTime: '2025-12-21 21:23', CreatorName: '张丽', Remark: '刘泽蓉媳妇 今天约到468做项目 引导了cell效果 让她坚持做 对宫寒有改善 对医美有需求 想做鼻子和下巴', KjbRemark: '' }
        ],
        oldLogRecords: [
          { CreateTime: '2025-12-25', OrderNo: 'SY202507190016', MemberName: '刘泽蓉', Remarks: '和张顾问一起给刘姐渲染考证 成交66600 后续又成交臻咪88000' },
          { CreateTime: '2025-12-25', OrderNo: 'SY202507190017', MemberName: '刘泽蓉', Remarks: '给她体验做生命源波 了解到想做胸部 体检正常 成交88000' },
          { CreateTime: '2025-12-25', OrderNo: 'SY202410190018', MemberName: '刘泽蓉', Remarks: '和张顾问一起做好服务' }
        ],
        refundRecords: [
          { RefundDate: '2026-02-11 15:48', StoreName: '绿纤西站店', RefundAmount: 133.34, ActualRefundAmount: 133, RefundReason: '项目不适合' },
          { RefundDate: '2026-02-11 15:34', StoreName: '绿纤南湖店', RefundAmount: 1199, ActualRefundAmount: 1199, RefundReason: '搬家' },
          { RefundDate: '2026-02-11 13:48', StoreName: '绿纤保利店', RefundAmount: 3054.59, ActualRefundAmount: 868, RefundReason: '' },
          { RefundDate: '2026-02-08 15:36', StoreName: '绿纤双流店', RefundAmount: 1000, ActualRefundAmount: 1000, RefundReason: '' },
          { RefundDate: '2026-02-06 18:12', StoreName: '绿纤融创店', RefundAmount: 10000, ActualRefundAmount: 10000, RefundReason: '' }
        ]
      }
      this.memberDialogVisible = true
    },
    handleQuickBooking(item) {
      this.bookingPrefill = {
        name: item.name,
        phone: item.mobile
      }
      this.bookingDialogVisible = true
    },
    handleQuickBilling(item) {
      this.billingPrefill = {
        name: item.name,
        memberId: '',
        fromBooking: true,
        bookingProject: item.project,
        bookingDate: item.date,
        bookingTimeRange: item.timeRange,
        bookingStaff: item.staffName
      }
      this.billingDialogVisible = true
    },
    handleModuleSecondary(module) {
      const map = {
        tuoke: 'tuokeListVisible',
        invite: 'inviteListVisible',
        booking: 'bookingCalendarVisible',
        order: 'billingListVisible',
        consume: 'consumeListVisible',
        refund: 'refundListVisible'
      }
      const key = map[module.key]
      if (key) this[key] = true
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-page {
  min-height: 100%;
  padding: 20px 24px;
  background: radial-gradient(circle at 10% 20%, #eef2ff 0, #eef2ff 26%, #fdf2ff 60%, #fff7ed 100%);
  box-sizing: border-box;
}

.top-bar {
  display: grid;
  grid-template-columns: minmax(200px, 1.2fr) minmax(260px, 2fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.store-info {
  .store-name {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    letter-spacing: 0.5px;
  }

  .store-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
  }
}

.member-search-input {
  ::v-deep .el-input-group__append {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    padding: 0 20px;
    border-radius: 0 999px 999px 0;
  }

  ::v-deep .el-input__inner {
    border-radius: 999px 0 0 999px;
    padding-left: 40px;
  }
}

.top-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
}

.today-text {
  font-size: 13px;
  color: #6b7280;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #22c55e);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.user-name {
  font-size: 13px;
  color: #374151;
}

.layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr);
  gap: 16px;
}

.left-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modules-grid {
  margin-top: 4px;
}

.modules-grid .el-col {
  margin-bottom: 16px;
}

.overview-row {
  .overview-card {
    border-radius: 16px;
    border: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  }
}

.overview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;

  .label {
    font-size: 13px;
    color: #6b7280;
  }

  .tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
  }
}

.overview-value {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
}

.overview-sub {
  margin-top: 4px;
  font-size: 12px;
  color: #9ca3af;
}

.modules-grid .module-card {
  border-radius: 18px;
  border: none;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.modules-grid .module-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.module-title-wrap {
  .module-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
  }

  .module-subtitle {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
  }
}

.module-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;

  i {
    font-size: 20px;
  }
}

.module-meta {
  margin-top: 8px;

  .meta-value {
    font-size: 22px;
    font-weight: 600;
    color: #111827;
  }

  .meta-label {
    margin-top: 2px;
    font-size: 12px;
    color: #9ca3af;
  }
}

.module-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
  }

  .secondary-text {
    font-size: 12px;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.15s;

    &:hover {
      color: #2563eb;
    }
  }
}

.right-column .today-card {
  border-radius: 18px;
  border: none;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.today-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.today-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.today-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
}

.timeline-list {}

.timeline-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 8px;
  padding: 6px 0;
  font-size: 12px;
}

.timeline-item+.timeline-item {
  border-top: 1px dashed #e5e7eb;
}

.timeline-item .time {
  color: #6b7280;
  padding-top: 2px;
}

.timeline-item .content {
  .line-main {
    display: flex;
    align-items: center;
    gap: 6px;

    .name {
      color: #111827;
      font-weight: 500;
    }

    .mobile {
      color: #6b7280;
    }
  }

  .line-sub {
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    .project {
      color: #6b7280;
      flex: 1;
    }
  }
}

.quick-book-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  padding: 0 12px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
  cursor: pointer;
}

.quick-book-btn:hover {
  background: #1d4ed8;
}

.quick-order-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  padding: 0 12px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  background: #f97316;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(248, 113, 22, 0.3);
  cursor: pointer;
}

.quick-order-btn:hover {
  background: #ea580c;
}

.status {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
}

.status--pending {
  background: #fef3c7;
  color: #92400e;
}

.status--done {
  background: #dcfce7;
  color: #166534;
}

.status--cancel {
  background: #fee2e2;
  color: #b91c1c;
}

.empty-tip {
  padding: 16px 0;
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
}

@media (max-width: 1024px) {
  .layout-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr);
  }
}

@media (max-width: 768px) {
  .dashboard-page {
    padding: 16px;
  }

  .top-bar {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }

  .layout-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
</style>