shop-applet/pages/users/gather_list/index.vue

502 lines
11 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="list">
<view class="head">
<view class="head_conent">
<view class="sum">
<view class="text">已提现金额</view>
<u-count-to class="num" style="color: #F84221;" :startVal="0" :endVal="sumTofixed" :decimals="2"
bold font-size="22"></u-count-to>
</view>
<view class="line"></view>
<view class="sum">
<view class="text">已提现次数</view>
<u-count-to class="num" :startVal="0" :endVal="all_count" bold font-size="22"></u-count-to>
</view>
</view>
</view>
<view class="search">
<view class="search-time" @click="onOpenTime">
<text class="month">{{where.start_time + (where.end_time ? ( ' 至 ' + where.end_time):'')}}</text>
<u-icon name="arrow-down" color="#333" :bold="true"></u-icon>
</view>
<view class="total">已提现金额{{extractSum}}</view>
</view>
<view class="recoder" v-if="UserApplylist.length > 0">
<view class="card" v-for="(item,index) in UserApplylist" :key="index">
<view class="right">
<view class="item" style="justify-content: flex-start;">
<text class="rest">余额提现至</text>
<text class="code">({{item.financial_account.bank_code}})</text>
<text class="withdraw-type legal_company"
:style="{background:item.checkType==1?'#F55726':''}">{{item.checkType ==1 ?'对公':'法人'}}</text>
</view>
<view class="item">
<view class="item_title">
<text>{{`${item.financial_account.bank}`}}</text>
</view>
<view class="item_money">+{{item.extract_money}}</view>
</view>
<view class="item">
<view class="item-time">{{item.create_time}}</view>
<view class="item_status audit" v-if="item.status == 0">待审核</view>
<view class="item_status trans" v-if="item.status == 1 && ((!item.image || !item.image[0]))">
待转账
</view>
<view class="item_status done" v-if="item.status == 1 && item.image && item.image[0]"
@click="handleView(item)">
已转账
<u-icon name="arrow-right" color="#46B03A" size="14"></u-icon>
</view>
<view class="item_status lose" v-if="item.status == -1">审核不通过</view>
</view>
</view>
<view class="remark" v-if="item.status == -1">备注:{{item.refusal}}</view>
</view>
<view style="color:#afafaf;" class='loadingicon acea-row row-center-wrapper'>
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
</view>
</view>
<u-empty v-else text="暂无记录~" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
</u-empty>
<!-- 时间组件 -->
<h-datetime-picker ref="pickerDate" @reset="reset" @confirm="confirm"
:params="{year: true,month: true,day: false,hour: false,minute: false,second: false,timestamp: true,}"></h-datetime-picker>
</view>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import {
getAdminApplyListAPI
} from '@/api/user.js';
import Loading from '@/components/Loading/index.vue';
export default {
components: {
Loading
},
data() {
return {
currTab: 0, //自定义选择时间tab
sum: 0,
count: 0,
scrollTop: 0,
endDate: '',
merId: '',
UserApplylist: [],
loaded: false,
loading: false,
loadTitle: '加载更多',
where: {
page: 1,
limit: 15,
keyword: '',
start_time: '',
end_time: ''
},
all_extract: 0,
all_count: 0,
extractSum: 0,
}
},
computed: {
sumTofixed() {
return this.returnFloat(this.all_extract)
}
},
onLoad(option) {
this.merId = option.mer_id;
this.where.start_time = new Date().format('yyyy-MM');
this.ApplyList();
},
// 下拉到底部
onReachBottom() {
this.ApplyList();
},
methods: {
// 选择时间
onOpenTime() {
this.$refs.pickerDate.open()
},
// 确认
confirm(e) {
if (e.time) {
this.where.start_time = e.time;
this.where.end_time = '';
} else {
this.where.start_time = e.start_time.time;
this.where.end_time = e.end_time.time;
}
this.where.page = 1;
this.loaded = false;
this.UserApplylist = [];
this.ApplyList();
},
// 重置
reset(e) {
this.where.page = 1;
this.loaded = false;
this.UserApplylist = [];
this.where.end_time = '';
this.where.start_time = new Date().format('yyyy-MM');
this.ApplyList();
},
// 查看
handleView(item) {
if (!item.image || item.length == 0) return;
uni.previewImage({
urls: [...item.image]
})
},
ApplyList() {
var that = this;
if (that.loading || that.loaded) return;
that.loading = true;
that.loadTitle = '';
getAdminApplyListAPI(this.merId, this.where).then(res => {
that.loading = false;
that.loaded = res.data.list.length < that.where.limit;
that.UserApplylist.push.apply(that.UserApplylist, res.data.list);
that.where.page = that.where.page + 1;
that.loadTitle = that.loaded ? '已全部加载~' : '加载更多';
//截取银行卡后四位
this.UserApplylist.forEach(item => {
item.financial_account.bank_code = item.financial_account.bank_code.substr(-4)
});
this.count = res.data.count;
this.extractSum = res.data.extractSum || 0; //已提现金额
this.all_count = res.data.all_count || 0;
this.all_extract = res.data.all_extract || 0;
}).catch(err => {
that.loading = false;
that.loadTitle = '加载更多';
})
},
/**数字强制转为两位小数*/
returnFloat(value) {
var value = Math.round(parseFloat(value) * 100) / 100;
var xsd = value.toString().split(".");
if (xsd.length == 1) {
value = value.toString() + ".00";
return value;
}
if (xsd.length > 1) {
if (xsd[1].length < 2) {
value = value.toString() + "0";
}
return value;
}
},
},
}
</script>
<style lang="scss">
.list {
.search {
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50rpx 0rpx 48rpx;
height: 90rpx;
background: #f5f5f5;
.search-time {
display: flex;
.month {
font-weight: bold;
font-size: 28rpx;
color: #333333;
margin-right: 6rpx;
}
}
.total {
font-size: 24rpx;
color: #666666;
}
}
.head {
position: sticky;
z-index: 10;
width: 694rpx;
margin: 28rpx auto 00rpx;
padding: 28rpx;
background-color: #fff;
border-radius: 24rpx;
box-shadow: 0rpx 4rpx 10rpx 2rpx rgba(161, 161, 161, 0.4);
border-radius: 20rpx 20rpx 20rpx 20rpx;
.head_conent {
display: flex;
justify-content: space-around;
align-items: center;
.line {
width: 1rpx;
height: 70rpx;
background-color: #dfdfdf;
}
.sum {
flex: 1;
text-align: center;
color: #737373;
font-size: 30rpx;
.num {
font-size: 48.06rpx;
margin-bottom: 15rpx;
font-weight: bold;
}
.text {
margin-bottom: 24rpx;
font-size: 28rpx;
color: #666666;
}
}
}
}
.public-wrapper {
width: 90%;
margin: 70px auto;
box-shadow: 0px 0px 5px rgba(#FA6514, 0.7);
border-radius: 10px;
.title {
font-size: 18px;
font-weight: 700;
padding: 10px 0 0 10px;
}
.conter {
display: flex;
align-items: center;
padding: 10px 0 0 10px;
text-align: center;
}
.footer {
.scroll-Y {
max-height: 60vh;
.footer_list {
display: flex;
align-items: center;
padding: 10px 0 0 10px;
text-align: center;
}
}
}
}
.recoder {
padding: 0 28rpx 28rpx 28rpx;
.time {
height: 42rpx;
font-size: 30rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 45rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
.icon {
width: 30rpx;
height: 30rpx;
transform: rotate(90deg);
margin-left: 10rpx;
}
}
.card {
width: 694rpx;
background: #FFFFFF;
border-radius: 21rpx 21rpx 21rpx 21rpx;
opacity: 1;
padding: 28rpx;
margin-bottom: 20rpx;
.right {
flex: 1;
.item {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.rest {
margin-right: 10rpx;
font-size: 28rpx;
color: #333333;
}
.code {
margin-right: 10rpx;
font-weight: bold;
font-size: 28rpx;
color: #333333;
}
.legal_company {
font-size: 24rpx;
color: #FFFFFF;
background: #72BE53;
border-radius: 6rpx;
padding: 2rpx 10rpx;
}
.legal_person {
font-size: 24rpx;
color: #FFFFFF;
background: #FF8056;
border-radius: 6rpx;
padding: 2rpx 10rpx;
}
.item-time {
font-size: 28rpx;
color: #666666;
}
&_title {
font-weight: bold;
font-size: 28rpx;
color: #333333;
}
&_money {
font-weight: bold;
font-size: 36rpx;
color: #F55726;
}
&_brank {
font-size: 26rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #737373;
line-height: 39rpx;
}
&_time {
font-size: 23rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #B3B3B3;
line-height: 34rpx;
}
.item_status {
display: flex;
justify-content: center;
align-items: center;
height: 44rpx;
border-radius: 6rpx 6rpx 6rpx 6rpx;
padding: 2rpx 16rpx;
font-size: 28rpx;
}
.audit {
background: rgba(38, 172, 245, .2);
color: #26ACF5;
}
.trans {
background: rgba(245, 87, 38, .2);
color: #F55726;
}
.done {
display: flex;
background: rgba(70, 176, 58, .2);
color: #46B03A;
}
.lose {
background: rgba(102, 102, 102, .2);
color: #666;
}
}
.item-title {
justify-content: flex-start;
text {
&:nth-child(1) {
width: 198rpx;
height: 40rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #333333;
line-height: 51rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
&:nth-child(1) {
width: 198rpx;
height: 40rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #333333;
line-height: 51rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
}
}
}
.remark {
word-wrap: break-word;
font-size: 24rpx;
color: #F55726;
font-weight: bold;
}
}
}
}
</style>