QianNiaoShop/pagesT/Finance/ReturnFromAdd.vue

<template>
	<view class="detail-view">
		<u-form label-width="150" :model="add_form" ref="uForm">
			<view class="form-model-view">
				<u-form-item required label="退款单位">
					<u-input @click="goPage('/pagesT/customer/selCustomer')" disabled class="dis-input" v-model="add_form.unitName" placeholder="请选择" />
					<u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
				</u-form-item>
				<u-form-item label="单据日期">
					<picker mode="date" @change="bindDateChange">
						<view style="width: 524rpx;text-align: right;display: inline-block;margin-right: 10rpx;">
							<text v-if="add_form.refundTime">{{ $u.timeFormat(add_form.refundTime, 'yyyy-mm-dd') }}</text>
							<text style="color:#B8C0C8;" v-else>请选择</text>
						</view>
						<u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
					</picker>
				</u-form-item>
				<u-form-item required label="所属店铺">
					<u-input @click="goPage('/pagesT/shop/selShop')" disabled class="dis-input" v-model="add_form.shopName" placeholder="请选择" />
					<u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
				</u-form-item>
			</view>
			<view class="form-model-view">
				<u-form-item label="退款单明细">
					<view class="form-value add-btn-go" @click="addAccount">
						<u-icon name="plus" size="24"></u-icon>
						<text>新增</text>
					</view>
				</u-form-item>
				<view class="detail-ul">
					<view class="detail-li" v-for="(item, index) in add_form.accountList" :key="index">
						<view class="del-icon" @click="delAccount(index)"><u-icon name="minus-circle-fill" size="40" color="#fa3534"></u-icon></view>
						<u-form-item label="结算账户">
							<view class="in-form-item">
								<u-input @click="settlementAccount(index)" disabled v-model="item.accountName" placeholder="请选择" />
								<view class="icon-arrow-right"><u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon></view>
							</view>
						</u-form-item>
						<u-form-item label="退款金额"><input placeholder-style="color:#B8C0C8" type="digit" v-model="item.money" placeholder="请输入退款金额" /></u-form-item>
						<view class="bottom clearfix"><input placeholder-style="color:#B8C0C8" type="text" v-model="item.remark" placeholder="说点什么吧" /></view>
					</view>
				</view>
			</view>
		</u-form>
		<view class="detail-bottom"><u-button class="handel-btn" @click="submit" :loading="sub_load" :ripple="true" type="primary">提交</u-button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sub_load: false,
			add_form: {
				unitId: '',
				unitName: '',
				sourceNo: '',
				sourceNoMoney: '',
				currentAccountName: '',
				financeType: '销售退款',
				financeTypeId: 12,
				shopId: '',
				money: '',
				shopName: '',
				refundTime: '',
				createTime: '',
				accountList: [
					{
						accountId: '',
						accountNumber: '',
						accountName: '',
						money: '',
						discountMoney: '',
						finalMoney: '',
						payWay: '',
						remark: ''
					}
				]
			},
			methods_show: false,
			account_index: 0,
			customerData: '',
			account_id: '',
			shopData: '',
			AccountData: '',
			tag: ''
		};
	},
	computed: {
		userInfo() {
			return this.$store.state.userInfo;
		}
	},
	watch: {
		customerData(val) {
			if (val) {
				console.log(val);
				this.add_form.unitId = val.id;
				this.add_form.unitName = val.name;
				this.add_form.money = val.money;
				this.add_form.type = val.type;
			}
		},
		// 店铺
		shopData(val) {
			if (val) {
				this.add_form.shopName = val.name;
				this.add_form.shopId = val.id;
			}
		},
		AccountData(val) {
			if (val) {
				this.add_form.accountList[this.account_index].accountId = val.id;
				this.add_form.accountList[this.account_index].accountName = val.name;
				this.add_form.accountList[this.account_index].accountNumber = val.accountNumber;
			}
		}
	},
	onLoad(options) {
		this.add_form.refundTime = parseInt(new Date().getTime() / 1000);
	},
	methods: {
		change(e) {
			this.refundTime = new Date().getTime();
		},
		addAccount() {
			this.add_form.receiptOffsetData.push({
				collectionAmount: '',
				preferentialAmount: '',
				actualAmount: '',
				settlementMethod: '',
				remark: ''
			});
		},
		delAccount(index) {
			if (this.add_form.accountList.length === 1) {
				this.$u.toast('至少保留一条');
				return;
			}
			this.add_form.accountList.splice(index, 1);
		},
		//  添加
		submit() {
			if (!this.add_form.unitName) {
				this.$u.toast('请选择退款单位');
				return;
			}
			if (!this.add_form.shopId) {
				this.$u.toast('请选择所属店铺');
				return;
			}
			let isSub = true;
			for (let i in this.add_form.accountList) {
				let item = this.add_form.accountList[i];
				if (!item.accountName) {
					isSub = false;
					this.$u.toast('请选择结算账户');
					break;
				}
				if (!item.money) {
					isSub = false;
					this.$u.toast('请输入退款金额');
					break;
				}
			}
			if (!isSub) {
				return;
			}
			this.sub_load = true;
			this.$u.api
				.addRefund({
					...this.add_form,
					currentAccountName: this.userInfo.name
				})
				.then(res => {
					this.sub_load = false;
					this.$u.toast('新增成功');
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				})
				.catch(err => {
					this.sub_load = false;
				});
		},
		settlementAccount(index) {
			if (!this.add_form.shopId) {
				this.$u.toast('请先选择商铺');
				return;
			}
			this.goPage('/pagesT/account/selAccount?shopId=' + this.add_form.shopId);
			this.account_index = index;
		},
		bindDateChange(e) {
			this.add_form.refundTime = this.$utils.timeByTimestamp(e.detail.value + ' 00:00:00');
		}
	}
};
</script>

<style lang="scss" scoped>
.detail-ul {
	.detail-li {
		padding-left: 60rpx;
		position: relative;
		border-bottom: 1px solid #eeeeee;

		&:last-child {
			border-bottom: 0 none;
		}

		.del-icon {
			position: absolute;
			top: 36%;
			left: 0;
			transform: translateY(-50%);
		}

		.title {
			line-height: 80rpx;
		}

		.money-ul {
			border-top: 1px solid #eeeeee;
			padding: 20rpx 0;
			display: flex;

			.money-li {
				flex: 3;
				border-right: 1px solid #eeeeee;

				input {
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
				}

				&:last-child {
					border-right: 0 none;
				}
			}
		}

		.bottom {
			// border-top: 1px solid #eeeeee;

			input {
				height: 80rpx;
				line-height: 80rpx;
			}
		}
	}
}
.in-form-item {
	position: relative;
	padding-right: 30rpx;
	.icon-arrow-right {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
}
</style>