From 7977dc5b2b8c03fafcd5dcbe3dee7f50703e26b0 Mon Sep 17 00:00:00 2001
From: guojin26 <guojin26@huawei.com>
Date: Wed, 8 Dec 2021 10:55:31 +0800
Subject: [PATCH] add customComponent

Signed-off-by: guojin26 <guojin26@huawei.com>
---
 .../main/js/default/common/component/comp.css |  8 +----
 .../main/js/default/common/component/comp.hml |  4 +--
 .../main/js/default/common/component/comp.js  | 29 ++++++++++++++++---
 .../entry/src/main/js/default/i18n/en-US.json |  1 +
 .../main/js/default/pages/collect/index.css   | 13 +++++++++
 .../main/js/default/pages/collect/index.hml   | 11 +++++--
 .../main/js/default/pages/collect/index.js    |  4 +++
 .../src/main/js/default/pages/index/index.css | 12 +++++---
 .../src/main/js/default/pages/index/index.hml |  6 ++--
 9 files changed, 66 insertions(+), 22 deletions(-)

diff --git a/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.css b/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.css
index b5a26ce1e2..207fc7730c 100644
--- a/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.css
+++ b/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.css
@@ -15,8 +15,8 @@
 
 .text-title {
     width: 100%;
-    height: 48px;
     font-size: 25px;
+    height: 60px;
     padding: 5px;
     background-color: antiquewhite;
 }
@@ -44,12 +44,6 @@
     font-size: 25px;
 }
 
-.text-introduction {
-    width: 100%;
-    font-size: 20px;
-    margin-top: 5px;
-}
-
 .text-collect {
     width: 100%;
     font-size: 20px;
diff --git a/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.hml b/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.hml
index efe56cb3d3..1095cf0a73 100644
--- a/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.hml
+++ b/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.hml
@@ -17,7 +17,7 @@
     <image class="book_image" src="common/images/book.png"></image>
     <div class="content">
         <text class="text-name">{{ name }}</text>
-        <text class="text-introduction">{{ $t('strings.book_introduction') }}</text>
-        <text class="text-collect" style="color: {{ collectColor }};" onclick="childClicked">{{ collectStr }}</text>
+        <slot name="first"></slot>
+        <text class="text-collect" style="color : {{ collectColor }};" onclick="childClicked">{{ collectStr }}</text>
     </div>
 </div>
\ No newline at end of file
diff --git a/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.js b/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.js
index d13bda8b05..653fee5d45 100644
--- a/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.js
+++ b/UI/JSUICustomComponent/entry/src/main/js/default/common/component/comp.js
@@ -12,6 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import prompt from '@system.prompt';
 
 export default {
     data: {
@@ -26,8 +27,8 @@ export default {
             }
         }
     },
-    onInit(){
-        this.initData();
+    onInit() {
+        console.info('[JsCustomComponet] comp onInit')
     },
     initData() {
         if (this.collect) {
@@ -38,8 +39,28 @@ export default {
             this.collectColor = "blue"
         }
     },
-    childClicked () {
-        this.$emit('eventType1',{bookName: this.name})
+    clearData() {
+        this.collectStr = ""
+        this.collectColor = ""
+    },
+    onAttached() {
+        console.info('[JsCustomComponet] comp onAttached')
+    },
+    onDetached() {
+        console.info('[JsCustomComponet] comp onDetached')
+    },
+    onPageShow() {
+        this.initData();
+        console.info('[JsCustomComponet] comp onPageShow')
+    },
+    onPageHide() {
+        console.info('[JsCustomComponet] comp onPageHide')
+        this.clearData()
+    },
+    childClicked() {
+        this.$emit('eventType1', {
+            bookName: this.name
+        })
         this.initData()
     },
 }
\ No newline at end of file
diff --git a/UI/JSUICustomComponent/entry/src/main/js/default/i18n/en-US.json b/UI/JSUICustomComponent/entry/src/main/js/default/i18n/en-US.json
index 5bde4d02ac..98161f38c7 100644
--- a/UI/JSUICustomComponent/entry/src/main/js/default/i18n/en-US.json
+++ b/UI/JSUICustomComponent/entry/src/main/js/default/i18n/en-US.json
@@ -7,6 +7,7 @@
     "enter_shelf": "Enter collected",
     "recommend":  "Recommended today:",
     "collected_title":  "Collected:",
+    "back":  "<",
     "collected_null_tips":  "Cannot find any collected books.",
     "bookNames": [
       {
diff --git a/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.css b/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.css
index a4ce43ecd9..49e3ce49a6 100644
--- a/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.css
+++ b/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.css
@@ -22,6 +22,13 @@
     padding: 10px;
 }
 
+.back {
+    font-size: 30px;
+    height: 60px;
+    padding: 5px;
+    background-color: antiquewhite;
+}
+
 .text-tips {
     width: 100%;
     font-size: 20px;
@@ -29,4 +36,10 @@
     color: gray;
     text-align: center;
     margin-top: 50px;
+}
+
+.text-introduction {
+    width: 100%;
+    font-size: 20px;
+    margin-top: 5px;
 }
\ No newline at end of file
diff --git a/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.hml b/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.hml
index 036fcf51a0..32438671ed 100644
--- a/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.hml
+++ b/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.hml
@@ -15,10 +15,15 @@
 
 <element name='comp' src='../../common/component/comp.hml'></element>
 <div class="container">
-    <text class="text-title" onclick="childClicked">{{ $t('strings.collected_title') }}</text>
-    <list scrolleffect="no" if="{{ !showTips }}">>
+    <div style="flex-direction : row;" onclick="back">
+        <text class="back">{{ $t('strings.back') }}</text>
+        <text class="text-title">{{ $t('strings.collected_title') }}</text>
+    </div>
+    <list scrolleffect="no" if="{{ ! showTips }}">>
         <list-item clickeffect="false" for="{{ bookNames }}">
-            <comp @event-type1="textClicked" name="{{ $item.name }}" collect="{{ $item.collect }}"></comp>
+            <comp @event-type1="textClicked" name="{{ $item.name }}" collect="{{ $item.collect }}">
+                <text class="text-introduction" slot="first">{{ $t('strings.book_introduction') }}</text>
+            </comp>
         </list-item>
     </list>
     <text class="text-tips" if="{{ showTips }}">{{ $t('strings.collected_null_tips') }}</text>
diff --git a/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.js b/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.js
index f0db74de5c..75fb70c195 100644
--- a/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.js
+++ b/UI/JSUICustomComponent/entry/src/main/js/default/pages/collect/index.js
@@ -12,6 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import router from '@system.router';
 
 export default {
     data: {
@@ -22,5 +23,8 @@ export default {
         if(JSON.stringify(this.bookNames).length<=2){
             this.showTips = true
         }
+    },
+    back: function(){
+        router.back()
     }
 }
\ No newline at end of file
diff --git a/UI/JSUICustomComponent/entry/src/main/js/default/pages/index/index.css b/UI/JSUICustomComponent/entry/src/main/js/default/pages/index/index.css
index 88d36216f4..ebb8b1e238 100644
--- a/UI/JSUICustomComponent/entry/src/main/js/default/pages/index/index.css
+++ b/UI/JSUICustomComponent/entry/src/main/js/default/pages/index/index.css
@@ -19,21 +19,25 @@
     width: 100%;
     flex-direction: column;
     height: 100%;
-    padding: 10px;
+    padding: 5px;
     align-items: flex-start;
 }
 
 .button {
-    margin: 10px;
     font-size: 20px;
-    padding: 5px;
     text-color: white;
     width: 80%;
-    height: 48px;
+    height: 65px;
 }
 
 .div-button {
     width: 100%;
     flex-direction: column;
     align-items: center;
+}
+
+.text-introduction {
+    width: 100%;
+    font-size: 20px;
+    margin-top: 5px;
 }
\ No newline at end of file
diff --git a/UI/JSUICustomComponent/entry/src/main/js/default/pages/index/index.hml b/UI/JSUICustomComponent/entry/src/main/js/default/pages/index/index.hml
index 66e2e739bc..defef28a22 100644
--- a/UI/JSUICustomComponent/entry/src/main/js/default/pages/index/index.hml
+++ b/UI/JSUICustomComponent/entry/src/main/js/default/pages/index/index.hml
@@ -17,8 +17,10 @@
 <div class="container">
     <text class="text-title" onclick="childClicked">{{ $t('strings.recommend') }}</text>
     <list scrolleffect="no">
-        <list-item clickeffect="false"  for="{{ bookNames }}">
-            <comp @event-type1="textClicked" name="{{ $item.name }}" collect="{{ $item.collect }}"></comp>
+        <list-item clickeffect="false" for="{{ bookNames }}">
+            <comp @event-type1="textClicked" name="{{ $item.name }}" collect="{{ $item.collect }}">
+                <text class="text-introduction" slot="first">{{ $t('strings.book_introduction') }}</text>
+            </comp>
         </list-item>
     </list>
     <div class="div-button">
-- 
Gitee