baodeng_xcx/page_shanghu/yonghu/yonghuxq.vue
2025-05-14 15:14:12 +08:00

662 lines
13 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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">
641469121647812345678912
</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>