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
Expand all 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
This diff is collapsed.
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