收付款详情
This commit is contained in:
parent
53d6500dc7
commit
696d278cb1
14
pages.json
14
pages.json
|
|
@ -295,11 +295,10 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/redpacket/redpacket",
|
"path": "pages/redpacket/redpacket",
|
||||||
"style" :
|
"style": {
|
||||||
{
|
"navigationBarTitleText": "补贴",
|
||||||
"navigationBarTitleText" : "补贴",
|
"enablePullDownRefresh": false
|
||||||
"enablePullDownRefresh" : false
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
@ -323,6 +322,11 @@
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "支付"
|
"navigationBarTitleText": "支付"
|
||||||
}
|
}
|
||||||
|
}, {
|
||||||
|
"path": "payment_detail",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "收付明细"
|
||||||
|
}
|
||||||
}]
|
}]
|
||||||
}, {
|
}, {
|
||||||
"root": "pages/goods_cate",
|
"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