From e95db8e321a9dc1a8988f612c66891fbfae99d8a Mon Sep 17 00:00:00 2001
From: iHeyTang <dehui1012@qq.com>
Date: Sun, 28 Sep 2025 13:07:49 +0800
Subject: [PATCH] refactor: replace SubmitButton component with inline button
 implementation and enhance styling

---
 .../components/SubmitButton/index.css         | 58 ------------------
 .../components/SubmitButton/index.tsx         | 29 ---------
 src/pages/friends-photo/components/index.ts   |  2 -
 src/pages/friends-photo/index.css             | 59 +++++++++++++++++++
 src/pages/friends-photo/index.tsx             | 51 +++++++++++-----
 5 files changed, 96 insertions(+), 103 deletions(-)
 delete mode 100644 src/pages/friends-photo/components/SubmitButton/index.css
 delete mode 100644 src/pages/friends-photo/components/SubmitButton/index.tsx
 delete mode 100644 src/pages/friends-photo/components/index.ts

diff --git a/src/pages/friends-photo/components/SubmitButton/index.css b/src/pages/friends-photo/components/SubmitButton/index.css
deleted file mode 100644
index 725ab6a..0000000
--- a/src/pages/friends-photo/components/SubmitButton/index.css
+++ /dev/null
@@ -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);
-  }
-}
diff --git a/src/pages/friends-photo/components/SubmitButton/index.tsx b/src/pages/friends-photo/components/SubmitButton/index.tsx
deleted file mode 100644
index 5668270..0000000
--- a/src/pages/friends-photo/components/SubmitButton/index.tsx
+++ /dev/null
@@ -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>
-  );
-}
diff --git a/src/pages/friends-photo/components/index.ts b/src/pages/friends-photo/components/index.ts
deleted file mode 100644
index 044d379..0000000
--- a/src/pages/friends-photo/components/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as UploadCard } from './UploadCard';
-export { default as SubmitButton } from './SubmitButton';
diff --git a/src/pages/friends-photo/index.css b/src/pages/friends-photo/index.css
index d033ad9..41115df 100644
--- a/src/pages/friends-photo/index.css
+++ b/src/pages/friends-photo/index.css
@@ -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);
+  }
+}
diff --git a/src/pages/friends-photo/index.tsx b/src/pages/friends-photo/index.tsx
index f4be088..39a1559 100644
--- a/src/pages/friends-photo/index.tsx
+++ b/src/pages/friends-photo/index.tsx
@@ -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>
   );
 }