wisdom-app/src/app/page/change-key/change-key.component.html

@@ -0,0 +1,21 @@
+<!-- 用户登录状态 -->
+<div class="divback">
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>
+      用户名：{{currentUser?.get("username")}}
+    </ion-card-title>
+    <ion-card-subtitle>您可修改您的密码</ion-card-subtitle>
+   </ion-card-header>
+ <ion-card-content>
+
+   <ion-item>
+     <ion-input [value]="userData['password']" (ionChange)="userDataChange('password',$event)" label="新密码" placeholder="请您输入新的密码"></ion-input>
+   </ion-item>
+
+   <ion-button expand="block" (click)="save()">修改</ion-button>
+   <ion-button expand="block" (click)="cancel()">取消</ion-button>
+ 
+</ion-card-content>
+</ion-card>
+</div>

wisdom-app/src/app/page/change-key/change-key.component.scss

@@ -0,0 +1,65 @@
+    .divback{
+        width: 100%;
+        height: 100%;
+        background-image: url('https://app.fmode.cn/dev/jxnu/202226701019/zhuti1.jpg');
+        background-size: cover;
+        background-position: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+ion-card {
+    opacity: 0.8;
+    margin: 0 auto; /* 使卡片居中 */
+    max-width: 400px; /* 设置卡片的最大宽度 */
+    border-radius: 10px; /* 设置卡片的圆角 */
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+  }
+  
+  ion-card-header {
+    background-color: #f8f9fa; /* 设置卡片头部的背景颜色 */
+    border-top-left-radius: 10px; /* 圆角 */
+    border-top-right-radius: 10px; /* 圆角 */
+    padding: 16px; /* 内边距 */
+  }
+  
+  ion-card-title {
+    font-size: 1.5em; /* 设置标题字体大小 */
+    font-weight: bold; /* 加粗标题 */
+  }
+  
+  ion-card-subtitle {
+    font-size: 1em; /* 设置副标题字体大小 */
+    color: #6c757d; /* 设置副标题颜色 */
+  }
+  
+  ion-card-content {
+    padding: 16px; /* 内边距 */
+    background-color: #ffffff; /* 设置卡片内容的背景颜色 */
+  }
+  
+  ion-item {
+    margin-bottom: 16px; /* 添加底部间距 */
+  }
+  
+  ion-button {
+    margin-top: 8px; /* 添加顶部间距 */
+    --background: #3880ff; /* 设置按钮背景颜色 */
+    --color: white; /* 设置按钮文字颜色 */
+  }
+  
+  ion-button:hover {
+    --background: #3171e0; /* 鼠标悬停时的背景颜色 */
+  }
+  
+  ion-button:active {
+    --background: #2c6bbf; /* 按钮按下时的背景颜色 */
+  }
+  
+  /* 全局样式，确保卡片在页面中居中 */
+  ion-content {
+    display: flex; /* 使用 Flexbox 布局 */
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    height: 100%; /* 设置内容高度为 100% */
+  }

wisdom-app/src/app/page/change-key/change-key.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { ChangeKeyComponent } from './change-key.component';
+
+describe('ChangeKeyComponent', () => {
+  let component: ChangeKeyComponent;
+  let fixture: ComponentFixture<ChangeKeyComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ChangeKeyComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChangeKeyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

wisdom-app/src/app/page/change-key/change-key.component.ts

@@ -0,0 +1,49 @@
+import {  OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController, IonInput, IonItem, IonSegment, IonSegmentButton, IonLabel } from '@ionic/angular/standalone';
+import { CloudUser } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-change-key-edit',
+  templateUrl: './change-key.component.html',
+  styleUrls: ['./change-key.component.scss'],
+  standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, 
+    IonCard,IonCardContent,IonButton,IonCardHeader,IonCardTitle,IonCardSubtitle,
+    IonInput,IonItem,
+    IonSegment,IonSegmentButton,IonLabel
+  ],
+})
+export class ChangeKeyComponent  implements OnInit {
+
+  currentUser:CloudUser|undefined
+  userData:any = {}
+  userDataChange(key:string,ev:any){
+    let value = ev?.detail?.value
+    if(value){
+      this.userData[key] = value
+    }
+  }
+  constructor(
+    private router: Router,
+    private modalCtrl:ModalController) { 
+    this.currentUser = new CloudUser();
+    this.userData = this.currentUser.data;
+  }
+
+  ngOnInit() {}
+
+  async save(){
+  
+    this.currentUser?.set(this.userData)
+    await this.currentUser?.save()
+    this.modalCtrl.dismiss(this.currentUser,"confirm")
+
+    this.router.navigate(['/tabs/tab4'])
+  }
+  cancel(){
+    this.modalCtrl.dismiss(null,"cancel")
+    this.router.navigate(['/tabs/tab4'])
+  }
+}

wisdom-app/src/app/page/feedback-help/feedback-help.component.html

@@ -0,0 +1,29 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>反馈与帮助</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list>
+    <ion-item *ngFor="let question of questions" (click)="openDetail(question)">
+      {{ question.title }}
+    </ion-item>
+  </ion-list>
+
+  <ion-modal [isOpen]="isModalOpen" (didDismiss)="isModalOpen = false">
+    <ng-template ionModalContent>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>{{ selectedQuestion?.title }}</ion-title>
+          <ion-buttons slot="end">
+            <ion-button (click)="isModalOpen = false">关闭</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <p>{{ selectedQuestion?.detail }}</p>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>

wisdom-app/src/app/page/feedback-help/feedback-help.component.scss

@@ -0,0 +1,7 @@
+ion-list {
+  margin: 10px;
+}
+
+ion-item {
+  cursor: pointer;
+}

wisdom-app/src/app/page/feedback-help/feedback-help.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { FeedbackHelpComponent } from './feedback-help.component';
+
+describe('FeedbackHelpComponent', () => {
+  let component: FeedbackHelpComponent;
+  let fixture: ComponentFixture<FeedbackHelpComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [FeedbackHelpComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FeedbackHelpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

wisdom-app/src/app/page/feedback-help/feedback-help.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'feedback-help',
+  templateUrl: './feedback-help.component.html',
+  styleUrls: ['./feedback-help.component.scss'],
+  imports:[IonicModule,
+    CommonModule
+  ],
+  standalone: true,
+})
+export class FeedbackHelpComponent  implements OnInit {
+
+  constructor(
+    private router: Router
+  ) { }
+
+  ngOnInit() {}
+
+  isModalOpen = false;
+  selectedQuestion: any = null;
+
+  questions = [
+    { title: '如何重置密码？', detail: '您可以通过点击“忘记密码”链接来重置您的密码。' },
+    { title: '如何联系客服？', detail: '您可以通过应用内的“联系客服”功能与我们的客服团队联系。' },
+    { title: '如何更新个人信息？', detail: '点击我的信息或者头像，您可以编辑和更新您的个人信息。' },
+    { title: '如何查看订单历史？', detail: '在“我的订单”页面，您可以查看所有的订单历史记录。' },
+  ];
+
+  openDetail(question: any) {
+    this.selectedQuestion = question;
+    this.isModalOpen = true;
+  }
+}

wisdom-app/src/app/tab4/tab4.page.html

@@ -117,8 +117,8 @@
             <ion-label>我的地址</ion-label>
           </ion-item>
           <ion-item>
-            <ion-icon name="card" slot="start"></ion-icon>
-            <ion-label>我的优惠券</ion-label>
+            <ion-icon name="key" slot="start"></ion-icon>
+            <ion-label (click)="goToKey()">修改密码</ion-label>
           </ion-item>
           <ion-item>
             <ion-icon name="bag" slot="start"></ion-icon>
@@ -132,6 +132,10 @@
             <ion-icon name="call" slot="start"></ion-icon>
             <ion-label>绑定手机</ion-label>
           </ion-item>
+          <ion-item>
+            <ion-icon name="help-circle" slot="start" ></ion-icon>
+            <ion-label (click)="goToHelp()">帮助</ion-label>
+          </ion-item>
           <ion-item>
             <ion-icon name="folder" slot="start"></ion-icon>
             <ion-label>我的收藏<app-edit-tag (onTagChange)="setTagsValue($event)"></app-edit-tag></ion-label>

wisdom-app/src/app/tab4/tab4.page.ts

@@ -46,6 +46,15 @@ export class Tab4Page {
     this.router.navigate(['/tabs/my-health'])
   }
 
+  goToHelp(){
+    
+    this.router.navigate(['/tabs/help'])
+  }
+  goToKey(){
+    
+    this.router.navigate(['/tabs/password'])
+  }
+
   currentUser:CloudUser|undefined
   constructor(
     private router: Router,

wisdom-app/src/app/tabs/tabs.routes.ts

@@ -81,6 +81,20 @@ export const routes: Routes = [
             (m) => m.PageUserInqueryComponent
           ),
       },
+      {
+        path: 'help',
+        loadComponent: () =>
+          import('../page/feedback-help/feedback-help.component').then(
+            (m) => m.FeedbackHelpComponent
+          ),
+      },
+      {
+        path: 'password',
+        loadComponent: () =>
+          import('../page/change-key/change-key.component').then(
+            (m) => m.ChangeKeyComponent
+          ),
+      },
       {
         path: '',
         redirectTo: '/tabs/tab4',