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

<extend name="public/base"/>
<block name="css">
    <style>
        .add {width:50px;height:50px;line-height:50px;background:#FF589B;border-radius:50%;position:fixed;bottom:70px;right:20px;color:white;text-align:center;}
        .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;width:100%;}
        .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 .name .status {color:#666;font-size:14px;float:right;}
        .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);}
    </style>
</block>
<block name="body">
    <van-nav-bar class="bg-pink">
        <template #title>
            <span style="color:white;">信息库</span>
        </template>
    </van-nav-bar>

    <form action="/">
        <van-search
                v-model="form.keyword"
                placeholder="请输入姓名或电话或编号"
                @search="onRefresh"
        ></van-search>
    </form>
    <van-dropdown-menu>
        <van-dropdown-item v-model="status" :options="status_list" @change="statusChange"></van-dropdown-item>
    </van-dropdown-menu>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
        >
            <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 class="mobile" v-if="item.mobile">({{item.mobile}})</span> <span class="status">{{item.status_text}}</span></div>
                            <div class="desc">编号：{{item.id}}</div>
                            <div class="desc">{{item.sex_text}} • {{item.age}}岁 • {{dealHigh(item.high)}}</div>
                        </div>
                    </div>
                    <div class="list-tool">
                        <div class="tool-btn" @click="toInfo(item.id)">基本资料</div>
                        <div class="tool-btn" @click="toMating(item.id)">择偶要求</div>
                        <div class="tool-btn match" @click="matchField(item.id)">智能匹配</div>
                        <div class="tool-btn" @click="toFollow(item.id)">跟进</div>
                    </div>
                    <div class="list-tool">
                        <div class="tool-btn">
                            <van-popover
                                    v-model="showPopover"
                                    trigger="click"
                                    :actions="actions"
                                    @select="toStatus(item.id,$event)"
                            >
                                <template #reference>
                                    更改状态
                                </template>
                            </van-popover>
                        </div>
                        <div class="tool-btn delete" @click="toDelete(item.id)">删除</div>
                    </div>
                </div>
            </div>
        </van-list>
    </van-pull-refresh>

    <van-popup v-model="showMatch">
        <div style="width:80vw;padding:10px;">
            <p style="text-align:center;">请选择必须的匹配项目</p>
            <van-checkbox v-model="match_field.age" style="margin-top:20px;">年龄</van-checkbox>
            <van-checkbox v-model="match_field.high" style="margin-top:20px;">身高</van-checkbox>
            <van-checkbox v-model="match_field.weight" style="margin-top:20px;">体重</van-checkbox>
            <van-checkbox v-model="match_field.animal" style="margin-top:20px;">生肖</van-checkbox>
            <van-checkbox v-model="match_field.native" style="margin-top:20px;">籍贯</van-checkbox>
            <van-checkbox v-model="match_field.education" style="margin-top:20px;">学历</van-checkbox>
            <van-checkbox v-model="match_field.income" style="margin-top:20px;">年收入</van-checkbox>
            <van-checkbox v-model="match_field.have_house" style="margin-top:20px;">是否有房</van-checkbox>
            <van-checkbox v-model="match_field.have_car" style="margin-top:20px;">是否有车</van-checkbox>
            <van-checkbox v-model="match_field.with_parent_live" style="margin-top:20px;">婚后是否愿意与父母同住</van-checkbox>
            <van-checkbox v-model="match_field.smoke" style="margin-top:20px;">是否吸烟</van-checkbox>
            <van-checkbox v-model="match_field.drink" style="margin-top:20px;">是否喝酒</van-checkbox>
            <van-checkbox v-model="match_field.want_birth" style="margin-top:20px;">是否生育</van-checkbox>
            <div style="padding:16px;">
                <van-button block class="bg-pink" @click="toMatch">开始匹配</van-button>
            </div>
        </div>
    </van-popup>

    <div class="add" @click="toAdd">添加</div>

    <van-tabbar v-model="active" active-color="#FF589B" :before-change="tabbarChange">
        <van-tabbar-item>
            <span>信息库</span>
            <template #icon>
                <van-icon name="home-o" size="25px"></van-icon>
            </template>
        </van-tabbar-item>
        <van-tabbar-item url="{:url('matchmaker/my/index')}">
            <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: 0,
                    form: {
                        keyword: '',
                        status: {$status},
                    },

                    list: [],
                    page: 1,
                    loading: false,
                    finished: false,
                    refreshing: false,

                    status: {$status},
                    status_list: [
                        { text: '全部状态', value: 0 },
                        { text: '待审核', value: 1 },
                        { text: '审核通过', value: 2 },
                        { text: '审核不通过', value: 3 },
                        { text: '热恋', value: 4 },
                        { text: '已婚', value: 5 },
                    ],

                    showPopover:false,
                    actions: [
                        { text: '待审核', value: 1 },
                        { text: '审核通过', value: 2 },
                        { text: '审核不通过', value: 3 },
                        { text: '热恋', value: 4 },
                        { text: '已婚', value: 5 },
                    ],

                    showMatch:false,
                    match_field:{
                        age: false,
                        high: false,
                        weight: false,
                        animal: false,
                        native: false,
                        education: false,
                        income: false,
                        have_house: false,
                        have_car: false,
                        with_parent_live: false,
                        smoke: false,
                        drink: false,
                        want_birth: false,
                    },
                    match_id: 0,
                };
            },
            methods: {
                tabbarChange() {
                    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' : '保密';
                },
                toAdd() {
                    location.href = '{:url("matchmaker/user/infoAdd")}';
                },
                toInfo(id) {
                    location.href = '{:url("matchmaker/user/infoEdit")}?id=' + id;
                },
                toMating(id) {
                    location.href = '{:url("matchmaker/user/matingEdit")}?id=' + id;
                },
                toMatch() {
                    let arr = [];
                    for (let field in this.match_field) {
                        if (this.match_field[field]) {
                            arr.push(field);
                        }
                    }
                    location.href = '{:url("matchmaker/user/match")}?id=' + this.match_id + '&match_field=' + arr.join(',');
                },
                toFollow(id) {
                    location.href = '{:url("matchmaker/user/follow")}?id=' + id;
                },
                toDelete(id) {
                    vant.Dialog.confirm({
                        title: '提示',
                        message: '将会删除该用户所有信息，跟进记录等，并且无法恢复，确认删除吗？',
                    })
                        .then(() => {
                            $.post("{:url('user/deleteUser')}", {id:id}, function (json) {
                                location.reload();
                            }, 'json');
                        })
                        .catch(() => {
                            // on cancel
                        });
                },
                matchField(id) {
                    this.match_id = id;
                    this.match_field = [];
                    this.showMatch = true;
                },
                toStatus(id,action) {
                    $.post("{:url('user/statusUser')}", {id:id,status:action.value}, function (json) {
                        location.reload();
                    }, 'json');
                },
                onLoad() {
                    //参数
                    let self = this;
                    let param = this.form;
                    param.page = this.page;
                    this.page++;

                    $.post("{:url('listUser')}", this.form, function (json) {
                        //下拉刷新
                        if (self.refreshing) {
                            self.refreshing = false;
                        }

                        // 加载状态结束
                        self.loading = false;

                        if (json.data.length == 0) {
                            // 数据全部加载完成
                            self.finished = true;
                        } else {
                            // 增加数据
                            for (let i = 0; i < json.data.length; i++) {
                                self.list.push(json.data[i]);
                            }
                        }
                    }, 'json');
                },
                onRefresh() {
                    // 清空列表数据
                    this.list = [];
                    this.page = 1;
                    this.loading = true;
                    this.finished = false;

                    this.onLoad();
                },
                statusChange(value) {
                    location.href = "{:url('index')}?status=" + value;
                },
            },
        });
    </script>
</block>