416 lines
10 KiB
Vue
416 lines
10 KiB
Vue
<template>
|
|
<view class="time-wrapper">
|
|
<view v-for="(v, i) in timeList" :key="i" class="timelistbox">
|
|
<view class="time-item" @tap="changeTime(v.value)" :class="{ 'time-selected':v.value==selected }">
|
|
{{v.label}}
|
|
</view>
|
|
<view class="xian" v-if="v.value==selected "> </view>
|
|
</view>
|
|
</view>
|
|
<view class="paymentSettlement">
|
|
<view :style="{color:datas.activeType==0?'#318AFE':''}" @tap="switchType(0)">全部</view>
|
|
<view :style="{color:datas.activeType==1?'#318AFE':''}" @tap="switchType(1)">进货</view>
|
|
<view :style="{color:datas.activeType==2?'#318AFE':''}" @tap="switchType(2)">退货</view>
|
|
<view :style="{color:datas.activeType==3?'#318AFE':''}" @tap="switchType(3)">未支付</view>
|
|
<view :style="{color:datas.activeType==4?'#318AFE':''}" @tap="switchType(4)">已付款</view>
|
|
</view>
|
|
<view class="supplier">
|
|
<view v-for="item in datas.list" :key="item.id">
|
|
<view style="position: relative;">
|
|
|
|
<view>
|
|
<view style="font-weight: 500;font-size: 28rpx;color: #333333;">
|
|
{{item.totalAmount}}
|
|
</view>
|
|
<view style="font-weight: 400;font-size: 24rpx;color: #666666;">
|
|
应付金额(元)
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view style="font-weight: 500;font-size: 28rpx;color: #333333;">
|
|
{{item.paidAmount}}
|
|
</view>
|
|
<view style="font-weight: 400;font-size: 24rpx;color: #666666;">
|
|
已付金额(元)
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view style="font-weight: 500;font-size: 28rpx;color: #F02C45;">
|
|
{{item.waitAmount}}
|
|
</view>
|
|
<view style="font-weight: 400;font-size: 24rpx;color: #666666;">
|
|
待支付金额(元)
|
|
</view>
|
|
</view>
|
|
<view v-if="item.status==0"
|
|
style="position: absolute;left: 0;top: 0;width: 88rpx;line-height: 36rpx;background: #FF895C;border-radius: 8rpx 0rpx 8rpx 0rpx;font-weight: 400;font-size: 20rpx; color: #FFFFFF; ">
|
|
待付款
|
|
</view>
|
|
</view>
|
|
<view class="df">
|
|
<span>创建日期</span>
|
|
<span>{{dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}}</span>
|
|
</view>
|
|
<view class="df">
|
|
<span>类型</span>
|
|
<span>{{typeFilter(item.type)}}</span>
|
|
</view>
|
|
<view class="df">
|
|
<span>付款时间</span>
|
|
<span>{{dayjs(item.updatedAt).format('YYYY-MM-DD HH:mm:ss')}}</span>
|
|
</view>
|
|
<view>
|
|
|
|
<!-- <up-button shape="circle" type="primary" size="mini" color="#999" @tap="toUrl('PAGES_VIEWRECORDS',{item:JSON.stringify(item)})"
|
|
:plain="true" text="查看记录"></up-button>
|
|
<up-button type="primary" shape="circle" size="mini" @click="toggle(item)" :plain="true" text="更多操作"></up-button>
|
|
|
|
-->
|
|
|
|
<up-button type="primary" size="mini" shape="circle" style="background-color: #318AFE;color: #fff;" @tap="datas.PopUp=true;datas.form.id=item.id"
|
|
:plain="true" text="付款"></up-button>
|
|
<up-button type="primary" size="mini" shape="circle" style="width: 200rpx;" @tap="toUrl(item.id)" :plain="true" text="账单付款记录">
|
|
</up-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 取号遮罩层 -->
|
|
<up-popup :show="datas.PopUp" :round="18" mode="center" @close="close">
|
|
<view class="zhezhaopops">
|
|
<view class="">
|
|
<span></span>
|
|
<span>付款</span>
|
|
<up-icon @tap="datas.PopUp=false" name="close-circle-fill"></up-icon>
|
|
</view>
|
|
<view class="">
|
|
付款金额<input type="text" placeholder="请输入付款金额" v-model="datas.form.paidAmount" />
|
|
</view>
|
|
<view class="">
|
|
付款方式<input type="text" placeholder="请输入付款方式" v-model="datas.form.payType" />
|
|
</view>
|
|
<view class="">
|
|
备注<input type="text" v-model="datas.form.remark" />
|
|
</view>
|
|
<up-button text="确认" @tap="confirmtow()" type="primary" class="buttomStyle"
|
|
shape="circle"></up-button>
|
|
</view>
|
|
</up-popup>
|
|
|
|
|
|
|
|
|
|
<datePickerview @confirm="datePickerConfirm" ref="datePicker"></datePickerview>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, getCurrentInstance, ref, reactive } from 'vue';
|
|
import dayjs from 'dayjs';
|
|
import go from '@/commons/utils/go.js'
|
|
import datePickerview from './components/my-date-pickerview.vue'
|
|
|
|
const timeList = [{
|
|
label: '今天',
|
|
value: 'today'
|
|
},
|
|
{
|
|
label: '昨天',
|
|
value: 'yesterday'
|
|
},
|
|
{
|
|
label: '本周',
|
|
value: 'circumference'
|
|
}, {
|
|
label: '本月',
|
|
value: 'moon'
|
|
},
|
|
{
|
|
label: '自定义',
|
|
value: 'custom'
|
|
}
|
|
]
|
|
let selected = ref('today')
|
|
let datas = reactive({
|
|
activeType: 0,
|
|
list: [],
|
|
startTime: "",
|
|
endTime: "",
|
|
type: "",
|
|
status: "",
|
|
PopUp: false,
|
|
form: {}
|
|
})
|
|
const currentInstance = getCurrentInstance()
|
|
const props = defineProps({
|
|
id: {
|
|
type: Number
|
|
}
|
|
})
|
|
onMounted(() => {
|
|
getlist()
|
|
})
|
|
let confirmtow = (id) => {
|
|
// tbShopPurveyorpayTransact({
|
|
// id,
|
|
// ...datas.form
|
|
// }).then(() => {
|
|
// datas.PopUp = false
|
|
// getlist()
|
|
// })
|
|
}
|
|
let close = () => {
|
|
datas.form = {}
|
|
}
|
|
let typeFilter = (t) => {
|
|
const m = {
|
|
purveyor: '进货单',
|
|
reject: '退货单',
|
|
cons_in: '耗材入库',
|
|
cons_out: '耗材出库'
|
|
}
|
|
return m[t]
|
|
}
|
|
|
|
function toUrl(id) {
|
|
go.to('PAGES_BILL_PAYMENT', {
|
|
id
|
|
})
|
|
}
|
|
let switchType = (a) => {
|
|
datas.activeType = a
|
|
if (a == 0) {
|
|
datas.type = ''
|
|
datas.status = ''
|
|
} else if (a == 1) {
|
|
datas.type = 'purveyor'
|
|
datas.status = ''
|
|
} else if (a == 2) {
|
|
datas.type = 'reject'
|
|
datas.status = ''
|
|
} else if (a == 3) {
|
|
datas.type = ''
|
|
datas.status = '0'
|
|
} else if (a == 4) {
|
|
datas.type = ''
|
|
datas.status = '1'
|
|
}
|
|
getlist()
|
|
}
|
|
|
|
function datePickerConfirm(e) {
|
|
getlist(e.start, e.end)
|
|
}
|
|
|
|
function getlist(start, end) {
|
|
if (selected.value == 'today') {
|
|
datas.startTime = dayjs().format('YYYY-MM-DD') + ' 00:00:00'
|
|
datas.endTime = dayjs().format('YYYY-MM-DD') + ' 23:59:59'
|
|
} else if (selected.value == 'yesterday') {
|
|
datas.startTime = formatTime() + ' 00:00:00'
|
|
datas.endTime = formatTime() + ' 23:59:59'
|
|
} else if (selected.value == 'circumference') {
|
|
datas.startTime = dayjs().add(-7, 'day').format('YYYY-MM-DD 00:00:00')
|
|
datas.endTime = dayjs().format('YYYY-MM-DD 23:59:59')
|
|
} else if (selected.value == 'moon') {
|
|
datas.startTime = dayjs().add(-30, 'day').format('YYYY-MM-DD 00:00:00')
|
|
datas.endTime = dayjs().format('YYYY-MM-DD 23:59:59')
|
|
} else if (selected.value == 'custom') {
|
|
datas.startTime = start
|
|
datas.endTime = end
|
|
}
|
|
// tbShopPurveyorTransactinfo({
|
|
// // shopId: uni.getStorageSync('shopId'),
|
|
// size: 20,
|
|
// createAt: [datas.startTime, datas.endTime],
|
|
// page: 0,
|
|
// sort: "id",
|
|
// type: datas.type,
|
|
// status: datas.status,
|
|
// purveyorId: props.id
|
|
// }).then((res) => {
|
|
// datas.list = res.content
|
|
// })
|
|
}
|
|
// 获取当前时间
|
|
function getdate() {
|
|
const dt = new Date();
|
|
const y = dt.getFullYear();
|
|
const m = (dt.getMonth() + 1 + "").padStart(2, "0");
|
|
const d = (dt.getDate() + "").padStart(2, "0");
|
|
const hh = (dt.getHours() + "").padStart(2, "0");
|
|
const mm = (dt.getMinutes() + "").padStart(2, "0");
|
|
const ss = (dt.getSeconds() + "").padStart(2, "0");
|
|
return `${y}-${m}-${d}`;
|
|
}
|
|
// 获取昨天时间
|
|
const formatTime = () => {
|
|
let strDate = getdate()
|
|
let dateFormat = new Date(strDate);
|
|
dateFormat = dateFormat.setDate(dateFormat.getDate() - 1);
|
|
dateFormat = new Date(dateFormat);
|
|
let y = dateFormat.getFullYear()
|
|
let m = (dateFormat.getMonth() + 1).toString().padStart(2, '0')
|
|
let d = dateFormat.getDate().toString().padStart(2, '0')
|
|
return `${y}-${m}-${d}`
|
|
}
|
|
|
|
function changeTime(e) {
|
|
selected.value = e
|
|
if (e == 'custom') {
|
|
currentInstance.ctx.$refs.datePicker.toggle()
|
|
} else {
|
|
getlist()
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
page {
|
|
background-color: #f9f9f9;
|
|
}
|
|
</style>
|
|
<style scoped lang="less">
|
|
.time-wrapper {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
background-color: #fff;
|
|
padding-bottom: 20rpx;
|
|
|
|
.timelistbox {
|
|
position: relative;
|
|
|
|
.time-item {
|
|
width: 90rpx;
|
|
text-align: center;
|
|
padding-bottom: 10rpx;
|
|
}
|
|
|
|
.xian {
|
|
width: 40rpx;
|
|
height: 3rpx;
|
|
background-color: #459DFF;
|
|
position: absolute;
|
|
left: 26rpx;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
.time-selected {
|
|
color: #459DFF;
|
|
}
|
|
}
|
|
|
|
.supplier {
|
|
>view {
|
|
width: 694rpx;
|
|
height: 550rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
padding: 32rpx 24rpx;
|
|
box-sizing: border-box;
|
|
margin: 32rpx;
|
|
|
|
|
|
>view:nth-child(1) {
|
|
width: 646rpx;
|
|
height: 160rpx;
|
|
background: #F9F9F9;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
text-align: center;
|
|
}
|
|
|
|
>view:nth-child(2),
|
|
>view:nth-child(3),
|
|
>view:nth-child(4) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 32rpx;
|
|
}
|
|
|
|
>view:nth-child(5) {
|
|
border-top: 2rpx solid #E5E5E5;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row-reverse;
|
|
margin-top: 32rpx;
|
|
padding-top: 22rpx;
|
|
|
|
>button {
|
|
width: 112rpx;
|
|
height: 48rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
|
border: 2rpx solid #3189FD;
|
|
margin: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.df() {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.zhezhaopops {
|
|
padding: 34rpx 32rpx;
|
|
width: 594rpx;
|
|
height: 900rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
|
|
>view:first-child {
|
|
.df;
|
|
justify-content: space-between;
|
|
|
|
>span:nth-child(2) {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
>view:nth-child(2),
|
|
>view:nth-child(3),
|
|
>view:nth-child(4) {
|
|
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
color: #333333;
|
|
margin-top: 64rpx;
|
|
|
|
>input {
|
|
margin-top: 24rpx;
|
|
width: 492rpx;
|
|
height: 84rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
border: 2rpx solid #E5E5E5;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
.buttomStyle {
|
|
margin-top: 48rpx;
|
|
width: 506rpx;
|
|
height: 80rpx;
|
|
}
|
|
}
|
|
|
|
.paymentSettlement {
|
|
padding: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background-color: #fff;
|
|
}
|
|
</style> |