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