组件调整

src/components/complete-check/complete-check.vue

 <!-- 完工校验弹窗 -->
 <template>
-	<view class="check-wrap">
-		<u-modal 
-			v-model="show"
+	<view>
+		<u-popup 
+			v-model="open"
+			:mask-close-able="false"
 			border-radius="12"
-			width="690"
-			:cancel-style="{
-				'margin': '36rpx 15rpx 52rpx 30rpx',
-				'height': '104rpx',
-				'border-radius': '52rpx',
-				'border': '2px solid #2272FF',
-				'font-size': '32rpx',
-				'font-weight': '600',
-				'color': '#2272FF',
-			}"
-			:confirm-style="{
-				'margin': '36rpx 30rpx 52rpx 15rpx',
-				'height': '104rpx',
-				'border-radius': '52rpx',
-				'background': '#2272FF',
-				'font-size': '32rpx',
-				'font-weight': '600',
-				'color': '#FFFFFF',
-			}"
-			:confirm-text="confirmText"
-			@cancel="cancel"
-			@confirm="confirm" ref="checkModel"
-			:show-cancel-button="true"
-			:show-title="false">
+			ref="checkPopup"
+			mode="center"
+			width="690rpx">
 			<view class="slot-content">
 				<view class="check-status">
 					<u-image width="224rpx" height="224rpx" :src="statusImage"></u-image>
@@ -56,18 +36,33 @@
 						</view>
 					</view>
 				</view>
+				<view class="check-bottom">
+					<view class="button cancel" v-show="!pass" @tap="cancel">取消</view>
+					<view class="button confirm" @tap="confirm">{{confirmText}}</view>
 				</view>
-		</u-modal>
+			</view>
+		</u-popup>
 	</view>
 </template>
 
 <script>
+	/**
+	 * modal 完工校验模态框
+	 * @description 完工校验模态框，用于完工信息检查和提醒
+	 * @property {Boolean} show 是否显示模态框
+	 * @property {Boolean} pass 是否通过校验
+	 * @property {Array} listData 完工信息项
+	 * @event {Function} close 取消按钮被点击
+	 * @event {Function} handle 去处理按钮被点击
+	 * @event {Function} confirm 确认按钮被点击
+	 * @example <u-modal :src="title" :content="content"></u-modal>
+	 */
 	export default {
 		name:"complete-check",
 		props: {
 			show: {
 				type: Boolean,
-				default: true
+				default: false
 			},
 			pass: {
 				type: Boolean,
@@ -86,8 +81,16 @@
 		},
 		data() {
 			return {
+				open: this.show
 			};
 		},
+		watch: {
+			// 如果是异步关闭时，外部修改v-model的值为false时，重置内部的loading状态
+			// 避免下次打开的时候，状态混乱
+			show(n) {
+				this.open = n
+			}
+		},
 		computed: {
 			statusImage() {
 				if(this.pass) {
@@ -111,14 +114,12 @@
 			},
 			confirm() {
 				if(this.pass) {
-					uni.navigateTo({
-						url: "pages/order/index"
-					})
+					this.$emit('confirm')
 				} else {
 					let data = this.listData.find((item, index) => {
 					    return item.pass == false;
 					})
-					this.$emit('handle-problem', data)
+					this.$emit('handle', data)
 				}
 			}
 			
@@ -158,6 +159,30 @@
 			margin-bottom: 40rpx;
 		}
 	}
+	.check-bottom {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		.button {
+			text-align: center;
+			height: 104rpx;
+			width: 300rpx;
+			border-radius: 52rpx;
+			font-size: 32rpx;
+			font-weight: 600;
+			line-height: 104rpx;
+		}
+		.cancel {
+			margin: 36rpx 15rpx 52rpx 30rpx;
+			border: 2px solid #2272FF;
+			color: #2272FF;
+		}
+		.confirm {
+			margin: 36rpx 30rpx 52rpx 15rpx;
+			background: #2272FF;
+			color: #FFFFFF;
+		}
+	}
 }
 .item-txt {
 	height: 32rpx;
@@ -172,9 +197,4 @@
 .no-pass-color {
 	color: #FA5A49 !important;;
 }
-
-.u-border-top {
-  position: unset;
-}
-
 </style>