鸿蒙工程公用套件 - 会话页

features/business/Index.ets

@@ -2,4 +2,5 @@ export { add } from './src/main/ets/utils/Calc';
 export  { HomePages } from './src/main/ets/pages/HomePages';
 export {YTChat} from './src/main/ets/component/YTChat'
 export {YTCard} from './src/main/ets/component/YTCard'
-export {YTTag} from './src/main/ets/component/YTTag'
+export {YTTag} from './src/main/ets/component/YTTag'
+export {YTChatInput} from './src/main/ets/component/YTChatInput'

features/business/src/main/ets/component/YTCard.ets

@@ -1,8 +1,8 @@
+import { YTTag } from "./YTTag"
 
 @Component
 export struct YTCard {
   desc: string = ''
-  @BuilderParam tag?: (tagDesc:string) => void
   tagArr: string[] = []
 
   build() {
@@ -12,15 +12,15 @@ export struct YTCard {
         .width('80%')
         .height(0)
         .border({ width: {left:0,right:0,top:0,bottom:2}, color:Color.White, style: BorderStyle.Dashed })
+        .margin({bottom: 15})
       ForEach(this.tagArr, (tagDesc:string)=>{
-        this.tag?.(tagDesc)
+        YTTag({desc: tagDesc}).padding({top: 5, bottom: 5})
       })
     }
-    .height(214)
     .width('100%')
     .flexShrink(0)
     .borderRadius(8)
-    .padding({ left: 18, right: 18, top: 8})
+    .padding({ left: 18, right: 18, top: 8, bottom: 18})
     .backgroundColor(Color.Pink)
     .linearGradient({angle: 133,colors: [['#ffe77575',0], ['#ffff97d9',1.4225]]})
   }

features/business/src/main/ets/component/YTChat.ets

@@ -1,29 +1,60 @@
 import { YTHeader } from "basic"
+import { YTChatInput, YTTag } from "../../../../Index"
+import { YTCard } from "./YTCard"
 
 @Component
 export struct YTChat{
-  @BuilderParam card?: () => void
-  @BuilderParam cardTag?: () => void
-  @BuilderParam chatTag?: () => void
-  @BuilderParam chatInput?: () => void
-  @BuilderParam backTop?: () => void
+  @State showTag: boolean = false
+  @State inputValue: string = ''
   title:string = ''
   cardDesc:string = ''
   chatInputTips:string = ''
+  tagDescArr: string[] = ['高情商','撩女神','幽默风趣','暧昧拉扯','情场高手','土味情话','风度绅士','浪漫情话']
 
   build() {
     Column(){
       YTHeader({title: this.title})
+      //恋爱导师卡片
       Column() {
-        this.card?.()
+        YTCard({desc: '真情流露，悸动的青春。输入文章框架和主题，一键帮您写出优美的情书。', tagArr: ['我喜欢你','呵呵','我去洗澡了']})
+          .padding({left:18, right:12})
+
+        //聊天消息
+        Row(){
+
+        }
+        .layoutWeight(1)
+
+        //话术选择
+
         Row(){
-          this.chatInput?.()
-          this.backTop?.()
+          YTChatInput({btnName: '高情商',inputVal: this.inputValue, placeholder: '请输入TA说的话', showTag: this.showTag})
+          Image("").width(40).height(40).backgroundColor(Color.Pink).margin({left: 50})
+        }
+        .width('100%')
+        .height(60)
+        .backgroundColor('#d9efefef')
+        .flexShrink(0)
+        .alignSelf(ItemAlign.End)
+
+        //话术选择卡片
+        if (this.showTag){
+          Grid(){
+            ForEach(this.tagDescArr, (desc:string)=>{
+              GridItem(){
+                YTTag({desc: desc, tagWidth: 79}).padding({top: 5, bottom: 5})
+              }
+            })
+          }
+          .columnsTemplate('1fr 1fr 1fr 1fr')
+          .width('100%')
+          .height(154)
+          .backgroundColor('#d9efefef')
         }
-        this.chatTag?.()
       }
+      .height('100%')
+      .layoutWeight(1)
       .width('100%')
-      .padding({left:18, right:18})
     }
     .height('100%')
     .width('100%')

features/business/src/main/ets/component/YTChatInput.ets

@@ -0,0 +1,35 @@
+import { YtButton } from "basic"
+
+@Component
+export struct YTChatInput {
+    @Link inputVal: string
+    placeholder?:string = ''
+    btnName:string = ''
+    @Link showTag:boolean
+
+    build() {
+        Row(){
+            YtButton({
+                btHeight: 28,
+                btWidth: 80,
+                btContent: this.btnName,
+                bgc: '#fffcb9b9',
+                btBorder: {radius: 8},
+                btFontColor: Color.White,
+                click: ()=>{
+                    this.showTag = !this.showTag
+                }
+            })
+            TextInput({placeholder: this.placeholder, text: $$this.inputVal})
+                .height(40)
+                .borderRadius({topRight: 8,bottomRight:8})
+                .backgroundColor(Color.White)
+        }
+        .width('80%')
+        .height(40)
+        .padding({left:18, right:18, top: 12, bottom: 12})
+        .margin({left: 18, right:18})
+        .backgroundColor(Color.White)
+        .borderRadius(8)
+    }
+}

features/business/src/main/ets/component/YTTag.ets

@@ -1,14 +1,19 @@
 @Component
 export struct YTTag {
   desc: string = ''
+  tagWidth: Length = '100%'
 
   build() {
     Row() {
-      Text(this.desc)
+      Text(this.desc).fontColor('#FF575757').fontFamily('MiSans VF').fontSize(12).fontWeight(400)
+        .fontStyle(FontStyle.Normal).letterSpacing(-0.33).lineHeight('normal')
+        .textAlign(TextAlign.Center)
     }
+    .justifyContent(FlexAlign.Center)
+    .borderRadius(8)
     .height(36)
-    .width('100%')
-    .padding(5)
-    .backgroundColor(Color.Orange)
+    .width(this.tagWidth)
+    .padding({left: 8,right:8, top:8, bottom: 8})
+    .backgroundColor(Color.White)
   }
 }

products/entry/src/main/ets/pages/Index.ets

@@ -20,8 +20,7 @@ struct Index {
       Tabs() {
         TabContent() {
           if(this.currentIndex == 0){
-            // HomePages()
-            YTChat({title: '恋爱导师',card: this.cardBuilder, cardDesc: '你好，我是情感导师，输入TA说的话，我来教你怎么回答', cardTag: this.cardTagBuilder, backTop: this.backTopBuilder})
+            HomePages()
           }
         }
         .tabBar(this.barBuilder({
@@ -30,7 +29,7 @@ struct Index {
           index: 0
         }))
         TabContent() {
-
+          YTChat({title: '恋爱导师', cardDesc: '你好，我是情感导师，输入TA说的话，我来教你怎么回答'})
         }
         .tabBar(this.barBuilder({
           text: '恋爱AI',
@@ -66,16 +65,6 @@ struct Index {
 
   }
 
-  @Builder
-  cardTagBuilder(){
-    YTTag({desc: '我喜欢你'})
-  }
-
-  @Builder
-  cardBuilder(){
-    YTCard({desc: '真情流露，悸动的青春。输入文章框架和主题，一键帮您写出优美的情书。', tagArr: ['我喜欢你','呵呵','我去洗澡了'], tag: this.cardTagBuilder})
-  }
-
   @Builder
   barBuilder(item: BarType<undefined>) {
     Column() {