Pārlūkot izejas kodu

公共提示弹窗组件

tanxue 5 mēneši atpakaļ
vecāks
revīzija
f97395a20d

+ 32 - 0
common/styles/global/components.scss

@@ -140,3 +140,35 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
     background-color: rgb(248, 248, 248);color: rgb(0, 0, 0);box-sizing: border-box;
 	display: flex;align-items: center;justify-content: center;overflow: hidden;z-index: 998;
   }
+
+// 小的提示弹窗
+.ezy-tip-dialog{
+	.tip-content-box{@include ezy-no-repeat-cover;box-sizing: border-box;text-align:center;}
+	.tip-title{
+		color: #343434;font-size: 38rpx;margin-bottom: 24rpx;
+	}
+	.tip-content{
+		color: #666;font-size: 32rpx;padding-bottom: 42rpx;
+		border-bottom: 1px dashed #70cbf4;line-height: 1.6;
+	}
+	.tip-btn-box{
+		width: 100%;display: flex;justify-content: space-between;
+		.not-confirm-btn,.confirm-btn{
+			width: 208rpx;height: 83rpx;@include ezy-no-repeat-cover;margin: 30rpx 32rpx 0;
+		}
+		.not-confirm-btn{background-image: url("@/static/images/common/tip-cancel-btn.png");}
+		.confirm-btn{background-image: url("@/static/images/common/tip-confirm-btn.png");}
+	}
+}
+.tip-small-dialog{
+	.tip-content-box{
+		width: 625rpx;height: 365rpx;padding: 42rpx 48rpx;
+		background-image: url("@/static/images/common/tip-small-bj.png");
+	}
+}
+.tip-middle-dialog{
+	.tip-content-box{
+		width: 625rpx;height: 423rpx;padding: 42rpx 48rpx;
+		background-image: url("@/static/images/common/tip-middle-bj1.png");
+	}
+}

+ 0 - 23
common/styles/global/pages.scss

@@ -615,29 +615,6 @@
 	@include ezy-no-repeat-cover;background-image: url("@/static/images/my/my-page-img.png");
 }
 
-// 退出弹窗
-.exit-dialog{
-	.exit-content-box{
-		width: 625rpx;height: 365rpx;box-sizing: border-box;padding: 42rpx 48rpx;text-align:center;
-		@include ezy-no-repeat-cover;background-image: url("@/static/images/my/my-exit-bj.png");
-	}
-	.exit-title{
-		color: #343434;font-size: 38rpx;margin-bottom: 24rpx;
-	}
-	.exit-two-title{
-		color: #666;font-size: 32rpx;padding-bottom: 42rpx;
-		border-bottom: 1px dashed #70cbf4;
-	}
-	.exit-btn-box{
-		width: 100%;display: flex;justify-content: space-between;
-		.not-confirm-btn,.confirm-btn{
-			width: 208rpx;height: 83rpx;@include ezy-no-repeat-cover;margin: 30rpx 32rpx 0;
-		}
-		.not-confirm-btn{background-image: url("@/static/images/my/exit-cancel-btn.png");}
-		.confirm-btn{background-image: url("@/static/images/my/exit-confirm-btn.png");}
-	}
-}
-
 // SVIP
 .ezy-svip-page{
 	width: 100%;height: 100vh;background-color: #23befb;position: relative;

+ 52 - 0
components/dialog/tipMiddleDialog.vue

@@ -0,0 +1,52 @@
+<!-- 中弹窗 二行文字 -->
+<template>
+	<uni-popup ref="tipMiddlePopup" :animation="false" :is-mask-click="false"
+	 mask-background-color="rgba(255, 255, 255, 0.6);">
+	 <view class="ezy-tip-dialog tip-middle-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 tipMiddlePopup = ref(null); // 索引
+	const $emit = defineEmits(['confirm-btn'])
+	// 打开弹窗
+	function handleShow() {
+		tipMiddlePopup.value.open();
+	}
+	// 取消
+	function handleClose() {
+		tipMiddlePopup.value.close();
+	}
+	// 确认
+	function confirmBtn(){
+		$emit('confirm-btn');
+		tipMiddlePopup.value.close();
+	}
+	defineExpose({
+			handleShow
+		})
+</script>
+
+<style>
+</style>

+ 52 - 0
components/dialog/tipSmallDialog.vue

@@ -0,0 +1,52 @@
+<!-- 小弹窗 一行文字 -->
+<template>
+	<uni-popup ref="tipSmallPopup" :animation="false" :is-mask-click="false"
+	 mask-background-color="rgba(255, 255, 255, 0.6);">
+	 <view class="ezy-tip-dialog tip-small-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 tipSmallPopup = ref(null); // 索引
+	const $emit = defineEmits(['confirm-btn'])
+	// 打开弹窗
+	function handleShow() {
+		tipSmallPopup.value.open();
+	}
+	// 取消
+	function handleClose() {
+		tipSmallPopup.value.close();
+	}
+	// 确认
+	function confirmBtn(){
+		$emit('confirm-btn');
+		tipSmallPopup.value.close();
+	}
+	defineExpose({
+			handleShow
+		})
+</script>
+
+<style>
+</style>

+ 0 - 40
pages/my/exitDialog.vue

@@ -1,40 +0,0 @@
-<template>
-	<uni-popup ref="exitPopup" :animation="false" :is-mask-click="false"
-	 mask-background-color="rgba(255, 255, 255, 0.6);">
-	 <view class="exit-dialog">
-		<view class="exit-content-box">
-			<view class="exit-title">提示</view>
-			<view class="exit-two-title">你确定要执行这个操作吗?</view>
-			<view class="exit-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 exitPopup = ref(null); // 索引
-	const $emit = defineEmits(['confirm-btn'])
-	// 打开弹窗
-	function handleShow() {
-		exitPopup.value.open();
-	}
-	// 取消
-	function handleClose() {
-		exitPopup.value.close();
-	}
-	// 确认
-	function confirmBtn(){
-		$emit('confirm-btn');
-		exitPopup.value.close();
-	}
-	defineExpose({
-			handleShow
-		})
-</script>
-
-<style>
-</style>

+ 3 - 3
pages/my/index.vue

@@ -32,7 +32,7 @@
 			</view>
 		</view>
 		<CustomTabBar></CustomTabBar>
-		<exit-dialog ref="exitDialogRef" @confirm-btn="exitBtn"></exit-dialog>
+		<tip-small-dialog ref="exitDialogRef" @confirm-btn="exitBtn" :content="tipContent"></tip-small-dialog>
 	</view>
 </template>
 
@@ -45,8 +45,9 @@
 	import {onLoad} from '@dcloudio/uni-app';
 	import {reactive,ref} from "vue";
 	import { toast } from "../../utils/common";
-	import exitDialog from './exitDialog.vue'
+	import tipSmallDialog from '@/components/dialog/tipSmallDialog.vue'
 	
+	const tipContent = '你确定要执行这个操作吗?'; 
 	let loginFlag = ref(false);
 	let myInfoData = reactive({
 		userImg: 'static/images/my/head-unlogin-img.png',
@@ -65,7 +66,6 @@
 		uni.navigateTo({
 			url: '/pages/login/index'
 		});
-
 	}
 	
 	// 订单

+ 0 - 0
static/images/my/exit-cancel-btn.png → static/images/common/tip-cancel-btn.png


+ 0 - 0
static/images/my/exit-confirm-btn.png → static/images/common/tip-confirm-btn.png


BIN
static/images/common/tip-middle-bj1.png


+ 0 - 0
static/images/my/my-exit-bj.png → static/images/common/tip-small-bj.png


BIN
static/logo.png