uni-app小程序优惠券镂空样式实现(完整代码！！！)

最新推荐文章于 2024-04-17 09:49:56 发布
最新推荐文章于 2024-04-17 09:49:56 发布
阅读量3k 收藏 28
点赞数 7
分类专栏： 小程序 文章标签： 优惠券 优惠券镂空样式 渐变 uni-app 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DLGDark/article/details/119356214
版权

优惠券半圆镂空效果利用渐变实现，核心代码示例：

background: radial-gradient(circle at left top, transparent 6px, #ffd7d7 0) top left / 50% 100% no-repeat,
			radial-gradient(circle at right top, transparent 6px, #ffd7d7 0) top right / 50% 100% no-repeat;

效果图如下：
coupon

完整代码如下：

<template>
	<view class="content">
		<view class="tabHeads">
			<view class="tabLabel" @click="tabsClick(item)" v-for="(item,index) in tabsArray" :key="index">
				<view :class="[isNum === item.inx?'isTabActive':'default']">{{item.name}}</view>
			</view>
		</view>
		<view class="headWrap">
			<view class="labelDiv" :class="[isActive === item.id?'active':'']" v-for="(item,index) in labels"
				:key="index" @click.stop="toggle(item)">
				{{item.name}}
			</view>
		</view>
		<scroll-view :style="'height:'+wHeight+'px'" :scroll-top="scrollTop" scroll-y="true">
			<view class="couponMain">
				<view class="coupon" v-for="(item,index) in coupons" :key="index">
					<view class="couponTop"
						:class="[isNum ===1?item.type ===1?'bgColorTop1':item.type ===2?'bgColorTop2':'bgColorTop3':'bgColorTop4']">
						<view class="couponTopLeft">
							<view class="couponTypeDiv">
								<image v-if="isNum ===1  && item.type ===1" class="imgType"
									src="/static/coupon/money.png" mode="aspectFit"></image>
								<image v-if="isNum ===1  && item.type ===2" class="imgType"
									src="/static/coupon/discount.png" mode="aspectFit"></image>
								<image v-if="isNum ===1  && item.type ===3" class="imgType"
									src="/static/coupon/goods.png" mode="aspectFit"></image>
								<image v-if="isNum !==1" class="imgType" src="/static/coupon/expired.png"
									mode="aspectFit"></image>
								<view class="tpyeNameSty">{{item.type ===1?'现金券':item.type ===2?'折扣券':'兑物券'}}</view>
							</view>
							<view class="valueSty"
								:class="[isNum ===1?item.type ===1?'color1':item.type ===2?'color3':'color5':'color7']">
								<text v-if="item.type ===1" class="symbolMoney">￥</text>
								<text v-if="item.type ===1" class="moneyVal">{{item.money}}</text>
								<text v-if="item.type ===2" class="moneyVal">{{item.discount}}</text>
								<text v-if="item.type ===2" style="font-size: 14px;">折</text>
								<text v-if="item.type ===3" class="moneyVal">{{item.num}}</text>
								<text v-if="item.type ===3" style="font-size: 14px;">件</text>
							</view>
							<view v-if="item.limitCategory ===0 && item.limitStore ===0" class="useCondition"
								:class="[isNum ===1?item.type ===1?'borderColor1 color1':item.type ===2?'borderColor2 color3':'borderColor3 color5':'borderColor4 color7']">
								无门槛使用
							</view>
							<view v-else class="useCondition"
								:class="[isNum ===1?item.type ===1?'borderColor1 color1':item.type ===2?'borderColor2 color3':'borderColor3 color5':'borderColor4 color7']">
								<text>满{{item.condition}}元可</text>
								<text>{{item.type ===3?'兑':'用'}}</text>
							</view>
						</view>
						<view class="couponTopRight">
							<view class="ctr-left">
								<view class="couponName"
									:class="[isNum ===1?item.type ===1?'color1':item.type ===2?'color3':'color5':'color7']">
									{{item.name}}
								</view>
								<view class="couponStore"
									:class="[isNum ===1?item.type ===1?'color2':item.type ===2?'color4':'color6':'color8']">
									{{item.storeName}}
								</view>
								<view class="couponDate"
									:class="[isNum ===1?item.type ===1?'color2':item.type ===2?'color4':'color6':'color8']">
									{{item.startDate}}~{{item.endDate}}
								</view>
							</view>
							<view class="ctr-right">
								<text class="useBtn"
									:class="[isNum ===1?item.type ===1?'useBtnBgColor1':item.type ===2?'useBtnBgColor2':'useBtnBgColor3':'useBtnBgColor4']">{{isNum ===1?'去使用':isNum ===2?'已使用':'已过期'}}</text>
							</view>
						</view>
					</view>
					<view class="couponBottom"
						:class="[isNum ===1?item.type ===1?'bgColorTBottom1':item.type ===2?'bgColorTBottom2':'bgColorTBottom3':'bgColorTBottom4']">
						<view class="ruleLabel">
							<view class="ruleLabel-left">
								<text v-if="item.overlay ===1" class="overlay"
									:class="[isNum ===1?item.type ===1?'color1 bgColor1':item.type ===2?'color3 bgColor2':'color5 bgColor3':'color7 bgColor4']">
									{{item.overlay ===1?'可叠加':''}}
								</text>
								<text class="limit"
									:class="[isNum ===1?item.type ===1?'color1':item.type ===2?'color3':'color5':'color7']">
									{{item.limitCategory ===1?'限品类':'不限品类'}}
								</text>
								<text class="limit"
									:class="[isNum ===1?item.type ===1?'color1':item.type ===2?'color3':'color5':'color7']">/</text>
								<text class="limit"
									:class="[isNum ===1?item.type ===1?'color1':item.type ===2?'color3':'color5':'color7']">
									{{item.limitStore ===1?'限门店':'不限门店'}}
								</text>
							</view>
							<view class="ruleBtn"
								:class="[isNum ===1?item.type ===1?'color2':item.type ===2?'color4':'color6':'color8']"
								@click.stop="viewRules(item)">
								<text style="margin-right: 6px;">使用规则</text>
								<view class="arrowIcon"
									:class="[item.isViewRule?isNum ===1?item.type ===1?'rotate arrowIcon1':item.type ===2?'rotate arrowIcon2':'rotate arrowIcon3':'rotate arrowIcon4':isNum ===1?item.type ===1?'backRotate arrowIcon1':item.type ===2?'backRotate arrowIcon2':'backRotate arrowIcon3':'backRotate arrowIcon4']">
								</view>
							</view>
						</view>
						<view v-if="item.isViewRule" class="ruleDetail"
							:class="[isNum ===1?item.type ===1?'color2':item.type ===2?'color4':'color6':'color8']">
							<view class="ruleList">
								1.使用规则描述xxxxxxxx
							</view>
							<view class="ruleList">
								1.使用规则描述xxxxxxxx
							</view>
							<view class="ruleList">
								1.使用规则描述xxxxxxxx
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wHeight: 0,
				scrollTop: 0,
				isNum: 1,
				tabsArray: [{
					inx: 1,
					name: '未使用'
				}, {
					inx: 2,
					name: '已使用'
				}, {
					inx: 3,
					name: '已过期'
				}],
				isActive: 1,
				labels: [{
					id: 1,
					name: '全部'
				}, {
					id: 2,
					name: '现金券'
				}, {
					id: 3,
					name: '折扣券'
				}, {
					id: 4,
					name: '兑物券'
				}],
				coupons: [{
					type: 1,
					money: 50,
					discount: 5,
					num: 1,
					condition: 20,
					name: "仅可购买指定商品",
					storeName: '西安碑林钟楼店',
					startDate: '2021-05-01',
					endDate: '2021-08-01',
					overlay: 1,
					limitCategory: 1,
					limitStore: 1,
					rules: '使用规则描述',
					isViewRule: false
				}, {
					type: 2,
					money: 50,
					discount: 5,
					num: 1,
					condition: 5,
					name: "仅可购买指定商品",
					storeName: '西安碑林钟楼店',
					startDate: '2021-05-01',
					endDate: '2021-08-01',
					overlay: 1,
					limitCategory: 0,
					limitStore: 0,
					rules: '使用规则描述',
					isViewRule: false
				}, {
					type: 3,
					money: 50,
					discount: 5,
					num: 1,
					condition: 20,
					name: "仅可购买指定商品",
					storeName: '西安碑林钟楼店',
					startDate: '2021-05-01',
					endDate: '2021-08-01',
					overlay: 1,
					limitCategory: 0,
					limitStore: 0,
					rules: '使用规则描述',
					isViewRule: false
				}, {
					type: 3,
					money: 50,
					discount: 5,
					num: 1,
					condition: 20,
					name: "仅可购买指定商品",
					storeName: '西安碑林钟楼店',
					startDate: '2021-05-01',
					endDate: '2021-08-01',
					overlay: 1,
					limitCategory: 1,
					limitStore: 0,
					rules: '使用规则描述',
					isViewRule: false
				}, {
					type: 3,
					money: 50,
					discount: 5,
					num: 1,
					condition: 20,
					name: "仅可购买指定商品",
					storeName: '西安碑林钟楼店',
					startDate: '2021-05-01',
					endDate: '2021-08-01',
					overlay: 1,
					limitCategory: 0,
					limitStore: 1,
					rules: '使用规则描述',
					isViewRule: false
				}, {
					type: 2,
					money: 50,
					discount: 5,
					num: 1,
					condition: 5,
					name: "仅可购买指定商品",
					storeName: '西安碑林钟楼店',
					startDate: '2021-05-01',
					endDate: '2021-08-01',
					overlay: 0,
					limitCategory: 0,
					limitStore: 0,
					rules: '使用规则描述',
					isViewRule: false
				}]
			}
		},
		onLoad() {
			uni.hideTabBar()

			const res = uni.getSystemInfoSync()
			this.wHeight = res.windowHeight - 86
		},
		onShow() {
			this.isActive = 1
		},
		methods: {
			tabsClick(item) {
				this.isNum = item.inx
			},
			toggle(item) {
				this.isActive = item.id
			},
			viewRules(item) {
				if (item.isViewRule) {
					item.isViewRule = false
				} else {
					item.isViewRule = true
				}
			}
		}
	}
</script>

<style scoped>
	.content {
		padding: 0;
		overflow: hidden;
	}

	.tabHeads {
		display: flex;
		background-color: #fff;
		margin-bottom: 1px;
	}

	.tabLabel {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
	}

	.default {
		color: #999999;
		padding: 10px 0;
		border-bottom: 1px solid #ffffff;
	}

	.isTabActive {
		color: #ff5555;
		padding: 10px 0;
		border-bottom: 1px solid #ff5555;
	}

	.headWrap {
		padding: 10px;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
	}

	.labelDiv {
		background-color: #eeeeee;
		padding: 4px 20px;
		border-radius: 4px;
		color: #999999;
		font-size: 12px;
	}

	.active {
		background-color: #ff5555;
		color: #fff;
	}

	.couponMain {
		padding: 10px;
		display: flex;
		flex-direction: column;
	}

	.coupon {
		margin-bottom: 10px;
	}

	.couponTop {
		display: flex;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}

	.couponTopLeft {
		flex: 1.2;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}

	.couponTypeDiv {}

	.imgType {
		width: 46px;
		height: 40px;
		position: absolute;
		top: 0;
		left: 0;
	}

	.tpyeNameSty {
		font-size: 9px;
		transform: rotate(-40deg);
		position: absolute;
		top: 8px;
		left: 2px;
		color: #fff;
	}

	.valueSty {
		margin-bottom: 10px;
	}

	.symbolMoney {
		font-size: 16px;
	}

	.moneyVal {
		font-size: 24px;
	}

	.useCondition {
		font-size: 10px;
		padding: 4px 10px;
		border-radius: 12px;
	}

	.couponTopRight {
		flex: 3;
		display: flex;
		padding-bottom: 12px;
	}

	.ctr-left {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.couponName {
		font-size: 16px;
		padding: 14px 0;
		text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.04);
	}

	.couponStore {
		font-size: 12px;
		text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.04);
		padding-bottom: 8px;
	}

	.couponDate {
		font-size: 12px;
		text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.04);
	}

	.ctr-right {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		padding: 0 10px;
	}

	.useBtn {
		color: #fff;
		font-size: 12px;
		padding: 6px 20px;
		border-radius: 18px;
	}

	.couponBottom {
		display: flex;
		flex-direction: column;
		padding: 10px;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	.ruleLabel {
		display: flex;
		align-items: center;
	}

	.ruleLabel-left {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.overlay {
		margin-right: 10px;
		padding: 4px 10px;
		font-size: 10px;
		border-radius: 11px;
	}

	.limit {
		font-size: 12px;
	}

	.ruleBtn {
		display: flex;
		align-items: center;
		font-size: 12px;
	}

	.arrowIcon {
		position: relative;
		width: 6px;
		height: 6px;
		transform: rotate(135deg);

	}

	.rotate {
		transform: rotate(-45deg);
		bottom: -2px;
	}

	.backRotate {
		transform: rotate(135deg);
		top: -2px;
	}

	.ruleDetail {
		display: flex;
		flex-direction: column;
	}

	.ruleList {
		padding-top: 10px;
		font-size: 12px;
	}

	/* 颜色配置 */
	.borderColor1 {
		border: 1px solid #5f98ff;
	}

	.borderColor2 {
		border: 1px solid #ff7979;
	}

	.borderColor3 {
		border: 1px solid #fc932c;
	}

	.borderColor4 {
		border: 1px solid #c3c3c3;
	}

	.arrowIcon1 {
		border-top: 1px solid #5f98ff;
		border-right: 1px solid #5f98ff;
	}

	.arrowIcon2 {
		border-top: 1px solid #ff7979;
		border-right: 1px solid #ff7979;
	}

	.arrowIcon3 {
		border-top: 1px solid #fc932c;
		border-right: 1px solid #fc932c;
	}

	.arrowIcon4 {
		border-top: 1px solid #c3c3c3;
		border-right: 1px solid #c3c3c3;
	}

	.useBtnBgColor1 {
		background-color: #2b6feb;
	}

	.useBtnBgColor2 {
		background-color: #ff5555;
	}

	.useBtnBgColor3 {
		background-color: #fa830e;
	}

	.useBtnBgColor4 {
		background-color: #bebebe;
	}

	.color1 {
		color: #2b6feb;
	}

	.color2 {
		color: #5f98ff;
	}

	.color3 {
		color: #ff5555;
	}

	.color4 {
		color: #ff7979;
	}

	.color5 {
		color: #fa830e;
	}

	.color6 {
		color: #fc932c;
	}

	.color7 {
		color: #bebebe;
	}

	.color8 {
		color: #c3c3c3;
	}

	.bgColor1 {
		background-color: #edf4ff;
	}

	.bgColor2 {
		background-color: #ffeeee;
	}

	.bgColor3 {
		background-color: #fff2e5;
	}

	.bgColor4 {
		background-color: #f3f3f3;
	}

	.bgColorTop1 {
		background: radial-gradient(circle at left bottom, transparent 6px, #edf4ff 0) bottom left / 50% 100% no-repeat,
			radial-gradient(circle at right bottom, transparent 6px, #edf4ff 0) bottom right / 50% 100% no-repeat;
	}

	.bgColorTBottom1 {
		background: radial-gradient(circle at left top, transparent 6px, #dae6ff 0) top left / 50% 100% no-repeat,
			radial-gradient(circle at right top, transparent 6px, #dae6ff 0) top right / 50% 100% no-repeat;
	}

	.bgColorTop2 {
		background: radial-gradient(circle at left bottom, transparent 6px, #ffeeee 0) bottom left / 50% 100% no-repeat,
			radial-gradient(circle at right bottom, transparent 6px, #ffeeee 0) bottom right / 50% 100% no-repeat;
	}

	.bgColorTBottom2 {
		background: radial-gradient(circle at left top, transparent 6px, #ffd7d7 0) top left / 50% 100% no-repeat,
			radial-gradient(circle at right top, transparent 6px, #ffd7d7 0) top right / 50% 100% no-repeat;
	}

	.bgColorTop3 {
		background: radial-gradient(circle at left bottom, transparent 6px, #fff2e5 0) bottom left / 50% 100% no-repeat,
			radial-gradient(circle at right bottom, transparent 6px, #fff2e5 0) bottom right / 50% 100% no-repeat;
	}

	.bgColorTBottom3 {
		background: radial-gradient(circle at left top, transparent 6px, #ffe0c1 0) top left / 50% 100% no-repeat,
			radial-gradient(circle at right top, transparent 6px, #ffe0c1 0) top right / 50% 100% no-repeat;
	}

	.bgColorTop4 {
		background: radial-gradient(circle at left bottom, transparent 6px, #f3f3f3 0) bottom left / 50% 100% no-repeat,
			radial-gradient(circle at right bottom, transparent 6px, #f3f3f3 0) bottom right / 50% 100% no-repeat;
	}

	.bgColorTBottom4 {
		background: radial-gradient(circle at left top, transparent 6px, #ededed 0) top left / 50% 100% no-repeat,
			radial-gradient(circle at right top, transparent 6px, #ededed 0) top right / 50% 100% no-repeat;
	}
</style>
DLGDark
关注
  • 7
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
微信小程序优惠券外卖cps小程序uni-app版本
03-29
值得小程序，优惠券外卖cps小程序，uni-app版本，适合学习美团，饿了么外卖领券学习使用
uni-app-小程序自定义底部菜单样式示例
08-12
【uni-app小程序自定义底部菜单样式示例】 在uni-app框架中，开发微信小程序、支付宝小程序、H5等多端应用时，我们经常会遇到需要自定义底部导航菜单的需求，以实现更加个性化和一致性的用户体验。本示例将详细介绍...
uniapp高颜值优惠券组件，支持多选，单选（支持互斥）
源码好优多
04-10 2232
先上图 前言 最近项目需要一个多选且互斥的优惠券组件，找了好久，发现并没有于是决定自己撸起袖子造一个 （互斥比如说二个优惠券A,B选A,就不能选B,选B就不能选A） 实现思路 1 先写单选优惠券组件 2 单选优惠券添加复选框 3复选框组件是否勾选由数据里面的checked决定 javascript checked: false||true 4 动态改变每个优惠券里面的checked就能实现多选效果 5 优惠券选中状态改变时候判断，循环判断每个优惠券的右上角可叠加提示和左下角的
uniapp 小程序优惠劵样式
cwb_2120的博客
10-19 1364
【代码】uniapp 小程序优惠劵样式。
移动端优惠券（uniapp）
qq_59697494的博客
04-11 991
源码为uniapp项目源码，如需要优惠券，以下代码一键复制到你的页面中，共六种样式，每一个展示了两次（因为一般都是列表），每一个都有自己的类样式（yhq1，yhq2，...yhq6），按照你的需求删除不需要的，留下你想要的即可。time: '有效期至: 2025年10月1日'time: '有效期至: 2025年10月1日'time: '有效期至: 2025年10月1日'time: '有效期至: 2025年10月1日'time: '有效期至: 2025年10月1日'
前端优惠券样式实现
zhangluludeCSDN的博客
03-25 4523
实现效果 上代码，我是用uni-app写的 大家可以自行参照修改 界面代码 <view class="quan" v-for="(item,i) in couponList" :key="i"> <view class="quanInfo"> <text class="couponMpoey">￥20 <text class="couponMpoeyInfo">满300减20</text></text> <text c
优惠券样式
weixin_45162984的博客
06-23 644
优惠券样式 使用css实现下图的优惠券样式 拆分样式 这个优惠券样式由凹圆和凸圆组成，凹圆可以使用mask来实现，凸圆可以用背景来实现；由于使用了mask后块超出mask的部分会被减掉，所以将凹圆和凸圆分为两个块样式（利用伪类before和after） 实现凹圆 附上大神优惠券样式【仅凹圆】详细教程 https://juejin.cn/post/6945023989555134494 -webkit-mask: radial-gradient(circle at 15px,#0000 15px
uni-app小程序完整项目源码，可二次开发，发布
12-20
- 分享功能：uni-app内置了分享接口，可以方便地实现小程序的社交分享功能。 - 音频播放：uni-app支持音频播放，可以创建并控制音频播放器，满足多媒体需求。 总的来说，此项目提供的uni-app源码是一个全面的开发...
uni-app微信小程序登录授权的实现
10-15
本文将深入探讨如何在uni-app中实现微信小程序的登录授权，并提供详细的步骤和示例代码。 首先，我们需要在小程序界面设置一个授权按钮。这个按钮通常包含在模板中，它的`open-type`属性应设置为`getUserInfo`，...
基于uni-app开发的微信小程序商城项目
08-03
uni-app巨惠购微信小程序介绍 此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网...
基于 Vue + Uniapp 实现，支持分销、拼团、砍价、秒杀、优惠券、积分、会员等级、小程序直播、页面 DIY 等功能
10-09
芋道商城，基于 Vue + Uniapp 实现，支持分销、拼团、砍价、秒杀、优惠券、积分、会员等级、小程序直播、页面 DIY 等功能，100% 开源。基于 uniapp 开发，支持微信小程序、微信公众号、H5 移动端，未来会支持支付宝小程序、抖音小程序等。支持 SaaS 多租户，可满足商品、订单、支付、会员、优惠券、秒杀、拼团、砍价、分销、积分等多种经营需求。支持 Spring Boot、Spring Cloud 两种架构。
纯 CSS 实现优惠券透明圆形镂空打孔效果
haplant的专栏
05-28 3154
我们在做商城类项目时，时常会有开发优惠券的需求，那么我们如何通过纯 CSS 来实现类似京东、淘宝的优惠券样式。 下面给大家分享一个纯 CSS 写的优惠券边沿透明圆形镂空打孔效果。
如何用uni-app做一个领优惠券H5、小程序商城（二）
zhaododo2010的专栏
03-08 1303
一、如何运行已开源的发券儿妹代码 uni-app 发券儿妹 源代码下载 1. 准备工作 HBuilder X 开发工具下载 微信公众号及小程序开发工具下载 2. 下载代码 git clone https://gitee.com/tbk-uni-app/faquanmei.git 3. 打开项目 文件-> 打开目录 （打开的目录就是你刚才下载的源代码目录）### 4. 安装插件 工具-&...
如何用uni-app做一个领优惠券H5、小程序商城（一）
zhaododo2010的专栏
03-08 3439
一、为什么要选择uni-app 多端泛滥、精力有限，是很多前端开发者每日的梦魇。 uni-app遵循Vue.js语法规范，一套代码，多端发行，切实解决了众多开发者的痛点。 如果对uni-app不熟悉的，可以了解一下曾老师的文章： uni-app小程序手把手项目实战 不废话，先看看小程序的效果 小程序的效果 1. 扫描二维码体验小程序 2. 小程序界面截图 首页 搜索页 分类导航 明细页面 ...
用uniapp写一个领取优惠券的弹出层动画
weixin_42317757的博客
05-28 823
用uniapp写一个领取优惠券的弹出层动画## 实现方式，这个弹出层动画中，我们使用了一个 `coupon-box` 元素作为优惠券的容器。这个元素默认是隐藏的，只有当用户点击领取优惠券的按钮时才会从底部弹出。弹出时，我们通过 CSS 动画实现了一个从底部上推的效果。同时，我们还使用了一个遮罩层 `mask` 来遮挡页面，使用户无法进行其他操作。当弹出层关闭时，遮罩层也会自动关闭。
微信小程序实现一些优惠券/卡券
苏苏就是小苏苏的博客
11-24 5066
前几周有小伙伴问我如何用css实现一些优惠券/卡券，今天就来分享一波吧！速速来Get吧~
uniapp、uniCloud实现微信公众号自动查询淘宝京东优惠券制作过程
只会瞎搞
09-02 2205
微信公众号自动查询淘宝京东优惠券机器人制作教程。服务器通过`uniapp`提供的`uniCloud`云服务搭建，建议使用**阿里云**，不要问为什么，问就是白嫖！！！
移动端优惠券（一键复制）
最新发布
我们好像在哪见过
04-17 303
本文为常见的移动端uniapp优惠券，此文共有6种优惠券样式（参考了常见的优惠券），文本内容仅为示例，您可在此基础上调整为你想要的文本
uniapp微信小程序支付券或商家券插件
qq_35946021的博客
01-31 1548
调用接口获取卷配置，主要不要让后端弄错了，基本传个发券商户号、消费券批次号就可以获得到配置，具体的解析是后端使用微信的api自己去弄的，和前端没关系。注意：我们要点击那个 send-coupon组件才会有这个微信弹出框出来，这个弹出框是组件自带的，不用去写样式。这个弹出框出来，就可以到微信-->我的-->卡包-->券和礼品卡 去看了。在小程序页面中引入发券插件（哪个页面要用插件就引用一下）上面三个是必填的参数，要通过后端接口返回的参数去赋值。注意：支持商户在小程序场景内向。小程序发券插件API。
uni-app 小程序源码
06-26
使用Uni-app小程序源码可以快速实现小程序的开发，不仅减少了代码的编写量，同时也兼容了多个平台，方便用户在不同设备上使用该应用。同时，Uni-app小程序源码的可维护性也很高，因为只需要在一个代码库中进行修改和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值