love/public/themes/simpleboot3/matchmaker/my/index.html

<extend name="public/base"/>
<block name="css">
    <style>
        .bg-box{
            height: 200px;
            background: url("__TMPL__/public/assets/images/matchmaker/myBG.png");
            background-size: cover;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .bg-box h1{
            margin-top: 12px;
            font-size: 20px;
            color: #333;
        }
        ul li{
            background-color:#fff;
            display:flex;
            align-items:center;
            height:48px;
            margin-bottom:2px;
        }
        ul li h2{
            margin-left: 12px;
            font-size: 16px;
            font-weight: normal;
        }
        ul li img{
            width: 35px;
            margin-left: 22px;
        }
    </style>
</block>
<block name="body">
    <van-nav-bar class="bg-pink">
        <template #title>
            <span style="color:white;">个人中心</span>
        </template>
    </van-nav-bar>

    <div class="bg-box">
        <img style="margin-top:32px;width: 94px;height: 94px;object-fit: cover;border-radius:50%;" :src="head_image" alt="">
        <h1>{{matchmaker.name}}</h1>
        <p class="mobile" v-if="matchmaker.mobile">{{matchmaker.mobile}}</p>
    </div>
    <ul>
        <li @click="toIndex">
            <img src="__TMPL__/public/assets/images/matchmaker/myIcon.png" alt="">
            <h2>我的信息库</h2>
            <van-icon style="margin-left: 200px" name="arrow" />
        </li>
        <li @click="toInfo">
            <img src="__TMPL__/public/assets/images/matchmaker/myIcon3.png" alt="">
            <h2>我的资料</h2>
            <van-icon style="margin-left: 216px" name="arrow" />
        </li>
        <li @click="toPassword">
            <img src="__TMPL__/public/assets/images/matchmaker/myIcon6.png" alt="">
            <h2>修改密码</h2>
            <van-icon style="margin-left: 216px" name="arrow" />
        </li>
        <li @click="showQrcode">
            <img src="__TMPL__/public/assets/images/matchmaker/myIcon4.png" alt="">
            <h2>我的邀请码</h2>
            <van-icon style="margin-left: 200px" name="arrow" />
        </li>
        <li @click="toStatistics">
            <img src="__TMPL__/public/assets/images/matchmaker/myIcon5.png" alt="">
            <h2>统计</h2>
            <van-icon style="margin-left: 247px" name="arrow" />
        </li>
        <li @click="callPhone('0595-88052395')">
            <img src="__TMPL__/public/assets/images/matchmaker/myIcon2.png" alt="">
            <h2>联系我们</h2>
            <van-icon style="margin-left: 216px" name="arrow" />
        </li>
    </ul>

    <van-popup v-model="show_qrcode">
        <div class="qrcode">
            <van-image
                    width="80vw"
                    :src="qrcode_url"
            ></van-image>
        </div>
    </van-popup>

    <van-tabbar v-model="active" active-color="#FF589B" :before-change="tabbarChange">
        <van-tabbar-item url="{:url('matchmaker/index/index')}">
            <span>信息库</span>
            <template #icon>
                <van-icon name="home-o" size="25px"></van-icon>
            </template>
        </van-tabbar-item>
        <van-tabbar-item>
            <span>个人中心</span>
            <template #icon>
                <van-icon name="contact" size="25px"></van-icon>
            </template>
        </van-tabbar-item>
    </van-tabbar>
</block>
<block name="script">
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    active: 1,
                    keyword: '',
                    matchmaker: {$matchmaker},
                    show_qrcode:false,
                };
            },
            methods: {
                tabbarChange() {
                    return false;
                },
                callPhone(phone) {
                    window.location.href = `tel://${phone}`;
                },
                toIndex() {
                    location.href = '{:url("matchmaker/index/index")}';
                },
                toInfo() {
                    location.href = '{:url("matchmaker/my/info")}';
                },
                toPassword() {
                    location.href = '{:url("matchmaker/my/password")}';
                },
                toStatistics() {
                    location.href = '{:url("matchmaker/my/statistics")}';
                },
                showQrcode() {
                    this.show_qrcode = true;
                },
            },
            computed: {
                head_image() {
                    return this.matchmaker.avatar ? this.matchmaker.avatar : '__TMPL__/public/assets/images/matchmaker/avatar2.png';
                },
                qrcode_url() {
                    let code = encodeURIComponent("{:cmf_url('register/infoAdd','',true,true)}?id=" + this.matchmaker.id);
                    return '/qrcode.php?code=' + code;
                },
            },

        });
    </script>
</block>