367 lines
8.4 KiB
Vue
367 lines
8.4 KiB
Vue
<template>
|
||
<view class="excalation_body">
|
||
<view class="excalation_body_card">
|
||
<view class="card_item">
|
||
<view class="tip"></view>
|
||
<view class="excalation_body_card_title_text">{{accountName}}</view>
|
||
</view>
|
||
<view class="card_item">
|
||
<view class="fh">￥</view>
|
||
<input type="number" @input="chenkFn" v-model="money" class="card_item_input" placeholder="请输入当前油站金额" />
|
||
</view>
|
||
<view class="card_item " style="display: flex;">
|
||
<text>余额结余时间：</text>
|
||
<text style="color: #FE0505;">{{single?single:'请选择余额结余时间'}}</text>
|
||
<uni-datetime-picker :start="start " type='datetime' v-model="single">
|
||
<uni-icons size="18" style="margin-left: 45rpx;" type="calendar"></uni-icons>
|
||
</uni-datetime-picker>
|
||
|
||
</view>
|
||
<button :disabled="disabled" @click="submit" class="card_butten">上报</button>
|
||
</view>
|
||
<scroll-view :scroll-top='scrollTop' @scroll='scroll' class="excalation_body_list" style="height: 100%;" scroll-y="true" @scrolltolower='scrolltolower'>
|
||
<view v-for="(item,index) in list" class="excalation_body_list_item list_item">
|
||
<view class="excalation_body_list_item_left">
|
||
<view class="small_text">
|
||
<text>{{userName}}</text>
|
||
<text class="text_spacing">{{pnone}}</text>
|
||
</view>
|
||
<view class="tip_text">
|
||
<text>上报时间</text>
|
||
<text class="text_spacing">{{item.reportTime}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="excalation_body_list_item_right">
|
||
<text>￥</text>
|
||
<text>{{Number(item.balance).toFixed(2)}}</text>
|
||
</view>
|
||
|
||
</view>
|
||
</scroll-view>
|
||
<!-- <view class="excalation_body_list">
|
||
<view v-for="(item,index) in list" class="excalation_body_list_item list_item">
|
||
<view class="excalation_body_list_item_left">
|
||
<view class="small_text">
|
||
<text>{{userName}}</text>
|
||
<text class="text_spacing">{{pnone}}</text>
|
||
</view>
|
||
<view class="tip_text">
|
||
<text>上报时间</text>
|
||
<text class="text_spacing">{{item.reportTime}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="excalation_body_list_item_right">
|
||
<text>￥</text>
|
||
<text>{{Number(item.balance).toFixed(2)}}</text>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<uni-popup ref="popup">
|
||
<view class="popup_card">
|
||
<view class="popup_card_title">是否确认上报</view>
|
||
<view class="popup_card_from">
|
||
<view class="popup_card_from_item">
|
||
<view class="popup_card_from_item_left_text">上报人油站：</view>
|
||
<view class="popup_card_from_item_right_text"> {{accountName}}</view>
|
||
</view>
|
||
<view class="popup_card_from_item">
|
||
<view class="popup_card_from_item_left_text">上报金额：</view>
|
||
<view class="popup_card_from_item_right_text"> {{money}}</view>
|
||
</view>
|
||
<view class="popup_card_from_item">
|
||
<view class="popup_card_from_item_left_text">上报人：</view>
|
||
<view class="popup_card_from_item_right_text"> {{userName}}</view>
|
||
</view>
|
||
<view class="popup_card_from_item">
|
||
<view class="popup_card_from_item_left_text">上报时间：</view>
|
||
<view class="popup_card_from_item_right_text"> {{date}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="popup_card_bottom">
|
||
<button @click="$refs.popup.close()" class="popup_card_bottom_close">取消</button>
|
||
<button @click="report" class="popup_card_bottom_submit">确认</button>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import finance from '@/api/oil-finance.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
start:'',
|
||
single:'',
|
||
scrollTop:0,
|
||
load:true,
|
||
list: [],
|
||
pnone: uni.getStorageSync('user').userPhone,
|
||
page: {
|
||
pageSize: 15, // 每页显示条数
|
||
currentPage: 1, // 默认页
|
||
params: {
|
||
siteId: uni.getStorageSync('oilSitePriceId')
|
||
}, // 查询参数
|
||
sorted: {},
|
||
columns: []
|
||
},
|
||
disabled: true,
|
||
money: '',
|
||
accountName: uni.getStorageSync('siteOli'),
|
||
userName: uni.getStorageSync('loginUser').name,
|
||
date: null
|
||
}
|
||
},
|
||
watch: {
|
||
money: function(n) {
|
||
if (n !== '' && Number(n) !== 0) {
|
||
this.disabled = false
|
||
} else {
|
||
this.disabled = true
|
||
}
|
||
}
|
||
|
||
},
|
||
onShow() {
|
||
this.start = this.datefn();
|
||
this.single = this.datefn()
|
||
console.log(this.start),'+++++++++++++++++++'
|
||
this.getByPage()
|
||
},
|
||
methods: {
|
||
scroll(e){
|
||
this.scrollTop = e.detail.scrollTop
|
||
},
|
||
scrolltolower(){
|
||
this.$nextTick(function(){
|
||
this.scrollTop = this.scrollTop -80;
|
||
this.page.currentPage+=1
|
||
this.getByPage()
|
||
})
|
||
},
|
||
getByPage() {
|
||
finance.getByPage(this.page).then(res => {
|
||
if(this.page.currentPage>1){
|
||
this.list = this.list.concat(res.data.list)
|
||
}else{
|
||
this.list = res.data.list
|
||
}
|
||
console.log(this.list)
|
||
})
|
||
},
|
||
report() {
|
||
finance.report({
|
||
siteId: uni.getStorageSync('oilSitePriceId'),
|
||
userId: uni.getStorageSync('user').id,
|
||
reportTime:this.single,
|
||
balance: this.money
|
||
}).then(res => {
|
||
if (res.code == 20000) {
|
||
uni.showToast({
|
||
title: '上报成功',
|
||
icon: 'success'
|
||
});
|
||
this.$refs.popup.close();
|
||
this.page.currentPage=1
|
||
this.getByPage()
|
||
}
|
||
})
|
||
},
|
||
chenkFn() {
|
||
let chenk = /^\d+(.\d{1,2})?$/
|
||
if (!chenk.test(Number(this.money))) {
|
||
this.$nextTick(function() {
|
||
this.money = this.money.slice(0, this.money.length - 1);
|
||
console.log(this.money.length - 1, )
|
||
})
|
||
} else {
|
||
if (this.money.indexOf('.') !== -1 && this.money.split('.')[1].length > 2) {
|
||
this.$nextTick(function() {
|
||
this.money = Number(this.money).toFixed(2);
|
||
})
|
||
}
|
||
}
|
||
},
|
||
datefn() {
|
||
let a = new Date();
|
||
return `${a.getFullYear()}-${a.getMonth()+1}-${a.getDay()} ${a.getHours()}:${a.getMinutes()}:${a.getSeconds()}`
|
||
},
|
||
submit() {
|
||
this.$refs.popup.open('center')
|
||
this.date = this.datefn();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.popup_card_bottom {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 68rpx;
|
||
}
|
||
|
||
.popup_card_bottom_submit {
|
||
background: #FE0505;
|
||
color: #ffffff;
|
||
font-size: 25rpx;
|
||
width: 240rpx;
|
||
}
|
||
|
||
.popup_card_bottom_close {
|
||
background: #FFFFFF;
|
||
font-size: 25rpx;
|
||
width: 240rpx;
|
||
}
|
||
|
||
.popup_card_from_item_right_text {
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
max-width: 50%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin-right: 25rpx;
|
||
|
||
}
|
||
|
||
.popup_card_from_item_left_text {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.popup_card_from_item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.popup_card_title {
|
||
text-align: center;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
font-size: 36rpx;
|
||
margin-bottom: 80rpx;
|
||
}
|
||
|
||
.popup_card {
|
||
|
||
width: 681rpx;
|
||
height: 628rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 15px;
|
||
padding: 64rpx;
|
||
}
|
||
|
||
.tip_text {
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.text_spacing {
|
||
margin-left: 15rpx;
|
||
}
|
||
|
||
.small_text {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.card_item_input {
|
||
margin-left: 27rpx;
|
||
}
|
||
|
||
.fh {
|
||
font-size: 60rpx;
|
||
}
|
||
|
||
.excalation_body_list_item_right {
|
||
min-width: 143rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.excalation_body_list_item_left {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin-right: 25rpx;
|
||
}
|
||
|
||
.excalation_body_list_item {
|
||
display: flex;
|
||
}
|
||
|
||
.excalation_body_list {
|
||
margin-top: 32rpx;
|
||
flex: 1;
|
||
background-color: white;
|
||
padding: 22rpx;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.card_butten {
|
||
background-color: #FE0505;
|
||
color: white;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.excalation_body_card_title_text {
|
||
flex: 1;
|
||
margin-left: 27rpx;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tip {
|
||
width: 8rpx;
|
||
height: 36rpx;
|
||
background-color: #FE0505;
|
||
display: inline-block;
|
||
}
|
||
|
||
.list_item {
|
||
border-bottom: 1rpx solid #F1F2F7;
|
||
padding-bottom: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.card_item {
|
||
border-bottom: 1rpx solid #F1F2F7;
|
||
padding-bottom: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.excalation_body_card_title {
|
||
border-bottom: 1rpx solid #F1F2F7;
|
||
padding-bottom: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.excalation_body_card {
|
||
height: 490rpx;
|
||
background-color: #ffffff;
|
||
padding: 40rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.excalation_body {
|
||
background-color: #f1f2f7;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 20rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
</style>
|