完工页面-拆分调节

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

@@ -9,38 +9,49 @@
 			mode="center"
 			width="690rpx">
 			<view class="slot-content">
-				<view class="check-status">
-					<u-image width="224rpx" height="224rpx" :src="statusImage"></u-image>
-					<text :class="['status-txt', { 'pass-color': pass }]">{{statusTxt}}</text>
-				</view>
-				<view class="check-list">
-					<view class="u-flex u-row-between list-title">
-						<view class="left-txt">验证项</view>
-						<view>已提交/需提交</view>
-						<view class="right-txt">结果</view>
+				<view v-if="confirmButtonText !== '确定'">
+					<view class="check-status">
+						<u-image width="224rpx" height="224rpx" :src="statusImage"></u-image>
+						<text :class="['status-txt', { 'pass-color': pass }]">{{statusTxt}}</text>
 					</view>
-					<view class="u-flex u-row-between list-item" 
-						v-for="(item, index) in listData" :key="index">
-						<view class="item-txt left-txt" style="width: 160rpx;text-align: left;">
-							<u-icon 
-								:name="item.pass ? passIcon : noPassIcon"
-								:label="item.label"
-								margin-left="12"
-								label-color="#333333"
-								label-size="28"
-								size="32"></u-icon>
+					<view class="check-list">
+						<view class="u-flex u-row-between list-title">
+							<view class="left-txt">验证项</view>
+							<view>已提交/需提交</view>
+							<view class="right-txt">结果</view>
 						</view>
-						<view class="item-txt">{{item.submitted}}/{{item.required}}</view>
-						<view 
-							:class="['item-txt', 'right-txt', item.pass ? 'pass-color' : 'no-pass-color']"
-							style="width: 160rpx;text-align: right;">
-							{{item.pass ? "通过" : "未通过"}}
+						<view class="u-flex u-row-between list-item" 
+							v-for="(item, index) in listData" :key="index">
+							<view class="item-txt left-txt" style="width: 200rpx;text-align: left;">
+								<u-icon 
+									:name="item.pass ? passIcon : noPassIcon"
+									:label="item.label"
+									margin-left="12"
+									label-color="#333333"
+									label-size="28"
+									size="32"></u-icon>
+							</view>
+							<view class="item-txt">{{item.submitted}}/{{item.required}}</view>
+							<view 
+								:class="['item-txt', 'right-txt', item.pass ? 'pass-color' : 'no-pass-color']"
+								style="width: 160rpx;text-align: right;">
+								{{item.pass ? "通过" : "未通过"}}
+							</view>
 						</view>
 					</view>
 				</view>
+				<view v-else>
+					<view class="check-status">
+						<text class='status-txt' style="color: #333;">确认安装结果</text>
+					</view>
+					<view class="u-flex no-install">
+						<text class="tips">提交信息，确认安装结论为不安装</text>
+					</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 class="button cancel" v-show="cancelButtonText !== ''" @tap="cancel">{{ cancelButtonText }}</view>
+					<view class="button confirm" @tap="confirm">{{ confirmButtonText }}</view>
 				</view>
 			</view>
 		</u-popup>
@@ -79,6 +90,14 @@
 						{label: '安装信息', submitted: 15, required: 20, pass: false}
 					]
 				}
+			},
+			confirmButtonText: {
+				type: String,
+				default: '确定'
+			},
+			cancelButtonText: {
+				type: String,
+				default: ''
 			}
 		},
 		data() {
@@ -104,9 +123,6 @@
 			statusTxt() {
 				return this.pass ? "完工校验已通过" : "完工校验未通过"
 			},
-			confirmText() {
-				return this.pass ? "确定" : "去处理"
-			},
 			passIcon() { return process.uniEnv.qn_base_url + 'icon/pass.png'},
 			noPassIcon() { return process.uniEnv.qn_base_url + 'icon/no-pass.png'},
 		},
@@ -115,14 +131,7 @@
 				this.$emit('close')
 			},
 			confirm() {
-				if(this.pass) {
-					this.$emit('change')
-				} else {
-					let data = this.listData.find((item, index) => {
-					    return item.pass == false;
-					})
-					this.$emit('handle', data)
-				}
+				this.$emit('confirm')
 			}
 			
 		},
@@ -161,6 +170,15 @@
 			margin-bottom: 40rpx;
 		}
 	}
+	.no-install {
+		justify-content: center;
+    align-items: center;
+    height: 200rpx;
+    border-top: 2rpx solid #F4F5F7;
+		.tips {
+			font-size: 28rpx;
+		}
+	}
 	.check-bottom {
 		display: flex;
 		justify-content: center;
@@ -194,7 +212,7 @@
 	line-height: 32rpx;
 }
 .left-txt {
-	width: 160rpx;
+	width: 200rpx;
 	text-align: left;
 }
 .right-txt {

src/components/createCom/XhInput.vue

@@ -3,6 +3,9 @@
 	<view :style="{'width': fieldsWidth}">
 		<u-input :type="type" class="input-item" v-model="dataValue" @input="valueChange" :placeholder="placeholder" :placeholder-style="placeholderStyle"
 		:custom-style="customStyle" :clearable="false" :border="border" border-color="#ECECEC" :maxlength="maxlength" :cursor-spacing="10" hold-keyboard/>
+		<view class="content" v-if="slotContent">
+			<text class="txt">{{ slotContent }}</text>
+		</view>
 	</view>
 </template>
 
@@ -26,6 +29,10 @@
 			type: {
 				type: String,
 				default: 'text'
+			},
+			slotContent: {
+				type: String,
+				default: ''
 			}
 			// width: { // 例如：454rpx
 			// 	type: String,
@@ -97,8 +104,16 @@
 	}
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 	.input-item{
 		background: #F4F5F7;
 	}
+	.content {
+		padding-top: 20rpx;
+		line-height: 45rpx;
+		.txt {
+			font-size: 24rpx;
+    	color: #999;
+		}
+	}
 </style>