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

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

效果展示

在里插入图片描述

在这里插入图片描述

代码结构

结构分析

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

核心代码

index.vue

template：


	
		
			选择优惠券
		
		
			选择优惠券
			 // 设置自定义事件-方便子组件传递选择的优惠券过来
		
	
	
		
	

js：

	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  {
					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)
				}
		    }
	}

selector.vue

	 // uview框架的弹出层组件
		
			
			
				
			
			
			
				选择优惠券
			
			
			
				
					
				
			
			
			
			
				立即使用
			
		
	


	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 {
					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
			}
		}
	}



	.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;
		}
	}

coupon.vue

	
		
		
			
				￥{{ item.couponAmt }}
				可用金额￥{{ item.usedAmt }}
			
			
				可用车辆：{{ changeFormat(item.customerType) }}
				
					
				
				{{ item.effectDate }}至{{ item.expireDate }}
			
		
		
		
			
				
					服务券
				
				
					可用车辆：{{ changeFormat(item.customerType) }}
					
						{{ item.contentTitle }}
						
					
					{{item.effectDate}}至{{item.expireDate}}
				
			
			
				详情：{{item.couponDesc}}
				
			
		
	



	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
				}
			}
		}
	}



	.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;
				}
			}
		}
	}

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/5e1a68a00a.html