小程序使用uview中的u-popup弹窗组件

已于 2023-07-06 11:32:04 修改
阅读量4k 收藏 6
点赞数 1
分类专栏： Vue业务实战 文章标签： 小程序 vue.js
于 2023-07-05 17:48:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a_z2019/article/details/131558341
版权
该文介绍了一个在小程序中使用uview的u-popup组件创建弹窗来选择优惠券的过程。用户点击选择优惠券后，会打开一个包含滚动列表的弹窗，列表项由coupon.vue组件构成。弹窗组件通过监听事件从父组件接收优惠券数据，并能将选定的优惠券信息回传给父组件。
摘要由CSDN通过智能技术生成

小程序封装弹窗组件(使用uview框架中的u-popup弹窗组件)

效果展示

在里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码结构

结构分析

最外层页面index.vue-可点击"选择优惠券"，进入弹窗组件selector.vue进行内容选择，弹窗组件中包含滚动列表，每个列表项为一个coupon.vue组件

核心代码

index.vue
template：
<!-- 优惠券区域 -->
<view class="rescue-coupon">
	<view class="coupon-select">
		<view class="title">
			选择优惠券
		</view>
		<view class="piker" @click="open">
			选择优惠券
			<selector ref="saleArea" @getApplyCoupon="getApplyCoupon" /> // 设置自定义事件-方便子组件传递选择的优惠券过来
		</view>
	</view>
	<view class="apply-coupon">
		<coupon :item="applyCoupon" :imgShow="false" />
	</view>
</view>
js：
<script>
	import http from "@/js/api.js"  // 请求发送组件
	import selector from './selector.vue' // 弹窗组件
	import coupon from './coupon.vue' // 列表项组件
	import { cloneDeep } from "lodash" // 深拷贝
	export default {
		components: {
			selector,
			coupon
		},
		data() {
			return {
				// 使用的优惠券
				applyCoupon:{},
				// 优惠券列表
				couponList:[],
				show:false
				}
		},
		methods: {
			// 获取优惠券列表数据-可用优惠券
			getCouponList() {
				console.log('调用了优惠券列表查询方法')
				let opt = {
					url: url, // 接口地址
					data: data, // 请求参数
					method: 'GET'
				}
				http(opt).then(res => {
					console.log('优惠券列表响应数据',res)
					this.couponList = res.list
					if(this.couponList.length >= 1) { // 可用优惠券数量不小于1时 为每个优惠券对象动态添加check属性-为后续勾选提供便利
						for(let i = 0; i < this.couponList.length; i ++) {
							this.$set(this.couponList,'check',false) // 注意此处需要实现响应式-使用$set API实现(vue)
						}
						this.couponList[0].check = true  // 默认第一张优惠券状态为选中
					}
				}).catch(error => {
					uni.showToast({title: error.message || '网络超时', icon: 'none'});
				});
			},
			// 获取子组件传递过来的确定使用的优惠券
			getApplyCoupon(obj) {
				console.log('接收到的优惠券：',obj)
				this.applyCoupon = obj
				this.params.couponId = obj.id
			},
			// 展开优惠券选择弹窗
			open(){
			    this.$refs.saleArea.show = true
				this.$refs.saleArea.couponList = cloneDeep(this.couponList)
				if(this.applyCoupon.id) { // 存在已选择优惠券
					this.$refs.saleArea.filterCoupons(this.applyCoupon.id)
				}else { // 暂无已选优惠券
					this.$refs.saleArea.filterCoupons(999)
				}
		    }
	}
</script>
selector.vue
<template>
	<u-popup v-model="show" mode="bottom" border-radius="16"> // uview框架的弹出层组件
		<view class="box">
			<!-- 关闭 -->
			<view class="close" @click="close">
				<image src="../../../static/coupon/couponClose.png" mode=""></image>
			</view>
			<!-- 标题 -->
			<view class="title">
				选择优惠券
			</view>
			<!-- 优惠券列表 -->
			<scroll-view class="list" scroll-y="true" enhanced :show-scrollbar="false" v-if="couponList.length !== 0">
				<view v-for="item,i in couponList" :key="i" @click="handlerClick(item)">
					<coupon :item="item" />
				</view>
			</scroll-view>
			<emptyList title="暂无可用优惠券" v-else></emptyList>
			<!-- 底部按钮 -->
			<view class="bottom" @click="apply">
				立即使用
			</view>
		</view>
	</u-popup>
</template>
<script>
	import emptyList from './emptyList.vue'
	import coupon from './coupon.vue'
	export default {
		components:{
			coupon,
			emptyList
		},
		data() {
			return {
				couponList:[],
				applyCoupon:{}, // 确定使用的优惠券
				show: false
			}
		},
		methods: {
			// 已选优惠券情况下再次进入优惠券选择页面-设置已选优惠券状态为已勾选状态
			filterCoupons(id) {
				if(id === 999) { // 当前不存在已选优惠券-则默认第一张优惠券为勾选状态
					this.applyCoupon = this.couponList[0]
				}else {          // 当前存在已选优惠券-则筛选出该优惠券并将其设为勾选状态
					this.couponList.forEach(item=>{
						item.check = false
					})
					for(let i = 0; i < this.couponList.length; i++) {
						if(this.couponList[i].id === id) {
							this.couponList[i].check = true
						}
					}
				}
			},
			// 勾选
			handlerClick(data){
				console.log('选择的优惠券',data)
				this.applyCoupon = data
				this.couponList.forEach(item=>{
					item.check = false
				})
				for(let i = 0; i < this.couponList.length; i++) {
					if(this.couponList[i].id === data.id) {
						this.couponList[i].check = true
					}
				}
			},
			// 立即使用
			apply() {
				if(this.applyCoupon) {
					this.show = false
					this.$emit('getApplyCoupon',this.applyCoupon) // 将确定使用的优惠券传递给父组件
				}else {
					this.show = false
				}
			},
			// 关闭弹窗
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		max-height: 1361rpx;
		background: #FFFFFF;
		opacity: 1;
		padding: 32rpx;
		
		.close {
			text-align: right;
			image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: -10rpx;
			}
		}
		
		.title {
			font-size: 32rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #1A1D24;
			margin-bottom: 26rpx;
			margin-left: 12rpx;
		}
		
		.list {
			max-height: 1000rpx;
		}
		
		.bottom {
			width: 686rpx;
			height: 72rpx;
			background: #2972FF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			margin-top: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 72rpx;
		}
	}
</style>
coupon.vue
<template>
	<view>
		<!-- 金额优惠券 -->
		<view class="moneyItem" v-if="item.couponType === 1">
			<view class="left">
				<span><span class="unity">￥</span>{{ item.couponAmt }}</span>
				<span>可用金额￥{{ item.usedAmt }}</span>
			</view>
			<view class="right">
				<span :class="{ one:!imgShow }">可用车辆：{{ changeFormat(item.customerType) }}</span>
				<span>
					<image v-show="imgShow" class="two" :src="item.check ? selectUrl : unSelectUrl" mode=""></image>
				</span>
				<span class="three">{{ item.effectDate }}至{{ item.expireDate }}</span>
			</view>
		</view>
		<!-- 服务优惠券 -->
		<view class="serviceItem" v-if="item.couponType === 2">
			<view>
				<view class="left">
					<span>服务券</span>
				</view>
				<view class="right">
					<span :class="{ one:!imgShow }">可用车辆：{{ changeFormat(item.customerType) }}</span>
					<span>
						<span>{{ item.contentTitle }}</span>
						<image v-show="imgShow" class="two" :src="item.check === true ? selectUrl : unSelectUrl" mode=""></image>
					</span>
					<span class="three">{{item.effectDate}}至{{item.expireDate}}</span>
				</view>
			</view>
			<view @click="change">
				<span :style="[{overflow:(index === 1 ? 'hidden' : 'auto')},{whiteSpace:(index===1?'nowrap':'normal')},{textOverflow:(index===1?'ellipsis':'clip')}]">详情：{{item.couponDesc}}</span>
				<image :src="detailUrl" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'coupon',
		props:{
			item:{
				type:Object,
				default:{}
			},
			imgShow: {
				type:Boolean,
				default:true
			}
		},
		filters: {
			customerFilter(val) {
				if(val === 'PERSON') {
					return this.item.truckVin
				}else {
					return this.item.fleetName
				}
			}
		},
		data() {
			return {
				index:1,
				detailUrl:'../../../static/coupon/bottom.png',
				onUrl:'../../../static/coupon/top.png',
				offUrl:'../../../static/coupon/bottom.png',
				// 勾选
				chooseUrl:'../../../static/coupon/couponSelect.png',
				selectUrl:'../../../static/coupon/couponSelect.png',
				unSelectUrl:'../../../static/coupon/couponUnselect.png',
			}
		},
		watch: {
			detailUrl(val) {
				if(val === this.offUrl) {
					this.index = 1
				}else {
					this.index = 2
				}
			}
		},
		methods: {
			// 详情展开/关闭
			change() {
				if(this.detailUrl === this.offUrl) {
					this.detailUrl = this.onUrl
				}else {
					this.detailUrl = this.offUrl
				}
			},
			changeFormat(val) {
				if(val === 'PERSON') {
					return this.item.truckVin
				}else {
					return this.item.fleetName
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.moneyItem {
		display: flex;
		height: 202rpx;
		background: #F4F8FF;
		opacity: 1;
		background-image: url('../../../static/coupon/couponBac.png');
		background-size: 100%;
		margin-bottom: 20rpx;
		padding-top: 15rpx;
		padding-left: 15rpx;
		
		.left {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 186rpx;
			height: 190rpx;
			&>span {
				&:first-child {
					font-size: 40rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					margin-bottom: 10rpx;
					.unity {
						font-size: 22rpx;
					}
				}
				&:last-child {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}
		
		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 30rpx;
			.one {
				margin-bottom: 48rpx;
			}
			&>span {
				
				&:first-child {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #1A1D24;
				}
				&:nth-child(2) {
					text-align: right;
					padding: 0;
					image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 32rpx;
						margin-bottom: -10rpx;
					}
				}
				&:last-child {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #76777C;
				}
			}
		}
	}
	.serviceItem {
		background: #F4F8FF;
		margin-bottom: 20rpx;
		&>view {
			&:first-child {
				opacity: 1;
				height: 202rpx;
				padding-top: 15rpx;
				padding-left: 15rpx;
				display: flex;
				background-image: url('../../../static/coupon/couponBac.png');
				background-size: 100%;
				.left {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 186rpx;
					height: 190rpx;
					span {
						font-size: 48rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding-left: 30rpx;
					&>span {
						&:first-child {
							font-size: 32rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #1A1D24;
						}
						&:nth-child(2) {
							display: flex;
							justify-content: space-between;
							padding: 0;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #46484E;
							margin-top: 8rpx;
							image {
								width: 48rpx;
								height: 48rpx;
								margin-right: 32rpx;
								margin-bottom: -10rpx;
							}
						}
						&:last-child {
							margin-top: 30rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #76777C;
						}
					}
				}
			}
			&:last-child {
				width: 100%;
				padding: 15rpx 22rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #76777C;
				background: #FAFAFA;
				border-radius: 0 0 16rpx 16rpx;
				opacity: 1;
				display: flex;
				justify-content: space-between;
				span {
					flex: 1;
				}
				image {
					margin-left: 16rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
</style>
uniapp uview实现u-popup左侧弹起时铺满屏幕
高桥留de博客
12-12 1691
uniapp uview实现u-popup左侧弹起起时铺满屏幕
[uni-app] uview封装Popup组件,处理props及v-model的传值问题
iOSTianNan的博客
08-18 2328
的组件, 现在有个需求是,进行简单封装,有些通用的设置不想每次都写(比如。* 通用 center型 - popup弹框, 其内容slot定义,然后说我们就可以通过 show这个状态去控制, 但此时我们会遇到一个报错。就是涉及到了 props单向传递, 与v-model产生了冲突。=>pop弹窗弹出, 只要设置。=>pop弹窗隐藏, 只要设置。uView(1.x版本)中, 有。这里就相当于, 子组件也去更改了。再进一步, 上面的写法也有点麻烦。再看这个地方, 是不是想到。这个props,这显然是。
uniapp组件库Popup 弹出层 的使用方法
精通前端技术，了解后端接口
01-20 6587
弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义。
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
最新发布
luck332的专栏
09-17 841
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件日历期间、年期间、月期间及时分期间组件在不同的应用场景中发挥着重要的作用。这些组件通常用于表单、应用程序或网站中，以方便用户输入和选择特定的日期和时间范围。
uView 弹出层组件使用，u-popup、u-modal同时使用，弹出层看不见
m0_57087617的博客
05-14 667
组件不显示
微信小程序弹窗组件
weixin_33849215的博客
08-10 1952
概述 自己封装的一个比较简单微信弹窗小组件，主要就是教会大家对微信小组件的用法和理解，因为微信小程序对组件介绍特别少，所以我就把自己的理解分享给大家 详细 代码下载：http://www.demodashi.com/demo/13177.html   一、前言 相信大家在开发小程序时会遇到某个功能多次使用的情况，比如弹出框。这个时候大家首先想到的是组件化开发，就是把弹出框封装成...
【小程序开发】—— 封装自定义弹窗组件
热门推荐
qq_49002903的博客
10-30 4万+
小程序项目实战——封装自定义弹窗组件，确定不来看看吗？
小程序 弹窗组件
weixin_44610025的博客
05-07 1965
本文主要分成了两个部分，第一部分为微信小程序弹窗组件的具体步骤，第二部分为小程序的多种弹窗类型。 第一部分 微信小程序弹窗组件的具体步骤 1.新建component文件夹存放我们的组件，里边存放的就是我们所用的组件，我们今天要做的事弹出框，新建文件夹popup存放我们的组件模板，点击右键选择新建component，就会自动生成组件的模板wxss、wxml、json、js，如图 2.组件布局和样式...
uniapp uni-popup弹出层组件 弹窗 无法弹出 自定义样式问题
m0_67401746的博客
03-08 2280
uni-popup弹出层组件 之前用到弹出层组件时发现弹出时会有一层灰色的遮罩，后来调试了几次发现是因为没有自定义给弹出层宽高，尝试了几次终于做到自己想要的效果，话不多说，直接附上完整代码： 效果图： <template> <view> <view class="sign_text" @tap="toggle('center')"> <text style="line-height: 60px;margin-top: 12px;">点击弹出&lt
小程序使用uview中u-upload组件
FYB Blog
11-16 2827
小程序使用uview中u-upload组件
禁止弹窗中蒙层底部页面跟随滚动的几种方法
01-19
众所周知，弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这...
小程序自定义组件之popupwindow
马腾蛟的博客
03-26 4316
小程序自定义组件之popupwindow1、场景2、自定义popupwindow弹窗2.1 新建Component.2.2 popupwindow.wxss2.3 popupwindow.wxml2.4 popupwindow.json2.5 popupwindow.js3、自定义popupwindow组件的使用3.1 引入组件3.2 组件的使用3.3 关闭点击事件4、结语 1、场景 小程序开发过...
微信小程序&H5设置全局弹窗
peepeeman的博客
03-11 1574
uniapp设置全局通知公告
uni-app：uView弹出层的使用
努力、拼搏、奋进
09-15 3048
uni-app：uView弹出层的使用、组件封装
【小程序开发】—— 封装自定义弹窗组件_小程序自定义弹窗
2401_84181942的博客
04-17 789
首先我们需要探讨一下，封装自定义的组件都需要什么功能需要一个半透明灰色的背景，用于区分与非弹窗内容，点击灰色区域也可以关闭弹窗。需要一个关闭按钮和两个操作按钮，一个确定，一个取消。弹窗内容：标题，内容区域，因为是自定义所以都使用了具名插槽，也可以设置默认的显示内容。弹窗的显示位置，本次封装只考虑了居中与页面底部两个常用显示位置。
uview小程序弹窗表单验证，阻止表单关闭
Joan_OvO的博客
07-19 344
设置async-close异步关闭。使用setRules()设置验证规则。
uView——u-popup 父子传值 父组件关闭弹窗只会触发一次 解决方案
qq_43201350的博客
01-26 723
uView——u-popup 父子传值 父组件关闭弹窗只会触发一次 解决方案
微信小程序——弹窗组件
weixin_58412143的博客
07-19 2527
1、父组件.wxml。2、父组件.json。3、子组件.wxml。4、子组件.wxss。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值