tipPop.vue 2.0 KB
<template>
	<view class="">
		<u-popup :show="tipShow" :round="16" :safeAreaInsetBottom="false" mode="center"  @close="pointsBtns(0)">
		    <view class="pointsPop flexV">
				<view class="popTitle flexA" v-if="tipType==0">
					{{integral}}<text>积分</text>
				</view>
				<view class="popTips">{{ 
					tipType==0? '是否确认使用积分兑换'
					: tipType==1?'是否确定取消支付'
					: '是否确定取消订单'}}</view>
				<view class="pointsBtn flexJ">
					<view class="clean flexC" @click="pointsBtns(0)">取消</view>
					<view class="yes flexC" @click="pointsBtns(1)">确认</view>
				</view>
		    </view>
		</u-popup>
	</view>
</template>

<script setup>
	import { ref,reactive,onMounted,defineEmits } from 'vue'
	import {onShow,onLoad} from '@dcloudio/uni-app'
	const props = defineProps({
		tipShow:{
			type:Boolean,
			default:false
		},
		// 积分
		integral:{
			type:String,
			default:0
		},
		//0是否积分兑换 1取消支付 2取消订单
		tipType:{
			type:Number,
			default:0
		}
	})
	// 是否使用积分弹窗
	const pointsShow = ref(false)
	const emit = defineEmits(['pointsBtns'])
	// 积分弹窗 确认/取消按钮
	const pointsBtns = (type)=> {
		emit('pointsBtns',type)
	}
</script>

<style lang="scss">
	.pointsPop {
		width: 622rpx;
		padding: 26rpx 32rpx 28rpx;
		box-sizing: border-box;
		
		.popTitle {
			 color: #fc4338ff;
			 font-size: 48rpx;
			 font-weight: 700;
			 
			 text{
				 margin: 12rpx 0 0 12rpx;
				  color: #fc4338ff;
				  font-size: 22rpx;
			 }
		}
		
		.popTips {
			margin: 37rpx 0 52rpx;
			 color: #000000e6;
			 font-size: 32rpx;
			 font-weight: 700;
		}
		
		.pointsBtn {
			width: 100%;
			
			.clean {
				width: 264rpx;
				height: 76rpx;
				border-radius: 46rpx;
				color: #000000e6;
				font-size: 28rpx;
				font-weight: 700;
				background: #f7f8faff;
			}
			
			.yes {
				width: 264rpx;
				height: 84rpx;
				border-radius: 280rpx;
				color: #ffffffff;
				font-size: 28rpx;
				font-weight: 700;
				background: linear-gradient(139deg, #fb753cff 0%, #fb3e3cff 100%);
			}
		}
	}
</style>