ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2021-08-03 18:30:28  阅读:320  来源: 互联网

标签:flex 优惠券 bottom color app 6px right uni top


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

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>

标签:flex,优惠券,bottom,color,app,6px,right,uni,top
来源: https://blog.csdn.net/DLGDark/article/details/119356214

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有