bowong
/
bw-mini-app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: replace SubmitButton component with inline button implementation and enhance styling

This commit is contained in:
iHeyTang 2025-09-28 13:07:49 +08:00
parent 4e5dc53741
commit e95db8e321
5 changed files with 96 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/pages/friends-photo/components/SubmitButton/index.css
View File

@ -1,58 +0,0 @@
/* 提交区域 */
.submit-section {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20px 14px;
padding-bottom: calc(20px + env(safe-area-inset-bottom));
z-index: 10;
}
/* 提交按钮 */
.submit-button {
width: 100%;
height: 96px;
background: #000;
border-radius: 24px;
border: none;
outline: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s ease;
}
.submit-text {
color: white;
font-size: 24px;
font-weight: 600;
}
.submit-button.disabled {
background-color: #ccc;
cursor: not-allowed;
border: none;
outline: none;
}
/* 加载动画 */
.loading-spinner {
width: 16px;
height: 16px;
border: 2px solid rgb(255 255 255 / 30%);
border-top: 2px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

29
src/pages/friends-photo/components/SubmitButton/index.tsx
View File

@ -1,29 +0,0 @@
import { View, Button } from '@tarojs/components';
import { useI18n } from '../../../../hooks/useI18n';
import './index.css';
interface SubmitButtonProps {
disabled: boolean;
loading: boolean;
onSubmit: () => void;
className?: string;
}
export default function SubmitButton({ disabled, loading, onSubmit, className = '' }: SubmitButtonProps) {
const { t } = useI18n();
return (
<View className={`submit-section ${className}`}>
<Button className={`submit-button ${disabled || loading ? 'disabled' : ''}`} disabled={disabled || loading} onClick={onSubmit}>
{loading ? (
<>
<View className="loading-spinner" />
<View className="submit-text">{t('friendsPhoto.generating')}</View>
</>
) : (
<View className="submit-text">{t('friendsPhoto.startGenerating')}</View>
)}
</Button>
</View>
);
}

2
src/pages/friends-photo/components/index.ts
View File

@ -1,2 +0,0 @@
export { default as UploadCard } from './UploadCard';
export { default as SubmitButton } from './SubmitButton';

59
src/pages/friends-photo/index.css
View File

@ -18,3 +18,62 @@
min-height: 0;
overflow: hidden;
}
/* 提交区域 */
.submit-section {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20px 14px;
padding-bottom: calc(20px + env(safe-area-inset-bottom));
z-index: 10;
}
/* 提交按钮 */
.submit-button {
width: 100%;
height: 96px;
background: #000;
border-radius: 24px;
border: none;
outline: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s ease;
}
.submit-text {
color: white;
font-size: 24px;
font-weight: 600;
}
.submit-button.disabled {
background-color: #ccc;
cursor: not-allowed;
border: none;
outline: none;
}
/* 加载动画 */
.loading-spinner {
width: 16px;
height: 16px;
border: 2px solid rgb(255 255 255 / 30%);
border-top: 2px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

51
src/pages/friends-photo/index.tsx
View File

@ -1,12 +1,13 @@
import { View } from '@tarojs/components';
import { useState, useEffect } from 'react';
import { Template } from '@/sdk/sdk-server';
import { Button, View } from '@tarojs/components';
import Taro, { navigateTo, useRouter } from '@tarojs/taro';
import { useEffect, useState } from 'react';
import { useServerSdk } from '../../hooks/index';
import { useI18n } from '../../hooks/useI18n';
import { i18nManager } from '../../i18n/manager';
// 导入组件
import { UploadCard, SubmitButton } from './components';
import UploadCard from './components/UploadCard';
// 导入hooks
import { useImageUpload } from './hooks';
@ -15,6 +16,10 @@ import './index.css';
export default function FriendsPhoto() {
const { templateCode } = useRouter().params;
const [template, setTemplate] = useState<Template | null>(null);
console.log(template);
const { t } = useI18n();
const serverSdk = useServerSdk();
@ -27,6 +32,15 @@ export default function FriendsPhoto() {
i18nManager.updateNavigationBarTitle('friends-photo');
}, []);
useEffect(() => {
const fetchTemplate = async () => {
if (!templateCode) return;
const template = await serverSdk.getTemplate(templateCode);
setTemplate(template);
};
fetchTemplate();
}, [templateCode]);
// 提交处理
const handleSubmit = async () => {
if (!templateCode) {
@ -89,20 +103,29 @@ export default function FriendsPhoto() {
<View className="friends-photo">
{/* 上传区域 */}
<View className="upload-section">
<UploadCard
imageUrl={image1}
title={t('friendsPhoto.selectYourPhoto')}
onUpload={() => uploadSingleImage(1)}
/>
<UploadCard
imageUrl={image2}
title={t('friendsPhoto.selectFriendPhoto')}
onUpload={() => uploadSingleImage(2)}
/>
<UploadCard imageUrl={image1} title={t('friendsPhoto.selectYourPhoto')} onUpload={() => uploadSingleImage(1)} />
<UploadCard imageUrl={image2} title={t('friendsPhoto.selectFriendPhoto')} onUpload={() => uploadSingleImage(2)} />
</View>
{/* 固定底部按钮 */}
<SubmitButton disabled={!image1 || !image2} loading={loading} onSubmit={handleSubmit} />
<View className="submit-section">
<Button
className={`submit-button ${!image1 || !image2 || loading ? 'disabled' : ''}`}
disabled={!image1 || !image2 || loading}
onClick={handleSubmit}
>
{loading ? (
<>
<View className="loading-spinner" />
<View className="submit-text">{t('friendsPhoto.generating')}</View>
</>
) : (
<View className="submit-text">
${template?.creditCost} {t('friendsPhoto.startGenerating')}
</View>
)}
</Button>
</View>
</View>
);
}