cashier_app/pageCreditBuyer/addDebtor.vue

<template>
	<view class="content">
		<up-form labelPosition="top" labelWidth="120" required :model="pageData.formData" :rules="pageData.rules"
			ref="uFormRef">
			<view class="card">
				<up-form-item label="挂账人" prop="debtor" borderBottom="true">
					<up-input v-model="pageData.formData.debtor" placeholder="请输入挂账人" border="none"></up-input>
				</up-form-item>
				<up-form-item label="手机号" prop="mobile" borderBottom="true">
					<up-input v-model="pageData.formData.mobile" type="number" maxlength="11" placeholder="请输入手机号"
						border="none"></up-input>
				</up-form-item>
				<up-form-item label="职务" prop="position" borderBottom="true">
					<up-input v-model="pageData.formData.position" placeholder="请输入职务" border="none"></up-input>
				</up-form-item>
				<up-form-item label="挂账额度" prop="creditAmount" borderBottom="true">
					<up-input v-model="pageData.formData.creditAmount" type="number" placeholder="请输入挂账额度"
						border="none"></up-input>
				</up-form-item>
				<up-form-item label="还款方式" borderBottom="true">
					<view class="item-column">
						<up-radio-group v-model="pageData.formData.repaymentMethod" :disabled="pageData.formData.id"
							placement="row">
							<up-radio :customStyle="{marginRight: '30px'}"
								v-for="(item, index) in pageData.repaymentMethodList" :key="index" :label="item.label"
								:name="item.value" @change="radioChange"></up-radio>
						</up-radio-group>
						<view class="tishi">一经创建无法更改还款方式</view>
					</view>

				</up-form-item>
				<up-form-item label="还款提醒日" prop="creditAmount" borderBottom="true">
					<numberBoxVue :min="1" :max="28" v-model="pageData.formData.expireRemindDay"></numberBoxVue>
				</up-form-item>
				<up-form-item label-width="auto" label="还款提醒,(提醒多久以前的数据,单位：月)" prop="creditAmount" borderBottom="true">
					<numberBoxVue :min="1" v-model="pageData.formData.expireRemind"></numberBoxVue>
				</up-form-item>
			</view>
			<view class="card">
				<up-form-item label="是否启用" labelPosition="left">
					<view style="width: 100%;display: flex;justify-content: flex-end;">
						<up-switch v-model="pageData.formData.status" @change="change" :activeValue="1"
							:inactiveValue="0"></up-switch>
					</view>
				</up-form-item>

			</view>
		</up-form>

		<view class="bottomPop">
			<button class="save" @click="save">保存</button>
			<view class="cancel" @click="cancel">取消</view>
		</view>

	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import go from '@/commons/utils/go.js'
	import numberBoxVue from './components/number-box.vue'
	import {
		addCreditBuyer,
		editCreditBuyer
	} from '@/http/api/buyer.js';

	const pageData = reactive({
		id: null,
		title: "",
		repaymentMethodList: [{
				label: '按总金额还款',
				value: 'total'
			},
			{
				label: '按订单还款',
				value: 'order'
			}
		],
		formData: {
			id: null,
			status: 0,
			debtor: '',
			mobile: '',
			position: '',
			creditAmount: '',
			repaymentMethod: 'total',
			expireRemindDay: '',
			expireRemind: ''
		},
		rules: {
			'debtor': {
				type: 'string',
				required: true,
				message: '请输入挂账人',
				trigger: ['blur'],
			},
			'mobile': {
				type: 'string',
				required: true,
				message: '请输入手机号',
				trigger: ['blur'],
			},
			// 'position': {
			// 	type: 'string',
			// 	required: true,
			// 	message: '请输入职务',
			// 	trigger: ['blur'],
			// },
			'creditAmount': {
				type: 'number',
				required: true,
				message: '请输入挂账额度',
				trigger: ['blur'],
			},
		},
	})
	// 表单引用  
	const uFormRef = ref(null);

	onLoad((options) => {
		console.log(options)
		if (options.item) {
			pageData.formData = JSON.parse(options.item);
			console.log(pageData.formData)
		}
	})

	/**
	 * 保存
	 */

	let save = uni.$utils.debounce(() => {
		console.log(pageData.formData)
		uFormRef.value.validate().then(valid => {
			if (valid) {
				let params = {
					...pageData.formData
				}
				if (!pageData.formData.id) {
					addCreditBuyer(params).then((res) => {
						go.back(1)
					})
				} else {
					editCreditBuyer(params).then((res) => {
						go.back(1)
					})
				}

			}
		}).catch(() => {
			// 处理验证错误  
		});

	}, 1000)

	let cancel = () => {
		go.back(1)
	}
</script>
<style>
	page {
		background: #F9F9F9;
	}
</style>
<style lang="scss">
	.content {
		background: #F9F9F9;
		padding: 32rpx 28rpx 150rpx 28rpx;

		.card {
			padding: 32rpx 24rpx;
			background-color: #fff;
			margin-bottom: 32rpx;

			.item-column {
				display: flex;
				flex-direction: column;
			}

			.tishi {
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				margin-top: 16rpx;
				font-size: 24rpx;
			}
		}

		.bottomPop {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			>button {
				width: 530rpx;
				height: 80rpx;
				line-height: 80rpx;
				margin: 0 auto;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				border-radius: 56rpx 56rpx 56rpx 56rpx;
			}

			.save {
				color: #fff;
				background: #318AFE;
			}

			.cancel {
				height: 80rpx;
				line-height: 80rpx;
				font-weight: 400;
				color: #999999;
			}
		}
	}
</style>