love/public/themes/simpleboot3/matchmaker/user/match.html

<extend name="public/base"/>
<block name="css">
    <style>
        .van-nav-bar--fixed {z-index:100;}
        .van-nav-bar .van-icon,.van-nav-bar__text {color:white;}
        .van-step--horizontal .van-step__title {font-size:16px;}
        .van-step--horizontal .van-step__icon {font-size:16px;}
        .van-step__circle {width:10px;height:10px;}

        .lw-list .list-item{padding:5px 10px;margin-top:10px;background:white;}
        .lw-list .list-content {display:flex;align-items:center;}
        .lw-list .list-content .list-left {width:50px;height:50px;}
        .lw-list .list-content .list-left img {width:50px;height:50px;}
        .lw-list .list-content .list-right {margin-left:20px;}
        .lw-list .list-content .list-right .name {color:black;height:30px;line-height:30px;}
        .lw-list .list-content .list-right .name .mobile {font-size:14px;color:var(--blue);}
        .lw-list .list-content .list-right .desc {color:#666;font-size:14px;height:20px;line-height:20px;}
        .lw-list .list-tool {border-top:1px solid #f8f9fb;margin-top:5px;display:flex;justify-content:flex-end;align-items:center;padding-top:5px;}
        .lw-list .list-tool .tool-btn {margin-left:5px;font-size:14px;border:1px solid #ccc;padding:5px 10px;border-radius:20px;color:#555;}
        .lw-list .list-tool .tool-btn.delete {border-color:var(--pink);color:var(--pink);}
        .lw-list .list-tool .tool-btn.match {border-color:var(--blue);color:var(--blue);}

        .show-tips {color:#999;padding:5px 10px;font-size:14px;}
        .show-tips .match-count {color:var(--pink);font-size:16px;font-weight:bold;}
        .show-tips .no-match {color:red;}
        .show-tips .match {color:var(--blue);}
        .table {width:100%;}
        .table td {border-bottom:1px solid #eee;height:40px;line-height:20px;padding-left:10px;}
        .table td.match {background:#99CCFF;}
        .table td.no-match {background:#FF9999;}
    </style>
</block>
<block name="body">
    <!--头部-->
    <van-nav-bar
            class="bg-pink"
            fixed="true"
            left-text="返回"
            @click-left="onBack"
            left-arrow
    >
        <template #title>
            <span style="color:white;">跟进记录</span>
        </template>
    </van-nav-bar>
    <div style="width:100%;height:46px;"></div>

    <van-tabs v-model="active" :before-change="onTab">
        <van-tab title="自有库"></van-tab>
        <van-tab title="其他媒婆库"></van-tab>
        <van-tab title="妇联库"></van-tab>
    </van-tabs>

    <div class="lw-list">
        <div class="list-item" v-for="item in list">
            <div class="list-content">
                <div class="list-left">
                    <img :src="dealAvatar(item.avatar,item.sex)" alt="">
                </div>
                <div class="list-right">
                    <div class="name">{{item.realname}}
                        <span v-if="active == 0 && item.mobile">({{item.mobile}})</span>
                        <span class="mobile" v-if="active == 1">({{item.matchmaker.mobile}}【{{item.matchmaker.name}}】)</span>
                        <span class="mobile" v-if="active == 2">(0595-88150395【妇联】)</span>
                    </div>
                    <div class="desc">匹配{{item.match_count}}项 • {{item.age}}岁 • {{dealHigh(item.high)}}</div>
                </div>
            </div>
            <div class="list-tool">
                <div class="tool-btn" @click="showInfo(item)">详情</div>
            </div>
        </div>
    </div>

    <van-empty description="暂无匹配记录" v-if="list.length == 0"></van-empty>

    <van-popup v-model="info_show" position="bottom" :style="{ height: '80%' }">
        <p class="show-tips">说明：共有<span class="match-count">{{info.match_count}}</span>项匹配成功，<span class="match">蓝色表示匹配成功</span>，<span class="no-match">红色表示未匹配成功</span>。</p>
        <table class="table" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td style="width:20%;"></td>
                <td style="width:30%;">配对人</td>
                <td style="width:50%;">要求</td>
            </tr>
            <tr>
                <td>姓名</td>
                <td>{{info.realname}}</td>
                <td>{{user.realname}}</td>
            </tr>
            <tr>
                <td>年龄</td>
                <td :class="isMatch('age')">{{info.age}}岁</td>
                <td :class="isMatch('age')">{{showMatingRange(mating.min_age,mating.max_age,'岁')}}</td>
            </tr>
            <tr>
                <td>身高</td>
                <td :class="isMatch('high')">{{info.high}}cm</td>
                <td :class="isMatch('high')">{{showMatingRange(mating.min_high,mating.max_high,'cm')}}</td>
            </tr>
            <tr>
                <td>体重</td>
                <td :class="isMatch('weight')">{{info.weight}}KG</td>
                <td :class="isMatch('weight')">{{showMatingRange(mating.min_weight,mating.max_weight,'KG')}}</td>
            </tr>
            <tr>
                <td>籍贯</td>
                <td :class="isMatch('native')">{{info.native}}</td>
                <td :class="isMatch('native')">{{mating.native}}</td>
            </tr>
            <tr>
                <td>学历</td>
                <td :class="isMatch('education')">{{info.education}}</td>
                <td :class="isMatch('education')">{{mating.education}}</td>
            </tr>
            <tr>
                <td>年收入</td>
                <td :class="isMatch('income')">{{info.income}}</td>
                <td :class="isMatch('income')">{{mating.income}}</td>
            </tr>
            <tr>
                <td>是否有房</td>
                <td :class="isMatch('have_house')">{{tinyint[info.have_house]}}</td>
                <td :class="isMatch('have_house')">{{cond_tinyint[mating.have_house]}}</td>
            </tr>
            <tr>
                <td>是否有车</td>
                <td :class="isMatch('have_car')">{{tinyint[info.have_car]}}</td>
                <td :class="isMatch('have_car')">{{cond_tinyint[mating.have_car]}}</td>
            </tr>
            <tr>
                <td>婚后是否愿意与父母同住</td>
                <td :class="isMatch('with_parent_live')">{{tinyint[info.with_parent_live]}}</td>
                <td :class="isMatch('with_parent_live')">{{cond_tinyint[mating.with_parent_live]}}</td>
            </tr>
            <tr>
                <td>是否吸烟</td>
                <td :class="isMatch('smoke')">{{info.smoke}}</td>
                <td :class="isMatch('smoke')">{{mating.smoke}}</td>
            </tr>
            <tr>
                <td>是否喝酒</td>
                <td :class="isMatch('drink')">{{info.drink}}</td>
                <td :class="isMatch('drink')">{{mating.drink}}</td>
            </tr>
            <tr>
                <td>婚姻状况</td>
                <td>{{info.marry}}</td>
                <td></td>
            </tr>
            <tr>
                <td>工作单位</td>
                <td>{{info.company}}</td>
                <td></td>
            </tr>
            <tr>
                <td>职务</td>
                <td>{{info.job}}</td>
                <td></td>
            </tr>
            <tr>
                <td>家庭成员</td>
                <td>{{info.family.join(',')}}</td>
                <td></td>
            </tr>
            <tr>
                <td>民族</td>
                <td>{{info.nation}}</td>
                <td></td>
            </tr>
            <tr>
                <td>兴趣爱好</td>
                <td>{{info.hobby}}</td>
                <td></td>
            </tr>
        </table>
    </van-popup>
</block>
<block name="script">
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    user:{$user},
                    mating:{$mating},
                    list: {$list},
                    active: {$type},
                    info: {match_arr:[],family:[]},
                    info_show: false,
                    tinyint: {$tinyint},
                    cond_tinyint: {$cond_tinyint},
                };
            },
            methods: {
                onBack() {
                    location.href = "{:url('index/index')}";
                },
                onTab(index) {
                    location.href = "{:url('match')}?id={$id}&type=" + index;
                    return false;
                },
                dealAvatar(avatar,sex) {
                    if (avatar == '') {
                        return '__TMPL__/public/assets/images/matchmaker/avatar' + sex + '.png'
                    } else {
                        return avatar;
                    }
                },
                dealHigh(high) {
                    return high ? high + 'CM' : '保密';
                },
                showInfo(item) {
                    this.info = item;
                    this.info_show = true;
                },
                showMatingRange(min,max,unit) {
                    if (min === 0 && max === 0) {
                        return '不限';
                    } else if (min === 0) {
                        return max + unit + '以下';
                    } else if (max === 0) {
                        return min + unit + '以上';
                    } else {
                        return min + ' - ' + max + unit;
                    }
                },
                isMatch(value) {
                    const match = this.info.match_arr.includes(value)
                    return match ? 'match' : 'no-match';
                }
            },
            computed: {
            }
        });
    </script>
</block>