316 lines
7.7 KiB
Vue
316 lines
7.7 KiB
Vue
<template>
|
||
<view class="">
|
||
<view class="card">
|
||
<view class="item" v-if="card.is_show == true">
|
||
<view>交易金额剩余池</view>
|
||
<!-- <view class="price" v-if="company.deposit">{{cCount(company.deposit)}}</view>
|
||
<view class="price" v-else>0.00</view> -->
|
||
<view class="price">{{ c_money(card.transaction_pool) }}</view>
|
||
</view>
|
||
<view class="item">
|
||
<view>目标完成金额</view>
|
||
<!-- <view class="price" v-if="company.company_money">{{cCount(company.company_money)}}</view>
|
||
<view class="price" v-else>0.00</view> -->
|
||
<view class="price">{{ c_money(card.day_money) }}</view>
|
||
</view>
|
||
<!-- <view class="item">
|
||
<view>交易金额剩余池</view>
|
||
<view class="price">{{c_money(card.transaction_pool)}}</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
<!-- <view class="nav">
|
||
<view class="title">账单流水</view>
|
||
<view class="right">
|
||
<view class="btn" :class="current==0?'active':''" @click="current=0;initLoad()">日账单</view>
|
||
<view class="btn" :class="current==1?'active':''" @click="current=1;initLoad()">月账单</view>
|
||
<view class="btn" @click="navTo('/subpkg/companyFinance/companyFinance')">历史账单</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<view class="list">
|
||
<!-- <view class="item" v-for="(item, index) in 10" :key="index">
|
||
<view class="top">
|
||
交易时间：2023-06-16 18:07:59
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="text">
|
||
<view class="t_item">
|
||
<view>购买用户：</view>
|
||
<view class="tips">**某</view>
|
||
</view>
|
||
<view class="t_item">
|
||
<view>交易商户：</view>
|
||
<view class="tips">通滩镇日杂百货里海云仓</view>
|
||
</view>
|
||
<view class="t_item">
|
||
<view>交易金额：</view>
|
||
<view class="tips">40.00(元)</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<view class="item" v-for="(item, index) in list" :key="item.id">
|
||
<view class="top"> 账单日期: {{ item.create_time }} </view>
|
||
<view class="t_bottom">
|
||
<view class="order">订单编号: {{ item.order_sn }}</view>
|
||
<view class="price">交易额: {{ item.total_price }}</view>
|
||
</view>
|
||
</view>
|
||
<u-loadmore
|
||
:status="loadConfig.status"
|
||
:loading-text="loadConfig.loadingText"
|
||
:loadmore-text="loadConfig.loadmoreText"
|
||
:nomore-text="loadConfig.nomoreText"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { Toast } from '../../libs/uniApi'
|
||
import { taskOrderDetail } from "@/api/task.js"
|
||
export default {
|
||
data () {
|
||
return {
|
||
card: {
|
||
total_price: "0.00",
|
||
status: 1,
|
||
day_money: "0.00",
|
||
transaction_pool: "0.00",
|
||
is_show: true
|
||
},
|
||
list: [],
|
||
task_id: '',
|
||
loadConfig: {
|
||
page: 1,
|
||
limit: 15,
|
||
lastpage: '',
|
||
loadingText: '努力加载中',
|
||
loadmoreText: '轻轻上拉',
|
||
nomoreText: '我也是有底线的~~',
|
||
status: 'loadmore'
|
||
},
|
||
}
|
||
},
|
||
onLoad (options) {
|
||
options?.is_show == 'false' ? this.card.is_show = options.is_show : null;
|
||
options.task_id ? this.task_id = options.task_id : null;
|
||
this.initLoad();
|
||
},
|
||
onShow () { },
|
||
onReachBottom () {
|
||
this.loadList();
|
||
},
|
||
methods: {
|
||
navTo (url) {
|
||
url ?
|
||
uni.navigateTo({
|
||
url: url,
|
||
}) : Toast('暂未开放')
|
||
},
|
||
async initLoad () {
|
||
this.loadConfig.page = 1;
|
||
this.loadConfig.status = "loadmore";
|
||
this.list = [];
|
||
await this.loadList();
|
||
},
|
||
async loadList () {
|
||
try {
|
||
let that = this;
|
||
if (this.loadConfig.status == "nomore") return;
|
||
this.loadConfig.status = "loading"
|
||
let res = await taskOrderDetail({
|
||
page: this.loadConfig.page,
|
||
limit: this.loadConfig.limit,
|
||
id: this.task_id,
|
||
// company_id: this.$store.state.app.userInfo.company_id
|
||
})
|
||
this.loadConfig.status = "loadmore";
|
||
if (res.data?.list?.length == 0 || res.data?.list?.length < 25) {
|
||
this.loadConfig.status = "nomore"
|
||
} else {
|
||
this.loadConfig.page++;
|
||
}
|
||
let extend = res.data?.extend;
|
||
Object.keys(this.card).forEach((key) => {
|
||
if (extend?.transaction?.arr[key] != null && extend?.transaction?.arr[key] != undefined) this.card[key] = extend?.transaction?.arr[key];
|
||
})
|
||
this.card.transaction_pool += this.card.total_price;
|
||
this.list = [...this.list, ...res.data?.list]
|
||
} catch (e) {
|
||
this.loadConfig.status = "nomore"
|
||
}
|
||
},
|
||
c_money (str) {
|
||
try {
|
||
if (!isNaN(str)) {
|
||
typeof str != 'string' ? str = str.toFixed(2) : str = parseFloat(str).toFixed(2);
|
||
} else str = '0.00'
|
||
} catch (e) {
|
||
str = '0.00'
|
||
}
|
||
return '¥' + str;
|
||
}
|
||
},
|
||
onPullDownRefresh () {
|
||
this.initLoad().then(() => {
|
||
uni.stopPullDownRefresh()
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.card {
|
||
margin: 28rpx auto;
|
||
width: 694rpx;
|
||
height: 158rpx;
|
||
background: #0122c7;
|
||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
opacity: 1;
|
||
padding: 28rpx 12rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
color: #fff;
|
||
text-align: center;
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
flex: 1;
|
||
border-right: 1px solid #fff;
|
||
|
||
&:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.price {
|
||
font-size: 42rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.nav {
|
||
margin: 28rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&:before {
|
||
content: "";
|
||
width: 6rpx;
|
||
height: 26rpx;
|
||
border-radius: 10rpx;
|
||
margin-right: 10rpx;
|
||
display: inline-block;
|
||
background-color: #0122c7;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
display: flex;
|
||
|
||
.btn {
|
||
margin-left: 28rpx;
|
||
}
|
||
|
||
.active {
|
||
color: #0122c7;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list {
|
||
.item {
|
||
margin: 0 auto;
|
||
margin-bottom: 28rpx;
|
||
width: 694rpx;
|
||
// height: 238rpx;
|
||
background: #ffffff;
|
||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||
opacity: 1;
|
||
padding: 28rpx;
|
||
|
||
.top {
|
||
margin-bottom: 28rpx;
|
||
font-size: 25rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
|
||
&:before {
|
||
display: inline-block;
|
||
content: "交易明细";
|
||
width: 137rpx;
|
||
height: 49rpx;
|
||
line-height: 49rpx;
|
||
text-align: center;
|
||
background: #ff7c32;
|
||
border-radius: 26rpx 26rpx 26rpx 26rpx;
|
||
color: #fff;
|
||
margin-right: 28rpx;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.text {
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
line-height: 39rpx;
|
||
|
||
.t_item {
|
||
display: flex;
|
||
|
||
&:nth-child(1) {
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.tips {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.price {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #f02828;
|
||
}
|
||
}
|
||
|
||
.t_bottom {
|
||
font-size: 25rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
|
||
.price {
|
||
color: #ff7c32;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |