Skip to content

R
rs-cloud-platform-ui
Commit 95ec09fb authored by rencs's avatar rencs
Browse files
Options

Merge branch 'dev_ren' into 'dev' 

1.15 userlist

See merge request !57
parents 6755ceae 81414428
Hide whitespace changes
Inline Side-by-side
Showing with 535 additions and 373 deletions
src/api/userManagement/index.js
View file @ 95ec09fb
......@@ -29,7 +29,7 @@ export function userInvoiceList(query) {
return fetch({
url: '/api/website/userInvoice/getList',
method: 'get',
data: query
params: query
});
}
......@@ -40,7 +40,7 @@ export function userAddressList(query) {
return fetch({
url: '/api/website/userAddress/getList',
method: 'get',
data: query
params: query
});
}
......
src/views/userManagement/addressListDialog.vue
View file @ 95ec09fb
<template>
<div class="address-main">
<el-dialog :visible.sync="isVisible" title="查看地址" @close="closeDialog">
<el-scrollbar id="resultScroll" ref="myScrollbar" style="height: 400px;overflow-y:auto;overflow-x: hidden;">
<el-scrollbar
id="resultScroll"
ref="myScrollbar"
style="height: 400px; overflow-y: auto; overflow-x: hidden"
>
<div class="addr-item" v-for="item in list" :key="item.id">
<div class="flex-aic-jcb addr-user-info">
<div class="flex-aic-jcb addr-user-info">
<div class="flex-aic">
<span style="width: 200px;margin-right: 20px;" class="ellipsis">收货人：{{item.consigneeName}}</span>
<span style="width: 200px;">手机：{{item.consigneePhone}}</span>
<span style="width: 200px; margin-right: 20px" class="ellipsis"
>收货人：{{ item.consigneeName }}</span
>
<span style="width: 200px">手机：{{ item.consigneePhone }}</span>
</div>
<div
v-if="item.label"
style="
color: #0a84ff;
font-size: 12px;
background: #d9eafa;
border-radius: 2px;
padding: 2px 5px;
"
>
{{ item.label }}
</div>
<div v-if="item.label" style="color: #0A84FF;font-size: 12px;background: #D9EAFA;border-radius: 2px;padding: 2px 5px;">{{item.label}}</div>
</div>
<div class="flex-aic-jcb">
<span style="margin-top: 10px;" class="ellipsis-2">地址：{{item.province}}{{item.city}}{{item.town}}{{item.consigneeAddress}}</span>
<span style="margin-top: 10px" class="ellipsis-2"
>地址：{{ item.province }}{{ item.city }}{{ item.town
}}{{ item.consigneeAddress }}</span
>
</div>
</div>
<div style="color: #666;font-size: 12px;text-align: center;" v-if="finished">没有更多数据了</div>
<div
style="color: #666; font-size: 12px; text-align: center"
v-if="finished"
>
没有更多数据了
</div>
</el-scrollbar>
</el-dialog>
</div>
</template>
<script type="javascript">
import { userAddressList } from 'api/userManagement/index'
export default {
name: 'userManagement',
components: {},
data() {
return {
list: [],
finished: false, // 是否已加载全部
isVisible: false,
listQuery: {
page: 1,
limit: 20,
},
}
},
mounted() {
this.isVisible = true
this.getAddressList()
// 监听滚动事件
this.$nextTick(() => {
$('#resultScroll')[0].addEventListener('scroll', this.handleScroll, true)
})
},
methods:{
/**
* 关闭弹窗
*/
closeDialog(){
this.$emit('addressEvent', false)
import { userAddressList } from "api/userManagement/index";
export default {
props: ["userId"],
name: "userManagement",
components: {},
data() {
return {
list: [],
finished: false, // 是否已加载全部
isVisible: false,
listQuery: {
page: 1,
limit: 20,
},
/**
* 滚动监听
*/
handleScroll(){
var that = this
var sh = that.$refs['myScrollbar'].$refs['wrap'].scrollHeight // 滚动条高度
var st = that.$refs['myScrollbar'].$refs['wrap'].scrollTop // 滚动条距离顶部的距离
var ch = that.$refs['myScrollbar'].$refs['wrap'].clientHeight // 滚动条外容器的高度
};
},
mounted() {
this.isVisible = true;
this.getAddressList();
// 监听滚动事件
this.$nextTick(() => {
$("#resultScroll")[0].addEventListener("scroll", this.handleScroll, true);
});
},
methods: {
/**
* 关闭弹窗
*/
closeDialog() {
this.$emit("addressEvent", false);
},
/**
* 滚动监听
*/
handleScroll() {
var that = this;
var sh = that.$refs["myScrollbar"].$refs["wrap"].scrollHeight; // 滚动条高度
var st = that.$refs["myScrollbar"].$refs["wrap"].scrollTop; // 滚动条距离顶部的距离
var ch = that.$refs["myScrollbar"].$refs["wrap"].clientHeight; // 滚动条外容器的高度
if (st + ch >= sh) {
//到底了-业务逻辑
console.log(st)
this.listQuery.page = this.listQuery.page + 1
if(!this.finished){
that.getAddressList()
}
if (st + ch >= sh) {
//到底了-业务逻辑
console.log(st);
this.listQuery.page = this.listQuery.page + 1;
if (!this.finished) {
that.getAddressList();
}
},
/**
* 获取发票列表
*/
getAddressList(){
let _this = this
userAddressList(this.listQuery).then(response => {
if(response.status == 200){
let a = response.data.data
if (0 == a.length || _this.listQuery.page > response.data.totalPage) {
_this.finished = true;
return;
}
var e = _this.listQuery.page == 1 ? [] : _this.list;
a.map(function(item) {
e.push(item);
})
_this.list = e;
} else {
this.$notify({
title: '失败',
message: response.message,
type: 'error',
duration: 2000
})
}
},
/**
* 获取发票列表
*/
getAddressList() {
let _this = this;
this.listQuery.userId = this.userId;
userAddressList(this.listQuery).then((response) => {
if (response.status == 200) {
let a = response.data.data;
if (0 == a.length || _this.listQuery.page > response.data.totalPage) {
_this.finished = true;
return;
}
})
},
}
}
var e = _this.listQuery.page == 1 ? [] : _this.list;
a.map(function (item) {
e.push(item);
});
_this.list = e;
} else {
this.$notify({
title: "失败",
message: response.message,
type: "error",
duration: 2000,
});
}
});
},
},
};
</script>
<style lang="scss">
.address-main{
.el-scrollbar__wrap{
overflow-y: auto;
overflow-x: hidden;
}
.addr-item{
background: #f5f6fa;
border: 1px solid #f5f6fa;
padding: 16px;
margin-right: 25px;
color: #413434;
font-size: 13px;
margin-bottom: 24px;
}
.address-main {
.el-scrollbar__wrap {
overflow-y: auto;
overflow-x: hidden;
}
.addr-item {
background: #f5f6fa;
border: 1px solid #f5f6fa;
padding: 16px;
margin-right: 25px;
color: #413434;
font-size: 13px;
margin-bottom: 24px;
}
}
</style>
src/views/userManagement/index.vue
View file @ 95ec09fb
......@@ -3,7 +3,7 @@
<!-- 头部 -->
<div class="head">
<div>用户列表</div>
<!-- <el-button type="primary" @click="addItem">添加banner</el-button>-->
<!-- <el-button type="primary" @click="addItem">添加banner</el-button>-->
</div>
<!-- 主体 -->
<div class="app-container calendar-list-container">
......@@ -11,13 +11,22 @@
<div class="filter-container">
<el-form :inline="true" :model="listQuery" class="demo-form-inline">
<el-form-item label="昵称">
<el-input v-model="listQuery.realName" placeholder="请输入昵称"></el-input>
<el-input
v-model="listQuery.realName"
placeholder="请输入昵称"
></el-input>
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="listQuery.mobile" placeholder="请输入手机号"></el-input>
<el-input
v-model="listQuery.mobile"
placeholder="请输入手机号"
></el-input>
</el-form-item>
<el-form-item label="用户ID">
<el-input v-model="listQuery.userId" placeholder="请输入用户ID"></el-input>
<el-input
v-model="listQuery.userId"
placeholder="请输入用户ID"
></el-input>
</el-form-item>
<el-form-item label="注册时间">
<el-date-picker
......@@ -26,41 +35,73 @@
value-format="timestamp"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="状态">
<el-select class="filter-item" v-model="listQuery.status" placeholder="请选择">
<el-option :key="undefined" label="全部" :value="undefined"></el-option>
<el-select
class="filter-item"
v-model="listQuery.status"
placeholder="请选择"
>
<el-option
:key="undefined"
label="全部"
:value="undefined"
></el-option>
<el-option :key="0" label="启用" :value="0"></el-option>
<el-option :key="1" label="禁用" :value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" plain @click="handleSearch">搜索</el-button>
<el-button type="primary" plain @click="handleCleanSearch">清除搜索</el-button>
<el-button type="primary" plain @click="handleSearch"
>搜索</el-button
>
<el-button type="primary" plain @click="handleCleanSearch"
>清除搜索</el-button
>
</el-form-item>
</el-form>
</div>
<!-- 数据列表 -->
<el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
<el-table
:data="list"
v-loading.body="listLoading"
border
fit
highlight-current-row
style="width: 100%"
>
<el-table-column align="center" label="用户ID" width="120">
<template slot-scope="scope">
{{scope.row.userId}}
{{ scope.row.userId }}
</template>
</el-table-column>
<el-table-column align="center" label="昵称" prop="nickname"></el-table-column>
<el-table-column align="center" label="手机号" prop="username"></el-table-column>
<el-table-column
align="center"
label="昵称"
prop="nickname"
></el-table-column>
<el-table-column
align="center"
label="手机号"
prop="username"
></el-table-column>
<el-table-column align="center" label="头像">
<template slot-scope="scope">
<el-image style="width: 40px;height: 40px;border-radius: 50%;" :src="scope.row.headimgurl" :preview-src-list="[scope.row.headimgurl]"></el-image>
<!-- <img style="width: 40px;height: 40px;border-radius: 50%;" :src="scope.row.headimgurl" @click.stop="showPreview(scope.row.headimgurl)"/>-->
<el-image
style="width: 40px; height: 40px; border-radius: 50%"
:src="scope.row.headimgurl"
:preview-src-list="[scope.row.headimgurl]"
></el-image>
<!-- <img style="width: 40px;height: 40px;border-radius: 50%;" :src="scope.row.headimgurl" @click.stop="showPreview(scope.row.headimgurl)"/>-->
</template>
</el-table-column>
<el-table-column align="center" label="注册时间">
<template slot-scope="scope">
{{scope.row.crtTimeStr}}
{{ scope.row.crtTimeStr }}
</template>
</el-table-column>
<el-table-column align="center" label="状态">
......@@ -71,199 +112,242 @@
</el-table-column>
<el-table-column align="center" label="操作" width="300">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleInvoice(scope.row)">查看发票</el-button>
<el-button type="primary" size="mini" @click="handleAddress(scope.row)">查看地址</el-button>
<el-button :type="scope.row.status === 1 ? 'info': 'warning'" size="mini" @click="changeStatus(scope.row)">{{scope.row.status === 0 ? '禁用': '启用'}}</el-button>
<el-button
type="primary"
size="mini"
@click="handleInvoice(scope.row)"
>查看发票</el-button
>
<el-button
type="primary"
size="mini"
@click="handleAddress(scope.row)"
>查看地址</el-button
>
<el-button
:type="scope.row.status === 1 ? 'info' : 'warning'"
size="mini"
@click="changeStatus(scope.row)"
>{{ scope.row.status === 0 ? "禁用" : "启用" }}</el-button
>
</template>
</el-table-column>
</el-table>
<div v-show="!listLoading" class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="listQuery.page"
:page-sizes="[10, 20, 30, 50]"
:page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
</div>
<!-- 发票弹窗 -->
<invoice-list-dialog v-if="invoiceDialogVisible" v-on:invoiceEvent="invoiceEvent"></invoice-list-dialog>
<invoice-list-dialog
v-if="invoiceDialogVisible"
:userId="userId"
v-on:invoiceEvent="invoiceEvent"
></invoice-list-dialog>
<!-- 地址弹窗 -->
<address-list-dialog v-if="addressDialogVisible" v-on:addressEvent="addressEvent"></address-list-dialog>
<address-list-dialog
v-if="addressDialogVisible"
:userId="userId"
v-on:addressEvent="addressEvent"
></address-list-dialog>
</div>
</template>
<script type="javascript">
import { appUsersManageList, updateStatus } from 'api/userManagement/index'
import {timestamp2Date} from '@/utils/dateUtils';
import invoiceListDialog from "./invoiceListDialog";
import addressListDialog from "./addressListDialog";
export default {
name: 'userManagement',
components: {
invoiceListDialog,
addressListDialog
},
computed:{
getStatus(status) {
return (status) => {
let a = ""
switch(status) {
case 0: a = '启用'; break;
case 1: a = '禁用'; break;
default: a = '未知';break
}
return a
import { appUsersManageList, updateStatus } from "api/userManagement/index";
import { timestamp2Date } from "@/utils/dateUtils";
import invoiceListDialog from "./invoiceListDialog";
import addressListDialog from "./addressListDialog";
export default {
name: "userManagement",
components: {
invoiceListDialog,
addressListDialog,
},
computed: {
getStatus(status) {
return (status) => {
let a = "";
switch (status) {
case 0:
a = "启用";
break;
case 1:
a = "禁用";
break;
default:
a = "未知";
break;
}
return a;
};
},
},
data() {
return {
times: [],
listLoading: false,
list: [], // 用户列表
total: 0, // 总条数
userId: undefined,
listQuery: {
page: 1,
limit: 20,
mobile: undefined, // 手机号
realName: undefined, // 真实姓名
userId: undefined, // 用户id
status: undefined, // 0：启用 1：禁用
registrationTimeBegin: undefined, // 开始时间
registrationTimeEnd: undefined, // 结束时间
},
invoiceDialogVisible: false, // 查看发票弹窗
addressDialogVisible: false, // 查看地址弹窗
};
},
created() {
this.getList();
},
methods: {
/**
* 搜索
*/
handleSearch() {
this.listQuery.page = 1;
this.getList(); // 获取用户列表
},
data() {
return {
times: [],
listLoading: false,
list: [], // 用户列表
total: 0, // 总条数
listQuery: {
page: 1,
limit: 20,
mobile: undefined, // 手机号
realName: undefined, // 真实姓名
userId: undefined, // 用户id
status: undefined, // 0：启用 1：禁用
registrationTimeBegin: undefined, // 开始时间
registrationTimeEnd: undefined // 结束时间
},
invoiceDialogVisible: false, // 查看发票弹窗
addressDialogVisible: false // 查看地址弹窗
}
/**
* 查看发票-返回界面
*/
invoiceEvent() {
this.invoiceDialogVisible = false;
},
created() {
this.getList()
/**
* 查看地址-返回界面
*/
addressEvent() {
this.addressDialogVisible = false;
},
methods:{
/**
* 搜索
*/
handleSearch(){
this.listQuery.page = 1
this.getList() // 获取用户列表
},
/**
* 查看发票-返回界面
*/
invoiceEvent(){
this.invoiceDialogVisible = false
},
/**
* 查看地址-返回界面
*/
addressEvent(){
this.addressDialogVisible = false
},
/**
* 启用、禁用
*/
changeStatus(row){
this.$confirm("是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
/**
* 启用、禁用
*/
changeStatus(row) {
this.$confirm("是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
// 0、启用，1、禁用
updateStatus({id: row.userId, status: row.status == 1?0:1}).then((response) => {
if(response.status == 200){
updateStatus({
id: row.userId,
status: row.status == 1 ? 0 : 1,
}).then((response) => {
if (response.status == 200) {
this.$notify({
title: "成功",
message: "操作成功",
type: "success",
duration: 2000
duration: 2000,
});
this.getList()
this.getList();
} else {
this.$notify({
title: '失败',
title: "失败",
message: response.message,
type: 'error',
duration: 2000
})
type: "error",
duration: 2000,
});
}
});
}).catch(()=>{})
},
/**
* 查看发票
*/
handleInvoice(){
this.invoiceDialogVisible = true
},
/**
* 查看地址
*/
handleAddress(){
this.addressDialogVisible = true
},
/**
* 清除搜索
*/
handleCleanSearch(){
this.listQuery = {
page: 1,
limit: 20,
mobile: undefined, // 手机号
realName: undefined, // 真实姓名
userId: undefined, // 用户id
status: undefined, // 0：启用 1：禁用
registrationTimeBegin: undefined, // 开始时间
registrationTimeEnd: undefined // 结束时间
}
this.times = []
this.getList() // 获取用户列表
},
/**
* 获取用户列表
*/
getList(){
if(this.times.length>0){
this.listQuery.registrationTimeBegin = this.times[0]
this.listQuery.registrationTimeEnd = this.times[1]
}
this.listLoading = true
appUsersManageList(this.listQuery).then(response => {
if(response.status == 200){
response.data.list.map(function(item){
item.crtTimeStr = timestamp2Date(item.createTime);
})
this.list = response.data.list;
this.total = response.data.total;
this.listLoading = false;
} else {
this.listLoading = false
this.$notify({
title: '失败',
message: response.message,
type: 'error',
duration: 2000
})
}
})
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.getList();
.catch(() => {});
},
/**
* 查看发票
*/
handleInvoice(row) {
this.userId = row.userId;
this.invoiceDialogVisible = true;
},
/**
* 查看地址
*/
handleAddress(row) {
this.userId = row.userId;
this.addressDialogVisible = true;
},
/**
* 清除搜索
*/
handleCleanSearch() {
this.listQuery = {
page: 1,
limit: 20,
mobile: undefined, // 手机号
realName: undefined, // 真实姓名
userId: undefined, // 用户id
status: undefined, // 0：启用 1：禁用
registrationTimeBegin: undefined, // 开始时间
registrationTimeEnd: undefined, // 结束时间
};
this.times = [];
this.getList(); // 获取用户列表
},
/**
* 获取用户列表
*/
getList() {
if (this.times.length > 0) {
this.listQuery.registrationTimeBegin = this.times[0];
this.listQuery.registrationTimeEnd = this.times[1];
}
}
}
this.listLoading = true;
appUsersManageList(this.listQuery).then((response) => {
if (response.status == 200) {
response.data.list.map(function (item) {
item.crtTimeStr = timestamp2Date(item.createTime);
});
this.list = response.data.list;
this.total = response.data.total;
this.listLoading = false;
} else {
this.listLoading = false;
this.$notify({
title: "失败",
message: response.message,
type: "error",
duration: 2000,
});
}
});
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.getList();
},
},
};
</script>
<style lang="scss">
.user-list {
.head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 20px;
width: 100%;
border-bottom: 1px solid #e6e6e6;
height: 57px;
}
.user-list {
.head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 20px;
width: 100%;
border-bottom: 1px solid #e6e6e6;
height: 57px;
}
}
</style>
src/views/userManagement/invoiceListDialog.vue
View file @ 95ec09fb
<template>
<div class="invoice-main">
<el-dialog :visible.sync="isVisible" title="查看发票" @close="closeDialog">
<el-scrollbar id="resultScroll" ref="myScrollbar" style="height: 400px;overflow-y:auto;overflow-x: hidden;">
<el-scrollbar
id="resultScroll"
ref="myScrollbar"
style="height: 400px; overflow-y: auto; overflow-x: hidden"
>
<div class="invoice-item" v-for="item in list" :key="item.id">
<div class="flex-aic-jcb">
<div class="invoice-item-text">{{item.titleType==1?'公司名称':"个人名称"}}：{{item.titleName}}</div>
<div style="color: #0A84FF;font-size: 12px;background: #D9EAFA;border-radius: 2px;padding: 2px 5px;">{{item.type==1?'普通发票':'增值税专用发票'}}-{{item.titleType==1?'企业':'个人'}}</div>
<div class="invoice-item-text">
{{ item.titleType == 1 ? "公司名称" : "个人名称" }}：{{
item.titleName
}}
</div>
<div
style="
color: #0a84ff;
font-size: 12px;
background: #d9eafa;
border-radius: 2px;
padding: 2px 5px;
"
>
{{ item.type == 1 ? "普通发票" : "增值税专用发票" }}-{{
item.titleType == 1 ? "企业" : "个人"
}}
</div>
</div>
<div class="invoice-item-text" v-if="item.titleType==1 && item.type == 2">地址：{{item.province}}{{item.city}}{{item.town}}{{item.address}}</div>
<div class="invoice-item-text" v-if="item.titleType==1 && item.type == 2">电话：{{item.phone}}</div>
<div class="invoice-item-text" v-if="item.titleType==1 && item.type == 2">开户行：{{item.openBank}}</div>
<div class="invoice-item-text" v-if="item.titleType==1 && item.type == 2">账号：{{item.account}}</div>
<div class="invoice-item-text" v-if="item.titleType==1">税号：{{item.taxCode}}</div>
<div
class="invoice-item-text"
v-if="item.titleType == 1 && item.type == 2"
>
地址：{{ item.province }}{{ item.city }}{{ item.town
}}{{ item.address }}
</div>
<div
class="invoice-item-text"
v-if="item.titleType == 1 && item.type == 2"
>
电话：{{ item.phone }}
</div>
<div
class="invoice-item-text"
v-if="item.titleType == 1 && item.type == 2"
>
开户行：{{ item.openBank }}
</div>
<div
class="invoice-item-text"
v-if="item.titleType == 1 && item.type == 2"
>
账号：{{ item.account }}
</div>
<div class="invoice-item-text" v-if="item.titleType == 1">
税号：{{ item.taxCode }}
</div>
</div>
<div
style="color: #666; font-size: 12px; text-align: center"
v-if="finished"
>
没有更多数据了
</div>
<div style="color: #666;font-size: 12px;text-align: center;" v-if="finished">没有更多数据了</div>
</el-scrollbar>
</el-dialog>
</div>
</template>
<script type="javascript">
import { userInvoiceList } from 'api/userManagement/index'
export default {
name: 'userManagement',
components: {},
data() {
return {
list: [],
finished: false, // 是否已加载全部
isVisible: false,
listQuery: {
page: 1,
limit: 20,
},
}
},
mounted() {
this.isVisible = true
this.getInvoiceList()
// 监听滚动事件
this.$nextTick(() => {
$('#resultScroll')[0].addEventListener('scroll', this.handleScroll, true)
})
},
methods:{
/**
* 关闭弹窗
*/
closeDialog(){
this.$emit('invoiceEvent', false)
import { userInvoiceList } from "api/userManagement/index";
export default {
props: ["userId"],
name: "userManagement",
components: {},
data() {
return {
list: [],
finished: false, // 是否已加载全部
isVisible: false,
listQuery: {
page: 1,
limit: 20,
},
/**
* 滚动监听
*/
handleScroll(){
var that = this
var sh = that.$refs['myScrollbar'].$refs['wrap'].scrollHeight // 滚动条高度
var st = that.$refs['myScrollbar'].$refs['wrap'].scrollTop // 滚动条距离顶部的距离
var ch = that.$refs['myScrollbar'].$refs['wrap'].clientHeight // 滚动条外容器的高度
};
},
mounted() {
this.isVisible = true;
this.getInvoiceList();
// 监听滚动事件
this.$nextTick(() => {
$("#resultScroll")[0].addEventListener("scroll", this.handleScroll, true);
});
},
methods: {
/**
* 关闭弹窗
*/
closeDialog() {
this.$emit("invoiceEvent", false);
},
/**
* 滚动监听
*/
handleScroll() {
var that = this;
var sh = that.$refs["myScrollbar"].$refs["wrap"].scrollHeight; // 滚动条高度
var st = that.$refs["myScrollbar"].$refs["wrap"].scrollTop; // 滚动条距离顶部的距离
var ch = that.$refs["myScrollbar"].$refs["wrap"].clientHeight; // 滚动条外容器的高度
if (st + ch >= sh) {
//到底了-业务逻辑
console.log(st)
this.listQuery.page = this.listQuery.page + 1
if(!this.finished){
that.getInvoiceList()
}
if (st + ch >= sh) {
//到底了-业务逻辑
console.log(st);
this.listQuery.page = this.listQuery.page + 1;
if (!this.finished) {
that.getInvoiceList();
}
},
/**
* 获取发票列表
*/
getInvoiceList(){
let _this = this
userInvoiceList(this.listQuery).then(response => {
if(response.status == 200){
let a = response.data.data
if (0 == a.length || _this.listQuery.page > response.data.totalPage) {
_this.finished = true;
return;
}
var e = _this.listQuery.page == 1 ? [] : _this.list;
a.map(function(item) {
e.push(item);
})
_this.list = e;
} else {
this.$notify({
title: '失败',
message: response.message,
type: 'error',
duration: 2000
})
}
},
/**
* 获取发票列表
*/
getInvoiceList() {
let _this = this;
this.listQuery.userId = this.userId;
console.log(this.listQuery.userId);
userInvoiceList(this.listQuery).then((response) => {
if (response.status == 200) {
let a = response.data.data;
if (0 == a.length || _this.listQuery.page > response.data.totalPage) {
_this.finished = true;
return;
}
})
},
}
}
var e = _this.listQuery.page == 1 ? [] : _this.list;
a.map(function (item) {
e.push(item);
});
_this.list = e;
} else {
this.$notify({
title: "失败",
message: response.message,
type: "error",
duration: 2000,
});
}
});
},
},
};
</script>
<style lang="scss">
.invoice-main{
.el-scrollbar__wrap{
overflow-y: auto;
overflow-x: hidden;
}
.invoice-item{
background: #f5f6fa;
border: 1px solid #f5f6fa;
padding: 16px;
margin-right: 25px;
margin-bottom: 24px;
color: #413434;
font-size: 13px;
.invoice-item-text{
line-height: 26px;
}
.invoice-main {
.el-scrollbar__wrap {
overflow-y: auto;
overflow-x: hidden;
}
.invoice-item {
background: #f5f6fa;
border: 1px solid #f5f6fa;
padding: 16px;
margin-right: 25px;
margin-bottom: 24px;
color: #413434;
font-size: 13px;
.invoice-item-text {
line-height: 26px;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment