antissoft / lvqianmeiye_ERP

  <template>

    <el-dialog :visible.sync="visibleSync" title="会员画像" :width="'1500px'" append-to-body top="8vh"

      custom-class="member-portrait-dialog" :close-on-click-modal="false" @closed="handleClosed">
      <div v-loading="loading" class="portrait-wrapper">

        <!-- 顶部：会员核心信息卡片 -->

        <div class="portrait-header">

          <div class="header-avatar">
            <div class="avatar-circle">
              <i class="el-icon-user-solid"></i>
            </div>
          </div>

          <div class="header-main">

            <div class="member-name-row">
              <h2 class="member-name">{{ baseInfo.MemberName || '—' }}</h2>
              <el-tag v-if="baseInfo.ConsumeLevel !== undefined" :type="getConsumeLevelTagType(baseInfo.ConsumeLevel)" size="small" class="level-tag">
                {{ getConsumeLevelText(baseInfo.ConsumeLevel) }}
              </el-tag>
            </div>

            <div class="member-meta">

              <div class="meta-item">

                <i class="el-icon-phone"></i>

                <span>{{ baseInfo.Mobile || '—' }}</span>
              </div>
              <div class="meta-item">

                <i class="el-icon-office-building"></i>

                <span>{{ baseInfo.StoreName || '—' }}</span>
              </div>
              <div class="meta-item" v-if="baseInfo.Channel">

                <i class="el-icon-connection"></i>

                <span>{{ baseInfo.Channel }}</span>
              </div>
              <div class="meta-item" v-if="baseInfo.MemberCode">
                <i class="el-icon-tickets"></i>
                <span>编码：{{ baseInfo.MemberCode }}</span>
              </div>

            </div>
          </div>

          <div class="header-right">
            <div class="header-stats">
              <div class="stat-card stat-primary">
                <el-tag type="primary" size="small" class="stat-label-tag">剩余权益</el-tag>
                <span class="stat-value">￥{{ formatMoney(behaviorSummary.RemainingRightsAmount) }}</span>
              </div>
              <div class="stat-card stat-success">
                <el-tag type="success" size="small" class="stat-label-tag">累计开单</el-tag>
                <span class="stat-value">￥{{ formatMoney(behaviorSummary.TotalBillingAmount) }}</span>
              </div>
              <div class="stat-card stat-info">
                <el-tag type="info" size="small" class="stat-label-tag">累计消耗</el-tag>
                <span class="stat-value">￥{{ formatMoney(behaviorSummary.TotalConsumeAmount) }}</span>
              </div>
              <div class="stat-card" :class="baseInfo.SleepDays > 30 ? 'stat-warning' : 'stat-default'">
                <el-tag :type="baseInfo.SleepDays > 30 ? 'warning' : 'info'" size="small" class="stat-label-tag">沉睡天数</el-tag>
                <span class="stat-value">{{ baseInfo.SleepDays || 0 }} 天</span>

              </div>
            </div>

            <!-- 会员类型 -->

            <div class="member-types-section" v-if="baseInfo.MemberTypes && baseInfo.MemberTypes.length > 0">
              <div class="member-types-list">
                <div v-for="type in baseInfo.MemberTypes" :key="type.TypeName" class="member-type-badge">
                  <el-tag :type="getMemberTypeTagType(type.TypeName)" size="small" class="member-type-tag">
                    {{ type.TypeName }}会员

                  </el-tag>
                  <span class="member-type-date" v-if="type.BecomeTime">

                    <i class="el-icon-calendar"></i>

                    {{ formatDate(type.BecomeTime) }}
                  </span>
                </div>

              </div>
            </div>
          </div>
        </div>
  
        <!-- 选项卡内容 -->
        <el-tabs v-model="activeTab" class="portrait-tabs">
          <!-- 概览 -->
          <el-tab-pane label="概览" name="overview">
            <div class="tab-content">
              <!-- 消费行为 -->

              <div class="content-card">
                <div class="card-header">

                  <i class="el-icon-shopping-cart-full"></i>

                  <span class="card-title">消费行为</span>

                </div>

                <div class="card-body">
                  <div class="behavior-grid">
                    <div class="behavior-item">
                      <div class="behavior-icon">
                        <i class="el-icon-document"></i>
                      </div>
                      <div class="behavior-content">
                        <div class="behavior-label">开单次数</div>
                        <div class="behavior-value">{{ behaviorSummary.BillingCount || 0 }}</div>
                      </div>
                    </div>
                    <div class="behavior-item">
                      <div class="behavior-icon">
                        <i class="el-icon-goods"></i>
                      </div>
                      <div class="behavior-content">
                        <div class="behavior-label">消耗次数</div>
                        <div class="behavior-value">{{ behaviorSummary.ConsumeCount || 0 }}</div>
                      </div>
                    </div>
                    <div class="behavior-item">
                      <div class="behavior-icon">
                        <i class="el-icon-refresh-left"></i>
                      </div>
                      <div class="behavior-content">
                        <div class="behavior-label">退卡次数</div>
                        <div class="behavior-value">{{ behaviorSummary.RefundCount || 0 }}</div>
                      </div>
                    </div>
                    <div class="behavior-item">
                      <div class="behavior-icon">
                        <i class="el-icon-coin"></i>
                      </div>
                      <div class="behavior-content">
                        <div class="behavior-label">平均开单金额</div>
                        <div class="behavior-value">￥{{ formatMoney(behaviorSummary.AvgBillingAmount) }}</div>
                      </div>
                    </div>
                    <div class="behavior-item">
                      <div class="behavior-icon">
                        <i class="el-icon-coin"></i>
                      </div>
                      <div class="behavior-content">
                        <div class="behavior-label">平均消耗金额</div>
                        <div class="behavior-value">￥{{ formatMoney(behaviorSummary.AvgConsumeAmount) }}</div>
                      </div>
                    </div>
                    <div class="behavior-item">
                      <div class="behavior-icon">
                        <i class="el-icon-time"></i>
                      </div>
                      <div class="behavior-content">
                        <div class="behavior-label">最近开单</div>
                        <div class="behavior-value">{{ formatDateTime(behaviorSummary.LastBillingTime) }}</div>
                      </div>
                    </div>
                    <div class="behavior-item">
                      <div class="behavior-icon">
                        <i class="el-icon-time"></i>
                      </div>
                      <div class="behavior-content">
                        <div class="behavior-label">最近消耗</div>
                        <div class="behavior-value">{{ formatDateTime(behaviorSummary.LastConsumeTime) }}</div>
                      </div>
                    </div>
                    <div class="behavior-item">
                      <div class="behavior-icon">
                        <i class="el-icon-calendar"></i>
                      </div>
                      <div class="behavior-content">
                        <div class="behavior-label">首次开单</div>
                        <div class="behavior-value">{{ formatDateTime(behaviorSummary.FirstBillingTime) }}</div>
                      </div>
                    </div>
                    <div class="behavior-item">
                      <div class="behavior-icon">
                        <i class="el-icon-calendar"></i>
                      </div>
                      <div class="behavior-content">
                        <div class="behavior-label">首次消耗</div>
                        <div class="behavior-value">{{ formatDateTime(behaviorSummary.FirstConsumeTime) }}</div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
  
              <!-- 近12个月趋势图 -->

              <div class="content-card">
                <div class="card-header">

                  <i class="el-icon-data-line"></i>

                  <span class="card-title">近12个月消费趋势</span>
                </div>
                <div class="card-body">
                  <div ref="trendChart" class="trend-chart"></div>

                </div>

              </div>
  
              <!-- 消费分析 -->

              <div v-if="consumptionAnalysis" class="content-card">
                <div class="card-header">

                  <i class="el-icon-data-analysis"></i>

                  <span class="card-title">消费分析</span>

                </div>

                <div class="card-body">
                  <div class="analysis-layout">
                    <div class="analysis-item">
                      <div class="analysis-icon">
                        <i class="el-icon-timer"></i>
                      </div>
                      <div class="analysis-content">
                        <div class="analysis-label">消费频率</div>
                        <div class="analysis-value">{{ formatMoney(consumptionAnalysis.ConsumeFrequency) }} 次/月</div>
                      </div>
                    </div>
                    <div class="analysis-item">
                      <div class="analysis-icon">
                        <i class="el-icon-timer"></i>
                      </div>
                      <div class="analysis-content">
                        <div class="analysis-label">开单频率</div>
                        <div class="analysis-value">{{ formatMoney(consumptionAnalysis.BillingFrequency) }} 次/月</div>
                      </div>
                    </div>
                    <div class="analysis-item">
                      <div class="analysis-icon">
                        <i class="el-icon-success"></i>
                      </div>
                      <div class="analysis-content">
                        <div class="analysis-label">消费活跃度</div>
                        <div class="analysis-value">
                          <el-tag :type="consumptionAnalysis.IsActive ? 'success' : 'info'" size="small">
                            {{ consumptionAnalysis.IsActive ? '活跃' : '不活跃' }}
                          </el-tag>
                        </div>
                      </div>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
  
          <!-- 权益明细 -->
          <el-tab-pane label="权益明细" name="assets">
            <div class="tab-content">

              <div class="content-card">
                <div class="card-header">

                  <i class="el-icon-wallet"></i>

                  <span class="card-title">权益明细</span>
                </div>
                <div class="card-body">
                  <el-table :data="remainingItems" size="small" border stripe>
                    <el-table-column prop="ItemName" label="品项名称" min-width="140" />
                    <el-table-column prop="SourceType" label="来源类型" width="90" />
                    <el-table-column prop="UnitPrice" label="单价" width="90">
                      <template slot-scope="scope">￥{{ formatMoney(scope.row.UnitPrice) }}</template>
                    </el-table-column>
                    <el-table-column prop="TotalQuantity" label="总数量" width="80" />
                    <el-table-column prop="ConsumedQuantity" label="已消费" width="80" />
                    <el-table-column prop="RefundedQuantity" label="已退款" width="80" />
                    <el-table-column prop="DeductedQuantity" label="已扣除" width="80" />
                    <el-table-column prop="RemainingQuantity" label="剩余" width="80" />
                    <el-table-column prop="RemainingValue" label="剩余价值" width="120">
                      <template slot-scope="scope">￥{{ formatMoney(scope.row.RemainingValue) }}</template>
                    </el-table-column>
                  </el-table>

                </div>

              </div>
            </div>
          </el-tab-pane>
  
          <!-- 开单列表 -->
          <el-tab-pane label="开单列表" name="billing">
            <div class="tab-content">

              <div class="content-card">
                <div class="card-header">
                  <i class="el-icon-document"></i>
                  <span class="card-title">开单列表</span>
                </div>
                <div class="card-body">
                  <el-table v-loading="billingLoading" :data="billingList" size="small" border stripe>
                    <el-table-column prop="BillingDate" label="开单日期" width="160">
                      <template slot-scope="scope">{{ formatDateTime(scope.row.BillingDate) }}</template>
                    </el-table-column>
                    <el-table-column prop="StoreName" label="门店" width="150" />
                    <el-table-column prop="Amount" label="实付金额" width="120">
                      <template slot-scope="scope">￥{{ formatMoney(scope.row.Amount) }}</template>
                    </el-table-column>
                    <el-table-column prop="DebtAmount" label="欠款金额" width="120">
                      <template slot-scope="scope">￥{{ formatMoney(scope.row.DebtAmount) }}</template>
                    </el-table-column>
                    <el-table-column prop="ActivityName" label="活动名称" min-width="150" />
                  </el-table>
                  <div class="pagination-bar">
                    <el-pagination layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50]"
                      :total="billingPagination.total" :current-page="billingPagination.pageIndex"
                      :page-size="billingPagination.pageSize" @size-change="handleBillingSizeChange"
                      @current-change="handleBillingPageChange" />
                  </div>
                </div>

              </div>
            </div>
          </el-tab-pane>
  
          <!-- 消耗列表 -->
          <el-tab-pane label="消耗列表" name="consume">
            <div class="tab-content">

              <div class="content-card">
                <div class="card-header">
                  <i class="el-icon-goods"></i>
                  <span class="card-title">消耗列表</span>
                </div>
                <div class="card-body">
                  <el-table v-loading="consumeLoading" :data="consumeList" size="small" border stripe>

                    <el-table-column prop="ConsumeDate" label="消耗日期">

                      <template slot-scope="scope">{{ formatDateTime(scope.row.ConsumeDate) }}</template>
                    </el-table-column>

                    <el-table-column prop="StoreName" label="门店" />
                    <el-table-column prop="Amount" label="消耗金额" >

                      <template slot-scope="scope">￥{{ formatMoney(scope.row.Amount) }}</template>
                    </el-table-column>

                    <el-table-column prop="LaborCost" label="手工费" >

                      <template slot-scope="scope">￥{{ formatMoney(scope.row.LaborCost) }}</template>
                    </el-table-column>
                  </el-table>
                  <div class="pagination-bar">
                    <el-pagination layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50]"
                      :total="consumePagination.total" :current-page="consumePagination.pageIndex"
                      :page-size="consumePagination.pageSize" @size-change="handleConsumeSizeChange"
                      @current-change="handleConsumePageChange" />
                  </div>
                </div>

              </div>
            </div>
          </el-tab-pane>
  
          <!-- 退卡列表 -->
          <el-tab-pane label="退卡列表" name="refund">
            <div class="tab-content">

              <div class="content-card">
                <div class="card-header">
                  <i class="el-icon-refresh-left"></i>
                  <span class="card-title">退卡列表</span>
                </div>
                <div class="card-body">
                  <el-table v-loading="refundLoading" :data="refundList" size="small" border stripe>
                    <el-table-column prop="RefundDate" label="退卡日期" width="160">
                      <template slot-scope="scope">{{ formatDateTime(scope.row.RefundDate) }}</template>
                    </el-table-column>

                    <el-table-column prop="StoreName" label="门店"  />
                    <el-table-column prop="RefundAmount" label="退卡金额" >

                      <template slot-scope="scope">￥{{ formatMoney(scope.row.RefundAmount) }}</template>
                    </el-table-column>

                    <el-table-column prop="ActualRefundAmount" label="实际退款" >

                      <template slot-scope="scope">￥{{ formatMoney(scope.row.ActualRefundAmount) }}</template>
                    </el-table-column>
                    <el-table-column prop="RefundReason" label="退卡原因" min-width="150" />
                  </el-table>
                  <div class="pagination-bar">
                    <el-pagination layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50]"
                      :total="refundPagination.total" :current-page="refundPagination.pageIndex"
                      :page-size="refundPagination.pageSize" @size-change="handleRefundSizeChange"
                      @current-change="handleRefundPageChange" />
                  </div>
                </div>

              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </template>
  
  <script>
  import request from '@/utils/request'
  import * as echarts from 'echarts'
  
  export default {
    name: 'MemberPortraitDialog',
    props: {
      visible: { type: Boolean, default: false },
      memberId: { type: String, default: '' }
    },
    data() {
      return {
        visibleSync: false,
        loading: false,
        activeTab: 'overview',
        baseInfo: {},
        behaviorSummary: {},
        remainingItems: [],
        monthlyTrend: [],
        consumptionAnalysis: null,
        trendChart: null,
        // 开单列表
        billingList: [],
        billingLoading: false,
        billingPagination: {
          pageIndex: 1,
          pageSize: 10,
          total: 0
        },
        // 消耗列表
        consumeList: [],
        consumeLoading: false,
        consumePagination: {
          pageIndex: 1,
          pageSize: 10,
          total: 0
        },
        // 退卡列表
        refundList: [],
        refundLoading: false,
        refundPagination: {
          pageIndex: 1,
          pageSize: 10,
          total: 0
        }
      }
    },
    watch: {
      visible: {
        immediate: true,
        handler(v) {
          this.visibleSync = v
          if (v && this.memberId) {
            this.fetchData()
          }
        }
      },
      memberId: {
        handler(newVal) {
          if (newVal && this.visibleSync) {
            this.fetchData()
          }
        }
      },
      activeTab(newVal) {
        if (newVal === 'billing' && this.billingList.length === 0) {
          this.fetchBillingList()
        } else if (newVal === 'consume' && this.consumeList.length === 0) {
          this.fetchConsumeList()
        } else if (newVal === 'refund' && this.refundList.length === 0) {
          this.fetchRefundList()
        }
      }
    },
    methods: {
      async fetchData() {
        if (!this.memberId) {
          this.$message.warning('会员ID不能为空')
          return
        }
  
        this.loading = true
        try {
          const res = await request({
            url: '/api/Extend/MemberPortrait/overview',
            method: 'GET',
            params: { memberId: this.memberId }
          })
  
          if (res.code === 200 && res.data) {
            this.baseInfo = res.data.BaseInfo || {}
            this.behaviorSummary = res.data.BehaviorSummary || {}
            this.remainingItems = (res.data.Assets && res.data.Assets.RemainingItems) || []
            this.monthlyTrend = res.data.MonthlyTrend || []
            this.consumptionAnalysis = res.data.ConsumptionAnalysis || null
  
            this.$nextTick(() => {
              this.renderTrendChart()
            })
          } else {
            this.$message.error(res.msg || '获取会员画像数据失败')
          }
        } catch (error) {
          console.error('获取会员画像数据失败:', error)
          this.$message.error('获取会员画像数据失败: ' + (error.message || '未知错误'))
        } finally {
          this.loading = false
        }
      },
      async fetchBillingList() {
        if (!this.memberId) return
  
        this.billingLoading = true
        try {
          const res = await request({
            url: '/api/Extend/MemberPortrait/billing-list',
            method: 'GET',
            params: {
              memberId: this.memberId,
              pageIndex: this.billingPagination.pageIndex,
              pageSize: this.billingPagination.pageSize
            }
          })
  
          if (res.code === 200 && res.data) {
            this.billingList = res.data.List || []
            this.billingPagination.total = res.data.Total || 0
          } else {
            this.$message.error(res.msg || '获取开单列表失败')
          }
        } catch (error) {
          console.error('获取开单列表失败:', error)
          this.$message.error('获取开单列表失败: ' + (error.message || '未知错误'))
        } finally {
          this.billingLoading = false
        }
      },
      async fetchConsumeList() {
        if (!this.memberId) return
  
        this.consumeLoading = true
        try {
          const res = await request({
            url: '/api/Extend/MemberPortrait/consume-list',
            method: 'GET',
            params: {
              memberId: this.memberId,
              pageIndex: this.consumePagination.pageIndex,
              pageSize: this.consumePagination.pageSize
            }
          })
  
          if (res.code === 200 && res.data) {
            this.consumeList = res.data.List || []
            this.consumePagination.total = res.data.Total || 0
          } else {
            this.$message.error(res.msg || '获取消耗列表失败')
          }
        } catch (error) {
          console.error('获取消耗列表失败:', error)
          this.$message.error('获取消耗列表失败: ' + (error.message || '未知错误'))
        } finally {
          this.consumeLoading = false
        }
      },
      async fetchRefundList() {
        if (!this.memberId) return
  
        this.refundLoading = true
        try {
          const res = await request({
            url: '/api/Extend/MemberPortrait/refund-list',
            method: 'GET',
            params: {
              memberId: this.memberId,
              pageIndex: this.refundPagination.pageIndex,
              pageSize: this.refundPagination.pageSize
            }
          })
  
          if (res.code === 200 && res.data) {
            this.refundList = res.data.List || []
            this.refundPagination.total = res.data.Total || 0
          } else {
            this.$message.error(res.msg || '获取退卡列表失败')
          }
        } catch (error) {
          console.error('获取退卡列表失败:', error)
          this.$message.error('获取退卡列表失败: ' + (error.message || '未知错误'))
        } finally {
          this.refundLoading = false
        }
      },
      handleBillingPageChange(page) {
        this.billingPagination.pageIndex = page
        this.fetchBillingList()
      },
      handleBillingSizeChange(size) {
        this.billingPagination.pageSize = size
        this.billingPagination.pageIndex = 1
        this.fetchBillingList()
      },
      handleConsumePageChange(page) {
        this.consumePagination.pageIndex = page
        this.fetchConsumeList()
      },
      handleConsumeSizeChange(size) {
        this.consumePagination.pageSize = size
        this.consumePagination.pageIndex = 1
        this.fetchConsumeList()
      },
      handleRefundPageChange(page) {
        this.refundPagination.pageIndex = page
        this.fetchRefundList()
      },
      handleRefundSizeChange(size) {
        this.refundPagination.pageSize = size
        this.refundPagination.pageIndex = 1
        this.fetchRefundList()
      },
      renderTrendChart() {
        if (!this.$refs.trendChart) return
  
        if (this.trendChart) {
          this.trendChart.dispose()
        }
  
        this.trendChart = echarts.init(this.$refs.trendChart)
  
        const months = this.monthlyTrend.map(item => item.Month)
        const billingData = this.monthlyTrend.map(item => item.BillingAmount || 0)
        const consumeData = this.monthlyTrend.map(item => item.ConsumeAmount || 0)
        const refundData = this.monthlyTrend.map(item => item.RefundAmount || 0)
  
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross' }
          },
          legend: {
            data: ['开单金额', '消耗金额', '退卡金额'],
            bottom: 0
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: months,
            axisLabel: {
              rotate: 45
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: value => '￥' + this.formatMoney(value)
            }
          },
          series: [
            {
              name: '开单金额',
              type: 'line',
              data: billingData,
              itemStyle: { color: '#409EFF' }
            },
            {
              name: '消耗金额',
              type: 'line',
              data: consumeData,
              itemStyle: { color: '#67C23A' }
            },
            {
              name: '退卡金额',
              type: 'line',
              data: refundData,
              itemStyle: { color: '#F56C6C' }
            }
          ]
        }
  
        this.trendChart.setOption(option)
  
        // 响应式调整
        window.addEventListener('resize', this.handleChartResize)
      },
      handleChartResize() {
        if (this.trendChart) {
          this.trendChart.resize()
        }
      },
      formatMoney(amount) {
        if (amount === null || amount === undefined || amount === '') return '0.00'
        return Number(amount).toFixed(2)
      },
      formatDateTime(timestamp) {
        if (!timestamp) return '无'
        if (typeof timestamp === 'number') {
          const date = new Date(timestamp)
          return date.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
          })
        }
        return timestamp
      },
      formatDate(timestamp) {
        if (!timestamp) return ''
        if (typeof timestamp === 'number') {
          const date = new Date(timestamp)
          return date.toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
          })
        }
        return timestamp
      },
      getConsumeLevelText(level) {
        const levelMap = {
          0: '普通',
          1: '银卡',
          2: '金卡',
          3: '钻石',
          4: 'VIP'
        }
        return levelMap[level] || '普通'
      },

      getConsumeLevelTagType(level) {
        const typeMap = {
          0: 'info',
          1: '',
          2: 'warning',
          3: 'success',
          4: 'danger'
        }
        return typeMap[level] || 'info'
      },

      getMemberTypeTagType(typeName) {
        const typeMap = {
          '生美': 'success',
          '医美': 'warning',
          '科技部': 'primary',
          '教育部': 'info'
        }
        return typeMap[typeName] || 'info'
      },
      handleClosed() {
        if (this.trendChart) {
          window.removeEventListener('resize', this.handleChartResize)
          this.trendChart.dispose()
          this.trendChart = null
        }
        this.$emit('update:visible', false)
        this.$emit('closed')
      }
    },
    beforeDestroy() {
      if (this.trendChart) {
        window.removeEventListener('resize', this.handleChartResize)
        this.trendChart.dispose()
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>

  ::v-deep .el-dialog {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.1);
  }
  

  .member-portrait-dialog {
    .el-dialog {

      border-radius: 20px;

      overflow: hidden;

      border: 1px solid rgba(255, 255, 255, 0.2);

    }
  
    .el-dialog__header {

      padding: 18px 24px;

      border-bottom: 1px solid #e4e7ed;

      background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);

      color: #fff;

      position: relative;
  
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #409EFF 0%, #66b1ff 100%);
      }

  
      .el-dialog__title {
        color: #fff;
        font-size: 18px;
        font-weight: 600;

        letter-spacing: 0;

      }
  
      .el-dialog__close {

        color: rgba(255, 255, 255, 0.8);

        font-size: 20px;

        transition: all 0.2s ease;

  
        &:hover {

          color: #fff;

        }
      }

    }
  
    .el-dialog__body {

      padding: 20px;

      background: #f5f7fa;
      color: #303133;
      overflow-y: auto;

      max-height: calc(90vh - 120px);

    }
  }
  
  .portrait-wrapper {

    // 顶部会员信息卡片

    .portrait-header {

      background: #ffffff;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 16px;

      display: flex;

      align-items: flex-start;

      gap: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

      border: 1px solid #e4e7ed;

      transition: all 0.2s ease;
  
      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

  
      .header-avatar {
        flex-shrink: 0;
  
        .avatar-circle {

          width: 72px;
          height: 72px;
          border-radius: 8px;
          background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);

          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;

          font-size: 32px;
          box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
          &:hover {
            transform: scale(1.05) rotate(5deg);
            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
            background: linear-gradient(135deg, #66b1ff 0%, #409EFF 100%);
          }

        }
      }

  
      .header-main {
        flex: 1;

        min-width: 0;

        .member-name-row {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 16px;
  
          .member-name {
            font-size: 24px;

            font-weight: 600;

            color: #303133;
            margin: 0;
            line-height: 1.2;
          }
  
          .level-tag {
            font-weight: 600;
          }

        }
  
        .member-meta {
          display: flex;

          flex-wrap: wrap;

          gap: 20px;

  
          .meta-item {

            font-size: 14px;

            color: #606266;
            display: flex;
            align-items: center;

            gap: 8px;

  
            i {
              color: #909399;

              font-size: 16px;
            }
  
            span {
              line-height: 1.5;

            }
          }
        }
      }
  

        .header-right {

        display: flex;

        flex-direction: column;
        align-items: flex-end;

        gap: 12px;

        flex-shrink: 0;

        .header-stats {
          display: flex;

          gap: 12px;

          flex-shrink: 0;

          .stat-card {

            min-width: 110px;
            padding: 12px 16px;

            border-radius: 6px;
            border: 1px solid #e4e7ed;
            display: flex;

            flex-direction: column;
            align-items: flex-start;
            gap: 6px;

            transition: all 0.2s ease;

            background: #ffffff;

            &:hover {

              border-color: #c0c4cc;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

            }
  

            .stat-label-tag {
              font-weight: 600;
              font-size: 12px;
              padding: 2px 10px;
              margin: 0;
              flex-shrink: 0;

            }

            .stat-value {

              font-size: 16px;

              font-weight: 600;
              color: #303133;
              white-space: nowrap;
              line-height: 1.2;

            }

            &.stat-primary {

              border-left: 3px solid #409EFF;
              background: linear-gradient(135deg, rgba(64, 158, 255, 0.08) 0%, rgba(102, 177, 255, 0.05) 100%);

            }

            &.stat-success {

              border-left: 3px solid #67C23A;
              background: linear-gradient(135deg, rgba(103, 194, 58, 0.08) 0%, rgba(133, 206, 97, 0.05) 100%);

            }

            &.stat-info {

              border-left: 3px solid #909399;
              background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(169, 172, 178, 0.05) 100%);

            }

            &.stat-warning {

              border-left: 3px solid #E6A23C;
              background: linear-gradient(135deg, rgba(230, 162, 60, 0.08) 0%, rgba(240, 180, 90, 0.05) 100%);

            }

            &.stat-default {

              border-left: 3px solid #409EFF;
              background: linear-gradient(135deg, rgba(64, 158, 255, 0.08) 0%, rgba(102, 177, 255, 0.05) 100%);

            }
          }
        }

        .member-types-section {
          display: flex;
          align-items: center;
          gap: 12px;
          flex-wrap: wrap;
  
          .member-types-label {
            font-size: 13px;
            color: #909399;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
  
            i {
              color: #409EFF;
              font-size: 14px;
            }
          }

          .member-types-list {

            display: flex;

            flex-wrap: wrap;

            gap: 12px;

              .member-type-badge {

              display: flex;
              align-items: center;
              gap: 8px;
              padding: 6px 12px;

              background: #f5f7fa;

              border-radius: 6px;

              border: 1px solid #e4e7ed;
              transition: all 0.2s ease;

              &:hover {
                background: #f0f2f5;

                border-color: #c0c4cc;

              }
  
              .member-type-tag {
                font-weight: 600;

                font-size: 12px;

                padding: 2px 10px;

              }
  

              .member-type-date {
                font-size: 12px;
                color: #909399;
                display: flex;
                align-items: center;
                gap: 4px;
  
                i {
                  font-size: 12px;
                }

              }
            }
          }
        }
      }
    }
  

    // 选项卡样式
    .portrait-tabs {
      ::v-deep .el-tabs__header {

        margin-bottom: 16px;
        background: #ffffff;

        padding: 0 20px;

        border-radius: 8px;

        border: 1px solid #e4e7ed;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      }
  
      ::v-deep .el-tabs__nav-wrap::after {
        display: none;
      }
  
      ::v-deep .el-tabs__item {

        font-size: 14px;

        font-weight: 500;
        padding: 0 24px;

        height: 48px;
        line-height: 48px;
        color: #606266;
        transition: all 0.2s ease;
  
        &:hover {
          color: #409EFF;
        }

        &.is-active {

          color: #409EFF;

          font-weight: 600;
        }
      }
  
      ::v-deep .el-tabs__active-bar {

        background: linear-gradient(90deg, #409EFF 0%, #66b1ff 100%);

        height: 3px;
      }
  
      .tab-content {

        height: 40vh;
        overflow-y: scroll;

        .content-card {

          background: #ffffff;
          border-radius: 8px;

          border: 1px solid #e4e7ed;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

          margin-bottom: 16px;

          overflow: hidden;

          transition: all 0.2s ease;
  
          &:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          }

  
          .card-header {

            padding: 14px 18px;

            background: #f8f9fa;
            border-bottom: 1px solid #e4e7ed;
            display: flex;
            align-items: center;
            gap: 8px;
  
            i {

              font-size: 16px;

              color: #409EFF;

              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
  
            &:hover i {
              transform: scale(1.1) rotate(5deg);
              color: #66b1ff;

            }
  
            .card-title {
              font-size: 15px;
              font-weight: 600;
              color: #303133;
            }
          }
  
          .card-body {

            padding: 18px;

          }

        }
      }
    }
  

    // 消费行为网格

    .behavior-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);

      gap: 14px;

  
      .behavior-item {
        background: #f8f9fa;

        border-radius: 8px;

        border: 1px solid #e4e7ed;

        padding: 14px;

        display: flex;
        align-items: center;
        gap: 12px;

        transition: all 0.2s ease;

        &:hover {

          background: #ffffff;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
          border-color: #c0c4cc;

        }
  

        .behavior-icon {
          width: 40px;
          height: 40px;

          border-radius: 6px;
          background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);

          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;

          font-size: 16px;

          flex-shrink: 0;

          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
        }
  
        &:hover .behavior-icon {
          transform: scale(1.1) rotate(5deg);
          background: linear-gradient(135deg, #66b1ff 0%, #409EFF 100%);
          box-shadow: 0 4px 10px rgba(64, 158, 255, 0.4);

        }

        .behavior-content {
          flex: 1;
          min-width: 0;

          .behavior-label {

            font-size: 13px;

            color: #909399;

            margin-bottom: 8px;
            font-weight: 500;

          }

          .behavior-value {

            font-size: 16px;

            color: #303133;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

        }
      }
    }
  

    // 消费分析布局
    .analysis-layout {
      display: flex;

      gap: 16px;

      flex-wrap: wrap;
  
      .analysis-item {
        flex: 1;
        min-width: 200px;
        background: #f8f9fa;

        border-radius: 8px;

        border: 1px solid #e4e7ed;

        padding: 14px;

        display: flex;

        align-items: center;
        gap: 12px;

        transition: all 0.2s ease;

        &:hover {

          background: #ffffff;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
          border-color: #c0c4cc;

        }
  

        .analysis-icon {
          width: 40px;
          height: 40px;

          border-radius: 6px;
          background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);

          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;

          font-size: 16px;

          flex-shrink: 0;

          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow: 0 2px 6px rgba(103, 194, 58, 0.3);
        }
  
        &:hover .analysis-icon {
          transform: scale(1.1) rotate(5deg);
          background: linear-gradient(135deg, #85ce61 0%, #67C23A 100%);
          box-shadow: 0 4px 10px rgba(103, 194, 58, 0.4);

        }
  

        .analysis-content {

          flex: 1;

          min-width: 0;
  
          .analysis-label {

            font-size: 13px;

            color: #909399;

            margin-bottom: 8px;
            font-weight: 500;

          }
  
          .analysis-value {

            font-size: 16px;

            color: #303133;
            font-weight: 600;
          }

        }
      }
    }
  

    // 趋势图

    .trend-chart {
      width: 100%;

      height: 360px;
      border-radius: 6px;
      background: #fafbfc;
      padding: 8px;

    }
  

    // 分页

    .pagination-bar {
      display: flex;
      justify-content: flex-end;

      padding: 14px 0 0 0;
      margin-top: 14px;

      border-top: 1px solid #e4e7ed;

    }
  

    // 表格样式优化
    ::v-deep .el-table {
      border-radius: 6px;
      overflow: hidden;
  
      .el-table__header {
        background: linear-gradient(135deg, rgba(64, 158, 255, 0.08) 0%, rgba(102, 177, 255, 0.05) 100%);
  
        th {
          background: transparent !important;
          border-bottom: 1px solid rgba(64, 158, 255, 0.2);
          color: #303133;
          font-weight: 600;
          font-size: 13px;
          padding: 12px 0;
        }
      }
  
      .el-table__body {
        tr {
          transition: all 0.2s ease;
  
          &:hover {
            background: linear-gradient(90deg, rgba(64, 158, 255, 0.06) 0%, rgba(102, 177, 255, 0.04) 100%) !important;
          }
  
          td {
            border-bottom: 1px solid #f0f2f5;
            padding: 12px 0;
            color: #606266;
            font-size: 13px;
          }
        }
  
        tr.el-table__row--striped {
          background: #fafbfc;
        }
      }
    }
  
    // 滚动条美化
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
  
    ::-webkit-scrollbar-track {
      background: rgba(240, 242, 245, 0.5);
      border-radius: 4px;
    }
  
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, #c0c4cc 0%, #909399 100%);
      border-radius: 4px;
      transition: background 0.3s;
  
      &:hover {
        background: linear-gradient(135deg, #909399 0%, #606266 100%);
      }
    }
  

    .text-muted {
      color: #909399;
      font-size: 13px;
    }
  }
  </style>