<template> <div> <el-form :model="searchForm" inline @submit.prevent> <el-form-item> <el-input v-model="searchForm.phone" placeholder="学员手机号" /> </el-form-item> <el-form-item> <el-radio-group v-model="searchForm.carTypeId" @change="changeCarType"> <el-radio label="1001">小车</el-radio> <el-radio label="1002">摩托车</el-radio> </el-radio-group> </el-form-item> <!-- <el-form-item> <el-select v-model="searchForm.memberId" placeholder="选择会员类型" clearable filterable> <el-option v-for="item in vipOptions" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> --> <el-form-item> <el-button @click="searchList">查询</el-button> <el-button type="primary" @click="addVipUser">赠送会员</el-button> </el-form-item> </el-form> <el-table v-loading="loading" :data="tableList" height="calc(100vh - 260px)"> <el-table-column type="index" width="55" align="center" /> <el-table-column label="手机号" align="left" prop="phone" min-width="140" /> <el-table-column label="会员名" align="left" prop="memberName" min-width="140" /> <el-table-column label="车型" align="left" min-width="100"> <template #default="{ row }"> {{ row.carTypeId == 1001 ? '小车' : '摩托车' }} </template> </el-table-column> <el-table-column label="科目" align="left" prop="subjects" min-width="100" /> <el-table-column label="来源" align="left" prop="useTypeName" min-width="100" /> <el-table-column label="截止日期" align="left" prop="endDate" min-width="120" /> <el-table-column label="操作人" align="left" prop="operUser" min-width="100" /> <el-table-column label="操作时间" align="left" prop="createTime" min-width="120" /> </el-table> <pagination v-show="total > 0" :total="total" v-model:page="searchForm.pageNo" v-model:limit="searchForm.pageSize" @pagination="getList" /> <el-dialog title="赠送会员" v-model="showDialog" width="500px" :close-on-click-modal="false"> <el-form :model="form" ref="formRef" :rules="rules" label-width="80px"> <el-form-item label="手机号" prop="phone"> <el-input v-model="form.phone" maxlength="11" /> </el-form-item> <el-form-item label="会员类型" prop="memberId"> <el-select v-model="form.memberId" clearable filterable style="width: 100%"> <el-option v-for="item in vipOptions" :key="item.memberId" :label="item.memberName" :value="item.memberId" > <span style="float: left">{{ item.memberName }}</span> <span style="float: right; color: #aaa">{{ item.carName }}</span> </el-option> </el-select> </el-form-item> </el-form> <template #footer> <span> <el-button @click="showDialog = false">取消</el-button> <el-button type="primary" @click="sureAdd">确定</el-button> </span> </template> </el-dialog> </div> </template> <script setup name="VipUser"> import { getUserMemberList, giveUserMember, getVipTypeOptions } from '@/api/xjapplet/vip' const message = useMessage() const searchForm = ref({ carTypeId: '1001', memberId: undefined, phone: undefined, pageNo: 1, pageSize: 50 }) const loading = ref(false) const tableList = ref([]) const total = ref(0) const vipOptions = ref([]) onMounted(() => { changeCarType() }) function changeCarType() { getVipTypeOptions({ carTypeId: searchForm.value.carTypeId }).then((response) => { vipOptions.value = response }) searchList() } function searchList() { searchForm.value.pageNo = 1 getList() } function getList() { loading.value = true getUserMemberList(searchForm.value).then((response) => { tableList.value = response.list total.value = response.total loading.value = false }) } const showDialog = ref(false) const form = ref({ phone: '', memberId: '' }) const rules = ref({ phone: [{ required: true, message: '请输入用户手机号', trigger: 'blur' }], memberId: [{ required: true, message: '请选择会员类型', trigger: 'change' }] }) function addVipUser() { showDialog.value = true } const formRef = ref(null) async function sureAdd() { if (!formRef.value) return const valid = await formRef.value.validate() if (!valid) return giveUserMember(form.value).then((response) => { if (response) { message.success('赠送成功') showDialog.value = false searchList() } else { message.error('赠送失败') } }) } </script> <style lang="scss" scoped></style>