complete-check.vue

<!-- 完工校验弹窗 -->
<template>
	<view>
		<u-popup 
			v-model="open"
			:mask-close-able="false"
			border-radius="12"
			ref="checkPopup"
			mode="center"
			width="690rpx">
			<view class="slot-content">
				<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="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="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="cancelButtonText !== ''" @tap="cancel">{{ cancelButtonText }}</view>
					<view class="button confirm" @tap="confirm">{{ confirmButtonText }}</view>
				</view>
			</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: false
			},
			pass: {
				type: Boolean,
				default: false
			},
			listData: {
				type: Array,
				default(){
					return [
						{label: '基本信息', submitted: 3, required: 3, pass: true},
						{label: '勘察信息', submitted: 20, required: 20, pass: true},
						{label: '安装信息', submitted: 15, required: 20, pass: false}
					]
				}
			},
			confirmButtonText: {
				type: String,
				default: '确定'
			},
			cancelButtonText: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				open: this.show
			};
		},
		watch: {
			// 如果是异步关闭时，外部修改v-model的值为false时，重置内部的loading状态
			// 避免下次打开的时候，状态混乱
			show(n) {
				this.open = n
			}
		},
		computed: {
			statusImage() {
				if(this.pass) {
					return process.uniEnv.qn_base_url + 'successful.png'
				} else {
					return process.uniEnv.qn_base_url + 'failure.png'
				}
			},
			statusTxt() {
				return this.pass ? "完工校验已通过" : "完工校验未通过"
			},
			passIcon() { return process.uniEnv.qn_base_url + 'icon/pass.png'},
			noPassIcon() { return process.uniEnv.qn_base_url + 'icon/no-pass.png'},
		},
		methods: {
			cancel() {
				this.$emit('close')
			},
			confirm() {
				this.$emit('confirm')
			}
			
		},
	}
</script>

<style lang="scss">
.slot-content {
	padding: 40rpx 30rpx 0rpx 30rpx;
	.check-status {
		margin-bottom: 50rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.status-txt {
			height: 46rpx;
			font-size: 40rpx;
			font-weight: bold;
			color: #FA5A49;
			line-height: 46rpx;
		}
	}
	.check-list {
		padding-top: 40rpx;
		border-top: 2rpx solid #F4F5F7;
		.list-title {
			height: 28rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			line-height: 28rpx;
			margin-bottom: 42rpx;
		}
		.list-item {
			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;
		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;
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
	line-height: 32rpx;
}
.left-txt {
	width: 200rpx;
	text-align: left;
}
.right-txt {
	width: 160rpx;
	text-align: right;
}
.pass-color {
	color: #2272FF !important;
}
.no-pass-color {
	color: #FA5A49 !important;;
}
</style>