TASK: #113902 取消事件

src/components/pattern-view/pattern-view.ts

@@ -20,17 +20,22 @@ export class StarPatternView extends LitElement {
       font-weight: 400;
       color: #292929;
       font-family: 'OPPOSans';
-      margin-top: 0;
       color: #292929;
       font-size: 20px;
       height: 26.5px;
       line-height: 26.5px;
-      width: 150px;
       left: 50%;
-      top: 31%;
+      width: 150px;
       transform: translateX(-50%);
+      margin-top: 0;
       text-align: center;
     }
+    .textTop {
+      top: 31%;
+    }
+    .cancel {
+      bottom: 13.5%;
+    }
   `
   // public static override get styles(): CSSResultArray {
   //   return [sharedStyles]
@@ -63,6 +68,7 @@ export class StarPatternView extends LitElement {
   @property({type: Array}) passwdArr = []
   @property({type: String}) mode = ''
   @property({type: String}) changeText = ''
+  @property({type: String}) cancel = '取消'
   @property({type: String})
   get topDir() {
     return this._topDir
@@ -74,16 +80,39 @@ export class StarPatternView extends LitElement {
   }
 
   render() {
+    if (this.saveMode) {
+      return html`
+        <p class="textTop">${this.changeText}</p>
+        <canvas
+          id="canvas"
+          @touchstart=${this.touchStart}
+          @touchmove=${this.touchMove}
+          @touchend=${this.touchEnd}
+        ></canvas>
+      `
+    }
     return html`
-      <p>${this.changeText}</p>
+      <p class="textTop">${this.changeText}</p>
       <canvas
         id="canvas"
         @touchstart=${this.touchStart}
         @touchmove=${this.touchMove}
         @touchend=${this.touchEnd}
       ></canvas>
+      <p class="cancel" @touchstart=${this.touchStartCancel}>${this.cancel}</p>
     `
   }
+  touchStartCancel() {
+    this.dispatchEvent(
+      new CustomEvent('star-pattern-view-cancel', {
+        detail: {
+          value: true,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    )
+  }
 
   protected firstUpdated(
     _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
@@ -211,7 +240,7 @@ export class StarPatternView extends LitElement {
     console.log('请确认密码', this.savewd.toString())
     this.confirm = true
     this.changeText = '请确认图案'
-    console.log('###', this.passwd)
+    console.log('1', this.passwd)
 
     this.dispatchEvent(
       new CustomEvent('star-pattern-view-settings-change', {
@@ -225,7 +254,7 @@ export class StarPatternView extends LitElement {
   }
   confirmPasswd() {
     if (this.savewd.toString() == this.passwd.toString()) {
-      console.log('###', this.passwd)
+      console.log('2', this.passwd)
       this.dispatchEvent(
         new CustomEvent('star-pattern-view-settings-confirm', {
           detail: {

src/test/panels/pattern-view/pattern-view.ts

@@ -14,7 +14,9 @@ export class PanelPatternView extends LitElement {
   `
   render() {
     return html`
-      <star-pattern-view saveMode></star-pattern-view>
+      <div style="height: 100vh; width: 100vw;">
+        <star-pattern-view></star-pattern-view>
+      </div>
       <!-- <star-pattern-view topDir="100px"></star-pattern-view> -->
     `
   }