Guoguo
aff8c2d9b5
Replace '光子美容仪' with '智美'/'智能面膜'/'我的设备' throughout. Replace '护理' with '使用' in all UI text. Replace '皮肤' with '检测'/'智能' where applicable. Replace 🌸 with 💎 for brand identity. Internal code (variable names, API paths, file names) unchanged.
376 行
10 KiB
Vue
376 行
10 KiB
Vue
<template>
|
||
<view>
|
||
<view class="back-link" @click="$emit('navigate', 'user')">‹ 返回用户列表</view>
|
||
|
||
<view class="page-card" v-if="user">
|
||
<view class="page-header">
|
||
<text class="page-title">👥 用户详情 - {{ user.nickname || user.user_id }}</text>
|
||
<view class="header-actions">
|
||
<button class="btn-default btn-sm" v-if="user.devices && user.devices.length > 0" @click="onUnbindAll">解绑全部设备</button>
|
||
<button class="btn-danger btn-sm" v-if="user.status !== 3" @click="onDeactivate">注销用户</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="user-profile">
|
||
<view class="avatar">👤</view>
|
||
<view class="profile-info">
|
||
<text class="user-name">{{ user.nickname || '-' }}</text>
|
||
<text class="user-phone">{{ user.phone || '-' }}</text>
|
||
<view class="profile-badges">
|
||
<text :class="statusBadge(user.status)">{{ statusText(user.status) }}</text>
|
||
<text :class="user.subscription_status === 1 ? 'badge badge-success' : 'badge badge-default'">{{ subStatusText(user.subscription_status) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="stats-row">
|
||
<view class="stat-item pink-bg">
|
||
<text class="stat-value">{{ user.treatment_count || 0 }}</text>
|
||
<text class="stat-label">使用次数</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-value">{{ user.total_duration ? Math.round(user.total_duration / 3600000) + 'h' : '0h' }}</text>
|
||
<text class="stat-label">累计时长</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-value">¥{{ user.total_spent || 0 }}</text>
|
||
<text class="stat-label">累计消费</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="page-card" v-if="user">
|
||
<view class="card-title">基本信息</view>
|
||
<view class="info-grid">
|
||
<view class="info-item">
|
||
<text class="info-label">用户状态</text>
|
||
<text class="info-value"><text :class="statusBadge(user.status)">{{ statusText(user.status) }}</text></text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">绑定设备</text>
|
||
<text class="info-value">{{ user.devices && user.devices.length > 0 ? user.devices[0].device_name || user.devices[0].device_id : '无' }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">注册时间</text>
|
||
<text class="info-value">{{ formatDate(user.created_at) }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">订阅类型</text>
|
||
<text class="info-value">{{ subTypeText(user.subscription_type) }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">订阅到期</text>
|
||
<text class="info-value">{{ formatDate(user.subscription_expire) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="page-card" v-if="user && user.devices && user.devices.length > 0">
|
||
<view class="card-title">绑定设备</view>
|
||
<view class="data-table">
|
||
<view class="t-header">
|
||
<view class="t-row">
|
||
<text class="t-th flex2">设备编号</text>
|
||
<text class="t-th flex2">设备名称</text>
|
||
<text class="t-th flex1">操作</text>
|
||
</view>
|
||
</view>
|
||
<view class="t-body">
|
||
<view class="t-row" v-for="device in user.devices" :key="device.device_id">
|
||
<text class="t-td flex2">{{ device.device_id }}</text>
|
||
<text class="t-td flex2">{{ device.device_name || '-' }}</text>
|
||
<text class="t-td flex1">
|
||
<text class="action-link" @click="onDeviceDetail(device)">详情</text>
|
||
<text class="action-link danger-link" @click="onUnbindDevice(device)">解绑</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="page-card" v-if="user && user.recent_treatments">
|
||
<view class="card-title">使用记录</view>
|
||
<view class="data-table">
|
||
<view class="t-header">
|
||
<view class="t-row">
|
||
<text class="t-th flex2">时间</text>
|
||
<text class="t-th flex1">时长</text>
|
||
<text class="t-th flex2">设备</text>
|
||
</view>
|
||
</view>
|
||
<view class="t-body">
|
||
<view class="t-row" v-for="(t, idx) in user.recent_treatments" :key="idx">
|
||
<text class="t-td flex2">{{ formatDate(t.start_time) }}</text>
|
||
<text class="t-td flex1">{{ Math.floor((t.total_duration_ms || 0) / 60000) }}分钟</text>
|
||
<text class="t-td flex2">{{ t.device_id || '-' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="view-all" v-if="user.treatment_count > 5">
|
||
<text class="view-all-link" @click="goRecords">查看全部{{ user.treatment_count }}条记录 ›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { get, post } from '../utils/request'
|
||
import { formatDateShort } from '../utils/format'
|
||
|
||
export default {
|
||
props: {
|
||
user_id: { type: String, default: '' }
|
||
},
|
||
data() {
|
||
return {
|
||
user: null,
|
||
userId: ''
|
||
}
|
||
},
|
||
watch: {
|
||
user_id: {
|
||
immediate: true,
|
||
handler(val) {
|
||
if (val) {
|
||
this.userId = val
|
||
this.loadUser()
|
||
}
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
async loadUser() {
|
||
try {
|
||
this.user = await get('/api/v1/admin/users/' + this.userId)
|
||
} catch (e) {
|
||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||
}
|
||
},
|
||
goRecords() {
|
||
this.$emit('navigate', 'record', { user_id: this.userId })
|
||
},
|
||
onDeviceDetail(device) {
|
||
this.$emit('navigate', 'device-detail', { device_id: device.device_id })
|
||
},
|
||
onUnbindDevice(device) {
|
||
var self = this
|
||
uni.showModal({
|
||
title: '确认解绑',
|
||
content: '确定要解绑设备 ' + device.device_id + ' 吗？',
|
||
success: async function (res) {
|
||
if (!res.confirm) return
|
||
try {
|
||
await post('/api/v1/admin/users/' + self.userId + '/unbind', { device_id: device.device_id })
|
||
uni.showToast({ title: '解绑成功', icon: 'success' })
|
||
self.loadUser()
|
||
} catch (e) {
|
||
uni.showToast({ title: '解绑失败', icon: 'none' })
|
||
}
|
||
}
|
||
})
|
||
},
|
||
onUnbindAll() {
|
||
var self = this
|
||
uni.showModal({
|
||
title: '确认解绑',
|
||
content: '确定要解绑该用户当前绑定的全部设备吗？',
|
||
success: async function (res) {
|
||
if (!res.confirm) return
|
||
try {
|
||
await post('/api/v1/admin/users/' + self.userId + '/unbind', {})
|
||
uni.showToast({ title: '解绑成功', icon: 'success' })
|
||
self.loadUser()
|
||
} catch (e) {
|
||
uni.showToast({ title: '解绑失败', icon: 'none' })
|
||
}
|
||
}
|
||
})
|
||
},
|
||
onDeactivate() {
|
||
var self = this
|
||
uni.showModal({
|
||
title: '确认注销',
|
||
content: '注销后该用户将无法继续登录，当前绑定设备也会被解绑。确定继续吗？',
|
||
success: async function (res) {
|
||
if (!res.confirm) return
|
||
try {
|
||
await post('/api/v1/admin/users/' + self.userId + '/deactivate', {})
|
||
uni.showToast({ title: '已注销', icon: 'success' })
|
||
self.loadUser()
|
||
} catch (e) {
|
||
uni.showToast({ title: '注销失败', icon: 'none' })
|
||
}
|
||
}
|
||
})
|
||
},
|
||
statusText(status) {
|
||
const map = { 1: '正常', 2: '禁用', 3: '已注销' }
|
||
return map[status] || '未知'
|
||
},
|
||
statusBadge(status) {
|
||
const map = { 1: 'badge badge-success', 2: 'badge badge-warning', 3: 'badge badge-error' }
|
||
return map[status] || 'badge badge-default'
|
||
},
|
||
subStatusText(status) {
|
||
return status === 1 ? '已订阅' : '未订阅'
|
||
},
|
||
subTypeText(type) {
|
||
const map = { yearly: '年卡', monthly: '月卡', trial: '试用' }
|
||
return map[type] || '-'
|
||
},
|
||
formatDate: formatDateShort
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import '../styles/common.css';
|
||
|
||
.back-link {
|
||
color: #E6508C;
|
||
font-size: 14px;
|
||
margin-bottom: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.page-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.user-profile {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.avatar {
|
||
width: 64px;
|
||
height: 64px;
|
||
border-radius: 50%;
|
||
background: #f0f0f0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32px;
|
||
}
|
||
|
||
.profile-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.user-name {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.user-phone {
|
||
font-size: 14px;
|
||
color: #999;
|
||
}
|
||
|
||
.profile-badges {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.stats-row {
|
||
display: flex;
|
||
gap: 16px;
|
||
}
|
||
|
||
.stat-item {
|
||
flex: 1;
|
||
background: #fafafa;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-item.pink-bg {
|
||
background: #fff0f6;
|
||
}
|
||
|
||
.stat-value {
|
||
display: block;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: #333;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.pink-bg .stat-value {
|
||
color: #E6508C;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 13px;
|
||
color: #999;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.info-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 13px;
|
||
color: #999;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.view-all {
|
||
text-align: center;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.view-all-link {
|
||
color: #E6508C;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.danger-link {
|
||
color: #ff4d4f;
|
||
}
|
||
</style>
|