front-end/ghsApp/src/admin/stat/clear.vue

<template>
<view class="app-content">
	<view class="ex-page">
		<view class="top-bar">
			<DateSelect class="bar" top="0" defaultShowName="开单时间" @selectDateFn="selectKdDateFn" />
			<DateSelect class="bar" top="0" defaultShowName="结账时间" @selectDateFn="selectClearDateFn" />
		</view>
		<view style="position:absolute;top:80upx;">
			<text style="margin-left:140upx;color:#666666;font-size:28upx;" @click="selectCustom()">选客户</text>
			<text style="margin-left:130upx;color:#666666;font-size:28upx;" @click="showUnClear()">待结清</text>
			<text style="margin-left:130upx;color:#666666;font-size:28upx;" @click="resetData()">重置</text>
		</view>
		<view class="main-view">
			<view class="space-view ex-table">
				<block>
					<t-table :headerBackgroundColor="'#F0F2F6'">
						<t-tr header>
							<t-th>客户</t-th>
							<t-th>开单 / 结账</t-th>
							<t-th>金额</t-th>
							<t-th>状态</t-th>
						</t-tr>
							<block v-if="profile.list && !$util.isEmpty(profile.list)">
								<block v-for="(item, index) in profile.list" :key="index">
									<view @click="goClear(item)">
										<t-tr>
											<t-td><view style="color:#333333;">{{item.customName?item.customName:'-'}}</view></t-td>
											<t-td>
												<view style="color:#333333;" @click.stop="goOrder(item)">
													<view>{{item.addTime.substr(5,11)}}</view>
													<block v-if="item.debtPrice && Number(item.debtPrice)>0">
														<view v-if="item.clearId && Number(item.clearId)>0" style="margin-top:5upx;">{{item.clearTime.substr(5,11)}}</view>
														<block v-else>
															<view style="margin-top:5upx;" v-if="Number(parseFloat(item.remainDebtPrice)) == 0">已退</view>
															<view style="margin-top:5upx;" v-else>待结清</view>
														</block>
													</block>
												</view>
											</t-td>
											<t-td>
												<block v-if="item.debtPrice && Number(item.debtPrice)>0">
													<view style="color:#333333;" v-if="(item.clearId && Number(item.clearId)>0) || Number(parseFloat(item.remainDebtPrice)) == 0">¥{{item.actPrice?parseFloat(item.actPrice):0}}</view>
													<view style="color:red;font-weight:bold;" v-else>¥{{item.actPrice?parseFloat(item.actPrice):0}}</view>
												</block>
												<block v-else>
													<view style="color:#333333;">¥{{item.actPrice?parseFloat(item.actPrice):0}}</view>
												</block>
											</t-td>
											<t-td>
												<block v-if="item.debtPrice && Number(item.debtPrice)>0">
													<view style="color:#CCCCCC;font-weight:bold;" v-if="(item.clearId && Number(item.clearId)>0) || Number(parseFloat(item.remainDebtPrice)) == 0">已结清</view>
													<view style="color:red;font-weight:bold;font-size:30upx;" v-else>待结清</view>
												</block>
												<block v-else>
													<view style="color:red;font-weight:bold;">-</view>
												</block>
											</t-td>
										</t-tr>
									</view>
								</block>
							</block>
					</t-table>
				</block>
			</view>
		</view>
	</view>
</view>
</template>
<script>
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import SelectList from "@/components/plugin/selectList";
import { getStatOrderClear } from "@/api/stat";
import { list } from "@/mixins";
import ShopSelect from "@/components/module/shopSelect";
import DateSelect from "@/components/module/dateSelect";
import AppSearchModule from "@/components/module/app-search";
import {mapActions, mapGetters} from "vuex";
export default {
	components: { SelectList, AppWrapperEmpty,ShopSelect,AppSearchModule,DateSelect },
	mixins: [list],
	computed: {		...mapGetters(["getDictionariesInfo","getLoginInfo"])	},
	data() {
		return {
			form:{
				payTime:'',
				startTime: "",
				endTime: "",
				customId:0,
				customName:'',
				unClear:0,
				timeStyle:0
			},
			profile:[],
			searchText:'',
		};
	},
	onPullDownRefresh() {
		this.resetList();
		this.getList().then(res => {
			uni.stopPullDownRefresh();
		});
	},
	onShow(){
		if(this.form.customId && Number(this.form.customId)>0){
			this.getList()
		}
	},
	methods: {
		...mapActions(['setUserShopAll']),
		resetData(){
			this.form.unClear = 0
			this.form.customId = 0
			this.form.customName = ''
			this.getList()
		},
		showUnClear(){
			this.form.unClear = 1
			this.getList()
		},
		goClear(order){
			this.$util.pageTo({ url: '/pagesArrears/details?id='+order.customId})
		},
		goOrder(order){
			this.$util.pageTo({ url: '/pagesOrder/detail?id='+order.id})
		},
		selectCustom(){
			this.pageTo({ url: '/admin/custom/selectCustom?style=2'})
		},
		searchFn(e){
			this.searchText = e;
		},
		selectKdDateFn(val) {
			this.form.timeStyle = 0
			this.form = {...this.form,...val}
			this.init();
		},
		selectClearDateFn(val){
			this.form.timeStyle = 1
			this.form = {...this.form,...val}
			this.init();
		},
		async init() {
			this.getList();
		},
		getList() {
			let that = this
			uni.showLoading()
			getStatOrderClear(this.form).then(res => {
				uni.hideLoading()
				that.profile = res.data
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.ex-page {
	background: white;
	padding-top:20upx;
	height: 100%;
	display: flex;
	flex-direction: column;
	.top-bar {
		position: absolute;
		left: 0;
		top:15upx;
		display: flex;
		width: 100%;
		z-index: 20;
		.bar{
			width: 50%;
			height: 100%;
			text-align: center;
			&:nth-child(1){
				border-right: 1upx solid #eeeeec;
			}
		}
	}
	.main-view {
		margin-top:120upx;
		flex: 1;
		background-color: #f9fbfc;
		.space-view {
			background-color: #fff;
			.change-level{
				font-size:22upx;
				padding:10upx 15upx;
			}
		}
		.ex-info {
			padding: 30upx;
			.info-cell {
				display: flex;
				align-items: center;
				font-size: 28upx;
				&:not(:first-child) {
					margin-top: 20upx;
				}
				.cell-label {
					width: 110upx;
					color: #666666;
				}
				.cell-value {
					margin-left: 40upx;
					color: #333;
					&.warning {
						color: #ffaf1d;
					}
					&.success {
						color: #27c325;
					}
				}
			}
		}
		.ex-table {
			::v-deep.icon-info {
				color: #333333;
			}
		}
	}
	.bar-view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		width: 100%;
		height: 100upx;

		box-shadow: 0upx -1upx 6upx 0upx rgba(4, 0, 0, 0.06);
		.info-view {
			font-size: 26upx;
		}
		.btn-view {
			display: flex;
			.admin-button-com {
				margin: 0 10upx;
			}
		}
	}
}
</style>