scottpan/msh-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: MSH System\n\n- msh_single_uniapp: Vue 2 + UniApp 前端（微信小程序/H5/App/支付宝小程序）\n- msh_crmeb_22: Spring Boot 2.2 后端（C端API/管理端/业务逻辑）\n- models-integration: AI服务集成（Coze/KieAI/腾讯ASR）\n- docs: 产品文档与设计稿

Browse Source
This commit is contained in:
scottpan
2026-02-28 05:40:21 +08:00
commit 14d29d51c0
2182 changed files with 482509 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

509
msh_single_uniapp/pages/tool/checkin-detail.vue Normal file
View File

@@ -0,0 +1,509 @@
<template>
<view class="checkin-detail-page">
<!-- 内容区域 -->
<scroll-view class="content-scroll" scroll-y>
<!-- 图片轮播区域 -->
<view class="image-carousel">
<swiper
class="swiper"
:indicator-dots="true"
:autoplay="false"
:current="currentImageIndex"
@change="onImageChange"
indicator-color="rgba(255,255,255,0.5)"
indicator-active-color="#ffffff"
>
<swiper-item v-for="(image, index) in checkinData.images" :key="index">
<image class="carousel-image" :src="image" mode="aspectFill"></image>
</swiper-item>
</swiper>
<!-- 餐次标签 -->
<view class="meal-tag">
<text class="meal-icon">{{ getMealIcon(checkinData.mealType) }}</text>
<text class="meal-text">{{ getMealText(checkinData.mealType) }}</text>
</view>
<!-- 图片页码 -->
<view class="image-counter">
{{ currentImageIndex + 1 }} / {{ checkinData.images.length }}
</view>
</view>
<!-- 视频播放区域 -->
<view class="video-section" v-if="checkinData.videoUrl">
<view class="section-header">
<text class="header-icon">🎬</text>
<text class="header-title">打卡视频</text>
</view>
<video
class="checkin-video"
:src="checkinData.videoUrl"
controls
:show-center-play-btn="true"
:enable-progress-gesture="true"
object-fit="contain"
:poster="checkinData.images && checkinData.images.length > 0 ? checkinData.images[0] : ''"
></video>
</view>
<!-- 视频生成中状态 -->
<view class="video-generating" v-else-if="checkinData.enableAIVideo && checkinData.taskId">
<text class="generating-icon">⏳</text>
<text class="generating-text">视频生成中，请稍后刷新查看...</text>
</view>
<!-- 帖子内容区域 -->
<view class="post-content-section">
<!-- 作者信息 -->
<view class="author-section">
<view class="author-info">
<view class="author-avatar">
<image :src="userInfo.avatar" mode="aspectFill" class="avatar-img"></image>
</view>
<view class="author-details">
<view class="author-name">{{ userInfo.nickname }}</view>
<view class="post-time">{{ checkinData.createTime }}</view>
</view>
</view>
<view class="points-badge" v-if="checkinData.points > 0">
<text>+{{ checkinData.points }}积分</text>
</view>
</view>
<!-- 帖子描述 -->
<view class="post-description">
<text>{{ checkinData.notes || '暂无描述' }}</text>
</view>
</view>
<!-- 营养统计卡片 -->
<view class="nutrition-stats-card" v-if="checkinData.aiAnalysis">
<view class="stats-header">
<view class="stats-title">
<text class="title-icon">📊</text>
<text class="title-text">AI 营养分析</text>
</view>
</view>
<view class="ai-analysis-content">
<text>{{ checkinData.aiAnalysis }}</text>
</view>
</view>
<!-- 分享到社区按钮 -->
<view class="copy-checkin-btn" @click="handleCopyCheckin">
<text class="btn-icon">🎬</text>
<text class="btn-text">分享到社区</text>
</view>
<!-- 底部安全距离 -->
<view class="safe-bottom"></view>
</scroll-view>
</view>
</template>
<script>
import { getCheckinDetail } from '@/api/tool.js';
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters(['userInfo'])
},
data() {
return {
currentImageIndex: 0,
checkinData: {
id: '',
images: [],
mealType: '',
createTime: '',
notes: '',
points: 0,
aiAnalysis: '',
videoUrl: '',
taskId: '',
enableAIVideo: false,
videoStatus: 0
}
}
},
onLoad(options) {
if (options.id) {
this.loadCheckinDetail(options.id);
} else if (options.item) {
try {
const item = JSON.parse(decodeURIComponent(options.item));
this.formatCheckinData(item);
} catch (e) {
console.error('解析打卡数据失败:', e);
uni.showToast({
title: '数据加载失败',
icon: 'none'
});
}
}
},
methods: {
async loadCheckinDetail(id) {
uni.showLoading({
title: '加载中...'
});
try {
const res = await getCheckinDetail(id);
if (res && res.code === 200) {
this.formatCheckinData(res.data);
} else {
throw new Error(res.message || '获取详情失败');
}
} catch (e) {
console.error('获取详情失败:', e);
uni.showToast({
title: '获取详情失败',
icon: 'none'
});
} finally {
uni.hideLoading();
}
},
formatCheckinData(item) {
let images = [];
if (item.photos) {
try {
if (typeof item.photos === 'string') {
if (item.photos.startsWith('[')) {
images = JSON.parse(item.photos);
} else {
images = [item.photos];
}
} else if (Array.isArray(item.photos)) {
images = item.photos;
}
} catch (e) {
console.error('解析图片失败:', e);
if (typeof item.photos === 'string') {
images = [item.photos];
}
}
}
this.checkinData = {
id: item.id,
images: images,
mealType: item.mealType,
createTime: item.date || item.createTime,
notes: item.notes,
points: item.points || 0,
aiAnalysis: item.aiAnalysis || item.nutritionScore,
videoUrl: item.videoUrl || '',
taskId: item.taskId || '',
enableAIVideo: item.enableAIVideo || false,
videoStatus: item.videoStatus || 0
};
},
onImageChange(e) {
this.currentImageIndex = e.detail.current
},
getMealText(type) {
const map = {
breakfast: '早餐',
lunch: '午餐',
dinner: '晚餐',
snack: '加餐'
};
return map[type] || type;
},
getMealIcon(type) {
const map = {
breakfast: '🌅',
lunch: '☀️',
dinner: '🌙',
snack: '🍪'
};
return map[type] || '🍽️';
},
handleCopyCheckin() {
// 将数据存储到本地缓存，避免URL参数过长
uni.setStorageSync('checkin_copy_data', {
images: this.checkinData.images,
mealType: this.checkinData.mealType,
notes: this.checkinData.notes
});
// 跳转到发布页
uni.navigateTo({
url: '/pages/tool/checkin-publish?mode=copy'
});
}
}
}
</script>
<style lang="scss" scoped>
.checkin-detail-page {
min-height: 100vh;
background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
display: flex;
flex-direction: column;
}
/* 内容滚动区域 */
.content-scroll {
flex: 1;
}
/* 图片轮播区域 */
.image-carousel {
width: 100%;
height: 750rpx;
position: relative;
background: #f4f5f7;
.swiper {
width: 100%;
height: 100%;
}
.carousel-image {
width: 100%;
height: 100%;
}
.meal-tag {
position: absolute;
left: 32rpx;
top: 32rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 1rpx solid rgba(255, 255, 255, 0.8);
border-radius: 50rpx;
padding: 8rpx 16rpx;
display: flex;
align-items: center;
gap: 12rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
.meal-icon {
font-size: 32rpx;
}
.meal-text {
font-size: 28rpx;
color: #3e5481;
}
}
.image-counter {
position: absolute;
right: 32rpx;
bottom: 32rpx;
background: rgba(0, 0, 0, 0.7);
border-radius: 50rpx;
padding: 8rpx 16rpx;
font-size: 24rpx;
color: #ffffff;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}
}
/* 帖子内容区域 */
.post-content-section {
padding: 32rpx;
background: #ffffff;
}
.author-section {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24rpx;
}
.author-info {
display: flex;
align-items: center;
gap: 24rpx;
}
.author-avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
overflow: hidden;
background: #f5f5f5;
.avatar-img {
width: 100%;
height: 100%;
}
}
.author-details {
display: flex;
flex-direction: column;
gap: 8rpx;
.author-name {
font-size: 28rpx;
color: #2e3e5c;
font-weight: 500;
}
.post-time {
font-size: 24rpx;
color: #9fa5c0;
}
}
.points-badge {
background: linear-gradient(135deg, #ff8c5a 0%, #ff6b35 100%);
border-radius: 50rpx;
padding: 8rpx 20rpx;
font-size: 24rpx;
color: #ffffff;
font-weight: 500;
}
.post-description {
font-size: 30rpx;
color: #3e5481;
line-height: 1.6;
white-space: pre-wrap;
}
/* 营养统计卡片 */
.nutrition-stats-card {
margin: 10rpx 32rpx;
padding: 32rpx;
background: linear-gradient(135deg, #fff5f0 0%, #ffe8dc 50%, #ffffff 100%);
border: 2rpx solid rgba(255, 136, 68, 0.3);
border-radius: 32rpx;
box-shadow: 0 16rpx 60rpx rgba(255, 136, 68, 0.15);
}
.stats-header {
display: flex;
align-items: center;
margin-bottom: 24rpx;
}
.stats-title {
display: flex;
align-items: center;
gap: 16rpx;
.title-icon {
width: 48rpx;
height: 48rpx;
background: linear-gradient(135deg, #ff9966 0%, #ff8844 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.1);
}
.title-text {
font-size: 28rpx;
color: #2e3e5c;
font-weight: 500;
}
}
.ai-analysis-content {
font-size: 28rpx;
color: #3e5481;
line-height: 1.6;
}
// 视频播放区域
.video-section {
margin: 24rpx 32rpx;
background: #ffffff;
border-radius: 24rpx;
overflow: hidden;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
.section-header {
padding: 24rpx 32rpx;
display: flex;
align-items: center;
gap: 12rpx;
border-bottom: 2rpx solid #f5f5f5;
.header-icon {
font-size: 32rpx;
}
.header-title {
font-size: 28rpx;
font-weight: 500;
color: #333333;
}
}
.checkin-video {
width: 100%;
height: 400rpx;
background: #000000;
}
}
// 视频生成中状态
.video-generating {
margin: 24rpx 32rpx;
padding: 40rpx;
background: #f9f9f9;
border-radius: 24rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16rpx;
.generating-icon {
font-size: 48rpx;
animation: rotate 2s linear infinite;
}
.generating-text {
font-size: 24rpx;
color: #999999;
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 一键借鉴打卡按钮 */
.copy-checkin-btn {
margin: 40rpx 32rpx;
height: 94rpx;
background: linear-gradient(135deg, #ff8844 0%, #ff6611 50%, #ff7722 100%);
border-radius: 24rpx;
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
box-shadow: 0 16rpx 60rpx rgba(255, 107, 53, 0.3);
.btn-icon {
font-size: 36rpx;
}
.btn-text {
font-size: 28rpx;
color: #ffffff;
font-weight: 500;
}
}
/* 底部安全距离 */
.safe-bottom {
height: 40rpx;
}
</style>