xc/components/alertPop/alertPop.vue

<template>
	<uni-popup :ref="popid" type="center" @close="$emit('close')">
		<view class="pop-box" :class="{popupBox1:type==1,popupBox2:type==2}">
			<view class="tit">
				{{title}}
			</view>
			<view class="content">
			<slot />
			</view>
			<view v-if="buttomShow" class="btn" @click="confrim()">
				<view class="flex-center">
					<image v-if="icon" class="alertIcon" :src="icon" mode="widthFix"></image>
					<view class="title">
						{{btntitle}}		
					</view>
				</view>
			</view>
			<image src="@/static/user/close.png" mode="" class="close" @click="close()"></image>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		props: {
			buttomShow:{
				type: Boolean,
				default: true
			},
			icon:{
				type: String,
				default: ""
			},
			show:{
				type: Boolean,
				default: false
			},
			btntitle:{
				type: String,
				default: "確定"
			},
			title:{
				type: String,
				default: ""
			},
			popid: {
				type: String,
				default: "pop"
			},
			type: {
				type: Number,
				default: 2
			}
		},
		watch: {
			show(newValue, oldValue) {
				if(newValue){
					this.open()
				}else{
					this.close();
				}
			}
		},
		data() {
			return {

			};
		},
		onLoad(options) {

		},
		onShow() {},
		methods: {
			confrim(){
				this.$emit("confrim")
			},
			open() {
				this.$refs[this.popid].open()
			},
			close() {
				this.$emit('close')
				this.$refs[this.popid].close()
			}
		}
	};
</script>

<style lang="scss" scoped>
	.pop-box {
		width: 633rpx;
		background-size: 100% 100%;
		position: relative;
		.content{
			min-height: 500rpx;
		}
		.tit {
			font-weight: bold;
			font-size: 44rpx;
			color: #222222;
			text-align: center;
			padding-top: 10rpx;
			letter-spacing: 10rpx;
		}

		.close {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: -110rpx;
			margin: auto;
		}

		.btn {
			line-height: 77rpx;
			background: linear-gradient(268deg, rgba(113, 87, 185, 0.99), #8667C3, #7258B9);
			border-radius: 10rpx;
			text-align: center;
			font-weight: bold;
			font-size: 35rpx;
			color: #FFFFFF;
			position: absolute;
			bottom: 90rpx;
			left: 100rpx;
			right: 100rpx;
		}
	}

	.popupBox1 {
		height: 1076rpx;
		background-image: url('@/static/user/b-tc.png');
	}

	.popupBox2 {
		height: 823rpx;
		background-image: url('@/static/user/lm/tc-vip.png');

	}
</style>