307 lines
10 KiB
Vue
307 lines
10 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div class="left_content">
|
||
<div class="query_wrap">
|
||
<div class="form">
|
||
<el-input v-model="queryForm.key" placeholder="请输入昵称或手机号查询" style="width: 230px;"
|
||
@input="phoneInput"></el-input>
|
||
<el-select v-model="queryForm.isVip" placeholder="是否为会员" style="width: 150px;"
|
||
@change="getUserList">
|
||
<el-option label="全部" value=""></el-option>
|
||
<el-option label="是" :value="1"></el-option>
|
||
<el-option label="否" :value="0"></el-option>
|
||
</el-select>
|
||
<div class="btns">
|
||
<el-button type="primary" @click="queryHandle">查询</el-button>
|
||
<el-button @click="resetHandle">重置</el-button>
|
||
</div>
|
||
</div>
|
||
<!-- <el-button type="warning">添加会员</el-button> -->
|
||
</div>
|
||
<div class="table_wrap">
|
||
<el-table ref="tableRef" :data="tableData.list" v-loading="tableData.loading" border strip height="100%"
|
||
highlight-current-row @current-change="handleCurrentChange">
|
||
<el-table-column label="昵称" prop="nickName" width="200">
|
||
<template v-slot="scope">
|
||
<div class="info">
|
||
<el-image :src="scope.row.headImg"
|
||
style="width: 40px;height: 40px;flex-shrink: 0;"></el-image>
|
||
<span>{{ scope.row.nickName }}</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="手机" prop="phone" width="150"></el-table-column>
|
||
<el-table-column label="性别" prop="sex">
|
||
<template v-slot="scope">
|
||
{{ scope.row.sex == 1 ? '男' : '女' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="会员" prop="isVip" width="200">
|
||
<template v-slot="scope">
|
||
<div v-if="scope.row.isVip == 0">未成为会员</div>
|
||
<div v-else>
|
||
会员编号：{{ scope.row.code }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="账户积分" prop="pointBalance" width="150"></el-table-column>
|
||
<el-table-column label="钱包余额" prop="amount" width="150"></el-table-column>
|
||
<el-table-column label="消费累计" prop="consumeAmount" width="150"></el-table-column>
|
||
<el-table-column label="消费次数累计" prop="consumeCount" width="150"></el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="pagination">
|
||
<el-pagination background v-model:current-page="queryForm.page" v-model:page-size="queryForm.size"
|
||
:page-sizes="[10, 30, 50, 100]" layout="sizes, pager, jumper, total" :total="tableData.total"
|
||
@size-change="getUserList" @current-change="getUserList"></el-pagination>
|
||
</div>
|
||
</div>
|
||
<div class="right_content">
|
||
<div class="row_wrap">
|
||
<div class="top_info">
|
||
<div class="row">
|
||
<span>会员昵称：</span>
|
||
<span v-if="currentRow">{{ currentRow.nickName || '' }}</span>
|
||
</div>
|
||
<div class="row">
|
||
<span>手机号码：</span>
|
||
<span v-if="currentRow">{{ currentRow.phone || '' }}</span>
|
||
</div>
|
||
<div class="row">
|
||
<span>会员编号：</span>
|
||
<span v-if="currentRow">{{ currentRow.code || '' }}</span>
|
||
</div>
|
||
<div class="row">
|
||
<span>会员生日：</span>
|
||
<span v-if="currentRow">{{ currentRow.birthDay || '' }}</span>
|
||
</div>
|
||
<div class="row">
|
||
<div class="fit_row">
|
||
<div class="flex">
|
||
<span>会员积分：</span>
|
||
<span v-if="currentRow">{{ currentRow.accountPoints || 0 }}</span>
|
||
<span v-else>0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row" @click="RecordDialogRef.show(currentRow)">
|
||
<div class="fit_row">
|
||
<div class="flex">
|
||
<span>储值余额：￥ </span>
|
||
<span v-if="currentRow">{{ currentRow.amount || 0 }}</span>
|
||
<span v-else>0</span>
|
||
</div>
|
||
<el-icon class="icon">
|
||
<ArrowRight />
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="btn_wrap">
|
||
<div class="btn">
|
||
<el-button type="warning" style="width: 100%;" @click="UserChargeRef.show()">账户充值</el-button>
|
||
</div>
|
||
<div class="btn">
|
||
<el-button type="primary" style="width: 100%;" @click="AddUserDrawerRef.show()">添加会员</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 会员余额充值 -->
|
||
<UserCharge ref="UserChargeRef" :user-info="currentRow" @pay-success="getUserList" />
|
||
<!-- 充值记录 -->
|
||
<RecordDialog ref="RecordDialogRef" @refund="getUserList" />
|
||
<!-- 添加会员 -->
|
||
<AddUserDrawer ref="AddUserDrawerRef" @success="queryHandle" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import _ from 'lodash'
|
||
import { ref, onMounted } from 'vue'
|
||
import { shopUserList } from '@/api/account.js'
|
||
import UserCharge from './components/userCharge.vue'
|
||
import RecordDialog from './components/recordDialog.vue'
|
||
import AddUserDrawer from './components/addUserDrawer.vue'
|
||
|
||
const UserChargeRef = ref(null)
|
||
const RecordDialogRef = ref(null)
|
||
const AddUserDrawerRef = ref(null)
|
||
|
||
const queryForm = ref({
|
||
key: '',
|
||
isVip: '',
|
||
page: 1,
|
||
size: 10
|
||
})
|
||
|
||
const resetQueryForm = ref({})
|
||
|
||
const tableRef = ref(null)
|
||
const tableData = ref({
|
||
total: 0,
|
||
loading: false,
|
||
list: []
|
||
})
|
||
|
||
const currentRow = ref({})
|
||
|
||
// 当前选中的表格row
|
||
function handleCurrentChange(e) {
|
||
currentRow.value = e
|
||
}
|
||
|
||
// 设置选中表格
|
||
function setCurrent(row) {
|
||
currentRow.value = { ...row }
|
||
tableRef.value.setCurrentRow(row)
|
||
}
|
||
|
||
// 重置页码查询
|
||
function queryHandle() {
|
||
queryForm.value.page = 1
|
||
getUserList()
|
||
}
|
||
|
||
// 重置
|
||
function resetHandle() {
|
||
queryForm.value = { ...resetQueryForm.value }
|
||
getUserList()
|
||
}
|
||
|
||
// 输入
|
||
const phoneInput = _.debounce(function (e) {
|
||
getUserList()
|
||
}, 800)
|
||
|
||
// 获取用户列表
|
||
async function getUserList() {
|
||
try {
|
||
tableData.value.loading = true
|
||
const res = await shopUserList(queryForm.value)
|
||
tableData.value.list = res.records
|
||
tableData.value.total = +res.totalRow
|
||
|
||
if (res.records.length) {
|
||
console.log('有数据');
|
||
// 有数据要设置默认选中的会员
|
||
setCurrent(res.records[0])
|
||
} else {
|
||
console.log('没有数据');
|
||
currentRow.value = {}
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
tableData.value.loading = false
|
||
}
|
||
|
||
onMounted(() => {
|
||
resetQueryForm.value = { ...queryForm.value }
|
||
getUserList()
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.container {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.left_content {
|
||
flex: 1;
|
||
height: 100%;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
padding: var(--el-font-size-base);
|
||
|
||
.query_wrap {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.form {
|
||
display: flex;
|
||
gap: 10px;
|
||
|
||
.btns {
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
|
||
.table_wrap {
|
||
width: calc(100vw - 440px);
|
||
padding: var(--el-font-size-base) 0;
|
||
height: calc(100vh - 140px);
|
||
|
||
.info {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
span {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pagination {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
|
||
.right_content {
|
||
width: 300px;
|
||
height: 100%;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
margin-left: var(--el-font-size-base);
|
||
padding: var(--el-font-size-base);
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.row_wrap {
|
||
flex: 1;
|
||
|
||
.top_info {
|
||
background-color: var(--primary-color);
|
||
padding: var(--el-font-size-base);
|
||
color: #fff;
|
||
border-radius: 6px;
|
||
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
|
||
.row {
|
||
display: flex;
|
||
|
||
&:not(:last-child) {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.fit_row {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8px 10px;
|
||
border-radius: 4px;
|
||
justify-content: space-between;
|
||
color: var(--primary-color);
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn_wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
|
||
.btn {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |