QianNiaoShop/pagesT/Finance/ReturnFrom.vue

<template>
	<view>
		<view class="tabs-view">
			<view class="keyword-view clearfix">
				<view class="float_left">
					<u-search :show-action="false" @clear="searchData()" @search="searchData()" :clearabled="true"
						placeholder="单据编号" v-model="search_form.keyword"></u-search>
				</view>
				<view class="float_right" @click="openSel('search_show')"><text
						class="custom-icon custom-icon-shaixuan"></text></view>
			</view>
		</view>
		<view class="list-ul">
			<view class="list-li clearfix" v-for="(item, index) in return_list" :key="index" @click="details(item.id, item.createTime)">
				<view class="title clearfix" >
					<view class="float_left" style="font-size: 28rpx;font-weight: 700;">{{ item.unitName || '--' }}
					</view>
					<view class="float_right">
						<span v-if="item.auditStatus === 1" class="warning-status">待审核</span>
						<span v-else class="success-status">已审核</span>
						<text class="custom-icon custom-icon-jinru"></text>
					</view>
				</view>
				<view class="list-cont">
					<view class="list-cont-li">日期：{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd') }}</view>
					<view class="list-cont-li clearfix">单据号：{{ item.no }}</view>
					<view class="list-cont-li clearfix" v-if="item.originNo">源单据号：{{ item.originNo }}</view>
					<view class="list-cont-li clearfix" v-if="item.shopName">店铺：{{ item.shopName }}</view>
					<view class="list-cont-li clearfix">类型：{{ item.financeType }}</view>
					<view class="price">
						<text>{{ $utils.formattedNumber(item.money) }}</text>
					</view>
				</view>
			</view>
			<addBtn v-if="$accessCheck($Access.RefundForm_AddRefundForm)" url="/pagesT/Finance/ReturnFromAdd"></addBtn>
			<u-popup v-model="search_show" mode="right">
				<view class="search-pop">
					<view class="form-view">
						<u-form label-width="160rpx" label-position="left">
							<u-form-item label="客户">
								<view class="clearfix form-val" @click="goPage('/pagesT/customer/selCustomer')">
									<text
										class="float_left ellipsis">{{ search_form.unitId ? customer_name : '请选择' }}</text>
									<view class="float_right" @click.stop="clearValue('unitId')">
										<u-icon :name="!search_form.unitId ? 'arrow-right' : 'close-circle-fill'"
											size="28" color="#999999"></u-icon>
									</view>
								</view>
							</u-form-item>
							<u-form-item label="单据状态">
								<view class="clearfix form-val" @click="openSel('show_status')">
									<text
										class="float_left ellipsis">{{ search_form.auditStatus ? auditStatus_name : '请选择' }}</text>
									<view class="float_right" @click.stop="clearValue('auditStatus')">
										<u-icon :name="!search_form.auditStatus ? 'arrow-right' : 'close-circle-fill'"
											size="28" color="#999999"></u-icon>
									</view>
								</view>
							</u-form-item>
							<u-form-item label-position="top" label="创建日期">
								<view class="date-li">
									<picker mode="date" @change="bindDateStartChange">
										<text
											class="date-li">{{ search_form.start ? $u.timeFormat(search_form.start, 'yyyy-mm-dd') : '开始日期' }}</text>
									</picker>
								</view>
								<view class="date-line">-</view>
								<view class="date-li">
									<picker mode="date" @change="bindDateEndChange">
										<text
											class="date-li">{{ search_form.end ? $u.timeFormat(search_form.end, 'yyyy-mm-dd') : '结束日期' }}</text>
									</picker>
								</view>
							</u-form-item>
						</u-form>
					</view>

					<view class="search-btn">
						<view class="btn-li" @click="clearValue()">重置</view>
						<view class="btn-li" @click="searchConfirm">确定</view>
					</view>
				</view>
			</u-popup>
			<u-select @confirm="statusChange" v-model="show_status" :list="order_status"></u-select>
			<u-select @confirm="financeTypeChange" v-model="financeTypeId_status" :list="financeType"></u-select>
			<view v-if="!return_list.length" class="empty-view">
				<u-empty text="暂无数据" mode="list"></u-empty>
			</view>
			<u-loadmore v-if="return_list.length" :status="load_status" />
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show_status: false,
				search_show: false,
				financeTypeId_status: false,
				order_status: [{
					value: 2,
					label: '已审核'
				}, {
					value: 1,
					label: '待审核'
				}],
				financeType: [],
				load_status: 'nomore',
				tabs_current: 0,
				page: 1,
				pageSize: 10,
				total: 0,
				search_form: {
					keyword: '',
					auditStatus: '',
					financeTypeId: '',
					start: '',
					end: '',
					unitId: ''
				},
				customer_name: '',
				return_list: [],
				werahouseData: '',
				customerData: '',
				auditStatus_name: '',
				financeTypeId_name: ''
			};
		},
		watch: {
			customerData(val) {
				if (val) {
					this.customer_name = val.name;
					this.search_form.unitId = val.id;
				}
			},
		},
		onLoad() {
			this.getAllFinanceType()
		},
		onShow() {
			this.searchData();
		},
		onReachBottom() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.getAllRefund();
			}
		},
		onPullDownRefresh() {
			this.searchData();
		},
		methods: {
			// 审核状态切换
			statusChange(e) {
				this.search_form.auditStatus = e[0].value;
				this.auditStatus_name = e[0].label;
			},
			//业务类型切换
			financeTypeChange(e) {
				this.search_form.financeTypeId = e[0].value;
				this.financeTypeId_name = e[0].label;
			},
			details(id, createTime) {
				uni.navigateTo({
					url: '/pagesT/Finance/ReturnFromDetails?id=' + id + '&&createTime=' + createTime
				});
			},
			openSel(key) {
				this[key] = true;
			},
			bindDateStartChange(e) {
				this.search_form.start = this.$utils.timeByTimestamp(e.detail.value + ' 00:00:00');
			},
			bindDateEndChange(e) {
				this.search_form.end = this.$utils.timeByTimestamp(e.detail.value + ' 23:59:59');
			},
			// 搜索确定
			searchConfirm() {
				this.search_show = false;
				this.searchData();
			},
			// 重置搜索
			clearValue(params) {
				if (!params) {
					this.search_form = {
						keyword: '',
						auditStatus: '',
						financeTypeId: '',
						time: '',
						start: '',
						end: '',
						unitId: ''
					};
					this.searchConfirm();
				} else {
					this.search_form[params] = '';
				}
			},
			getAllRefund() {
				this.load_status = 'loading';
				this.$u.api
					.getAllRefund({
						page: this.page,
						pageSize: this.pageSize,
						keyword: this.search_form.keyword,
						financeTypeId: this.search_form.financeTypeId,
						start: this.search_form.start,
						end: this.search_form.end,
						unitId: this.search_form.unitId,
						auditStatus: this.search_form.auditStatus.toString()
					})
					.then(res => {
						if (this.page === 1) {
							this.return_list = res.data;
						} else {
							this.return_list = this.return_list.concat(res.data);
						}
						this.total = res.pageTotal;
						this.load_status = this.$utils.loadStatus(this.page, this.pageSize, this.total);
					});
			},
			searchData() {
				this.page = 1;
				this.getAllRefund();
			},
			//  获取财务类型
			getAllFinanceType() {
				this.$u.api.getAllFinanceTypeNoPage(3).then(res => {
					this.financeType = res.data.map((item) => {
						return{
							label: item.name,
							value: item.id
						}
					})
				})

			},
		}
	};
</script>

<style lang="scss" scoped>
	.tabs-view {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 99;

		.btn {
			width: 70rpx;
			height: 70rpx;
			position: fixed;
			bottom: 50rpx;
			right: 35rpx;
			border-radius: 50%;
			background-color: #2979ff;
			text-align: center;
			color: #ffffff;
			vertical-align: middle;
			font-size: 49rpx;
			box-shadow: 0px 9rpx 76rpx 0px rgba(3, 122, 255, 0.55);
		}

		.keyword-view {
			padding: 20rpx 24rpx 0;
			background-color: #ffffff;
			z-index: 9;
			padding-bottom: 20rpx;

			.float_left {
				width: 640rpx;
			}

			.float_right {
				line-height: 64rpx;
				width: 50rpx;
				text-align: center;
				color: #666666;
			}
		}
	}

	.list-ul {
		padding-top: 100rpx;

		.list-li {
			width: 710rpx;
			margin: 20rpx auto;
			padding: 0 24rpx 20rpx;
			background-color: #ffffff;
			padding-bottom: 20rpx;
			border-radius: 20rpx;

			.title {
				line-height: 80rpx;
				border-bottom: 1px solid #eeeeee;

				.float_left {
					font-weight: bold;
				}

				.float_rigth {
					.custom-icon-jinru {
						margin-left: 10rpx;
						font-size: 28rpx;
					}
				}
			}

			.list-cont {
				margin-top: 10rpx;
				position: relative;

				.price {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 0;
					font-weight: bold;
					color: $uni-color-error;

					.custom-icon-jinru {
						font-size: 28rpx;
						color: #6c6c6c;
						font-weight: 400;
					}
				}

				.list-cont-li {
					line-height: 40rpx;
					font-size: 24rpx;
					color: #666666;

					.mobile {
						color: $uni-color-primary;
					}
				}
			}
		}
	}
</style>