You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
406 lines
8.8 KiB
406 lines
8.8 KiB
<template> |
|
<view style="height: 100vh;display: flex;flex-direction: column; "> |
|
<view class="header"> |
|
<view :style="{height:styles.top+'px'}" class="top"></view> |
|
<uni-nav-bar @clickLeft='back' color='white' backgroundColor="rgba(0,0,0,0)" left-icon="back" |
|
title="企业充值" /> |
|
|
|
<view class="header_seach"> |
|
<view class="header_seach_seach"> |
|
<!-- <uni-easyinput @focus="inputFocus" @clear="inputClear" |
|
style="height: 100%; flex: 1; background-color: #FFFFFF; border-radius:12rpx ;" |
|
placeholder-style="color:#bbbbbb;font-weight: 100;" :value="parameter.params.name" |
|
placeholder="企业名称"> |
|
</uni-easyinput> --> |
|
<!-- <input @focus="inputFocus" |
|
style="height: 100%; flex: 1; background-color: #FFFFFF; border-radius:12rpx ;" |
|
placeholder-style="color:#bbbbbb;font-weight: 100;" :value="parameter.params.name" |
|
placeholder="企业名称"> |
|
</input> --> |
|
<view @click="inputFocus" class="special-input" > |
|
{{ parameter.params.name || '企业名称'}} |
|
<image v-if="parameter.params.name" class="close" src="../../../static/close.png" @click.stop="inputClear"></image> |
|
</view> |
|
|
|
|
|
<button @tap='search' class="header_seach_butten"> |
|
<uni-icons type="search" size="20" color="#bbbbbb"></uni-icons> |
|
<view>搜索</view> |
|
</button> |
|
</view> |
|
|
|
<view class="date-chunk"> |
|
<text>日期：</text> |
|
<text style="margin-left: 10rpx;" @click="controlWindows.datePopup=true"> |
|
{{ parameter.params.createTimeStart.split(' ')[0] || '开始时间' }} ~ {{ parameter.params.createTimeEnd.split(' ')[0] || '结束时间' }} |
|
</text> |
|
</view> |
|
</view> |
|
</view> |
|
<view style="flex: 1;overflow: hidden;"> |
|
<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="scrolltolower"> |
|
<view v-for="(item,index) in listData" :key="index"> |
|
<view class="item"> |
|
<view class="type">{{typeEnum[item.transactionType]}}</view> |
|
<view class="top-region"> |
|
<image src="../../../static/selegs.png" |
|
style="width: 100rpx; height: 100rpx;border-radius: 50%;"></image> |
|
<view class="">{{item.companyName}}</view> |
|
<view class="transfer"> |
|
<text class="pay">付</text> |
|
<text>{{item.offlinePaymentCompany || '暂无'}}</text> |
|
</view> |
|
<view class="transfer"> |
|
<text class="collect">收</text> |
|
<text>{{item.internalCompanyName || '暂无'}}</text> |
|
</view> |
|
<view class="status" |
|
:class="statusEnum.find(_item => _item.value == item.transactionState).class"> |
|
{{statusEnum.find(_item => _item.value == item.transactionState).label}} |
|
</view> |
|
</view> |
|
<view class="bottom-region"> |
|
<text>{{item.createTime}}</text> |
|
<text>￥{{item.transactionAmount}}</text> |
|
</view> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
</view> |
|
<datePopup @datePopupChange='datePopupChange' v-model="controlWindows.datePopup" /> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import datePopup from '@/components/datePopup.vue' |
|
|
|
import serve from '@/api/financialCenter/business.js' |
|
export default { |
|
components: { |
|
datePopup |
|
}, |
|
data() { |
|
return { |
|
controlWindows: { |
|
datePopup: false |
|
}, |
|
parameter: { |
|
pageSize: 15, |
|
currentPage: 1, |
|
params: { |
|
name: '', |
|
companyId: '', |
|
createTimeStart: '', |
|
createTimeEnd: '', |
|
businessLeader: '' |
|
}, |
|
sorted: {} |
|
}, |
|
styles: {}, |
|
listData: [], |
|
userInfo: uni.getStorageSync('user'), |
|
statusEnum: [{ |
|
value: '0', |
|
label: '已申请', |
|
class: 'orange' |
|
}, |
|
{ |
|
value: '1', |
|
label: '已成功', |
|
class: 'green' |
|
}, |
|
{ |
|
value: '-1', |
|
label: '已撤销', |
|
class: 'gray' |
|
} |
|
], |
|
typeEnum: { |
|
'RECHARGE': '充值', |
|
'REVOKE': '销账', |
|
'CHARGE_SALES': '赊销', |
|
'CONSUME_REBATE': '消费返利', |
|
'TURN': '圈回', |
|
} |
|
} |
|
}, |
|
onPullDownRefresh() { |
|
console.log('下拉的生命周期') |
|
}, |
|
onLoad() { |
|
this.styles = uni.getMenuButtonBoundingClientRect() |
|
|
|
uni.$on('currentEnterprise', (item) => { |
|
if (!item.id) return |
|
this.parameter.currentPage = 1 |
|
this.parameter.params.companyId = item.id |
|
this.parameter.params.name = item.name |
|
}) |
|
|
|
this.search(); |
|
}, |
|
|
|
methods: { |
|
back() { |
|
uni.navigateBack() |
|
}, |
|
inputFocus(e) { |
|
console.log('e', e) |
|
uni.navigateTo({ |
|
url: './selEnterprise' |
|
}) |
|
}, |
|
inputClear() { |
|
this.parameter.params.companyId = '' |
|
this.parameter.params.name = '' |
|
}, |
|
datePopupChange(time) { |
|
this.parameter.currentPage = 1 |
|
this.parameter.params.createTimeStart = time[0] |
|
this.parameter.params.createTimeEnd = time[1] |
|
}, |
|
search() { |
|
this.parameter.params.businessLeader = this.userInfo.id |
|
serve.getByPageRecharge(this.parameter).then(res => { |
|
if (res.code !== 20000) return |
|
if (this.parameter.currentPage == 1) { |
|
if(!res.data.list.length) { |
|
uni.showToast({ |
|
title: '暂无数据~', |
|
icon:'none' |
|
}) |
|
} |
|
this.listData = res.data.list |
|
return |
|
} |
|
if (!res.data.list.length) { |
|
uni.showToast({ |
|
title: '没有更多数据了~', |
|
icon:'none' |
|
}) |
|
return |
|
} |
|
this.listData = this.listData.concat(res.data.list); |
|
}) |
|
}, |
|
|
|
scrolltolower() { |
|
this.parameter.currentPage += 1 |
|
this.search() |
|
}, |
|
|
|
handlerDate(date) { |
|
if (date instanceof String || date instanceof Number) { |
|
date = new Date(parseInt(date)) |
|
} |
|
if (!(date instanceof Date)) return {} |
|
return { |
|
y: date.getFullYear(), |
|
M: (date.getMonth() + 1 + '').padStart(2, '0'), |
|
d: (date.getDate() + '').padStart(2, '0'), |
|
} |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
page { |
|
background-color: #F0F2FF; |
|
} |
|
|
|
.date-chunk { |
|
margin-top: 19rpx; |
|
padding: 0 40rpx; |
|
height: 75rpx; |
|
width: 555rpx; |
|
line-height: 75rpx; |
|
font-size: 27rpx; |
|
background: #ADCEFF; |
|
border-radius: 6px; |
|
} |
|
|
|
.special-input { |
|
position: relative; |
|
height: 100%; |
|
flex: 1; |
|
background-color: #FFF; |
|
border-radius: 12rpx; |
|
color: #333; |
|
line-height: 80rpx; |
|
padding-left: 20rpx; |
|
.close { |
|
position: absolute; |
|
top: 50%; |
|
right: 20rpx; |
|
transform: translateY(-50%); |
|
width: 36rpx; |
|
height: 36rpx; |
|
} |
|
} |
|
|
|
.item { |
|
position: relative; |
|
overflow: hidden; |
|
margin: 40rpx auto 0; |
|
padding: 20rpx 20rpx 15rpx 20rpx; |
|
width: 700rpx; |
|
font-size: 28rpx; |
|
background: #fff; |
|
border-radius: 12rpx; |
|
box-shadow: 0px 3px 9px 0px rgba(88, 88, 88, 0.2); |
|
|
|
.type { |
|
position: absolute; |
|
left: -24px; |
|
width: 175rpx; |
|
text-align: center; |
|
height: 40rpx; |
|
transform: rotate(-45deg); |
|
font-size: 22rpx; |
|
line-height: 40rpx; |
|
z-index: 20; |
|
color: #fff; |
|
background: #1890FF; |
|
} |
|
|
|
.top-region { |
|
position: relative; |
|
padding-left: 135rpx; |
|
min-height: 150rpx; |
|
|
|
image { |
|
position: absolute; |
|
left: 5rpx; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
width: 100rpx; |
|
height: 100rpx; |
|
// border: 1px solid #333; |
|
} |
|
|
|
.transfer { |
|
margin-top: 10rpx; |
|
|
|
text { |
|
font-size: 25rpx; |
|
|
|
&:nth-of-type(1) { |
|
vertical-align: top; |
|
display: inline-block; |
|
width: 40rpx; |
|
height: 40rpx; |
|
text-align: center; |
|
line-height: 40rpx; |
|
|
|
&.pay { |
|
color: #1890ff; |
|
background: #e8f4ff; |
|
border: 1px solid #d1e9ff; |
|
} |
|
|
|
&.collect { |
|
color: #13ce66; |
|
background: #e7faf0; |
|
border: 1px solid #d0f5e0; |
|
} |
|
} |
|
|
|
&:nth-of-type(2) { |
|
display: inline-block; |
|
margin-left: 15rpx; |
|
width: 450rpx; |
|
} |
|
} |
|
} |
|
|
|
.status { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
font-size: 25rpx; |
|
|
|
&.green { |
|
color: #13ce66; |
|
} |
|
|
|
&.orange { |
|
color: #ffba00; |
|
} |
|
|
|
&.gray { |
|
color: #909399; |
|
} |
|
} |
|
} |
|
|
|
.bottom-region { |
|
font-size: 22rpx; |
|
|
|
text { |
|
&:nth-of-type(1) { |
|
color: #bbb; |
|
} |
|
|
|
&:nth-of-type(2) { |
|
float: right; |
|
font-size: 25rpx; |
|
color: #1890FF; |
|
} |
|
} |
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.header_seach_butten { |
|
font-size: 24rpx !important; |
|
display: flex !important; |
|
align-items: center !important; |
|
margin: 0 !important; |
|
flex-shrink: 1; |
|
margin-left: 9rpx !important; |
|
background: #FFFFFF !important; |
|
justify-content: center; |
|
} |
|
|
|
.uni-easyinput__content { |
|
height: 80rpx; |
|
} |
|
|
|
.uni-easyinput { |
|
height: 80rpx; |
|
} |
|
|
|
.header_seach_seach { |
|
display: flex; |
|
height: 80rpx; |
|
margin-top: 23rpx; |
|
} |
|
|
|
.header_seach { |
|
font-size: 26rpx; |
|
padding: 0 10px; |
|
} |
|
|
|
.uni-navbar--border { |
|
border: 0px !important; |
|
} |
|
|
|
.header { |
|
position: relative; |
|
color: white; |
|
min-height: 403rpx; |
|
background: url('https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油admin小程序/sjbj.png') 100%/100%; |
|
} |
|
|
|
.uni-navbar__header-btns-right { |
|
padding-right: 0 !important; |
|
width: 120rpx !important; |
|
} |
|
|
|
.top { |
|
height: var(--status-bar-height); |
|
} |
|
</style>
|
|
|