322 lines
9.1 KiB
Vue
322 lines
9.1 KiB
Vue
|
<template>
|
||
|
|
<div style="height: calc(100vh - 200px)">
|
||
|
|
<obj-table-plus
|
||
|
|
ref="oTable"
|
||
|
|
style="height: 100%"
|
||
|
|
:tableCols="tableCols"
|
||
|
|
:tableProp="tableProp"
|
||
|
|
@query="queryList"
|
||
|
|
v-model="dataList"
|
||
|
|
:tableEvent="tableEvent"
|
||
|
|
:enableAutoQuery="false"
|
||
|
|
>
|
||
|
|
<template slot="tableTop">
|
||
|
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||
|
|
<el-form-item label="用户ID">
|
||
|
|
<el-input
|
||
|
|
placeholder="请输入用户ID"
|
||
|
|
v-model="formInline.name"
|
||
|
|
></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="用户昵称">
|
||
|
|
<el-input
|
||
|
|
placeholder="请输入用户昵称"
|
||
|
|
v-model="formInline.name"
|
||
|
|
></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="会员等级">
|
||
|
|
<el-select
|
||
|
|
@change="getData"
|
||
|
|
v-model="formInline.marketId"
|
||
|
|
placeholder="请选择会员等级"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="item in marketList"
|
||
|
|
:key="item.marketId"
|
||
|
|
:label="item.marketName"
|
||
|
|
:value="item.marketId"
|
||
|
|
></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="手机号">
|
||
|
|
<el-input
|
||
|
|
placeholder="请输入手机号"
|
||
|
|
v-model="formInline.name"
|
||
|
|
></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="会员状态">
|
||
|
|
<el-select
|
||
|
|
@change="getData"
|
||
|
|
v-model="formInline.marketId"
|
||
|
|
placeholder="请选择会员状态"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="item in marketList"
|
||
|
|
:key="item.marketId"
|
||
|
|
:label="item.marketName"
|
||
|
|
:value="item.marketId"
|
||
|
|
></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="注册时间">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="value1"
|
||
|
|
type="datetimerange"
|
||
|
|
start-placeholder="开始日期"
|
||
|
|
end-placeholder="结束日期"
|
||
|
|
>
|
||
|
|
</el-date-picker>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="生日">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="value1"
|
||
|
|
type="datetimerange"
|
||
|
|
start-placeholder="开始日期"
|
||
|
|
end-placeholder="结束日期"
|
||
|
|
>
|
||
|
|
</el-date-picker>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="会员性别">
|
||
|
|
<el-select
|
||
|
|
@change="getData"
|
||
|
|
v-model="formInline.marketId"
|
||
|
|
placeholder="全部"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="item in marketList"
|
||
|
|
:key="item.marketId"
|
||
|
|
:label="item.marketName"
|
||
|
|
:value="item.marketId"
|
||
|
|
></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<!-- <el-form-item v-if="marketList.length > 0" label="菜市场">
|
||
|
|
<el-select
|
||
|
|
@change="getData"
|
||
|
|
v-model="formInline.marketId"
|
||
|
|
placeholder="请选择菜市场"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="item in marketList"
|
||
|
|
:key="item.marketId"
|
||
|
|
:label="item.marketName"
|
||
|
|
:value="item.marketId"
|
||
|
|
></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item v-if="marketList.length > 0" label="店铺">
|
||
|
|
<el-select v-model="formInline.shopId" placeholder="请选择店铺">
|
||
|
|
<el-option
|
||
|
|
v-for="item in storeList"
|
||
|
|
:key="item.shopId"
|
||
|
|
:label="item.shopName"
|
||
|
|
:value="item.shopId"
|
||
|
|
></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item> -->
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" @click="$refs.oTable.reload()"
|
||
|
|
>查询</el-button
|
||
|
|
>
|
||
|
|
<el-button type="primary" @click="$refs.oTable.reload()"
|
||
|
|
>重置</el-button
|
||
|
|
>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</template>
|
||
|
|
</obj-table-plus>
|
||
|
|
<!-- 添加或编辑 -->
|
||
|
|
<!-- <add-or-update
|
||
|
|
@queryList="$refs.oTable.reload()"
|
||
|
|
ref="addOrUpdate"
|
||
|
|
></add-or-update> -->
|
||
|
|
<!-- 查看详情 -->
|
||
|
|
<!-- <viewDetails ref="viewDetails"></viewDetails> -->
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// import AddOrUpdate from "./popup/add-or-update.vue";
|
||
|
|
// import viewDetails from "./popup/view-details.vue";
|
||
|
|
export default {
|
||
|
|
// components: { AddOrUpdate },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dataList: [],
|
||
|
|
formInline: {
|
||
|
|
marketId: "",
|
||
|
|
shopId: "",
|
||
|
|
unitType: "",
|
||
|
|
},
|
||
|
|
tableProp: {
|
||
|
|
"auto-resize": true,
|
||
|
|
border: true,
|
||
|
|
height: "auto",
|
||
|
|
"row-id": "id",
|
||
|
|
"show-overflow": false,
|
||
|
|
},
|
||
|
|
productFilterType: "SALE",
|
||
|
|
selectList: [],
|
||
|
|
isShopId: false,
|
||
|
|
marketList: [],
|
||
|
|
storeList: [],
|
||
|
|
value1: [],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
if (JSON.parse(sessionStorage.getItem("userInfo")).markets.length > 0) {
|
||
|
|
this.isShopId = true;
|
||
|
|
this.formInline.marketId = JSON.parse(
|
||
|
|
sessionStorage.getItem("userInfo")
|
||
|
|
).markets[0].marketId;
|
||
|
|
this.marketList = JSON.parse(sessionStorage.getItem("userInfo")).markets;
|
||
|
|
this.formInline.unitType = JSON.parse(sessionStorage.getItem("userInfo")).unitType
|
||
|
|
console.log(this.marketList);
|
||
|
|
this.getData();
|
||
|
|
} else if (JSON.parse(sessionStorage.getItem("userInfo")).shopId) {
|
||
|
|
(this.formInline.shopId = JSON.parse(
|
||
|
|
sessionStorage.getItem("userInfo")
|
||
|
|
).shopId),
|
||
|
|
(this.isShopId = true);
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs.oTable.reload();
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.isShopId = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getData() {
|
||
|
|
this.$api.mer_admin
|
||
|
|
.storeList({ marketId: this.formInline.marketId })
|
||
|
|
.then((res) => {
|
||
|
|
this.storeList = res.data.data;
|
||
|
|
// this.formInline.shopId = res.data.data[0].shopId;
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs.oTable.reload();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
queryList(pageNo, pageSize) {
|
||
|
|
this.$api.marketing
|
||
|
|
.marketingUserPage({
|
||
|
|
pageNumber: pageNo,
|
||
|
|
pageSize: pageSize,
|
||
|
|
...this.formInline,
|
||
|
|
})
|
||
|
|
.then((res) => {
|
||
|
|
console.log(res);
|
||
|
|
this.$refs.oTable.complete(
|
||
|
|
res.data.data.data,
|
||
|
|
Number(res.data.data.total)
|
||
|
|
);
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
this.$refs.oTable.complete(false);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
tableCols() {
|
||
|
|
return [
|
||
|
|
{ type: "checkbox", width: "60px", fixed: "left" },
|
||
|
|
// { type: "seq", width: "60px", align: "center", title: "序号" },
|
||
|
|
{
|
||
|
|
title: "用戶ID",
|
||
|
|
align: "center",
|
||
|
|
field: "name",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "用戶头像",
|
||
|
|
align: "center",
|
||
|
|
field: "publisher",
|
||
|
|
type: "jsx",
|
||
|
|
render: ({ row }) => {
|
||
|
|
if (row.publisher === "MERCHANT") {
|
||
|
|
return <span>店铺</span>;
|
||
|
|
} else if (row.publisher == "PLATFORM") {
|
||
|
|
return <span>平台</span>;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "用戶昵称",
|
||
|
|
align: "center",
|
||
|
|
field: "name",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "手机号",
|
||
|
|
align: "center",
|
||
|
|
field: "name",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "进行中订单数",
|
||
|
|
align: "center",
|
||
|
|
field: "name",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "完成订单数",
|
||
|
|
align: "center",
|
||
|
|
field: "name",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "消费金额（元）",
|
||
|
|
align: "center",
|
||
|
|
field: "name",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "会员等级",
|
||
|
|
align: "center",
|
||
|
|
field: "money",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "生日",
|
||
|
|
align: "center",
|
||
|
|
field: "discount",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "注册时间",
|
||
|
|
align: "center",
|
||
|
|
field: "minPrice",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "限量",
|
||
|
|
align: "center",
|
||
|
|
field: "limitedNum",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "操作",
|
||
|
|
fixed: "right",
|
||
|
|
type: "jsx",
|
||
|
|
align: "center",
|
||
|
|
width: "140px",
|
||
|
|
render: (row) => {
|
||
|
|
let edit = () => {
|
||
|
|
// this.$refs.viewDetails.toggle(row).update();
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<el-button size="mini" type="primary" onClick={edit}>
|
||
|
|
详情
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
];
|
||
|
|
},
|
||
|
|
tableEvent() {
|
||
|
|
return {
|
||
|
|
"checkbox-all": ({ records, reserves }) => {
|
||
|
|
this.selectList = [...records, ...reserves];
|
||
|
|
},
|
||
|
|
"checkbox-change": ({ records, reserves }) => {
|
||
|
|
this.selectList = [...records, ...reserves];
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped></style>
|