jhlapp/pagesT/Finance/ApplyReceiptDetail.vue

<template>
	<view class="detail-view">
		<u-form label-width="150" :model="form" ref="uForm">
			<view class="form-model-view">
				<u-form-item label="单据编号">
					<view class="form-value">{{ detail_data.no }}</view>
				</u-form-item>
				<u-form-item label="收款单位">
					<view class="form-value">{{ detail_data.customerName }}</view>
				</u-form-item>
				<u-form-item label="当前应收">
					<view class="form-value">{{ $utils.formattedNumber(detail_data.receivable) }}</view>
				</u-form-item>
				<u-form-item label="收款人">
					<view class="form-value">{{ detail_data.operatorName }}</view>
				</u-form-item>
				<u-form-item label="收款时间">
					<view class="form-value">{{ $u.timeFormat(detail_data.createTime, 'yyyy-mm-dd') }}</view>
				</u-form-item>
				<u-form-item label="所属店铺">
					<view class="form-value">{{ detail_data.shopName }}</view>
				</u-form-item>
				<u-form-item label="单据状态">
					<view class="form-value">
						<text class="success-status" v-if="detail_data.auditStatus === 2">已审核</text>
						<text class="warning-status" v-else>待审核</text>
					</view>
				</u-form-item>
			</view>
			<view class="detail-ul">
				<view class="detail-li" v-for="(item, index) in detail_data.receiptRequisitionAccountDate" :key="index">
					<view class="title">{{ statusText(item.settlementMethod) }}</view>
					<view class="other-ul">
						<view class="other-li">收款：{{ $utils.formattedNumber(item.collectionAmount) }}</view>
						<view class="other-li">优惠：{{ $utils.formattedNumber(item.preferentialAmount) }}</view>
						<view class="other-li">
							实收：
							<text class="money">{{ $utils.formattedNumber(item.actualAmount) }}</text>
						</view>
					</view>
					<view class="remark">备注：{{ item.remark || '无' }}</view>
				</view>
			</view>
		</u-form>
		<view class="detail-bottom" v-if="detail_data.auditStatus !== 2">
			<view class="handel-btn" v-if="$accessCheck($Access.auditApplyReceipt)" @click="openModel('确定要审核通过该收款申请单吗？', '审核')">审核</view>
			<view class="handel-btn" v-if="$accessCheck($Access.editApplyReceipt)" @click="goPage(`/pagesT/Finance/AddApplyReceipt?id=${id}`)">编辑</view>
		</view>
		<u-modal v-model="model_show" :show-cancel-button="true" :content="model_content" @confirm="modelConfirm" @cancel="modelCancel"></u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			model_tag: '',
			model_show: false,
			model_content: '',
			pay_type_list: [
				{
					value: 1,
					label: '当面现金'
				},
				{
					value: 2,
					label: '私人微信'
				},
				{
					value: 3,
					label: '私人支付宝'
				},
				{
					value: 4,
					label: '私人银行卡'
				},
				{
					value: 5,
					label: '公司公户'
				},
				{
					value: 6,
					label: '公司微信'
				},
				{
					value: 7,
					label: '公司支付宝'
				},
				{
					value: 8,
					label: '公司银行卡'
				}
			],
			add_form: {
				title: '',
				provinceCode: '',
				cityCode: '',
				districtCode: '',
				address: '',
				realName: '',
				mobile: '',
				enableStatus: 5,
				sex: 0,
				phone: '',
				position: '',
				email: '',
				remark: '',
				accountName: '',
				bankName: '',
				bankCard: ''
			},
			id: '',
			detail_data: []
		};
	},
	onLoad(options) {
		this.id = options.id;
	},
	onShow() {
		this.getReceiptRequisitionInfo();
	},
	onPullDownRefresh() {
		this.getReceiptRequisitionInfo();
	},
	methods: {
		getReceiptRequisitionInfo() {
			this.$u.api.getReceiptRequisitionInfo(this.id).then(res => {
				this.detail_data = res.data;
			});
		},
		statusText(val) {
			const data = this.pay_type_list.find(item => item.value === val);
			if (data) {
				return data.label;
			} else {
				return '其他';
			}
		},
		// 打开提示框
		openModel(content, tag) {
			this.model_content = content;
			this.model_show = true;
			this.model_tag = tag;
		},
		modelConfirm() {
			switch (this.model_tag) {
				case '审核':
					this.updateReceiptRequisitionStatus();
					break;
			}
		},
		updateReceiptRequisitionStatus() {
			this.$u.api
				.updateReceiptRequisitionStatus({
					id: this.id,
					createTime: this.detail_data.createTime
				})
				.then(res => {
					this.$u.toast('操作成功');
					this.getReceiptRequisitionInfo();
				});
		}
	}
};
</script>

<style lang="scss">
.detail-ul {
	.detail-li {
		width: 710rpx;
		margin: 20rpx auto;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx 24rpx;
		.title {
			font-weight: bold;
		}
		.other-ul {
			display: flex;
			padding-top: 20rpx;
			.other-li {
				flex: 3;
				font-size: 24rpx;
				text-align: center;
				.money {
					font-size: 28rpx;
					font-weight: bold;
					color: $uni-color-error;
				}
				&:first-child {
					text-align: left;
				}
				&:last-child {
					text-align: right;
				}
			}
		}

		.remark {
			border-top: 1px solid #eeeeee;
			padding-top: 20rpx;
			margin-top: 20rpx;
		}
	}
}
</style>