Commit 95ec09fb authored by rencs's avatar rencs

Merge branch 'dev_ren' into 'dev'

1.15 userlist

See merge request !57
parents 6755ceae 81414428
...@@ -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
}); });
} }
......
<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
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 { userAddressList } from 'api/userManagement/index' import { userAddressList } from "api/userManagement/index";
export default { export default {
name: 'userManagement', props: ["userId"],
name: "userManagement",
components: {}, components: {},
data() { data() {
return { return {
...@@ -33,78 +59,79 @@ ...@@ -33,78 +59,79 @@
page: 1, page: 1,
limit: 20, limit: 20,
}, },
} };
}, },
mounted() { mounted() {
this.isVisible = true this.isVisible = true;
this.getAddressList() this.getAddressList();
// 监听滚动事件 // 监听滚动事件
this.$nextTick(() => { this.$nextTick(() => {
$('#resultScroll')[0].addEventListener('scroll', this.handleScroll, true) $("#resultScroll")[0].addEventListener("scroll", this.handleScroll, true);
}) });
}, },
methods:{ methods: {
/** /**
* 关闭弹窗 * 关闭弹窗
*/ */
closeDialog(){ closeDialog() {
this.$emit('addressEvent', false) this.$emit("addressEvent", false);
}, },
/** /**
* 滚动监听 * 滚动监听
*/ */
handleScroll(){ handleScroll() {
var that = this var that = this;
var sh = that.$refs['myScrollbar'].$refs['wrap'].scrollHeight // 滚动条高度 var sh = that.$refs["myScrollbar"].$refs["wrap"].scrollHeight; // 滚动条高度
var st = that.$refs['myScrollbar'].$refs['wrap'].scrollTop // 滚动条距离顶部的距离 var st = that.$refs["myScrollbar"].$refs["wrap"].scrollTop; // 滚动条距离顶部的距离
var ch = that.$refs['myScrollbar'].$refs['wrap'].clientHeight // 滚动条外容器的高度 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(){ getAddressList() {
let _this = this let _this = this;
userAddressList(this.listQuery).then(response => { this.listQuery.userId = this.userId;
if(response.status == 200){ userAddressList(this.listQuery).then((response) => {
let a = response.data.data if (response.status == 200) {
let a = response.data.data;
if (0 == a.length || _this.listQuery.page > response.data.totalPage) { if (0 == a.length || _this.listQuery.page > response.data.totalPage) {
_this.finished = true; _this.finished = true;
return; return;
} }
var e = _this.listQuery.page == 1 ? [] : _this.list; var e = _this.listQuery.page == 1 ? [] : _this.list;
a.map(function(item) { a.map(function (item) {
e.push(item); e.push(item);
}) });
_this.list = e; _this.list = e;
} else { } else {
this.$notify({ this.$notify({
title: '失败', title: "失败",
message: response.message, message: response.message,
type: 'error', type: "error",
duration: 2000 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;
...@@ -113,5 +140,5 @@ ...@@ -113,5 +140,5 @@
font-size: 13px; font-size: 13px;
margin-bottom: 24px; margin-bottom: 24px;
} }
} }
</style> </style>
This diff is collapsed.
<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>
<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> style="
<div class="invoice-item-text" v-if="item.titleType==1 && item.type == 2">开户行:{{item.openBank}}</div> color: #0a84ff;
<div class="invoice-item-text" v-if="item.titleType==1 && item.type == 2">账号:{{item.account}}</div> font-size: 12px;
<div class="invoice-item-text" v-if="item.titleType==1">税号:{{item.taxCode}}</div> 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>
<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"],
name: "userManagement",
components: {}, components: {},
data() { data() {
return { return {
...@@ -32,78 +81,80 @@ ...@@ -32,78 +81,80 @@
page: 1, page: 1,
limit: 20, limit: 20,
}, },
} };
}, },
mounted() { mounted() {
this.isVisible = true this.isVisible = true;
this.getInvoiceList() this.getInvoiceList();
// 监听滚动事件 // 监听滚动事件
this.$nextTick(() => { this.$nextTick(() => {
$('#resultScroll')[0].addEventListener('scroll', this.handleScroll, true) $("#resultScroll")[0].addEventListener("scroll", this.handleScroll, true);
}) });
}, },
methods:{ methods: {
/** /**
* 关闭弹窗 * 关闭弹窗
*/ */
closeDialog(){ closeDialog() {
this.$emit('invoiceEvent', false) this.$emit("invoiceEvent", false);
}, },
/** /**
* 滚动监听 * 滚动监听
*/ */
handleScroll(){ handleScroll() {
var that = this var that = this;
var sh = that.$refs['myScrollbar'].$refs['wrap'].scrollHeight // 滚动条高度 var sh = that.$refs["myScrollbar"].$refs["wrap"].scrollHeight; // 滚动条高度
var st = that.$refs['myScrollbar'].$refs['wrap'].scrollTop // 滚动条距离顶部的距离 var st = that.$refs["myScrollbar"].$refs["wrap"].scrollTop; // 滚动条距离顶部的距离
var ch = that.$refs['myScrollbar'].$refs['wrap'].clientHeight // 滚动条外容器的高度 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(){ getInvoiceList() {
let _this = this let _this = this;
userInvoiceList(this.listQuery).then(response => { this.listQuery.userId = this.userId;
if(response.status == 200){ console.log(this.listQuery.userId);
let a = response.data.data userInvoiceList(this.listQuery).then((response) => {
if (response.status == 200) {
let a = response.data.data;
if (0 == a.length || _this.listQuery.page > response.data.totalPage) { if (0 == a.length || _this.listQuery.page > response.data.totalPage) {
_this.finished = true; _this.finished = true;
return; return;
} }
var e = _this.listQuery.page == 1 ? [] : _this.list; var e = _this.listQuery.page == 1 ? [] : _this.list;
a.map(function(item) { a.map(function (item) {
e.push(item); e.push(item);
}) });
_this.list = e; _this.list = e;
} else { } else {
this.$notify({ this.$notify({
title: '失败', title: "失败",
message: response.message, message: response.message,
type: 'error', type: "error",
duration: 2000 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;
...@@ -111,9 +162,9 @@ ...@@ -111,9 +162,9 @@
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