整合api请求、添加购买会员卡页面、登陆页面
This commit is contained in:
future
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<view class="message-skeleton">
|
||||
<view v-for="i in 6" :key="i" class="skeleton-item">
|
||||
<view class="skeleton-icon skeleton-shimmer"></view>
|
||||
<view class="skeleton-content">
|
||||
<view class="skeleton-title skeleton-shimmer"></view>
|
||||
<view class="skeleton-desc skeleton-shimmer"></view>
|
||||
<view class="skeleton-footer">
|
||||
<view class="skeleton-tag skeleton-shimmer"></view>
|
||||
<view class="skeleton-time skeleton-shimmer"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message-skeleton {
|
||||
padding: 8rpx 24rpx;
|
||||
}
|
||||
|
||||
.skeleton-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx 0;
|
||||
margin-bottom: 12rpx;
|
||||
background: var(--bg-white);
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.skeleton-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skeleton-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.skeleton-title {
|
||||
height: 32rpx;
|
||||
width: 60%;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.skeleton-desc {
|
||||
height: 28rpx;
|
||||
width: 85%;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.skeleton-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.skeleton-tag {
|
||||
height: 24rpx;
|
||||
width: 80rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.skeleton-time {
|
||||
height: 24rpx;
|
||||
width: 100rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
:deep(.skeleton-shimmer) {
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="tab-page__header">
|
||||
<view class="tab-page__header" :style="{ padding: `${statusBarHeight}rpx`, height: `${statusBarHeight + 80}rpx` }">
|
||||
<view v-if="showBack" :class="['tab-page__back-btn', { 'tab-page__back-btn--animate': isAnimating }]" @tap="goBack">
|
||||
<text class="tab-page__back-icon">‹</text>
|
||||
</view>
|
||||
@@ -29,8 +29,11 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
const isAnimating = ref(false)
|
||||
const statusBarHeight = ref(20)
|
||||
|
||||
onMounted(() => {
|
||||
const sysInfo = uni.getSystemInfoSync()
|
||||
statusBarHeight.value = sysInfo.statusBarHeight || 20
|
||||
if (props.showBack) {
|
||||
isAnimating.value = true
|
||||
}
|
||||
@@ -49,7 +52,7 @@ function goBack() {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tab-page__header {
|
||||
padding: 48rpx 32rpx 16rpx;
|
||||
padding: 0 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
@@ -89,7 +92,7 @@ function goBack() {
|
||||
font-size: 36rpx;
|
||||
color: $text-dark;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
|
||||
.tab-page__title-wrap {
|
||||
|
||||
@@ -4,24 +4,243 @@
|
||||
v-for="(item, index) in entries"
|
||||
:key="index"
|
||||
class="entry-item"
|
||||
@tap="QEClick(item.path)"
|
||||
@tap="handleEntryClick(item)"
|
||||
>
|
||||
<view :class="['entry-icon', { accent: item.accent }]">
|
||||
<image :src="item.icon" mode="aspectFit" class="icon-img" />
|
||||
<view v-if="item.title === '消息' && hasUnread" class="badge-dot"></view>
|
||||
</view>
|
||||
<text class="entry-title">{{ item.title }}</text>
|
||||
<text class="entry-desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="showCheckInMenu" class="checkin-menu-overlay" @tap="showCheckInMenu = false">
|
||||
<view class="checkin-menu" @tap.stop>
|
||||
<view class="menu-item" @tap="handleStoreCheckIn">
|
||||
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/checkIn.png" mode="aspectFit" class="menu-icon" />
|
||||
<text class="menu-text">到店签到</text>
|
||||
</view>
|
||||
<view class="menu-item" @tap="handleGroupCourseCheckIn">
|
||||
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/course.png" mode="aspectFit" class="menu-icon" />
|
||||
<text class="menu-text">团课签到</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { getUnreadMessageCount } from '@/api/main.js'
|
||||
|
||||
const QEClick = path => {
|
||||
uni.navigateTo({
|
||||
url:path
|
||||
})
|
||||
const unreadCount = ref(0)
|
||||
const showCheckInMenu = ref(false)
|
||||
const TEST_MODE = false
|
||||
|
||||
// 是否有未读消息（用于显示红点）
|
||||
const hasUnread = computed(() => unreadCount.value > 0)
|
||||
|
||||
const loadUnreadCount = async () => {
|
||||
if (TEST_MODE) {
|
||||
unreadCount.value = 3
|
||||
return
|
||||
}
|
||||
|
||||
const token = uni.getStorageSync('token')
|
||||
if (!token) {
|
||||
console.log('[QuickEntry] token 不存在，跳过请求')
|
||||
unreadCount.value = 0
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const userId = uni.getStorageSync('userId') || 1
|
||||
console.log('[QuickEntry] 请求未读消息数量, userId:', userId)
|
||||
const res = await getUnreadMessageCount(userId)
|
||||
console.log('[QuickEntry] 未读消息数量响应数据:', res)
|
||||
console.log('[QuickEntry] 响应完整类型:', typeof res, Object.prototype.toString.call(res))
|
||||
|
||||
let count = 0
|
||||
// 兼容多种响应格式
|
||||
if (typeof res === 'number') {
|
||||
count = res
|
||||
console.log('[QuickEntry] 使用直接数字格式')
|
||||
} else if (typeof res === 'string' && res.trim() !== '') {
|
||||
// 处理字符串数字，如 "20"
|
||||
count = parseInt(res, 10)
|
||||
console.log('[QuickEntry] 使用字符串转数字格式:', count)
|
||||
} else if (res !== null && typeof res === 'object') {
|
||||
if (typeof res.count === 'number') {
|
||||
count = res.count
|
||||
console.log('[QuickEntry] 使用 res.count')
|
||||
} else if (res.data !== undefined) {
|
||||
if (typeof res.data === 'number') {
|
||||
count = res.data
|
||||
console.log('[QuickEntry] 使用 res.data')
|
||||
} else if (typeof res.data?.count === 'number') {
|
||||
count = res.data.count
|
||||
console.log('[QuickEntry] 使用 res.data.count')
|
||||
} else if (Array.isArray(res.data?.content)) {
|
||||
count = res.data.content.length
|
||||
console.log('[QuickEntry] 使用 res.data.content.length')
|
||||
} else if (Array.isArray(res.content)) {
|
||||
count = res.content.length
|
||||
console.log('[QuickEntry] 使用 res.content.length')
|
||||
} else if (typeof res.data?.total === 'number') {
|
||||
count = res.data.total
|
||||
console.log('[QuickEntry] 使用 res.data.total')
|
||||
} else if (typeof res.total === 'number') {
|
||||
count = res.total
|
||||
console.log('[QuickEntry] 使用 res.total')
|
||||
}
|
||||
} else if (Array.isArray(res.content)) {
|
||||
count = res.content.length
|
||||
console.log('[QuickEntry] 使用 res.content.length')
|
||||
} else if (typeof res.total === 'number') {
|
||||
count = res.total
|
||||
console.log('[QuickEntry] 使用 res.total')
|
||||
}
|
||||
} else {
|
||||
console.log('[QuickEntry] 无法解析响应格式，res:', res)
|
||||
}
|
||||
|
||||
unreadCount.value = count
|
||||
uni.setStorageSync('unreadMessageCount', count)
|
||||
console.log('[QuickEntry] 最终未读数量:', count, 'hasUnread:', hasUnread.value)
|
||||
} catch (e) {
|
||||
console.error('[QuickEntry] 获取未读消息数失败:', e)
|
||||
try {
|
||||
const count = uni.getStorageSync('unreadMessageCount')
|
||||
unreadCount.value = count || 0
|
||||
} catch (e2) {
|
||||
unreadCount.value = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleEntryClick = (item) => {
|
||||
if (item.title === '消息' || item.title === '健身数据') {
|
||||
if (TEST_MODE) {
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
if (item.isTabBar) {
|
||||
uni.switchTab({ url: item.path })
|
||||
} else {
|
||||
uni.navigateTo({ url: item.path })
|
||||
}
|
||||
}, 300)
|
||||
return
|
||||
}
|
||||
|
||||
const token = uni.getStorageSync('token')
|
||||
if (!token) {
|
||||
uni.showModal({
|
||||
title: '请登录',
|
||||
content: '是否跳转到登录页面？',
|
||||
confirmText: '确定',
|
||||
cancelText: '取消',
|
||||
confirmColor: '#FF6B35',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
if (item.title === '消息') {
|
||||
uni.navigateTo({
|
||||
url: `${item.path}?unreadCount=${unreadCount.value}`
|
||||
})
|
||||
} else if (item.isTabBar) {
|
||||
uni.switchTab({ url: item.path })
|
||||
} else {
|
||||
uni.navigateTo({ url: item.path })
|
||||
}
|
||||
}, 300)
|
||||
} else if (item.title === '签到') {
|
||||
const token = uni.getStorageSync('token')
|
||||
if (!token) {
|
||||
uni.showModal({
|
||||
title: '请登录',
|
||||
content: '是否跳转到登录页面？',
|
||||
confirmText: '确定',
|
||||
cancelText: '取消',
|
||||
confirmColor: '#FF6B35',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
showCheckInMenu.value = !showCheckInMenu.value
|
||||
} else if (item.path) {
|
||||
// tabbar 页面使用 switchTab
|
||||
if (item.isTabBar) {
|
||||
uni.switchTab({
|
||||
url: item.path
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: item.path
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleStoreCheckIn = () => {
|
||||
showCheckInMenu.value = false
|
||||
uni.navigateTo({
|
||||
url: '/pages/checkIn/checkIn'
|
||||
})
|
||||
}
|
||||
|
||||
const handleGroupCourseCheckIn = () => {
|
||||
showCheckInMenu.value = false
|
||||
uni.scanCode({
|
||||
onlyFromCamera: true,
|
||||
success: (res) => {
|
||||
console.log('扫码结果:', res)
|
||||
uni.showToast({
|
||||
title: '扫码成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('扫码失败:', err)
|
||||
uni.showToast({
|
||||
title: '扫码失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadUnreadCount()
|
||||
})
|
||||
|
||||
uni.$on('pageShow', () => {
|
||||
loadUnreadCount()
|
||||
})
|
||||
|
||||
const entries = [
|
||||
{
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/course.png',
|
||||
@@ -34,19 +253,23 @@ const entries = [
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/plan.png',
|
||||
title: '训练计划',
|
||||
desc: '个性定制',
|
||||
accent: true
|
||||
accent: true,
|
||||
path: "/pages/train/index",
|
||||
isTabBar: true
|
||||
},
|
||||
{
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/data.png',
|
||||
title: '健身数据',
|
||||
desc: '记录分析',
|
||||
accent: false
|
||||
accent: false,
|
||||
path: "/pages/memberInfo/bodyTestTrend"
|
||||
},
|
||||
{
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/message.png',
|
||||
title: '消息',
|
||||
desc: '通知消息',
|
||||
accent: true
|
||||
accent: true,
|
||||
path: "/pages/message/index"
|
||||
},
|
||||
{
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/checkIn.png',
|
||||
@@ -91,6 +314,20 @@ const entries = [
|
||||
justify-content: center;
|
||||
margin-bottom: 16rpx;
|
||||
box-shadow: 0 6rpx 20rpx rgba(130, 220, 130, 0.35);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.badge-dot {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 8rpx;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background: linear-gradient(135deg, #FF4757, #FF2D55);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2rpx 8rpx rgba(255, 71, 87, 0.5);
|
||||
z-index: 99;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.icon-img {
|
||||
@@ -113,4 +350,93 @@ const entries = [
|
||||
font-size: 22rpx;
|
||||
color: var(--tabbar-text-inactive);
|
||||
}
|
||||
|
||||
.checkin-menu-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
padding-top: 280rpx;
|
||||
padding-right: 60rpx;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.checkin-menu {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 140rpx;
|
||||
background: white;
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
|
||||
padding: 16rpx;
|
||||
min-width: 320rpx;
|
||||
animation: slideDown 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -24rpx;
|
||||
right: 60rpx;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 24rpx solid transparent;
|
||||
border-right: 24rpx solid transparent;
|
||||
border-bottom: 24rpx solid white;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-40rpx) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx;
|
||||
border-radius: 16rpx;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
& + .menu-item {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #2D4A5A;
|
||||
}
|
||||
</style>
|
||||
@@ -6,7 +6,7 @@
|
||||
<!-- 区域标题 -->
|
||||
<text class="section-title">推荐课程</text>
|
||||
<!-- 查看更多按钮 -->
|
||||
<view class="view-more" @tap="goMore">
|
||||
<view class="view-more" @click="handleViewMore">
|
||||
<text>查看更多</text>
|
||||
<text class="arrow">
|
||||
<uni-icons type="right" size="20" color="#8CA0B0"/>
|
||||
@@ -19,28 +19,68 @@
|
||||
<!-- 课程列表 -->
|
||||
<view class="courses-list">
|
||||
<!-- 课程卡片 -->
|
||||
<CourseCard
|
||||
v-for="(course, index) in displayCourses"
|
||||
<view
|
||||
v-for="(course, index) in courses"
|
||||
:key="course.id || index"
|
||||
:course="course"
|
||||
@join="handleJoinCourse"
|
||||
/>
|
||||
class="course-card"
|
||||
>
|
||||
<!-- 课程图片区域 -->
|
||||
<view class="course-image">
|
||||
<!-- 课程封面图片 -->
|
||||
<image :src="course.image" mode="aspectFill" class="img" />
|
||||
<!-- 图片渐变遮罩 -->
|
||||
<view class="course-overlay"></view>
|
||||
<!-- 差几人提示（右上角） -->
|
||||
<text v-if="course.remainingSlots > 0" class="remaining-slots">差{{ course.remainingSlots }}人</text>
|
||||
<!-- 课程信息区域 -->
|
||||
<view class="course-info">
|
||||
<!-- 课程名称 -->
|
||||
<text class="course-name">{{ course.name }}</text>
|
||||
<!-- 课程元信息（时长、难度） -->
|
||||
<view class="course-meta">
|
||||
<view class="meta-left">
|
||||
<!-- 时长信息 -->
|
||||
<view class="meta-item time-tag">
|
||||
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/time.png" class="meta-icon" />
|
||||
<text>{{ course.duration }}</text>
|
||||
</view>
|
||||
<!-- 难度信息 -->
|
||||
<view class="meta-item level-tag">
|
||||
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/intensity.png" class="meta-icon" />
|
||||
<text>{{ course.level }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 课程标签 -->
|
||||
<view class="meta-item course-type-tag">
|
||||
<text :class="['tag', course.tagType]">{{ course.tag }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 课程底部区域 -->
|
||||
<view class="course-footer">
|
||||
<!-- 参与人数信息 -->
|
||||
<view class="participants">
|
||||
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/hot.png" class="fire-icon" />
|
||||
<text>{{ course.participants }}人参与</text>
|
||||
</view>
|
||||
<!-- 去参与按钮 -->
|
||||
<view class="join-btn" @click="handleJoinCourse(course)">
|
||||
<text>去参与</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import CourseCard from './CourseCard.vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { getGroupCoursePage } from '@/api/main.js'
|
||||
|
||||
// 接收父组件传递的数据
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({ list: [] })
|
||||
}
|
||||
})
|
||||
// 推荐课程数据列表
|
||||
const courses = ref([])
|
||||
|
||||
// 课程类型映射（用于显示标签）
|
||||
const getCourseTypeName = (type) => {
|
||||
@@ -54,16 +94,12 @@ const getCourseTypeName = (type) => {
|
||||
|
||||
// 根据课程信息获取标签文本
|
||||
const getTag = (course) => {
|
||||
if (course.currentMembers >= course.maxMembers) return '已满员'
|
||||
if (course.status === '2') return '已结束'
|
||||
if (course.currentMembers / course.maxMembers >= 0.8) return '热门'
|
||||
return getCourseTypeName(course.courseType)
|
||||
}
|
||||
|
||||
// 根据课程信息获取标签样式类型
|
||||
const getTagType = (course) => {
|
||||
if (course.currentMembers >= course.maxMembers) return 'full'
|
||||
if (course.status === '2') return 'ended'
|
||||
if (course.currentMembers / course.maxMembers >= 0.8) return 'hot'
|
||||
return 'default'
|
||||
}
|
||||
@@ -73,7 +109,9 @@ const calculateDuration = (startTime, endTime) => {
|
||||
if (!startTime || !endTime) return '60分钟'
|
||||
const start = new Date(startTime)
|
||||
const end = new Date(endTime)
|
||||
const durationMinutes = Math.floor((end - start) / (1000 * 60))
|
||||
const diffMs = end - start
|
||||
if (diffMs <= 0) return ''
|
||||
const durationMinutes = Math.floor(diffMs / (1000 * 60))
|
||||
return `${durationMinutes}分钟`
|
||||
}
|
||||
|
||||
@@ -92,31 +130,51 @@ const getImageUrl = (coverImage) => {
|
||||
return `https://your-domain.com${coverImage}`
|
||||
}
|
||||
|
||||
// 将原始课程数据转换为卡片需要的格式
|
||||
const displayCourses = computed(() => {
|
||||
const list = props.data?.list || []
|
||||
return list.map(course => ({
|
||||
id: course.id,
|
||||
image: getImageUrl(course.coverImage),
|
||||
tag: getTag(course),
|
||||
tagType: getTagType(course),
|
||||
name: course.courseName || '未知课程',
|
||||
duration: calculateDuration(course.startTime, course.endTime),
|
||||
level: getCourseLevel(course),
|
||||
participants: course.currentMembers || 0,
|
||||
rawData: course
|
||||
}))
|
||||
})
|
||||
// 获取推荐课程
|
||||
const fetchRecommendCourses = async () => {
|
||||
try {
|
||||
const res = await getGroupCoursePage({
|
||||
page: 0, size: 10, sort: 'current_members', order: 'desc'
|
||||
}, { cache: true, cacheTime: 5 * 60 * 1000 })
|
||||
if (res && res.content && Array.isArray(res.content)) {
|
||||
// 筛选掉已结束和已满员的课程
|
||||
const filteredCourses = res.content.filter(course => {
|
||||
return course.status !== '2' && course.currentMembers < course.maxMembers
|
||||
})
|
||||
|
||||
// 只取前5个符合条件的课程
|
||||
courses.value = filteredCourses.slice(0, 5).map(course => {
|
||||
const remainingSlots = course.maxMembers - course.currentMembers
|
||||
return {
|
||||
id: course.id,
|
||||
image: getImageUrl(course.coverImage),
|
||||
tag: getTag(course),
|
||||
tagType: getTagType(course),
|
||||
name: course.courseName || '未知课程',
|
||||
duration: calculateDuration(course.startTime, course.endTime),
|
||||
level: getCourseLevel(course),
|
||||
participants: course.currentMembers || 0,
|
||||
remainingSlots: remainingSlots,
|
||||
rawData: course
|
||||
}
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取推荐课程失败:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const handleJoinCourse = (course) => {
|
||||
if (course.rawData.status === '2') { uni.showToast({ title: '课程已结束', icon: 'none' }); return }
|
||||
if (course.rawData.currentMembers >= course.rawData.maxMembers) { uni.showToast({ title: '课程已满员', icon: 'none' }); return }
|
||||
uni.navigateTo({ url: `/pages/course/detail?id=${course.id}` })
|
||||
uni.navigateTo({ url: `/pages/groupCourse/detail?id=${course.id}` })
|
||||
}
|
||||
|
||||
function goMore(){
|
||||
uni.navigateTo({ url: '/pages/recommendCourses/index' })
|
||||
const handleViewMore = () => {
|
||||
uni.navigateTo({ url: '/pages/recommendCourses/index' })
|
||||
}
|
||||
|
||||
onMounted(() => { fetchRecommendCourses() })
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -158,6 +216,190 @@ function goMore(){
|
||||
|
||||
.courses-list {
|
||||
display: inline-flex;
|
||||
gap: 48rpx;
|
||||
gap: 24rpx;
|
||||
padding-right: 24rpx;
|
||||
}
|
||||
|
||||
.course-card {
|
||||
width: 338rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8rpx 28rpx var(--shadow-blue-light);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.6);
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.course-image {
|
||||
height: 260rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.course-overlay {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to top, rgba(45, 74, 90, 0.7) 0%, transparent 60%);
|
||||
}
|
||||
|
||||
.remaining-slots {
|
||||
position: absolute;
|
||||
top: 16rpx;
|
||||
right: 16rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #FF6B35, #FF8F66);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.course-tag {
|
||||
position: absolute;
|
||||
top: 16rpx;
|
||||
right: 16rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #7AB5CC, #9CCFDF);
|
||||
z-index: 2;
|
||||
&.hot {
|
||||
background: linear-gradient(135deg, #6BA8C0, #8CC5D5);
|
||||
}
|
||||
&.new {
|
||||
background: linear-gradient(135deg, #6DB5C8, #90CEDD);
|
||||
}
|
||||
&.free {
|
||||
background: linear-gradient(135deg, #7AB5CC, #9CCFDF);
|
||||
}
|
||||
&.full {
|
||||
background: linear-gradient(135deg, #A0B8C8, #B8CCD8);
|
||||
}
|
||||
&.ended {
|
||||
background: linear-gradient(135deg, #B0C0CC, #C4D2DC);
|
||||
}
|
||||
&.default {
|
||||
background: linear-gradient(135deg, #7AB5CC, #9CCFDF);
|
||||
}
|
||||
}
|
||||
|
||||
.course-info {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 16rpx 20rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.course-name {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
margin-bottom: 8rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.course-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.meta-left {
|
||||
display: flex;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
font-size: 20rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
padding: 6rpx 10rpx;
|
||||
border-radius: 6rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
line-height: 1;
|
||||
.meta-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.time-tag {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.level-tag {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.course-type-tag {
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
.tag {
|
||||
padding: 4rpx 10rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
background: linear-gradient(135deg, #FF8F66, #FFB088);
|
||||
color: #ffffff;
|
||||
&.hot {
|
||||
background: linear-gradient(135deg, #FF6B35, #FF8F66);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.meta-icon {
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.course-footer {
|
||||
padding: 16rpx 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.participants {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: var(--tabbar-text-inactive);
|
||||
}
|
||||
|
||||
.fire-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.join-btn {
|
||||
padding: 12rpx 28rpx;
|
||||
background: rgba(130, 220, 130, 0.9);
|
||||
border: none;
|
||||
border-radius: 9999rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 6rpx 16rpx rgba(130, 220, 130, 0.35);
|
||||
}
|
||||
</style>
|
||||
@@ -6,7 +6,7 @@
|
||||
<!-- 区域标题 -->
|
||||
<text class="section-title">今日推荐</text>
|
||||
<!-- 查看更多按钮 -->
|
||||
<view class="view-more">
|
||||
<view class="view-more" @click="handleViewMore">
|
||||
<text>查看更多</text>
|
||||
<text class="arrow">
|
||||
<uni-icons type="right" size="20" color="#8CA0B0"></uni-icons>
|
||||
@@ -50,6 +50,10 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const handleViewMore = () => {
|
||||
uni.navigateTo({ url: '/pages/discover/index' })
|
||||
}
|
||||
|
||||
// 今日推荐数据列表
|
||||
const recommends = [
|
||||
{
|
||||
|
||||
@@ -10,62 +10,50 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, nextTick } from 'vue'
|
||||
import { drawRadarChart } from '@/common/memberInfo/bodyTestChart.js'
|
||||
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
labels: { type: Array, default: () => [] },
|
||||
values: { type: Array, default: () => [] },
|
||||
width: { type: Number, default: 280 },
|
||||
height: { type: Number, default: 240 }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasId: `bt-radar-${Math.random().toString(36).slice(2, 9)}`
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
values: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.renderChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderChart()
|
||||
},
|
||||
methods: {
|
||||
renderChart() {
|
||||
this.$nextTick(() => {
|
||||
const query = uni.createSelectorQuery().in(this)
|
||||
query
|
||||
.select(`#${this.canvasId}`)
|
||||
.fields({ node: true, size: true })
|
||||
.exec((res) => {
|
||||
const node = res?.[0]?.node
|
||||
if (!node) return
|
||||
const dpr = uni.getSystemInfoSync().pixelRatio || 1
|
||||
drawRadarChart(node, {
|
||||
width: this.width,
|
||||
height: this.height,
|
||||
labels: this.labels,
|
||||
values: this.values,
|
||||
dpr
|
||||
})
|
||||
})
|
||||
const props = defineProps({
|
||||
labels: { type: Array, default: () => [] },
|
||||
values: { type: Array, default: () => [] },
|
||||
width: { type: Number, default: 280 },
|
||||
height: { type: Number, default: 240 }
|
||||
})
|
||||
|
||||
const canvasId = ref(`bt-radar-${Math.random().toString(36).slice(2, 9)}`)
|
||||
|
||||
function renderChart() {
|
||||
nextTick(() => {
|
||||
const query = uni.createSelectorQuery().in(getCurrentInstance())
|
||||
query
|
||||
.select(`#${canvasId.value}`)
|
||||
.fields({ node: true, size: true })
|
||||
.exec((res) => {
|
||||
const node = res?.[0]?.node
|
||||
if (!node) return
|
||||
const dpr = uni.getSystemInfoSync().pixelRatio || 1
|
||||
drawRadarChart(node, {
|
||||
width: props.width,
|
||||
height: props.height,
|
||||
labels: props.labels,
|
||||
values: props.values,
|
||||
dpr
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => props.values, () => {
|
||||
renderChart()
|
||||
}, { deep: true })
|
||||
|
||||
onMounted(() => {
|
||||
renderChart()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.bt-radar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -10,62 +10,50 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, nextTick } from 'vue'
|
||||
import { drawTrendChart } from '@/common/memberInfo/bodyTestChart.js'
|
||||
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
points: { type: Array, default: () => [] },
|
||||
unit: { type: String, default: '' },
|
||||
width: { type: Number, default: 300 },
|
||||
height: { type: Number, default: 160 }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasId: `bt-trend-${Math.random().toString(36).slice(2, 9)}`
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
points: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.renderChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderChart()
|
||||
},
|
||||
methods: {
|
||||
renderChart() {
|
||||
this.$nextTick(() => {
|
||||
const query = uni.createSelectorQuery().in(this)
|
||||
query
|
||||
.select(`#${this.canvasId}`)
|
||||
.fields({ node: true, size: true })
|
||||
.exec((res) => {
|
||||
const node = res?.[0]?.node
|
||||
if (!node) return
|
||||
const dpr = uni.getSystemInfoSync().pixelRatio || 1
|
||||
drawTrendChart(node, {
|
||||
width: this.width,
|
||||
height: this.height,
|
||||
points: this.points,
|
||||
unit: this.unit,
|
||||
dpr
|
||||
})
|
||||
})
|
||||
const props = defineProps({
|
||||
points: { type: Array, default: () => [] },
|
||||
unit: { type: String, default: '' },
|
||||
width: { type: Number, default: 300 },
|
||||
height: { type: Number, default: 160 }
|
||||
})
|
||||
|
||||
const canvasId = ref(`bt-trend-${Math.random().toString(36).slice(2, 9)}`)
|
||||
|
||||
function renderChart() {
|
||||
nextTick(() => {
|
||||
const query = uni.createSelectorQuery().in(getCurrentInstance())
|
||||
query
|
||||
.select(`#${canvasId.value}`)
|
||||
.fields({ node: true, size: true })
|
||||
.exec((res) => {
|
||||
const node = res?.[0]?.node
|
||||
if (!node) return
|
||||
const dpr = uni.getSystemInfoSync().pixelRatio || 1
|
||||
drawTrendChart(node, {
|
||||
width: props.width,
|
||||
height: props.height,
|
||||
points: props.points,
|
||||
unit: props.unit,
|
||||
dpr
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => props.points, () => {
|
||||
renderChart()
|
||||
}, { deep: true })
|
||||
|
||||
onMounted(() => {
|
||||
renderChart()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.bt-trend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -102,31 +102,26 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
report: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
date: '2024-07-01',
|
||||
weight: '63.5',
|
||||
bmi: '22.1',
|
||||
bodyFat: '24.8%',
|
||||
bmr: '165',
|
||||
status: '比较健康',
|
||||
change: '-1.2kg'
|
||||
})
|
||||
}
|
||||
},
|
||||
emits: ['view-history', 'view-report']
|
||||
}
|
||||
<script setup>
|
||||
defineProps({
|
||||
report: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
date: '2024-07-01',
|
||||
weight: '63.5',
|
||||
bmi: '22.1',
|
||||
bodyFat: '24.8%',
|
||||
bmr: '165',
|
||||
status: '比较健康',
|
||||
change: '-1.2kg'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['view-history', 'view-report'])
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||||
@import '@/common/style/memberInfo/member-info-body-report.css';
|
||||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||||
|
||||
@@ -77,28 +77,24 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
emits: ['view-all', 'item-tap'],
|
||||
computed: {
|
||||
previewItems() {
|
||||
return this.items
|
||||
}
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['view-all', 'item-tap'])
|
||||
|
||||
const previewItems = computed(() => {
|
||||
return props.items
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||||
@import '@/common/style/memberInfo/member-info-booking-list.css';
|
||||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||||
|
||||
@@ -64,23 +64,18 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
emits: ['view-all', 'item-tap']
|
||||
}
|
||||
<script setup>
|
||||
defineProps({
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['view-all', 'item-tap'])
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||||
@import '@/common/style/memberInfo/member-info-check-in-list.css';
|
||||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||||
|
||||
@@ -55,30 +55,25 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
amount: '¥50',
|
||||
couponDesc: '满500可用 · 1张',
|
||||
couponAction: '去使用',
|
||||
points: 1250,
|
||||
pointsLabel: '我的积分',
|
||||
pointsAction: '去兑换'
|
||||
})
|
||||
}
|
||||
},
|
||||
emits: ['view-all', 'use-coupon', 'redeem-points']
|
||||
}
|
||||
<script setup>
|
||||
defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
amount: '¥50',
|
||||
couponDesc: '满500可用 · 1张',
|
||||
couponAction: '去使用',
|
||||
points: 1250,
|
||||
pointsLabel: '我的积分',
|
||||
pointsAction: '去兑换'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['view-all', 'use-coupon', 'redeem-points'])
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||||
@import '@/common/style/memberInfo/member-info-coupon-points.css';
|
||||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||||
|
||||
@@ -22,8 +22,8 @@
|
||||
<view class="profile-header__toolbar-spacer" :style="toolbarSpacerStyle"></view>
|
||||
<!-- 用户信息区：深蓝渐变 -->
|
||||
<view class="profile-header__hero">
|
||||
<view class="profile-header__inner">
|
||||
<view class="profile-header__user" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="$emit('user-info')">
|
||||
<view class="profile-header__inner" v-if="isLogin">
|
||||
<view class="profile-header__user" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="handleUserTap">
|
||||
<view class="profile-header__user-inner">
|
||||
<view class="profile-header__avatar-wrap">
|
||||
<view class="profile-header__avatar-ring">
|
||||
@@ -44,7 +44,7 @@
|
||||
</view>
|
||||
<view class="profile-header__user-meta">
|
||||
<view class="profile-header__user-meta-inner">
|
||||
<text class="profile-header__name">{{ userInfo.name }}</text>
|
||||
<text class="profile-header__name">{{ userInfo.name || "活氧舱用户" }}</text>
|
||||
<text class="profile-header__phone">{{ userInfo.phone }}</text>
|
||||
<view class="profile-header__badge">
|
||||
<image
|
||||
@@ -82,69 +82,95 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="profile-header__inner" v-else>
|
||||
<view class="profile-header__user" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="handleUserTap">
|
||||
<view
|
||||
class="profile-header__user-inner--guest"
|
||||
@tap="handleGuestLogin"
|
||||
>
|
||||
<view class="profile-header__avatar-wrap--guest">
|
||||
<image
|
||||
class="profile-header__avatar--guest"
|
||||
src="/static/OIP-C.png"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="profile-header__user-meta--guest">
|
||||
<text class="profile-header__name--guest">小伙伴，点我登录</text>
|
||||
<text class="profile-header__phone--guest">陪你遇见更好的自己 ~</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
userInfo: { type: Object, required: true },
|
||||
stats: { type: Object, required: true }
|
||||
},
|
||||
emits: ['user-info'],
|
||||
computed: {
|
||||
displayAvatar() {
|
||||
return this.userInfo.avatar || 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/AvatarEditWrap.png'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
toolbarStyle: {},
|
||||
toolbarSpacerStyle: {},
|
||||
navRightStyle: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.syncNavSafeArea()
|
||||
},
|
||||
methods: {
|
||||
syncNavSafeArea() {
|
||||
try {
|
||||
const sys = uni.getSystemInfoSync()
|
||||
const statusBarHeight = sys.statusBarHeight || 0
|
||||
const navHeight = 44
|
||||
const menu = uni.getMenuButtonBoundingClientRect?.()
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
|
||||
this.toolbarStyle = {
|
||||
paddingTop: `${statusBarHeight}px`
|
||||
}
|
||||
const props = defineProps({
|
||||
userInfo: { type: Object, required: true },
|
||||
stats: { type: Object, required: true },
|
||||
isLogin: { type: Boolean }
|
||||
})
|
||||
|
||||
this.toolbarSpacerStyle = {
|
||||
height: `${statusBarHeight + navHeight}px`
|
||||
}
|
||||
|
||||
if (menu && menu.width) {
|
||||
const capsuleGap = sys.windowWidth - menu.left + 8
|
||||
this.navRightStyle = {
|
||||
width: `${capsuleGap}px`,
|
||||
minWidth: `${capsuleGap}px`
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
this.toolbarSpacerStyle = { height: '44px' }
|
||||
}
|
||||
}
|
||||
const emit = defineEmits(['user-info', 'guest-login'])
|
||||
|
||||
const displayAvatar = computed(() => {
|
||||
return props.userInfo.avatar || '/static/OC-default-headIamge.png'
|
||||
})
|
||||
|
||||
function handleUserTap() {
|
||||
if (props.isLogin) {
|
||||
emit('user-info')
|
||||
}
|
||||
}
|
||||
|
||||
function handleGuestLogin() {
|
||||
emit('guest-login')
|
||||
}
|
||||
|
||||
const toolbarStyle = ref({})
|
||||
const toolbarSpacerStyle = ref({})
|
||||
const navRightStyle = ref({})
|
||||
|
||||
function syncNavSafeArea() {
|
||||
try {
|
||||
const sys = uni.getSystemInfoSync()
|
||||
const statusBarHeight = sys.statusBarHeight || 0
|
||||
const navHeight = 44
|
||||
const menu = uni.getMenuButtonBoundingClientRect?.()
|
||||
|
||||
toolbarStyle.value = {
|
||||
paddingTop: `${statusBarHeight}px`
|
||||
}
|
||||
|
||||
toolbarSpacerStyle.value = {
|
||||
height: `${statusBarHeight + navHeight}px`
|
||||
}
|
||||
|
||||
if (menu && menu.width) {
|
||||
const capsuleGap = sys.windowWidth - menu.left + 8
|
||||
navRightStyle.value = {
|
||||
width: `${capsuleGap}px`,
|
||||
minWidth: `${capsuleGap}px`
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
toolbarSpacerStyle.value = { height: '44px' }
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
syncNavSafeArea()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||||
@import '@/common/style/memberInfo/member-info-header.css';
|
||||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||||
|
||||
@@ -16,16 +16,10 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
emits: ['logout']
|
||||
}
|
||||
<script setup>
|
||||
defineEmits(['logout'])
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-logout.css';
|
||||
</style>
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
>
|
||||
<view
|
||||
class="member-card-preview__icon-wrap"
|
||||
>
|
||||
>
|
||||
<view
|
||||
class="member-card-preview__icon-border"
|
||||
>
|
||||
@@ -94,6 +94,18 @@
|
||||
续费
|
||||
</text>
|
||||
</view>
|
||||
<view
|
||||
class="member-card-preview__purchase"
|
||||
hover-class="mi-tap-btn--hover"
|
||||
:hover-stay-time="150"
|
||||
@tap.stop="$emit('purchase')"
|
||||
>
|
||||
<text
|
||||
class="member-card-preview__purchase-text"
|
||||
>
|
||||
购买新卡
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -115,20 +127,15 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
cardInfo: { type: Object, required: true }
|
||||
},
|
||||
emits: ['view-all', 'renew'],
|
||||
}
|
||||
<script setup>
|
||||
defineProps({
|
||||
cardInfo: { type: Object, required: true }
|
||||
})
|
||||
|
||||
defineEmits(['view-all', 'renew', 'purchase'])
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||||
@import '@/common/style/memberInfo/member-info-member-card.css';
|
||||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||||
|
||||
@@ -83,33 +83,27 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
emits: ['action'],
|
||||
data() {
|
||||
return {
|
||||
row1: [
|
||||
{ key: 'booking', label: '预约课程', textClass: 'quick-actions__title', icon: '' },
|
||||
{ key: 'bodyTest', label: '智能体测', textClass: 'quick-actions__title-2', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/mappin2.png' },
|
||||
{ key: 'bodyReport', label: '体测报告', textClass: 'quick-actions__title-3', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/activity.png' },
|
||||
{ key: 'trainReport', label: '训练报告', textClass: 'quick-actions__coach', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/usercheck.png' }
|
||||
],
|
||||
row2: [
|
||||
{ key: 'coupon', label: '我的优惠券', textClass: 'quick-actions__text', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png' },
|
||||
{ key: 'points', label: '我的积分', textClass: 'quick-actions__points-desc', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/star.png' },
|
||||
{ key: 'referral', label: '邀请好友', textClass: 'quick-actions__title-4', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/share2.png' },
|
||||
{ key: 'course', label: '我的课程', textClass: 'quick-actions__text-2', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/play.png' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineEmits(['action'])
|
||||
|
||||
const row1 = ref([
|
||||
{ key: 'booking', label: '预约课程', textClass: 'quick-actions__title', icon: '' },
|
||||
{ key: 'bodyTest', label: '智能体测', textClass: 'quick-actions__title-2', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/mappin2.png' },
|
||||
{ key: 'bodyReport', label: '体测报告', textClass: 'quick-actions__title-3', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/activity.png' },
|
||||
{ key: 'trainReport', label: '训练报告', textClass: 'quick-actions__coach', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/usercheck.png' }
|
||||
])
|
||||
|
||||
const row2 = ref([
|
||||
{ key: 'coupon', label: '我的优惠券', textClass: 'quick-actions__text', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png' },
|
||||
{ key: 'points', label: '我的积分', textClass: 'quick-actions__points-desc', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/star.png' },
|
||||
{ key: 'referral', label: '邀请好友', textClass: 'quick-actions__title-4', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/share2.png' },
|
||||
{ key: 'course', label: '我的课程', textClass: 'quick-actions__text-2', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/play.png' }
|
||||
])
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||||
@import '@/common/style/memberInfo/member-info-quick-actions.css';
|
||||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||||
|
||||
@@ -63,38 +63,34 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
code: 'FIT-ZXF-2024',
|
||||
invited: 5,
|
||||
registered: 3,
|
||||
purchased: 2
|
||||
})
|
||||
}
|
||||
},
|
||||
emits: ['view-rules'],
|
||||
methods: {
|
||||
copyCode() {
|
||||
uni.setClipboardData({
|
||||
data: this.data.code,
|
||||
success: () => {
|
||||
uni.showToast({ title: '已复制', icon: 'success' })
|
||||
}
|
||||
})
|
||||
}
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
code: 'FIT-ZXF-2024',
|
||||
invited: 5,
|
||||
registered: 3,
|
||||
purchased: 2
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['view-rules'])
|
||||
|
||||
function copyCode() {
|
||||
uni.setClipboardData({
|
||||
data: props.data.code,
|
||||
success: () => {
|
||||
uni.showToast({ title: '已复制', icon: 'success' })
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||||
@import '@/common/style/memberInfo/member-info-referral.css';
|
||||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||||
|
||||
@@ -55,55 +55,48 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineEmits(['setting'])
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
key: 'notify',
|
||||
label: '通知设置',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/bell.png',
|
||||
iconWrapClass: ''
|
||||
},
|
||||
emits: ['setting'],
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
key: 'notify',
|
||||
label: '通知设置',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/bell.png',
|
||||
iconWrapClass: ''
|
||||
},
|
||||
{
|
||||
key: 'password',
|
||||
label: '修改密码',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_727.png',
|
||||
iconWrapClass: 'settings-section__item-icon-wrap--blue'
|
||||
},
|
||||
{
|
||||
key: 'privacy',
|
||||
label: '隐私政策',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/shield.png',
|
||||
iconWrapClass: 'settings-section__item-icon-wrap--green'
|
||||
},
|
||||
{
|
||||
key: 'nfc',
|
||||
label: 'NFC 门禁卡',
|
||||
subtitle: '已绑定',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png',
|
||||
iconWrapClass: ''
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
label: '注销账户',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/userx.png',
|
||||
iconWrapClass: 'settings-section__item-icon-wrap--red',
|
||||
labelClass: 'settings-section__item-label--danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
{
|
||||
key: 'password',
|
||||
label: '修改密码',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_727.png',
|
||||
iconWrapClass: 'settings-section__item-icon-wrap--blue'
|
||||
},
|
||||
{
|
||||
key: 'privacy',
|
||||
label: '隐私政策',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/shield.png',
|
||||
iconWrapClass: 'settings-section__item-icon-wrap--green'
|
||||
},
|
||||
{
|
||||
key: 'nfc',
|
||||
label: 'NFC 门禁卡',
|
||||
subtitle: '已绑定',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png',
|
||||
iconWrapClass: ''
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
label: '注销账户',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/userx.png',
|
||||
iconWrapClass: 'settings-section__item-icon-wrap--red',
|
||||
labelClass: 'settings-section__item-label--danger'
|
||||
}
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||||
@import '@/common/style/memberInfo/member-info-settings.css';
|
||||
</style>
|
||||
|
||||
@@ -7,14 +7,8 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: true,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
statusBarTime: { type: String, default: '9:41' }
|
||||
},
|
||||
}
|
||||
<script setup>
|
||||
defineProps({
|
||||
statusBarTime: { type: String, default: '9:41' }
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -27,80 +27,75 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
title: { type: String, required: true },
|
||||
rightText: { type: String, default: '' },
|
||||
actionButton: { type: Boolean, default: false }
|
||||
},
|
||||
emits: ['back', 'right-action'],
|
||||
data() {
|
||||
return {
|
||||
toolbarStyle: {},
|
||||
toolbarSpacerStyle: {},
|
||||
capsuleStyle: {},
|
||||
isH5: false
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
title: { type: String, required: true },
|
||||
rightText: { type: String, default: '' },
|
||||
actionButton: { type: Boolean, default: false }
|
||||
})
|
||||
|
||||
defineEmits(['back', 'right-action'])
|
||||
|
||||
const toolbarStyle = ref({})
|
||||
const toolbarSpacerStyle = ref({})
|
||||
const capsuleStyle = ref({})
|
||||
const isH5 = ref(false)
|
||||
|
||||
function syncNavSafeArea() {
|
||||
try {
|
||||
const sys = uni.getSystemInfoSync()
|
||||
const statusBarHeight = sys.statusBarHeight || 0
|
||||
const navHeight = 44
|
||||
const extraGap = 4
|
||||
const menu = uni.getMenuButtonBoundingClientRect?.()
|
||||
|
||||
// #ifdef H5
|
||||
isH5.value = true
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
isH5.value = false
|
||||
// #endif
|
||||
if (!isH5.value && typeof window !== 'undefined' && !menu?.width) {
|
||||
isH5.value = sys.uniPlatform === 'web' || sys.platform === 'web'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.syncNavSafeArea()
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => this.syncNavSafeArea(), 50)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
syncNavSafeArea() {
|
||||
try {
|
||||
const sys = uni.getSystemInfoSync()
|
||||
const statusBarHeight = sys.statusBarHeight || 0
|
||||
const navHeight = 44
|
||||
const extraGap = 4
|
||||
const menu = uni.getMenuButtonBoundingClientRect?.()
|
||||
// #ifdef H5
|
||||
this.isH5 = true
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
this.isH5 = false
|
||||
// #endif
|
||||
if (!this.isH5 && typeof window !== 'undefined' && !menu?.width) {
|
||||
this.isH5 = sys.uniPlatform === 'web' || sys.platform === 'web'
|
||||
}
|
||||
|
||||
this.toolbarStyle = {
|
||||
paddingTop: `${statusBarHeight}px`
|
||||
}
|
||||
toolbarStyle.value = {
|
||||
paddingTop: `${statusBarHeight}px`
|
||||
}
|
||||
|
||||
this.toolbarSpacerStyle = {
|
||||
height: `${statusBarHeight + navHeight + extraGap}px`
|
||||
}
|
||||
toolbarSpacerStyle.value = {
|
||||
height: `${statusBarHeight + navHeight + extraGap}px`
|
||||
}
|
||||
|
||||
if (!this.isH5 && menu && menu.width) {
|
||||
const capsuleGap = sys.windowWidth - menu.left + 8
|
||||
this.capsuleStyle = {
|
||||
width: `${capsuleGap}px`,
|
||||
minWidth: `${capsuleGap}px`
|
||||
}
|
||||
} else {
|
||||
this.capsuleStyle = {
|
||||
width: '0px',
|
||||
minWidth: '0px'
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
this.toolbarSpacerStyle = { height: '44px' }
|
||||
this.isH5 = true
|
||||
this.capsuleStyle = { width: '0px', minWidth: '0px' }
|
||||
if (!isH5.value && menu && menu.width) {
|
||||
const capsuleGap = sys.windowWidth - menu.left + 8
|
||||
capsuleStyle.value = {
|
||||
width: `${capsuleGap}px`,
|
||||
minWidth: `${capsuleGap}px`
|
||||
}
|
||||
} else {
|
||||
capsuleStyle.value = {
|
||||
width: '0px',
|
||||
minWidth: '0px'
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
toolbarSpacerStyle.value = { height: '44px' }
|
||||
isH5.value = true
|
||||
capsuleStyle.value = { width: '0px', minWidth: '0px' }
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
syncNavSafeArea()
|
||||
nextTick(() => {
|
||||
setTimeout(() => syncNavSafeArea(), 50)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-sub-nav.css';
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user