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>
			</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 { 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'
		},
		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>