Pārlūkot izejas kodu

新增大的提示弹窗

tanxue 6 mēneši atpakaļ
vecāks
revīzija
b76e6664cd

+ 8 - 1
common/styles/global/components.scss

@@ -169,6 +169,13 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 .tip-middle-dialog{
 	.tip-content-box{
 		width: 625rpx;height: 423rpx;padding: 42rpx 48rpx;
-		background-image: url("@/static/images/common/tip-middle-bj1.png");
+		background-image: url("@/static/images/common/tip-middle-bj.png");
 	}
+}
+.tip-big-dialog{
+	.tip-content-box{
+		width: 625rpx;height: 519rpx;padding: 42rpx 48rpx;
+		background-image: url("@/static/images/common/tip-big-bj.png");
+	}
+	.tip-content{min-height: 240rpx;text-align: justify;}
 }

+ 52 - 0
components/dialog/tipBigDialog.vue

@@ -0,0 +1,52 @@
+<!-- 大弹窗 三~四行文字 -->
+<template>
+	<uni-popup ref="tipBigPopup" :animation="false" :is-mask-click="false"
+	 mask-background-color="rgba(255, 255, 255, 0.6);">
+	 <view class="ezy-tip-dialog tip-big-dialog">
+		<view class="tip-content-box">
+			<view class="tip-title">{{title}}</view>
+			<view class="tip-content">{{content}}</view>
+			<view class="tip-btn-box">
+				<view class="not-confirm-btn" @click="handleClose"></view>
+				<view class="confirm-btn" @click="confirmBtn"></view>
+			</view>
+		</view>
+	 </view>
+	</uni-popup>
+</template>
+
+<script setup>
+	import { ref } from 'vue';
+	const props = defineProps({
+	  title: {
+	    type: String,
+	    default: '提示'
+	  },
+	  content: {
+	    type: String,
+		require: true,
+	    default: ''
+	  },
+	});
+	const tipBigPopup = ref(null); // 索引
+	const $emit = defineEmits(['confirm-btn'])
+	// 打开弹窗
+	function handleShow() {
+		tipBigPopup.value.open();
+	}
+	// 取消
+	function handleClose() {
+		tipBigPopup.value.close();
+	}
+	// 确认
+	function confirmBtn(){
+		$emit('confirm-btn');
+		tipBigPopup.value.close();
+	}
+	defineExpose({
+			handleShow
+		})
+</script>
+
+<style>
+</style>

BIN
static/images/common/tip-big-bj.png


+ 0 - 0
static/images/common/tip-middle-bj1.png → static/images/common/tip-middle-bj.png