LocalLivingServicesUniapp/pages/order/components/receiveOrder.vue

<template>
	<view class="container">
		<!-- 触发按钮（实际使用时可以去掉） -->

		<!-- 接单成功弹窗 -->
		<view class="popup">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">接单成功</text>
				</view>

				<view class="modal-body">
					<text class="tip-text">特别提示：</text>
					<text class="tip-content" v-if="titleCheckType<20">请在接车时，车辆检测时，检测结束后分别拍照留存，完成服务时上传</text>
					<text class="tip-content" v-if="titleCheckType>20">1.请在到达现场后拍摄至少3张现场照片，照片中需明确包含救援车辆以及车牌照，并上传；</text>
					<text class="tip-content" v-if="titleCheckType>20">2.服务过程中拍摄服务照片（含救援车辆的现场照片一张，救援过程中含救援人员的服务照片一张,需送达指定地点时，到达送达地点时照片一张），完成服务时上传。</text>



				</view>

				<view class="modal-footer">
					<button class="confirm-btn" @click="confirm">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'receive',
		props:{
			titleCheckType:{
				type:String,
				default:''
			}
		},
		data() {
			return {}
		},
		methods: {
			confirm() {
				// 这里可以添加确定后的逻辑

				this.$emit('cut')
			}
		},
		mounted() {
			console.log(this.titleCheckType)
		}
	}
</script>

<style lang="scss" scoped>
	/* 整体容器样式 */
	.container {
		padding: 20px;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.7);
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;
	}

	/* 弹窗内容样式 */
	.modal-content {
		width: 80vw;
		background-color: #fff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	/* 弹窗头部样式 */
	.modal-header {
		padding: 20px 15px 10px;
		text-align: center;
		border-bottom: 1px solid #f5f5f5;
	}

	.modal-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	/* 弹窗主体内容样式 */
	.modal-body {
		padding: 20px 15px;
	}

	.tip-text {
		font-size: 15px;
		font-weight: bold;
		display: block;
		margin-bottom: 8px;
	}

	.tip-content {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}

	/* 弹窗底部样式 */
	.modal-footer {
		padding: 10px 15px 20px;
		display: flex;
		justify-content: center;
	}

	.confirm-btn {
		width: 522rpx;
		height: 68rpx;
		background: #449AFF;
		border-radius: 66rpx;
		color: #fff;
		font-size: 28rpx;
		border: none;
	}

	.confirm-btn:active {
		background-color: #3a8ee6;
	}
</style>