289 lines
7.3 KiB
Vue
289 lines
7.3 KiB
Vue
<template>
|
|
<el-dialog title="选择用户" width="850px" :visible.sync="show">
|
|
<div class="app-container">
|
|
<div class="head-container">
|
|
<el-form :model="query" inline>
|
|
<el-form-item label="">
|
|
<el-input
|
|
v-model="query.name"
|
|
placeholder="请输入昵称或手机号"
|
|
></el-input>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="是否为会员">
|
|
<el-select v-model="query.isVip" placeholder="是否是会员">
|
|
<el-option value="" label="全部"></el-option>
|
|
<el-option :value="1" label="是"></el-option>
|
|
<el-option :value="0" label="否"></el-option>
|
|
</el-select>
|
|
</el-form-item> -->
|
|
<el-form-item>
|
|
<div class="flex gap-20">
|
|
<el-button type="success" @click="getTableData" size="medium"
|
|
>搜索</el-button
|
|
>
|
|
<!-- <el-button @click="resetHandle" size="medium">重置</el-button> -->
|
|
<el-button @click="noChooseUser" size="medium"
|
|
>不选择用户</el-button
|
|
>
|
|
<!-- <el-button @click="resetHandle" size="medium">新建用户</el-button> -->
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<!-- <div class="head-container">
|
|
<el-button type="primary" icon="el-icon-plus" @click="$refs.addActive.show()">
|
|
添加活动
|
|
</el-button>
|
|
</div> -->
|
|
|
|
<div class="head-container">
|
|
<el-table :data="tableData.data" v-loading="tableData.loading" @cell-click="cellClick">
|
|
<el-table-column label="ID" prop="id"></el-table-column>
|
|
<el-table-column label="用户" prop="headImg" width="200px">
|
|
<template v-slot="scope">
|
|
<div class="user_info">
|
|
<el-image
|
|
:src="scope.row.headImg"
|
|
style="width: 40px; height: 40px; flex-shrink: 0"
|
|
>
|
|
<div slot="error" class="image-slot">
|
|
<i class="el-icon-user"></i>
|
|
</div>
|
|
</el-image>
|
|
<span class="name">{{ scope.row.nickName }}</span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="手机号"
|
|
prop="telephone"
|
|
width="160"
|
|
></el-table-column>
|
|
<!-- <el-table-column label="性别" prop="sex">
|
|
<template v-slot="scope">
|
|
<el-tag type="priamry">{{ scope.row.sex || "未知" }}</el-tag>
|
|
</template>
|
|
</el-table-column> -->
|
|
<el-table-column label="会员" prop="isVip">
|
|
<template v-slot="scope">
|
|
<el-tag type="warning" v-if="scope.row.isVip"
|
|
>会员等级{{ scope.row.isVip }}</el-tag
|
|
>
|
|
<span v-else>否</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="余额" prop="amount"></el-table-column>
|
|
<el-table-column label="积分" prop="totalScore"></el-table-column>
|
|
|
|
<el-table-column label="操作" width="90" fixed="right">
|
|
<template v-slot="scope">
|
|
<el-button type="success" size="mini" @click="choose(scope.row)">选择</el-button>
|
|
<!-- <el-button type="text" @click="charge(scope.row)">充值</el-button> -->
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="head-container">
|
|
<el-pagination
|
|
:total="tableData.total"
|
|
:current-page="tableData.page + 1"
|
|
:page-size="tableData.size"
|
|
@size-change="sizeChange"
|
|
@current-change="paginationChange"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
></el-pagination>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { queryAllShopUser, queryAllShopInfo } from "@/api/shop";
|
|
import dayjs from "dayjs";
|
|
let cacheData = {};
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
query: {
|
|
name: "",
|
|
},
|
|
shopInfo: {
|
|
balanceTotal: 0,
|
|
userTotal: 0,
|
|
chageTotal: 0,
|
|
},
|
|
tableData: {
|
|
data: [],
|
|
page: 0,
|
|
size: 10,
|
|
loading: false,
|
|
total: 0,
|
|
},
|
|
};
|
|
},
|
|
filters: {
|
|
timeFilter(s) {
|
|
return dayjs(s).format("YYYY-MM-DD HH:mm:ss");
|
|
},
|
|
},
|
|
mounted() {
|
|
// this.getTableData();
|
|
},
|
|
methods: {
|
|
cellClick(user){
|
|
console.log(user)
|
|
this.$emit("chooseUser",user)
|
|
this.close()
|
|
},
|
|
noChooseUser(){
|
|
this.$emit("chooseUser",null)
|
|
this.close()
|
|
|
|
},
|
|
choose(user) {
|
|
this.$emit("chooseUser",user)
|
|
this.close()
|
|
|
|
},
|
|
charge(user) {
|
|
console.log(user);
|
|
},
|
|
close(){
|
|
this.show = false;
|
|
},
|
|
open() {
|
|
this.getTableData();
|
|
this.show = true;
|
|
},
|
|
toPage(type) {
|
|
const pages = {
|
|
charge: "charge_list",
|
|
cost: "cost_list",
|
|
};
|
|
this.$router.push({
|
|
name: pages[type],
|
|
});
|
|
console.log(pages[type]);
|
|
},
|
|
// 获取商家用户概述信息
|
|
async getShopInfo() {
|
|
try {
|
|
const res = await queryAllShopInfo(this.query);
|
|
this.shopInfo = res;
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
},
|
|
sizeChange() {
|
|
this.tableData.page = 0;
|
|
this.getTableData();
|
|
},
|
|
// 切换状态
|
|
async statusChange(e, row) {
|
|
try {
|
|
this.tableData.loading = true;
|
|
const data = { ...row };
|
|
data.status = e;
|
|
await modityActivate(data);
|
|
this.getTableData();
|
|
} catch (error) {
|
|
console.log(error);
|
|
this.tableData.loading = false;
|
|
}
|
|
},
|
|
// 重置查询
|
|
resetHandle() {
|
|
this.query.name = "";
|
|
this.getTableData();
|
|
},
|
|
// 分页回调
|
|
paginationChange(e) {
|
|
this.tableData.page = e - 1;
|
|
this.getTableData();
|
|
},
|
|
// 获取商品列表
|
|
async getTableData() {
|
|
this.tableData.loading = true;
|
|
try {
|
|
const res = await queryAllShopUser({
|
|
...this.query,
|
|
size: this.tableData.size,
|
|
page: this.tableData.page + 1,
|
|
});
|
|
this.tableData.loading = false;
|
|
this.tableData.data = res.content;
|
|
this.tableData.total = res.totalElements;
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.user_info {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.name {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
::v-deep .el-input--small .el-input__inner{
|
|
height: 36px;
|
|
line-height: 36px;
|
|
}
|
|
|
|
::v-deep .image-slot {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #efefef;
|
|
font-size: 20px;
|
|
color: #999;
|
|
}
|
|
|
|
.card {
|
|
background-color: #f5f5f5;
|
|
padding: 0 14px;
|
|
|
|
.title {
|
|
font-size: 22px;
|
|
padding-top: 14px;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
padding: 20px 0;
|
|
|
|
.item {
|
|
flex: 1;
|
|
|
|
.t {
|
|
text-align: center;
|
|
color: #555;
|
|
}
|
|
|
|
.n {
|
|
color: #000;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
padding-top: 6px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.flex{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.gap-20{
|
|
gap: 20px;
|
|
}
|
|
</style>
|
|
|