feat: 完成见素起名小程序核心功能
- 实现 AI 起名功能（Kimi API 接入） - 添加用户收藏功能（MySQL 数据库） - 实现海报生成与分享 - 添加音效和触觉反馈 - 配置生产环境部署（WAR 包 + Nginx） - 支持多种起名模式（经典、诗词、自然、现代） - 实现分批加载优化体验
This commit is contained in:
王鹏
106
miniprogram/pages/profile/profile.js
Normal file
106
miniprogram/pages/profile/profile.js
Normal file
@@ -0,0 +1,106 @@
|
||||
Page({
|
||||
data: {
|
||||
favorites: [],
|
||||
showDetail: false,
|
||||
selectedItem: {},
|
||||
selectedIndex: -1,
|
||||
openid: 'test_openid' // 实际应从登录获取
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadFavorites();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 每次显示页面时刷新列表
|
||||
this.loadFavorites();
|
||||
},
|
||||
|
||||
// 加载收藏列表
|
||||
loadFavorites() {
|
||||
const apiBaseUrl = getApp().globalData.apiBaseUrl;
|
||||
wx.request({
|
||||
url: `${apiBaseUrl}/api/favorites/list`,
|
||||
data: { openid: this.data.openid },
|
||||
success: (res) => {
|
||||
if (res.data && res.data.success) {
|
||||
this.setData({ favorites: res.data.data || [] });
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
wx.showToast({ title: '加载失败', icon: 'none' });
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 返回上一页
|
||||
onBack() {
|
||||
wx.navigateBack();
|
||||
},
|
||||
|
||||
// 点击收藏项
|
||||
onItemTap(e) {
|
||||
const index = e.currentTarget.dataset.index;
|
||||
const item = this.data.favorites[index];
|
||||
this.setData({
|
||||
selectedItem: item,
|
||||
selectedIndex: index,
|
||||
showDetail: true
|
||||
});
|
||||
wx.vibrateShort({ type: 'light' });
|
||||
},
|
||||
|
||||
// 关闭详情弹窗
|
||||
closeDetail() {
|
||||
this.setData({ showDetail: false });
|
||||
},
|
||||
|
||||
// 阻止冒泡
|
||||
preventBubble() {
|
||||
// 什么都不做，只是阻止事件冒泡
|
||||
},
|
||||
|
||||
// 分享
|
||||
onShare() {
|
||||
const item = this.data.selectedItem;
|
||||
wx.showShareImageMenu({
|
||||
path: '/images/share.png' // 实际应生成海报图片
|
||||
});
|
||||
},
|
||||
|
||||
// 移除收藏
|
||||
onRemove() {
|
||||
const item = this.data.selectedItem;
|
||||
wx.showModal({
|
||||
title: '确认移除',
|
||||
content: `确定要从心动名单中移除「${item.name}」吗？`,
|
||||
confirmColor: '#B22222',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
const apiBaseUrl = getApp().globalData.apiBaseUrl;
|
||||
wx.request({
|
||||
url: `${apiBaseUrl}/api/favorites/remove`,
|
||||
method: 'POST',
|
||||
data: {
|
||||
openid: this.data.openid,
|
||||
name: item.name
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data && res.data.success) {
|
||||
wx.showToast({ title: '已移除', icon: 'success' });
|
||||
this.closeDetail();
|
||||
this.loadFavorites();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.loadFavorites();
|
||||
wx.stopPullDownRefresh();
|
||||
}
|
||||
});
|
||||
6
miniprogram/pages/profile/profile.json
Normal file
6
miniprogram/pages/profile/profile.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"navigationBarTitleText": "我的心动名单",
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
"navigationBarTextStyle": "black",
|
||||
"backgroundColor": "#FAFAFA"
|
||||
}
|
||||
49
miniprogram/pages/profile/profile.wxml
Normal file
49
miniprogram/pages/profile/profile.wxml
Normal file
@@ -0,0 +1,49 @@
|
||||
<view class="container">
|
||||
<!-- 顶部标题 -->
|
||||
<view class="header">
|
||||
<view class="back-btn" bindtap="onBack">←</view>
|
||||
<view class="header-title">心动名单</view>
|
||||
<view class="header-spacer"></view>
|
||||
</view>
|
||||
|
||||
<!-- 收藏列表 -->
|
||||
<scroll-view scroll-y class="favorites-scroll" wx:if="{{favorites.length > 0}}">
|
||||
<view class="favorites-grid">
|
||||
<view
|
||||
class="favorite-item"
|
||||
wx:for="{{favorites}}"
|
||||
wx:key="name"
|
||||
bindtap="onItemTap"
|
||||
data-index="{{index}}"
|
||||
>
|
||||
<view class="name">{{item.name}}</view>
|
||||
<view class="origin">{{item.origin}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" wx:if="{{favorites.length === 0}}">
|
||||
<view class="empty-icon">素</view>
|
||||
<text class="empty-text">锦囊空空，静待灵感</text>
|
||||
<text class="empty-subtext">在见素中右滑收藏心动的名字</text>
|
||||
</view>
|
||||
|
||||
<!-- 半屏弹窗 - 详情展示 -->
|
||||
<view class="detail-modal {{showDetail ? 'visible' : ''}}" bindtap="closeDetail">
|
||||
<view class="detail-content" catchtap="preventBubble">
|
||||
<view class="detail-close" bindtap="closeDetail">×</view>
|
||||
<view class="detail-name">{{selectedItem.name}}</view>
|
||||
<view class="detail-origin">{{selectedItem.origin}}</view>
|
||||
<view class="detail-desc">{{selectedItem.description}}</view>
|
||||
<view class="detail-meta">
|
||||
<text class="detail-tone">声韵：{{selectedItem.tone}}</text>
|
||||
<text class="detail-score">见素评分：{{selectedItem.score}}</text>
|
||||
</view>
|
||||
<view class="detail-actions">
|
||||
<view class="detail-btn share-btn" bindtap="onShare">分享</view>
|
||||
<view class="detail-btn remove-btn" bindtap="onRemove">移除</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
217
miniprogram/pages/profile/profile.wxss
Normal file
217
miniprogram/pages/profile/profile.wxss
Normal file
@@ -0,0 +1,217 @@
|
||||
page {
|
||||
background-color: #FAFAFA;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100%;
|
||||
padding: 0 40rpx 40rpx;
|
||||
}
|
||||
|
||||
/* 顶部标题 */
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 40rpx 0;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
font-size: 36rpx;
|
||||
color: #A0A0A0;
|
||||
padding: 20rpx;
|
||||
margin-left: -20rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-family: "Noto Serif SC", serif;
|
||||
font-size: 32rpx;
|
||||
color: #2D2D2D;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.header-spacer {
|
||||
width: 76rpx;
|
||||
}
|
||||
|
||||
/* 收藏列表 */
|
||||
.favorites-scroll {
|
||||
height: calc(100vh - 200rpx);
|
||||
}
|
||||
|
||||
.favorites-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.favorite-item {
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.favorite-item:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.favorite-item .name {
|
||||
font-family: "Noto Serif SC", serif;
|
||||
font-size: 48rpx;
|
||||
color: #2D2D2D;
|
||||
margin-bottom: 16rpx;
|
||||
letter-spacing: 8rpx;
|
||||
}
|
||||
|
||||
.favorite-item .origin {
|
||||
font-size: 24rpx;
|
||||
color: #888888;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 200rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-family: "Noto Serif SC", serif;
|
||||
font-size: 120rpx;
|
||||
color: #E0E0E0;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-family: "Noto Serif SC", serif;
|
||||
font-size: 32rpx;
|
||||
color: #A0A0A0;
|
||||
letter-spacing: 4rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.empty-subtext {
|
||||
font-size: 24rpx;
|
||||
color: #C0C0C0;
|
||||
}
|
||||
|
||||
/* 半屏弹窗 */
|
||||
.detail-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 100;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.detail-modal.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
padding: 60rpx 50rpx 80rpx;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.detail-modal.visible .detail-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.detail-close {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
right: 40rpx;
|
||||
font-size: 48rpx;
|
||||
color: #C0C0C0;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.detail-name {
|
||||
font-family: "Noto Serif SC", serif;
|
||||
font-size: 72rpx;
|
||||
color: #2D2D2D;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
letter-spacing: 16rpx;
|
||||
}
|
||||
|
||||
.detail-origin {
|
||||
font-size: 26rpx;
|
||||
color: #888888;
|
||||
text-align: center;
|
||||
margin-bottom: 40rpx;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.detail-desc {
|
||||
font-size: 28rpx;
|
||||
color: #4A4A4A;
|
||||
line-height: 2;
|
||||
text-align: justify;
|
||||
margin-bottom: 40rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40rpx;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.detail-tone, .detail-score {
|
||||
font-size: 22rpx;
|
||||
color: #A0A0A0;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.detail-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40rpx;
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
padding: 20rpx 60rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 26rpx;
|
||||
letter-spacing: 4rpx;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
background: #2D2D2D;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.share-btn:active {
|
||||
background: #1A1A1A;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
background: #F5F5F5;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.remove-btn:active {
|
||||
background: #E8E8E8;
|
||||
}
|
||||
Reference in New Issue
Block a user