app-gift/app-angular/src/modules/lesson/page-lesson-detail/page-lesson-detail.component.html

<div class="ion-page">
    <ion-header>
        <ion-toolbar>
            <ion-buttons slot="start">
                <ion-button routerLink="/cook/lesson">&lt;返回</ion-button>
            </ion-buttons>
            <ion-title>课程</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>


        <ion-img [src]="course?.get('courseImg')" alt="图片加载不出来"></ion-img>

        <ion-item>
            <ion-avatar slot="start">
                <img alt="Silhouette of a person's head"
                    [src]="course?.get('courseAuthor')?.get('avatar')||'https://ionicframework.com/docs/img/demos/avatar.svg'" />
            </ion-avatar>
            <ion-label>{{course?.get('courseAuthor')?.get('name')}}</ion-label>
            <ion-button fill="outline" color="danger">关注</ion-button>
            <!-- <div>{{course?.get('courseStore') | tok}}人收藏</div> -->
        </ion-item>

        <ion-card>
            <ion-card-header>
                <ion-card-title>{{course?.get('courseName')}}</ion-card-title>
                <ion-card-subtitle class="custom-subtitle">{{course?.get('courseScore')}}<span
                        style="color: rgb(196, 194, 194); font-size: 10px;">
                        评分</span></ion-card-subtitle>
            </ion-card-header>

            <ion-card-content>
                {{course?.get('courseDescript')}}
            </ion-card-content>

            <ion-button fill="clear">收藏</ion-button>
            <ion-button fill="clear">购买</ion-button>
        </ion-card>

        <!-- <ion-list *ngIf="lesson.videocourse?.length"> -->
        <ion-list>
            <ion-list-header>
                <ion-label>视频</ion-label>
            </ion-list-header>
            <!-- <ion-item *ngFor="let video of lesson.videocourse"> -->
            <ion-item>
                <svg class="icon"
                    style="width: 4em;height: 2em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3934">
                    <path
                        d="M607.9232 227.84a144.4864 144.4864 0 0 1 143.744 137.728l0.0768 3.2768 52.48-36.6592a61.2352 61.2352 0 0 1 76.8256 8.2688l3.0976 3.328 2.7648 3.4816c5.1712 8.6016 8.8832 17.9968 11.0336 28.032l1.1008 6.0672v276.5824a58.8032 58.8032 0 0 1-58.9056 58.7008c-10.496 0-20.7616-2.7136-29.8496-7.8336l-4.4288-2.7648-54.528-37.0176-0.1792 1.5872a144.3584 144.3584 0 0 1-131.3792 125.0816l-5.9904 0.3584-5.888 0.1024H268.8512a144.4864 144.4864 0 0 1-143.744-137.728l-0.1536-5.632V371.1744a144.4864 144.4864 0 0 1 138.2656-143.2064l5.632-0.128h339.072z m0 61.2608H268.8256a82.56 82.56 0 0 0-82.2528 77.44l-0.1536 4.6592v281.5744A82.56 82.56 0 0 0 264.192 734.72l4.6592 0.1536h338.2016a82.56 82.56 0 0 0 82.2528-77.44l0.1792-4.6592 0.8192-0.8704V371.2a82.56 82.56 0 0 0-77.7472-81.9456l-4.6592-0.1536z m227.0976 96.9728l-84.0448 57.1904-1.1008 149.5808 85.1456 59.2384V386.0736z"
                        fill="#FB553C" p-id="3935"></path>
                    <path
                        d="M529.0752 534.1184l-128.2816 74.624a25.6 25.6 0 0 1-38.4768-22.1184v-149.248a25.6 25.6 0 0 1 38.4768-22.1184l128.256 74.624a25.6 25.6 0 0 1 0 44.2368z"
                        fill="#FB553C" p-id="3936"></path>
                </svg>
                <!-- <ion-label>{{video}}</ion-label> -->
            </ion-item>
        </ion-list>

        <!-- <ion-list *ngIf="lesson.test?.length">
        <ion-item *ngFor="let questionAndAnswer of lesson.test; let i = index">
            <div>
                <h2>{{ questionAndAnswer[0] }}</h2>
            </div>
            <div>
                <img [src]="questionAndAnswer[1]" alt="Answer">
            </div>
        </ion-item>
    </ion-list> -->
        <div>
            <h5 style="padding-left: 12px;">留下你的评论{{commentCount}}</h5>
            <!-- <ion-item lines="none">
                <ion-avatar slot="start">
                    <img alt="Silhouette of a person's head"
                        src="https://ionicframework.com/docs/img/demos/avatar.svg" />
                </ion-avatar>
                <ion-label><input type="text" class="input-box" placeholder="留下评论，分享你的想法！"></ion-label>
            </ion-item> -->
            <ng-container *ngIf="commentList">
                <ng-container *ngFor="let comment of commentList; let i = index">
                    <div class="commentbox">
                        <ion-item lines="none">
                            <ion-avatar slot="start">
                                <img alt="Silhouette of a person's head"
                                    [src]="comment.get('user').get('avatar')||'https://ionicframework.com/docs/img/demos/avatar.svg'" />
                            </ion-avatar>
                            <ion-label>{{ comment.get("user").get("name") }}</ion-label>

                            <ion-icon name="heart-outline"></ion-icon>
                            <div class="likes">27</div>

                        </ion-item>
                        <p style="font-size: 15px;">{{comment?.get("commentContent")}}</p>
                        <p style="color: grey;">{{comment?.get("createdAt")|date:'short'}}</p>
                    </div>
                </ng-container>
            </ng-container>
        </div>

        <div class="footer">
            <div class="send-container">
                <input type="text" [(ngModel)]="commentContent" class="message-input" placeholder="输入消息...">
                <button class="send-button" (click)="saveComment()">发送</button>
            </div>

        </div>
        <div class="navfooter"></div>
    </ion-content>
</div>