dingdong-master/pages/order-manage/modal/insurance-retinue.vue

<template>
	<view>
		<!-- 模态框 -->
		<view class="cu-modal" :class="show?'show':''">
			<view class="cu-dialog">
				<view class="padding-xl" style="text-align: left;" v-if="data.orderDetailId">
					<view class="text-bold text-lg margin-bottom-sm">本订单属全程保险保障订单</view>
					<view class="text-red" style="padding-bottom: 10rpx;">本单所有同行人员 (师傅/徒弟/随行)，未在系统有账号的接单人员均需填写保险承保信息!
					</view>

					<view class="oneStaff solid-top" v-for="item in showList" :key="item.phone">
						<view class="oneLine">
							<view>
								<text>同行人员姓名:</text>
								<view style="margin-top: 10rpx">
									{{item.name}}
								</view>
							</view>
							<view>
								<text>同行人员联系号码:</text>
								<view style="margin-top: 10rpx">
									{{item.phone}}
								</view>
							</view>
						</view>
						<view style="padding-top: 10rpx;">
							<text>身份证号码:</text>
							<view style="margin-top: 10rpx">
								{{item.idCardNum}}
							</view>
						</view>
						<view class="tag">保险已生效</view>
					</view>

					<view class="oneStaff solid-top">
						<view class="oneLine">
							<view>
								<text>同行人员姓名:</text>
								<view style="margin-top: 10rpx">
									<input class="radius-input inline-input" type="text" placeholder="输入真实姓名"
										v-model="oneData.name">
								</view>
							</view>
							<view>
								<text>同行人员联系号码:</text>
								<view style="margin-top: 10rpx">
									<input class="radius-input inline-input" type="text" placeholder="必须本人号码"
										v-model="oneData.phone">
								</view>
							</view>
						</view>
						<view style="padding-top: 10rpx;">
							<text>身份证号码:</text>
							<view style="margin-top: 10rpx">
								<input class="radius-input inline-input" type="text" placeholder="请输入身份证号码并反复确认无误"
									v-model="oneData.idCardNum">
							</view>
						</view>
					</view>
					<view style="text-align: center;padding: 10rpx 0;">
						<text class="text-main-color" @click="submitAdd">添加同行人员+</text>
					</view>
					<view style="padding-top: 20rpx;">
						<checkbox style="transform:scale(0.6)" class="main-color" :checked="true" disabled>
						</checkbox>
						<text class="margin-left-xs">
							<text class="text-red">未录入者/与订单无关者，一律不得上门。根据法律法规以上资料必须实真有效且无误方能被保险承保。</text>
						</text>
					</view>
				</view>

				<view class="padding-xl" style="text-align: left;" v-else>
					<view class="text-bold text-lg margin-bottom-sm">本订单属全程保险保障订单</view>
					<view>本订单指定全程保险，但凡有随行人员均需录入增员信息，以纳入保险承保。排单后请在“待上门”或“进行中”状态点“保险增员”按键操作；订单指派下级人员的，下级接单人员亦可同样操作。</view>
				</view>
				<view class="cu-bar bg-white solid-top">
					<view class="action margin-0 flex-sub text-main-color"
						data-modal="showAcceptOrderNoticeModal" @click="hideModal">退出页面</view>
					<!-- <view v-else class="action margin-0 flex-sub text-main-color"
						data-modal="showAcceptOrderNoticeModal" @click="hideModal">我已知晓</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import validRule from '@/common/js/validate.js'
	export default {
		name: 'acceptOrderNotice',
		emits: ['close'],
		props: {
			show: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				oneData: {
					name: "",
					phone: "",
					idCardNum: ""
				},
				showList: []
			}
		},
		methods: {
			hideModal() {
				this.$emit('close');
			},
			async initData() {
				let res = await this.$request.insuranceUserList({
					orderDetailId: this.data.orderDetailId
				})
				this.showList = res.rows
			},
			async submitAdd() {
				if (!this.oneData.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!validRule.validPhone(this.oneData.phone)) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!validRule.validIdCard(this.oneData.idCardNum)) {
					uni.showToast({
						title: '请输入正确的身份证号码',
						icon: 'none',
						duration: 2000
					})
					return
				}
				uni.showToast({
				        title: '保险生成中，可能需要几秒或最多三分钟，请等待！', // 要显示的文字
				        icon: 'none',   // 设置图标为'none'，只显示文字
				        duration: 10 * 60 * 1000,
				    });
					// 510121198705063377
				const res = await this.$request.insuranceUserAdd({
					...this.oneData,
					orderDetailId: this.data.orderDetailId
				})
				if (res.code === 0) {
					uni.showToast({
						title: '增员完毕，保险已生效',
						icon: 'none',
						duration: 2000
					})
					this.initData()
					this.oneData = {
						name: "",
						phone: "",
						idCardNum: ""
					}
				}
			}
		}
	}
</script>

<style scoped>
	.oneStaff {
		padding: 20rpx 0;
		position: relative;
	}
	
	.oneStaff .tag {
		position: absolute;
		right: 0;
		bottom: 20rpx;
		color: #0081ff;
	}

	.oneLine {
		display: flex;
		flex-direction: row;
		gap: 10px;
	}

	.oneLine>view {
		flex: 1;
	}

	.oneLine text {
		padding-bottom: 10rpx;
	}
</style>