收付款详情
This commit is contained in:
parent
53d6500dc7
commit
696d278cb1
|
|
@ -296,8 +296,7 @@
|
|||
},
|
||||
{
|
||||
"path": "pages/redpacket/redpacket",
|
||||
"style" :
|
||||
{
|
||||
"style": {
|
||||
"navigationBarTitleText": "补贴",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
|
@ -323,6 +322,11 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "支付"
|
||||
}
|
||||
}, {
|
||||
"path": "payment_detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "收付明细"
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"root": "pages/goods_cate",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,214 @@
|
|||
<!-- 收付明细 -->
|
||||
<style lang="scss" scoped>
|
||||
.payment-detail {
|
||||
.payment-detail-head {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #EFEFEF;
|
||||
padding: 30rpx 40rpx;
|
||||
|
||||
.payment-detail-head-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.payment-detail-head-l {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 26rpx;
|
||||
border-radius: 40rpx;
|
||||
background-color: #E3E3E3;
|
||||
|
||||
text {
|
||||
margin-right: 12rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-detail-head-r {
|
||||
font-size: 28rpx;
|
||||
color: #B3B3B3;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-detail-total {
|
||||
font-size: 26rpx;
|
||||
color: #B3B3B3;
|
||||
|
||||
.outcome {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-detail-con {
|
||||
background-color: #fff;
|
||||
|
||||
.payment-detail-con-item {
|
||||
padding: 30rpx;
|
||||
border-bottom: 2rpx solid #F8F8F8;
|
||||
|
||||
.item-desc {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.item-desc-name,
|
||||
.item-desc-price {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item-desc-plus {
|
||||
color: #FFB93E;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.item-time {
|
||||
font-size: 26rpx;
|
||||
color: #C8C8C8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="payment-detail">
|
||||
<view class="payment-detail-head">
|
||||
<view style="height: var(--status-bar-height);"></view>
|
||||
<view class="payment-detail-head-wrap">
|
||||
<view class="payment-detail-head-l" @click="pickShow = true">
|
||||
<text>2024年3月10日</text>
|
||||
<u-icon name="arrow-down" :bold="true"></u-icon>
|
||||
</view>
|
||||
<view class="payment-detail-head-r">筛选</view>
|
||||
</view>
|
||||
<view class="payment-detail-total">
|
||||
<text class="outcome">支出￥0.00</text> <text class="income">收入￥0.00</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 首付款列表 -->
|
||||
<view class="payment-detail-con" :style="{'min-height':'calc(100vh - ' +conHeight+ ')','margin-top':conHeight}">
|
||||
<view class="payment-detail-con-wrap" v-if="paymentData.length > 0">
|
||||
<block v-for="item in 10">
|
||||
<view class="payment-detail-con-item">
|
||||
<view class="item-desc">
|
||||
<text class="item-desc-name">扫二维码付款给-张三</text>
|
||||
<text class="item-desc-price">+10</text>
|
||||
</view>
|
||||
<view class="item-time">3月11日 10:46</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 加载更多内容 -->
|
||||
<view class='loadingicon acea-row row-center-wrapper'>
|
||||
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 内容为空 -->
|
||||
<u-empty v-if="searchParams.page == 1 && (!paymentData || paymentData.length == 0)" mode="list"
|
||||
icon="http://cdn.uviewui.com/uview/empty/list.png" />
|
||||
</view>
|
||||
|
||||
<!-- 时间选择器 年月日 -->
|
||||
<u-datetime-picker :show="pickShow" v-model="pickerInitVal" mode="date" @confirm="pickerConfirm"
|
||||
@cancel="pickShow = false"></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
conHeight: 0,
|
||||
paymentData: [],
|
||||
searchParams: {
|
||||
page: 1,
|
||||
limit: 15
|
||||
},
|
||||
loadend: false,
|
||||
loading: false,
|
||||
loadTitle: '加载更多',
|
||||
pickShow: false,
|
||||
pickerInitVal: Number(new Date())
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.initHeight()
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
if (this.paymentData.length > 0) {
|
||||
setTimeout(() => {
|
||||
this.getGoods(false);
|
||||
}, 10)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
pickerConfirm(e) {
|
||||
this.pickShow = false;
|
||||
const date = new Date(e.value).format('yyyy-MM-dd')
|
||||
console.log(date);
|
||||
},
|
||||
|
||||
async getData(isPage) {
|
||||
let that = this;
|
||||
if (that.loadend) return;
|
||||
if (that.loading) return;
|
||||
|
||||
if (isPage === true) {
|
||||
that.searchParams.page = 1;
|
||||
that.$set(that, 'paymentData', []);
|
||||
}
|
||||
|
||||
that.loading = true;
|
||||
that.loadTitle = '';
|
||||
await getOrderList(that.searchParams).then(res => {
|
||||
let list = res.data.list;
|
||||
let paymentData = that.$util.SplitArray(list, that.paymentData);
|
||||
let loadend = list.length < that.searchParams.limit; //true false
|
||||
that.loadend = loadend;
|
||||
that.loading = false;
|
||||
that.loadTitle = loadend ? '已全部加载' : '加载更多';
|
||||
setTimeout(() => {
|
||||
that.$set(that, 'paymentData', paymentData);
|
||||
}, 500)
|
||||
|
||||
that.$set(that.searchParams, 'page', that.searchParams.page + 1);
|
||||
}).catch(err => {
|
||||
that.loading = false;
|
||||
that.loadTitle = '加载更多';
|
||||
});
|
||||
},
|
||||
|
||||
// 列表高度
|
||||
initHeight() {
|
||||
this.$nextTick(async () => {
|
||||
let conDom = await this.getDomInfo(".payment-detail-head");
|
||||
console.log(conDom);
|
||||
this.conHeight = conDom.height + "px";
|
||||
})
|
||||
},
|
||||
|
||||
// 获取dom布局信息
|
||||
getDomInfo(selector) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.createSelectorQuery().in(this).select(selector).boundingClientRect((data) => {
|
||||
resolve(data);
|
||||
}).exec();
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue