ChuangHeng_new/src/views/modules/wechatUser.vue

<template>
    <div class="agent_page adffc">
        <div class="ap_title">{{ title }}</div>
        
        <el-form :model="queryParams" ref="queryRef" label-width="118px" style="margin-top: 20px;">
          <el-row>
            <el-col :span="6" style="padding-right: 20px;">
                <el-form-item label="注册渠道">
                    <el-select v-model="queryParams.xxx" placeholder="请选择注册渠道"></el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6" style="padding-right: 20px;">
                <el-form-item label="用户昵称/手机号">
                    <el-input v-model="queryParams.yyy" placeholder="请输入用户昵称/手机号" style="width: 100%;"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8" style="padding-right: 20px;">
                <el-form-item label="时间周期">
                    <el-date-picker
                        v-model="queryParams.zzz"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item style="display: flex;align-items: center;">
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                <el-button type="primary" @click="getList">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无小程序用户" max-height="578px" style="margin-top: 5px;">
            <el-table-column label="序号" width="50">
                <template #default="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="用户昵称" prop="xx"></el-table-column>
            <el-table-column label="手机号码" prop="xx"></el-table-column>
            <el-table-column label="注册编号" prop="xx"></el-table-column>
            <el-table-column label="用户类型" prop="xx">
                <template #default="{ row }"></template>
            </el-table-column>
            <el-table-column label="注册渠道" prop="xx">
                <template #default="{ row }"></template>
            </el-table-column>
            <el-table-column label="注册时间" prop="xx"></el-table-column>
            <el-table-column label="最近登录时间" prop="xx"></el-table-column>
            <el-table-column label="操作" width="150">
                <template #default="scope">
                    <el-button link type="text" size="mini" @click="handleReview(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row style="display: flex;justify-content: center;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParams.page"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                v-show="total > 0">
            </el-pagination>
        </el-row>
    </div>
</template>

<script setup name="">
    import { ref, getCurrentInstance } from 'vue'
    const { proxy } = getCurrentInstance();
    const title = proxy.$route.meta.title;
    const queryParams = ref({
        page:1,
        limit:10,
        xxx:'',
        yyy:'',
        zzz:''
    })
    const dataList = ref([1])
    const total = ref(0)
    const loading = ref(false)
    
    const resetQuery = () => {
        proxy.$refs.queryRef.resetFields();
        queryParams.value = {
            page:1,
            limit:10,
            xxx:'',
            yyy:'',
            zzz:''
        }
        getList();
    }

    const getList = async () => {
        let query = {...queryParams.value};
        loading.value = true;
        // const res = await getCoachList(query);
        // dataList.value = res.data.list;
        // total.value = res.data.total;
        loading.value = false;
    }
    const handleSizeChange = (e)=>{
        queryParams.value.limit = e;
        getList();
    }
    const handleCurrentChange = (e)=>{
        queryParams.value.page = e;
        getList();
    }

    const handleReview = (row) => {
        proxy.$router.push({
            path:'/wechatUserDetail',
            query:{
                id:row.id,
                name:row.name
            }
        })
    }
</script>

<style scoped lang="scss">
    .agent_page{
        padding: 24px 16px;
    }
</style>