BiKing/components/unopen/unopen.vue

<template>
	<uni-popup ref="popupRef">

		<view class="unopen-box">
			<view class="unopen-title">
				{{ title }}
			</view>
			<view class="unopen-content">
				<view class="content" :style="{'text-align': textAlign}">
					{{ content }}
				</view>

				<view class="unopen-btns">
					<view v-if="cancelBtn" class="unopen-btn cancel-btn" @click.stop="close()">
						{{ cancelBtnTetx }}
					</view>
					<view class="unopen-btn" @click.stop="confirm()">
						{{ confirmBtnTetx }}
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: "unopen",
		props: {
			title: {
				type: String,
				default: '提示'
			},
			cancelBtn: {
				type: Boolean,
				default: false
			},
			cancelBtnTetx: {
				type: String,
				default: '取消'
			},
			confirmBtnTetx: {
				type: String,
				default: '确定'
			},
			textAlign: {
				type: String,
				default: 'center'
			},
			content: {
				type: String,
				default: '暂未开放'
			}
		},
		data() {
			return {
				dataVal:null
			};
		},
		mounted() {
			// this.$refs.popupRef.open()
		},
		methods: {
			open(val) {
				this.dataVal = val
				this.$nextTick(() => {
					this.$refs.popupRef.open();
				})
			},
			close() {
				this.$refs.popupRef.close()
			},
			confirm() {
				this.close();
				this.$emit('confirm' , this.dataVal)
			}

		}
	}
</script>

<style lang="scss" scoped>
	.unopen-box {
		width: 520rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		.unopen-title {
			height: 90rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #1a1a1a;
			line-height: 90rpx;
			letter-spacing: 0.64rpx;
			border-bottom: 1rpx solid $border-color4;
		}

		.unopen-content {
			padding: 0 36rpx;
			min-height: 140rpx;

			.content {
				padding: 30rpx 0 50rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #1a1a1a;

				// display: flex;
				// justify-content: center;
				// align-items: center;
			}
		}

		.unopen-btns {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: stretch;

			.unopen-btn {
				flex: 1;
				height: 70rpx;
				line-height: 70rpx;
				background-color: $Theme-Color;
				margin-bottom: 40rpx;
				color: #fff;
				text-align: center;
				font-size: 30rpx;
				letter-spacing: 1px;
				border-radius: 6rpx;
			}

			.cancel-btn {
				margin-right: 40rpx;
				border: 1rpx solid $Theme-Color;
				background-color: #fff;
				color: $Theme-Color;
			}
		}


	}
</style>