|
@@ -10,50 +10,107 @@ import BottomBar from "@/components/BottomBar";
|
|
|
|
|
|
import IconQ from "@/components/icon/IconQ";
|
|
import IconQ from "@/components/icon/IconQ";
|
|
import IconA from "@/components/icon/IconA";
|
|
import IconA from "@/components/icon/IconA";
|
|
-import IconAImage from "@/components/icon/IconAImage";
|
|
|
|
|
|
+
|
|
import IconPlusColor14 from "@/components/icon/IconPlusColor14";
|
|
import IconPlusColor14 from "@/components/icon/IconPlusColor14";
|
|
import IconALink from "@/components/icon/IconALink";
|
|
import IconALink from "@/components/icon/IconALink";
|
|
import IconDeleteGray16 from "@/components/icon/IconDeleteGray16";
|
|
import IconDeleteGray16 from "@/components/icon/IconDeleteGray16";
|
|
import { useState } from "react";
|
|
import { useState } from "react";
|
|
-import Taro from "@tarojs/taro";
|
|
|
|
-import WemetaTextarea from '@/components/wemeta-textarea'
|
|
|
|
-import WemetaInput from '@/components/wemeta-input'
|
|
|
|
-import MediaGrid from './components/media-grid'
|
|
|
|
|
|
+import IconAImage from "@/components/icon/IconAImage";
|
|
|
|
+import WemetaTextarea from "@/components/wemeta-textarea";
|
|
|
|
+import WemetaInput from "@/components/wemeta-input";
|
|
|
|
+import UploaderGrid from '@/components/UploaderGrid'
|
|
|
|
+import type { TMediaType } from "@/types/index";
|
|
|
|
|
|
|
|
+type TFormdata = {q:string, a: string, links: string[], mediaList: TMediaType[]}
|
|
|
|
+
|
|
|
|
+interface IProps {
|
|
|
|
+ initialData?: TFormdata
|
|
|
|
+}
|
|
|
|
+export default function Index({ initialData }: IProps) {
|
|
|
|
+
|
|
|
|
+ const [formData, setFormData] = useState<TFormdata>(
|
|
|
|
+ initialData || {
|
|
|
|
+ q: "手术费用大概多少?能刷医保吗?",
|
|
|
|
+ a: "全飞秒手术费用通常在1.5万-2万元左右,半飞秒约1.2万起,ICL晶体术因晶体品牌不同在2.5万-4万元不等。屈光手术属于择业性消费,一般不纳入医保范围,但部分城市可用商业保险或税优健康险报销。",
|
|
|
|
+ links: ["baidu.com"],
|
|
|
|
+ mediaList: [{fileType: 'image',url: 'https://cdn.wehome.cn/cmn/png/53/META-H8UKWHWU-2JNUAG2BARJF55VHU9QS3-YBQGHDAM-IW.png'}]
|
|
|
|
+ }
|
|
|
|
+ );
|
|
|
|
|
|
-export default function Index() {
|
|
|
|
- const [value, setValue] = useState("手术费用大概多少?能刷医保吗?");
|
|
|
|
- const [valueA, setValueA] = useState("全飞秒手术费用通常在1.5万-2万元左右,半飞秒约1.2万起,ICL晶体术因晶体品牌不同在2.5万-4万元不等。屈光手术属于择业性消费,一般不纳入医保范围,但部分城市可用商业保险或税优健康险报销。");
|
|
|
|
const handleInput = (value: string) => {
|
|
const handleInput = (value: string) => {
|
|
- setValue(value);
|
|
|
|
|
|
+ setFormData({
|
|
|
|
+ ...formData,
|
|
|
|
+ q: value,
|
|
|
|
+ });
|
|
};
|
|
};
|
|
const handleValueAInput = (value: string) => {
|
|
const handleValueAInput = (value: string) => {
|
|
- setValueA(value);
|
|
|
|
|
|
+ setFormData({
|
|
|
|
+ ...formData,
|
|
|
|
+ a: value,
|
|
|
|
+ });
|
|
};
|
|
};
|
|
- const handleDelete = (e:any)=> {
|
|
|
|
|
|
+
|
|
|
|
+ // 添加链接
|
|
|
|
+ const addLink = () => {
|
|
|
|
+ setFormData({
|
|
|
|
+ ...formData,
|
|
|
|
+ links: [...formData.links, ""],
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ // 删除链接
|
|
|
|
+ const removeLink = (e, index) => {
|
|
e.stopPropagation();
|
|
e.stopPropagation();
|
|
- console.log('delete')
|
|
|
|
- }
|
|
|
|
|
|
+ const newLinks = [...formData.links];
|
|
|
|
+ newLinks.splice(index, 1);
|
|
|
|
+ setFormData({
|
|
|
|
+ ...formData,
|
|
|
|
+ links: newLinks,
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
|
|
- const handleAddLink = ()=> {
|
|
|
|
|
|
+ // 更新单个链接
|
|
|
|
+ const handleLinkChange = (index, value) => {
|
|
|
|
+ const newLinks = [...formData.links];
|
|
|
|
+ newLinks[index] = value;
|
|
|
|
+ setFormData({
|
|
|
|
+ ...formData,
|
|
|
|
+ links: newLinks,
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
|
|
|
|
+ const handleDeleteMedia = (index:number) => {
|
|
|
|
+ setFormData(prev => ({
|
|
|
|
+ ...prev,
|
|
|
|
+ mediaList: prev.mediaList.filter((_, i) => i !== index)
|
|
|
|
+ }));
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ const handleSubmit = ()=> {
|
|
|
|
+ // 过滤掉空的链接
|
|
|
|
+ const dataToSubmit = {
|
|
|
|
+ ...formData,
|
|
|
|
+ links: formData.links.filter(link => link.trim() !== '')
|
|
|
|
+ }
|
|
|
|
+ console.log(dataToSubmit)
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
return (
|
|
<PageCustom>
|
|
<PageCustom>
|
|
- <NavBarNormal backText="飞秒小知识"></NavBarNormal>
|
|
|
|
|
|
+ <NavBarNormal scrollFadeIn backText="飞秒小知识"></NavBarNormal>
|
|
<View className="w-full pb-120">
|
|
<View className="w-full pb-120">
|
|
<View className="p-16">
|
|
<View className="p-16">
|
|
<View className="flex flex-col gap-16">
|
|
<View className="flex flex-col gap-16">
|
|
-
|
|
|
|
<View className="flex flex-col">
|
|
<View className="flex flex-col">
|
|
<View className="flex items-start gap-8 mb-6">
|
|
<View className="flex items-start gap-8 mb-6">
|
|
- <View className="flex-center h-28"><IconQ/></View>
|
|
|
|
|
|
+ <View className="flex-center h-28">
|
|
|
|
+ <IconQ />
|
|
|
|
+ </View>
|
|
<View className="flex-1 text-14 leading-28">问题描述</View>
|
|
<View className="flex-1 text-14 leading-28">问题描述</View>
|
|
</View>
|
|
</View>
|
|
<View className="">
|
|
<View className="">
|
|
<WemetaTextarea
|
|
<WemetaTextarea
|
|
- value={value}
|
|
|
|
|
|
+ value={formData.q}
|
|
onInput={handleInput}
|
|
onInput={handleInput}
|
|
placeholder="描述你想要生成的画面和动作。例如:职场精英在点头微笑"
|
|
placeholder="描述你想要生成的画面和动作。例如:职场精英在点头微笑"
|
|
/>
|
|
/>
|
|
@@ -63,12 +120,14 @@ export default function Index() {
|
|
{/* 回答 */}
|
|
{/* 回答 */}
|
|
<View className="flex flex-col">
|
|
<View className="flex flex-col">
|
|
<View className="flex items-start gap-8 mb-6">
|
|
<View className="flex items-start gap-8 mb-6">
|
|
- <View className="flex-center h-28"><IconA/></View>
|
|
|
|
|
|
+ <View className="flex-center h-28">
|
|
|
|
+ <IconA />
|
|
|
|
+ </View>
|
|
<View className="flex-1 text-14 leading-28">回答</View>
|
|
<View className="flex-1 text-14 leading-28">回答</View>
|
|
</View>
|
|
</View>
|
|
<View>
|
|
<View>
|
|
<WemetaTextarea
|
|
<WemetaTextarea
|
|
- value={valueA}
|
|
|
|
|
|
+ value={formData.a}
|
|
onInput={handleValueAInput}
|
|
onInput={handleValueAInput}
|
|
placeholder="描述你想要生成的画面和动作。例如:职场精英在点头微笑"
|
|
placeholder="描述你想要生成的画面和动作。例如:职场精英在点头微笑"
|
|
/>
|
|
/>
|
|
@@ -78,43 +137,49 @@ export default function Index() {
|
|
{/* 链接 */}
|
|
{/* 链接 */}
|
|
<View className="flex flex-col">
|
|
<View className="flex flex-col">
|
|
<View className="flex items-start gap-8 mb-6">
|
|
<View className="flex items-start gap-8 mb-6">
|
|
- <View className="flex-center h-28"><IconALink/></View>
|
|
|
|
|
|
+ <View className="flex-center h-28">
|
|
|
|
+ <IconALink />
|
|
|
|
+ </View>
|
|
<View className="flex-1 text-14 leading-28">链接</View>
|
|
<View className="flex-1 text-14 leading-28">链接</View>
|
|
- <View className="flex-center px-8 gap-4" onClick={handleAddLink}>
|
|
|
|
- <IconPlusColor14/>
|
|
|
|
|
|
+ <View className="flex-center px-8 gap-4" onClick={addLink}>
|
|
|
|
+ <IconPlusColor14 />
|
|
<View className="text-primary">新增</View>
|
|
<View className="text-primary">新增</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View className="flex flex-col gap-8">
|
|
<View className="flex flex-col gap-8">
|
|
- <WemetaInput
|
|
|
|
- value={valueA}
|
|
|
|
- onInput={handleValueAInput}
|
|
|
|
- suffix={()=> <View onClick={handleDelete}><IconDeleteGray16/></View>}
|
|
|
|
- placeholder="请输入查看链接,支持长按粘贴..."
|
|
|
|
- />
|
|
|
|
-
|
|
|
|
- <WemetaInput
|
|
|
|
- value=""
|
|
|
|
- onInput={()=> {}}
|
|
|
|
- suffix={()=> <View onClick={handleDelete}><IconDeleteGray16/></View>}
|
|
|
|
- placeholder="请输入查看链接,支持长按粘贴..."
|
|
|
|
- />
|
|
|
|
|
|
+ {formData.links.map((link, index) => {
|
|
|
|
+ return (
|
|
|
|
+ <WemetaInput
|
|
|
|
+ value={link}
|
|
|
|
+ onInput={(value) => handleLinkChange(index, value)}
|
|
|
|
+ suffix={() => (
|
|
|
|
+ <View onClick={(e) => removeLink(e, index)}>
|
|
|
|
+ <IconDeleteGray16 />
|
|
|
|
+ </View>
|
|
|
|
+ )}
|
|
|
|
+ placeholder="请输入查看链接,支持长按粘贴..."
|
|
|
|
+ />
|
|
|
|
+ );
|
|
|
|
+ })}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
|
|
{/* 图片 */}
|
|
{/* 图片 */}
|
|
<View className="flex flex-col">
|
|
<View className="flex flex-col">
|
|
<View className="flex items-start gap-8 mb-6">
|
|
<View className="flex items-start gap-8 mb-6">
|
|
- <View className="flex-center h-28"><IconAImage/></View>
|
|
|
|
|
|
+ <View className="flex-center h-28">
|
|
|
|
+ <IconAImage />
|
|
|
|
+ </View>
|
|
<View className="flex-1 text-14 leading-28">图片</View>
|
|
<View className="flex-1 text-14 leading-28">图片</View>
|
|
</View>
|
|
</View>
|
|
- <MediaGrid />
|
|
|
|
|
|
+ <UploaderGrid list = {formData.mediaList} onChange={()=> {}} onDelete={handleDeleteMedia} />
|
|
</View>
|
|
</View>
|
|
|
|
+
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
-
|
|
|
|
|
|
+
|
|
<BottomBar>
|
|
<BottomBar>
|
|
- <View className="button-rounded button-primary flex-1">保存</View>
|
|
|
|
|
|
+ <View className="button-rounded button-primary flex-1" onClick={handleSubmit}>保存</View>
|
|
</BottomBar>
|
|
</BottomBar>
|
|
</View>
|
|
</View>
|
|
</PageCustom>
|
|
</PageCustom>
|