UNION_NSI/target/classes/views/mobile/psychologyPro/entrance.html

<!--#
layout("/mobile/platform.html"){
#-->

<style>

    /*.info {*/
    /*    position: relative;*/
    /*    width: 88%;*/
    /*    margin: 20px auto;*/
    /*    font-size: 14px;*/
    /*    box-shadow: 0 2px 10px rgb(125 126 128 / 16%);*/
    /*    padding: 12px;*/
    /*    border-radius: 10px;*/
    /*    background-color: white;*/
    /*}*/

    /*.avatar {*/
    /*    width: 28%;*/
    /*}*/

    /*.other_info {*/
    /*    width: 72%;*/
    /*    line-height: 22px;*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*    justify-content: space-between;*/
    /*}*/

    /*.desc {*/
    /*    overflow: hidden;*/
    /*    white-space: nowrap;*/
    /*    text-overflow: ellipsis;*/
    /*}*/

    /*img {*/
    /*    border-radius: 10px;*/
    /*}*/

    /*.van-dropdown-menu__item {*/
    /*    flex: auto;*/
    /*}*/

</style>

<style>
    .therapist-card {
        background: white;
        margin: 16px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .card-header {
        display: flex;
        padding: 16px;
        align-items: center;
        border-bottom: 1px solid #f1f3f5;
    }

    .avatar {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #f8f9fa;
        margin-right: 16px;
    }

    .info {
        flex: 1;
    }

    .name {
        font-size: 17px;
        font-weight: 500;
        margin-bottom: 4px;
        color: #212529;
    }

    .meta {
        display: flex;
        align-items: center;
        margin-bottom: 4px;
    }

    .gender {
        font-size: 13px;
        color: #868e96;
        margin-right: 12px;
    }

    .unit {
        font-size: 13px;
        color: #868e96;
    }

    .card-body {
        padding: 16px;
    }

    .section {
        margin-bottom: 14px;
    }

    .section-title {
        font-size: 14px;
        font-weight: 500;
        color: #495057;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
    }

    .section-title i {
        margin-right: 8px;
        color: #adb5bd;
        font-size: 16px;
    }

    .section-content {
        font-size: 14px;
        color: #495057;
        line-height: 1.7;
    }
</style>


<div id="app" v-cloak>
    <van-nav-bar
            title="心理咨询师列表"
            left-arrow
            placeholder
            fixed
            @click-left="window.history.back()">
    </van-nav-bar>

    <van-dropdown-menu>
        <van-dropdown-item v-model="pageForm.typeId" :options="typeList"
                           @change="doSearch"></van-dropdown-item>
    </van-dropdown-menu>

    <div style="height: calc(100vh - 50px - 46px - 50px );overflow-y: auto">
        <div class="therapist-card" v-for="item in tableData" :key="item.id" @click="toApply(item)">
            <div class="card-header">
                <img :src="CREATE_PREVIEW_URL(item.avatar)" alt="任瑞" class="avatar"
                     onerror="this.src='https://via.placeholder.com/80'">
                <div class="info">
                    <div class="name">{{item.username}}</div>
                    <div>
                        <span class="gender female"><i class="fa fa-venus"></i> {{item.sex}}</span>
                    </div>
                    <div class="unit">{{item.unitName}}</div>
                </div>
            </div>

            <div class="card-body">
                <div class="section">
                    <div class="section-title"><i class="fa fa-graduation-cap"></i>简介</div>
                    <div class="section-content">
                        {{item.introduce}}
                    </div>
                </div>

                <div class="section">
                    <div class="section-title"><i class="fa fa-heart"></i>擅长领域</div>
                    <div class="section-content">{{item.specialty}}</div>
                </div>

                <div class="section" v-if="item.workingIdeal">
                    <div class="section-title"><i class="fa fa-quote-left"></i>工作理念</div>
                    <div class="section-content">{{item.workingIdeal}}</div>
                </div>
            </div>
        </div>
    </div>


    <!--咨询师列表-->
    <!--    <div class="info" @click="toApply(item)" v-for="item in tableData" style="margin-bottom: 20px">-->
    <!--        <div style="display: flex;">-->
    <!--            &lt;!&ndash;头像&ndash;&gt;-->
    <!--            <div class="avatar">-->
    <!--                <van-image width="80" :src="CREATE_PREVIEW_URL(item.avatar)"></van-image>-->
    <!--            </div>-->
    <!--            &lt;!&ndash;其他信息&ndash;&gt;-->
    <!--            <div class="other_info">-->
    <!--                <div>-->
    <!--                    <span style="font-size: 20px">{{item.username}}&ensp;</span>-->
    <!--                    <span style="color: grey">{{item.sex}}&ensp;</span>&emsp;-->
    <!--                </div>-->
    <!--                <div>-->
    <!--                    &lt;!&ndash;  <div>-->
    <!--                          <span style="color: grey">职称：</span>{{item.jobTitle}}-->
    <!--                      </div>&ndash;&gt;-->

    <!--                    <div class="desc">-->
    <!--                        <span style="color: grey">擅长方向：</span>{{item.specialty}}-->
    <!--                    </div>-->
    <!--                    <div>-->
    <!--                        <span style="color: grey">简介：</span>{{item.introduce}}-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->

    <!--    <van-empty v-if="tableData.length==0" class="custom-image" image="/none.svg"-->
    <!--               description="暂无数据">-->
    <!--    </van-empty>-->

    <div>
        <van-tabbar v-model="tarBarActive">
            <van-tabbar-item icon="home-o" replace url="/mobile/psychologyPro/entrance">心理咨询预约</van-tabbar-item>
            <van-tabbar-item icon="manager-o" replace url="/mobile/psychologyPro/myApplyList">我的预约</van-tabbar-item>
        </van-tabbar>
    </div>

</div>

<script>
    const vue = new Vue({
        el: '#app',
        mixins: [mobileMixins],
        data() {
            return {
                tarBarActive: 0,
                typeList: [
                    {text: '时间不限', value: 'no'},
                    {text: '本周', value: 'thisWeek'},
                    {text: '下周', value: 'nextWeek'},
                ],
            }
        },
        methods: {
            doSearch() {
                this.tableData = []
                this.pageData()
            },
            async pageData() {
                const resp = await $.post('/mobile/psychologyPro/pageData', this.pageForm)
                if (resp.code === 0) {
                    this.tableData = resp.data
                }
            },
            toApply(o) {
                location.href = '/mobile/psychologyPro/apply?doctorId=' + o.userid + '&typeId=' + this.pageForm.typeId
            }
        },
        async created() {
            this.$set(this.pageForm, "typeId", this.typeList[0].value)
            await this.pageData()
        },
    })
</script>

<!--#
}
#-->