uniapp-shunfengche/my/classes/adddetailsList.vue

<template>
	<view class="container">
		<view class=" padding" >
			<view class="title">乘客类型</view>
			<view style="display: flex; margin-top: 20rpx;">
				<view :class="{ selected: falong === 1, }" @click="tablist(1)" style="border: 1px solid #ccc; padding: 10rpx 15rpx; background: #fff; margin-left: 20rpx; border-radius: 10rpx;">
					成人
				</view>
				<view :class="{ selected: falong === 2, }" @click="tablist(2)" style="border: 1px solid #ccc; padding: 10rpx 15rpx; background: #fff; margin-left: 20rpx; border-radius: 10rpx;">
					儿童
				</view>
			</view>
		</view>
		<view class="padding" >
			<view class="title">乘客姓名</view>
			<view style="margin-top: 20rpx;">
				<input class="uni-input" v-model="name" style="width: 90%;" placeholder="请输入乘客姓名" />
			</view>
		</view>
		<view class=" padding" v-if="falong === 1" >
			<view class="title">乘客身份证</view>
			<view style="margin-top: 20rpx;">
				<input class="uni-input" v-model="idCard" style="width: 90%;" placeholder="请输入乘客身份证号码" />
			</view>
		</view>
		<view class=" padding" v-if="falong === 2" >
			<view class="title">温馨提示</view>
			<view style="margin-top: 20rpx; font-size: 23rpx; color: #999;">
				儿童需要全价购票，暂时不支持半价票或免票，必须有一名成人跟随
			</view>
		</view>
		
		<view class="footer">
			<button class="submit-btn" @tap="insertsubmit()">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				falong: 1,
				name: '',
				idCard: '',
				isEdit: false,
				id: null,
			}
		},
		onLoad(options) {
		  this.mode = options.type;
		  
		    if (this.mode === 'edit' && options.data) {
		      try {
		        const detail = JSON.parse(decodeURIComponent(options.data));
		        this.editId = detail.id;
		        this.name = detail.name;
		        this.idCard = '';
		        this.falong = detail.type;
		      } catch (e) {
		        console.error('解析传参失败', e);
		      }
			}
		},
		methods: {
			tablist(valie) {
				this.falong = valie
			},
			validateIdCard(idCard) {
			    const reg =
			      /(^\d{15}$)|(^\d{17}([0-9Xx])$)/;
			    return reg.test(idCard);
			},
			insertsubmit() {
			  if (!this.name.trim()) {
			    uni.showToast({
			      title: '请填写乘客姓名',
			      icon: 'none'
			    });
			    return;
			  }
			
			  if (this.falong === 1) {
			    // 成人：校验身份证
			    if (!this.idCard.trim()) {
			      uni.showToast({
			        title: '请填写身份证号',
			        icon: 'none'
			      });
			      return;
			    }
			    if (!this.validateIdCard(this.idCard)) {
			      uni.showToast({
			        title: '身份证格式不正确',
			        icon: 'none'
			      });
			      return;
			    }
			  }
			
			  const data = {
			    name: this.name,
			    idCard: this.falong === 1 ? this.idCard : '',
			    type: this.falong,
			  }
			
		   // 如果是编辑模式，加上 id 字段，并改为调用更新接口
			const api = this.isEdit ? '/app/passenger/update' : '/app/passenger/insert';
			if (this.isEdit) {
				data.id = this.id;
			}
		  
			this.$Request.postT(api, data).then(res => {
			  if (res.code === 0) {
					uni.showToast({ title: '操作成功' });
					uni.$emit('refreshPassengerList'); // 通知列表页刷新
					uni.navigateBack();
			  } else {
					uni.showModal({ showCancel: false, title: '操作失败', content: res.msg });
			  }
			});
			}
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		/* padding: 0 30rpx; */
		/* background: #fff; */
	}
	.title {
		font-size: 33rpx;
		font-family: PingFang SC;
		color: #333333;
	}
	.selected {
		background: #f76801 !important;
		color: #fff !important;
		border: #f76801 1rpx solid !important;
	}
	
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx 30rpx;
		box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.submit-btn {
		background: #fe6b01;
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
</style>