<template>
  <view class="page">
    <u-navbar title="用户详情" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff"
    	title-size='36' height='50'></u-navbar>
    <!-- 标签页 -->
    <view class="tabs">
      <view :class="['tab-item', actindex == 0 ? 'active' : '']" @click="btntab(0)">用户资料</view>
      <view :class="['tab-item', actindex == 1 ? 'active' : '']" @click="btntab(1)">消费信息</view>
      <view :class="['tab-item', actindex == 2 ? 'active' : '']" @click="btntab(2)">消费记录</view>
      <view :class="['tab-item', actindex == 3 ? 'active' : '']" @click="btntab(3)">赠送次数</view>
    </view>
    <scroll-view v-if="actindex == 0" class="content" scroll-y>
      <!-- 用户信息 -->
      <view class="user-info">
        <view class="avatar">
          <image class="avatar-img" src="https://ai-public.mastergo.com/ai/img_res/8b45a0818300bdb4428ad62e9d6a380c.jpg" mode="aspectFill"></image>
        </view>
        <view class="nickname">微信用户</view>
        <view class="phone">电话：134****1234</view>
      </view>
      <!-- 账户信息 -->
      <view class="account-info">
        <view class="account-card">
          <view class="card-label">总充值(元)</view>
          <view class="card-value">150.23</view>
        </view>
        <view class="account-card">
          <view class="card-label">累积消费(元)</view>
          <view class="card-value">100.23</view>
        </view>
      </view>
      <!-- 详细信息 -->
      <view class="detail-info">
        <view class="info-item">
          <text class="item-label">用户状态</text>
          <text class="item-value">
            <text class="status-dot"></text>
            正常
          </text>
        </view>
        <view class="info-item">
          <text class="item-label">用户编号</text>
          <text class="item-value">2025321681578</text>
        </view>
        <view class="info-item">
          <text class="item-label">注册时间</text>
          <text class="item-value">2025-03-11 20:23:56</text>
        </view>
        <view class="info-item">
          <text class="item-label">最近消费</text>
          <text class="item-value">2025-03-11 20:23:56</text>
        </view>
      </view>
      <!-- 底部按钮 -->
      <view class="bottom-button">
        <button class="gift-btn" @click="zengsongflag = true">赠送爆灯次数</button>
      </view>
    </scroll-view>
	
	<view class="zengsong" v-if="zengsongflag">
	    <view class="top">
	    	赠送爆灯次数
	    </view>	
		<view class="cen">
			爆灯次数
		</view>
		<input type="text" placeholder="请输入爆灯次数" />
		<view class="anniu">
			<view class="qx" @click="zengsongflag = false">
				取消
			</view>
			<view class="qd">
				确定
			</view>
		</view>
	</view>
	<view class="mask" v-if="zengsongflag"></view>
	
	<view class="xfxx" v-if="actindex == 1">
		<view class="one">
			<view class="two">
                 充值总额				
			</view>
			<view class="thr" style="color: #FF8998;">
				￥200.00
			</view>
		</view>
		<view class="one">
			<view class="two">
		         爆灯充值				
			</view>
			<view class="thr" style="color: #FF8998;">
				￥100.00
			</view>
		</view>
		<view class="one">
			<view class="two">
		        爆灯消费次数
			</view>
			<view class="thr">
				3次
			</view>
		</view>
		<view class="one">
			<view class="two">
		        累积爆灯时长
			</view>
			<view class="thr">
				5小时20分钟
			</view>
		</view>
		<view class="one">
			<view class="two">
		       最近消费来源
			</view>
			<view class="thr" style="color: #FF8998;">
				爆灯充值
			</view>
		</view>
		<view class="one">
			<view class="two">
		        最近消费时间
			</view>
			<view class="thr">
				2025-03-11 20:23:56
			</view>
		</view>
	</view>
	
	<view class="" v-if="actindex == 2">
		<view class="header">
		      <view class="date-picker">
		        <text class="date-text">2025-03-18</text>
		        <text class="date-separator">--</text>
		        <text class="date-text">2025-03-18</text>
		      </view>
		      <view class="filter">
		        <text class="filter-text">选择类型</text>
		        <uni-icons type="bottom" size="14" color="#8A8A8A"/>
		      </view>
		    </view>
		    
		    <scroll-view class="content" scroll-y>
		      <view class="timeline">
		        <view class="timeline-group" v-for="(group, index) in timelineData" :key="index">
		          <view class="timeline-date">{{ group.date }}</view>
		          <view class="timeline-items">
		            <view class="timeline-item" v-for="(item, itemIndex) in group.items" :key="itemIndex">
		              <view class="timeline-dot"></view>
		              <view class="timeline-card">
		                <view class="card-header">
		                  <text class="card-title">{{ item.title }}</text>
		                  <text class="card-time">{{ item.time }}</text>
		                </view>
		                <view class="card-content">
		                  <text class="card-desc">{{ item.description }}</text>
		                </view>
		              </view>
		            </view>
		          </view>
		        </view>
		      </view>
		    </scroll-view>
	</view>
	
	<view class="" v-if="actindex == 3">
		<view class="list">
			<view class="li">
				<view class="top">
					<view class="lt">
						爆灯3次
					</view>
					<view class="rt">
						已使用
					</view>
				</view>
				<view class="cen">
					<view class="lt">
						用户：
					</view>
					<view class="rt">
					    6414691216478（12345678912）
					</view>
				</view>
				<view class="cen">
					<view class="lt">
						赠送日期：
					</view>
					<view class="rt">
					   2025-03-21 15:17:56
					</view>
				</view>
				<view class="cen">
					<view class="lt">
						使用日期：
					</view>
					<view class="rt">
					   2025-03-21 15:17:56
					</view>
				</view>
			</view>
		</view>
	</view>
	
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 可以在这里定义数据
	  actindex:0,
	  timelineData: [
	          {
	            date: '2025-03-12',
	            items: [
	              {
	                title: '爆灯消费',
	                time: '18:22:56',
	                description: '用户在【C-1】爆灯3次'
	              },
	              {
	                title: '爆灯充值',
	                time: '18:22:56',
	                description: '用户充值爆灯3次，消费￥100.00'
	              }
	            ]
	          },
	          {
	            date: '2025-03-11',
	            items: [
	              {
	                title: '爆灯消费',
	                time: '18:22:56',
	                description: '用户在【C-1】爆灯3次'
	              },
	              {
	                title: '礼物消费',
	                time: '18:22:56',
	                description: '用户下单【库库熊x1】，消费￥10.00'
	              },
	              {
	                title: '兑换消费',
	                time: '18:22:56',
	                description: '用户兑换【鸡尾酒】消费100积分+10.5元'
	              }
	            ]
	          }
	        ],
			zengsongflag:false
    }
  },
  methods: {
    // 可以在这里添加方法
	btntab(num){
		this.actindex = num
	}
  },
  onLoad() {
    // 页面加载时的逻辑
  }
}
</script>

<style lang="less">
page {
  height: 100%;
  background-color: #0B0B0B;
}
.zengsong{
	position: fixed;
	top: 562rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 656rpx;
	max-height: 392rpx;
	background: #272727;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	z-index: 2;
	.top{
		font-size: 36rpx;
		color: #FFFFFF;
		width: 100%;
		text-align: center;
		margin-top: 40rpx;
	}
	.cen{
		font-size: 28rpx;
		color: #D8D8D8;
		margin-left: 50rpx;
		margin-top: 22rpx;
	}
	input{
		margin: auto;
		padding-left: 10rpx;
		height: 60rpx;
		color: #fff;
		box-sizing: border-box;
		margin-top: 28rpx;
		border-bottom: 1px solid #808080;
		width: 586rpx;
	}
	.anniu{
		display: flex;
		justify-content: space-between;
		text-align: center;
		margin-top: 50rpx;
		border-top: 1px solid #808080;
		.qd{
			font-size: 36rpx;
			color: #FF8998;
			border-left: 1px solid #808080;
		}
		view{
			width: 50%;
			height: 104rpx;
			line-height: 104rpx;
			font-size: 36rpx;
			color: #808080;
		}
	}
}
.mask{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 1;
	background-color: #000;
	opacity: .5;
}
.list{
	.li{
		width: 698rpx;
		height: 280rpx;
		background: #010000;
		margin: auto;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 22rpx;
		padding: 40rpx 38rpx;
		box-sizing: border-box;
		.top{
			display: flex;
			justify-content: space-between;
			.lt{
				font-size: 36rpx;
				color: #FFFFFF;
			}
			.rt{
				font-size: 28rpx;
				color: #929292;
			}
		}
		.cen{
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;
			.lt{
				font-size: 24rpx;
				color: #AAAAAA;
			}
			.rt{
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}
}
.header {
  padding: 30rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #232429;
  flex-shrink: 0;
}

.date-picker {
  display: flex;
  align-items: center;
}

.date-text {
  font-size: 14px;
  color: #8A8A8A;
}

.date-separator {
  margin: 0 20rpx;
  color: #8A8A8A;
  font-size: 14px;
}

.filter {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.filter-text {
  font-size: 14px;
  color: #8A8A8A;
}

.content {
  flex: 1;
  overflow: auto;
}

.timeline {
  padding: 30rpx;
}

.timeline-group {
  margin-bottom: 60rpx;
}

.timeline-date {
  font-size: 14px;
  color: #FF8998;
  margin-bottom: 30rpx;
}

.timeline-items {
  position: relative;
}

.timeline-item {
  position: relative;
  padding-left: 40rpx;
  margin-bottom: 30rpx;
}

.timeline-dot {
  position: absolute;
  left: 0;
  top: 30rpx;
  width: 16rpx;
  height: 16rpx;
  background-color: #FF8998;
  border-radius: 50%;
}

.timeline-card {
  background-color: #232429;
  border-radius: 16rpx;
  padding: 30rpx;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

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

.card-time {
  font-size: 12px;
  color: #8A8A8A;
}

.card-content {
  margin-top: 10rpx;
}

.card-desc {
  font-size: 14px;
  color: #8A8A8A;
  line-height: 1.5;
}
.xfxx{
	width: 100%;
	max-height: 954rpx;
	background: #0B0B0B;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	padding: 40rpx 42rpx;
	padding-top: 0;
	box-sizing: border-box;
	margin-top: 10rpx;
	.one{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 42rpx;
		.two{
			font-size: 28rpx;
			color: #AAAAAA;
		}
		.thr{
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
}
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.nav-bar {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  background-color: #0B0B0B;
}
.nav-left, .nav-right {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-title {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
}
.tabs {
  display: flex;
  height: 88rpx;
  background-color: #0B0B0B;
  align-items: center;
  padding: 0 20rpx;
  box-sizing: border-box;
}
.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
.tab-item.active {
   width: 166rpx;
   height: 62rpx;
   background: #FCE9EA;
   border-radius: 6rpx 6rpx 6rpx 6rpx;
   border: 1rpx solid #FF8998;
   font-size: 28rpx;
   color: #FF8998;
}
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #ffffff;
}
.content {
  flex: 1;
  overflow: auto;
}
.user-info {
  padding: 48rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #0B0B0B;
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}
.avatar-img {
  width: 100%;
  height: 100%;
}
.nickname {
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 12rpx;
}
.phone {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
.account-info {
  display: flex;
  padding: 32rpx;
  gap: 24rpx;
}
.account-card {
  flex: 1;
  padding: 24rpx;
  border-radius: 16rpx;
  background: #FCE9EA;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  border: 1rpx solid #FF8998;
}
.card-label {
 font-size: 24rpx;
 color: #FF8998;
  margin-bottom: 12rpx;
}
.card-value {
  font-size: 36rpx;
  color: #FF8998;
  font-weight: 600;
}
.detail-info {
  margin: 24rpx 32rpx;
  background-color: #0B0B0B;
  border-radius: 16rpx;
  padding: 0 32rpx;
}
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.info-item:last-child {
  border-bottom: none;
}
.item-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
.item-value {
  font-size: 14px;
  color: #ffffff;
  display: flex;
  align-items: center;
}
.status-dot {
  width: 12rpx;
  height: 12rpx;
  background-color: #67c23a;
  border-radius: 6rpx;
  margin-right: 8rpx;
}
.bottom-button {
  padding: 32rpx;
}
.gift-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #FF8998;
  color: #fff; 
  font-size: 16px;
  border-radius: 44rpx;
}
</style>