jsh_erp_app/components/error-pop/error-pop.vue

<template>
	<view>
		<u-popup :show="errorShow" :closeOnClickOverlay="false" :safeAreaInsetBottom="false" @close="closeClick" mode="center" :round="10">
			<view class="error-box">
				<view class="flex_box flex_row_center">
					<u-image src="@/static/image/error-img.png" width="112rpx" height="112rpx"></u-image>
				</view>
				<view :class="['tips-value',{'is-center': isCenter}]">
					<view class="">
						{{content}}
					</view>
					<view class="tips-value-extra" v-if="extraText">
						{{extraText}}
					</view>
				</view>
				<view class="btn-box">
					<u-button class="no-btn" type="primary" :plain="true" :text="cancelBtnText" @click="closeClick"></u-button>
					<u-button class="yes-btn" type="primary" :text="confirmBtnText" @click="confirmClick"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		props:{
			value:{
				type:Boolean,
				default:false
			},
			content: {
				type:String,
				default:''
			},
			extraText: {
				type:String,
				default:''
			},
			cancelBtnText: {
			    type:String,
				default:'否'
			},
			confirmBtnText: {
			    type:String,
				default:'是'
			},
			isCenter: {
				type:Boolean,
				default:false
			}
		},
		watch:{
			value: {
				handler(val) {
					this.errorShow = val
				},
				immediate:true
			}
		},
		data() {
			return {
				errorShow:false
			}
		},
		methods:{
			closeClick() {
				this.$emit('close')
			},
			confirmClick() {
				this.$emit('confirm')
			}
		}
	}
</script>

<style lang="scss" scoped>
.error-box {
	width: 580rpx;
	padding: 48rpx 36rpx 48rpx;
	.tips-value {
		color: #1D212A;
		font-family: "PingFang SC";
		font-size: 32rpx;
		font-style: normal;
		font-weight: bold;
		margin-top: 32rpx;

		&.is-center{
			text-align: center;
		}
		
		&-extra{
			font-weight: 400;
			font-size: 28rpx;
			color: rgba(153, 153, 153, 1);
		}
	}
	.btn-box {
		display: flex;
		justify-content: space-between;
		margin-top: 60rpx;
		.no-btn {
			width: 244rpx;
			border-radius: 16rpx;
			border: 1px solid #BFC8DB;
			color: #86909C;
			font-size: 32rpx;
		}
		.yes-btn {
			width: 244rpx;
			border-radius: 16rpx;
			background: #0256FF;
			font-size: 32rpx;
		}
	}
}
</style>