优化商品编辑，规格编辑
This commit is contained in:
parent
66f8f95cda
commit
bcf5d09b3b
File diff suppressed because it is too large
Load Diff
|
|
@ -1,93 +1,110 @@
|
|||
<template>
|
||||
<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>
|
||||
<el-button type="primary" @click="getTableData">查询</el-button>
|
||||
<el-button @click="resetHandle">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- <div class="head-container">
|
||||
<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>
|
||||
<el-button type="primary" @click="getTableData">查询</el-button>
|
||||
<el-button @click="resetHandle">重置</el-button>
|
||||
</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">
|
||||
<div class="card">
|
||||
<!-- <div class="title">统计数据</div> -->
|
||||
<div class="row">
|
||||
<div class="item">
|
||||
<div class="t">会员数</div>
|
||||
<div class="n">{{ shopInfo.userTotal||0 }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="t">会员余额</div>
|
||||
<div class="n">{{ shopInfo.balanceTotal||0 }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="t">充值金额</div>
|
||||
<div class="n">{{ shopInfo.chageTotal||0 }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<el-button type="success" @click="toPage('charge')">充值记录</el-button>
|
||||
<!-- <el-button type="danger" @click="toPage('cost')">消费记录</el-button> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<div class="card">
|
||||
<!-- <div class="title">统计数据</div> -->
|
||||
<div class="row">
|
||||
<div class="item">
|
||||
<div class="t">会员数</div>
|
||||
<div class="n">{{ shopInfo.userTotal || 0 }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="t">会员余额</div>
|
||||
<div class="n">{{ shopInfo.balanceTotal || 0 }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="t">充值金额</div>
|
||||
<div class="n">{{ shopInfo.chageTotal || 0 }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<el-button type="success" @click="toPage('charge')"
|
||||
>充值记录</el-button
|
||||
>
|
||||
<!-- <el-button type="danger" @click="toPage('cost')">消费记录</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.data" v-loading="tableData.loading">
|
||||
<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="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="手机号" prop="telephone" width="160"></el-table-column>
|
||||
<el-table-column label="生日" prop="birthDay" width="200"></el-table-column>
|
||||
<el-table-column label="注册时间" prop="createAt" width="200">
|
||||
<template v-slot="scope">
|
||||
{{ scope.row.createAt | timeFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="最近登录时间" prop="lastLoginAt" width="200">
|
||||
<template v-slot="scope">
|
||||
{{ scope.row.lastLoginAt | timeFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="操作" width="90" fixed="right">
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.data" v-loading="tableData.loading">
|
||||
<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="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="手机号"
|
||||
prop="telephone"
|
||||
width="160"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="生日"
|
||||
prop="birthDay"
|
||||
width="200"
|
||||
></el-table-column>
|
||||
<el-table-column label="注册时间" prop="createAt" width="200">
|
||||
<template v-slot="scope">
|
||||
{{ scope.row.createAt | timeFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="最近登录时间" prop="lastLoginAt" width="200">
|
||||
<template v-slot="scope">
|
||||
{{ scope.row.lastLoginAt | timeFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="操作" width="90" fixed="right">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" @click="$refs.addActive.show(scope.row)">编辑</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
|
||||
|
|
@ -96,174 +113,179 @@
|
|||
</el-popconfirm>
|
||||
</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>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { queryAllShopUser ,queryAllShopInfo} from '@/api/shop'
|
||||
import dayjs from 'dayjs'
|
||||
let cacheData = {}
|
||||
import { queryAllShopUser, queryAllShopInfo } from "@/api/shop";
|
||||
import dayjs from "dayjs";
|
||||
let cacheData = {};
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
query: {
|
||||
name: '',
|
||||
isVip: 1
|
||||
},
|
||||
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() {
|
||||
cacheData={...this.query}
|
||||
this.getTableData()
|
||||
this.getShopInfo()
|
||||
},
|
||||
methods: {
|
||||
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.telephone = ''
|
||||
this.getTableData()
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e - 1
|
||||
this.getTableData()
|
||||
},
|
||||
// 获取商品列表
|
||||
async getTableData() {
|
||||
this.tableData.loading = true
|
||||
//用于当页码为2以及以上查询条件更改时重置页码
|
||||
if(cacheData.isVip!==this.query.isVip){
|
||||
this.tableData.page=0
|
||||
}
|
||||
cacheData.isVip=this.query.isVip
|
||||
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)
|
||||
}
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
query: {
|
||||
name: "",
|
||||
isVip: 1
|
||||
},
|
||||
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() {
|
||||
cacheData = { ...this.query };
|
||||
this.getTableData();
|
||||
this.getShopInfo();
|
||||
},
|
||||
methods: {
|
||||
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.query.isVip = 1;
|
||||
this.getTableData();
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e - 1;
|
||||
this.getTableData();
|
||||
},
|
||||
// 获取商品列表
|
||||
async getTableData() {
|
||||
this.tableData.loading = true;
|
||||
//用于当页码为2以及以上查询条件更改时重置页码
|
||||
if (cacheData.isVip !== this.query.isVip) {
|
||||
this.tableData.page = 0;
|
||||
}
|
||||
cacheData.isVip = this.query.isVip;
|
||||
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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
margin-left: 10px;
|
||||
|
||||
}
|
||||
.name {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .image-slot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #efefef;
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue