From df26efd601b4d339f166b27fa626f1cc32530c88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Wed, 8 Sep 2021 17:15:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E9=A2=86=E5=88=B8=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E9=A1=B5=E9=9D=A2UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/index-nav/index-nav.vue            |   2 +-
 pages.json                                    |   7 +
 pages/index/collectCoupons/collectCoupons.vue | 225 ++++++++++++++++++
 3 files changed, 233 insertions(+), 1 deletion(-)
 create mode 100644 pages/index/collectCoupons/collectCoupons.vue

diff --git a/components/index-nav/index-nav.vue b/components/index-nav/index-nav.vue
index 72f5860..09c145b 100644
--- a/components/index-nav/index-nav.vue
+++ b/components/index-nav/index-nav.vue
@@ -58,7 +58,7 @@ export default {
 			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
 			name: '餐饮配套'
 		},{
-			link: '',
+			link: '/pages/index/collectCoupons/collectCoupons',
 			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
 			name: '领券中心'
 		},{
diff --git a/pages.json b/pages.json
index c282b9c..0b106ef 100644
--- a/pages.json
+++ b/pages.json
@@ -886,6 +886,13 @@
 				"navigationBarTitleText": "餐饮配套",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/index/collectCoupons/collectCoupons",
+			"style" : {
+				"navigationBarTitleText": "领券中心",
+				"navigationStyle": "custom"
+			}
 		}
     ],
 	"globalStyle": {
diff --git a/pages/index/collectCoupons/collectCoupons.vue b/pages/index/collectCoupons/collectCoupons.vue
new file mode 100644
index 0000000..d44094a
--- /dev/null
+++ b/pages/index/collectCoupons/collectCoupons.vue
@@ -0,0 +1,225 @@
+<template>
+	<view>
+		<lf-nav :showIcon="true" :spreadOut="false" bgColor="transparent"></lf-nav>
+		<view class="head">
+			<image class="img" mode="aspectFill" src="https://picsum.photos/seed/picsum/200/300"></image>
+			<view class="suspension" hover-class="lf-opacity" @click="$url('/pages/coupon/index/index')">我的优惠券</view>
+		</view>
+		<view class="coupon-wrap">
+			<view class="coupon-box" v-for="i of 3">
+				<view class="coupon-card lf-m-b-30">
+					<view class="coupon-circle-top">
+						<view class="coupon-circle1"></view>
+					</view>
+					<view class="coupon-circle-bottom">
+						<view class="coupon-circle1"></view>
+					</view>
+					<view class="coupon-radius">
+						<view class="coupon-left">
+							<view class="lf-color-white">
+								<text class="lf-font-24">￥</text>
+								<text class="lf-font-70 lf-color-white lf-font-bold">200</text>
+							</view>
+						</view>
+						<view class="coupon-right">
+							<view class="lf-font-32 lf-font-bold lf-color-white">满1200减200</view>
+							<view class="lf-font-24 lf-color-white">有效期2021.09.09-2021-09.15</view>
+						</view>
+					</view>
+				</view>
+				<view class="coupon-receive" @click="receive">立即领取</view>
+				<block v-if="i == 2">
+					<view class="coupon-opacity"></view>
+					<view class="coupon-end">
+						<view>抢光了</view>
+					</view>
+				</block>
+			</view>
+		</view>
+		<u-back-top :scrollTop="pageScrollTop"></u-back-top>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			receive(){
+				this.$msg('领取成功')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.head{
+		height: 376rpx;
+		width: 750rpx;
+		position: relative;
+		.img{
+			width: 100%;
+			height: 100%;
+		}
+		.suspension{
+			position: absolute;
+			bottom: 30rpx;
+			right: 0;
+			width: 165rpx;
+			height: 54rpx;
+			background: #15716E;
+			border-radius: 100rpx 0rpx 0rpx 100rpx;
+			border: 2rpx solid #FFFFFF;
+			font-size: 24rpx;
+			color: #FFFFFF;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+	}
+	
+	.coupon-wrap {
+		display: flex;
+		justify-content: center;
+		margin-top: 30rpx;
+		flex-direction: column;
+		align-content: center;
+		align-items: center;
+	}
+	.coupon-box{
+		display: flex;
+		align-items: center;
+		position: relative;
+	}
+	.coupon-card {
+		overflow: hidden;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 637rpx;
+		// display: flex;
+		height: 171rpx;
+		// opacity: 0.59;
+		// border: 1rpx solid #FFFFFF;
+		background: #15716E;
+		border-radius: 20rpx;
+		z-index: 3;
+	}
+	.coupon-radius {
+		width: 627rpx;
+		display: flex;
+		height: 161rpx;
+		border: 1rpx dashed #ccc;
+		// background: #15716E;
+		border-radius: 20rpx;
+	}
+	.coupon-circle1 {
+		width: 40rpx;
+		height: 40rpx;
+		background-color: white;
+		border-radius: 50%;
+	}
+	.coupon-circle-top {
+		width: 50rpx;
+		height: 50rpx;
+		border-radius: 50%;
+		// background-color: red;
+		position: absolute;
+		border: 1px dashed #ccc;
+		left: 190rpx;
+		top: -20rpx;
+		display: flex;
+		align-items: center;
+		text-align: center;
+		justify-content: center;
+	}
+	.coupon-circle-bottom {
+		width: 50rpx;
+		height: 50rpx;
+		border-radius: 50%;
+		// background-color: red;
+		position: absolute;
+		border: 1px dashed #ccc;
+		left: 190rpx;
+		bottom: -20rpx;
+		display: flex;
+		align-items: center;
+		text-align: center;
+		justify-content: center;
+	}
+	.coupon-right {
+		text-align: left;
+		justify-content: center;
+		align-items: flex-start;
+		display: flex;
+		flex-direction: column;
+		margin-left: 84rpx;
+	}
+	.coupon-left {
+		margin-left: 40rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+	.coupon-receive{
+		width: 45rpx;
+		height: 126rpx;
+		font-size: 24rpx;
+		background: #22A19F;
+		border-radius: 6rpx;
+		line-height: 1.2;
+		color: #FFFFFF;
+		text-align: center;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		transform: translate(-16rpx, -9rpx) rotate(10deg);
+		transform-origin: bottom;
+		position: relative;
+		z-index: 1;
+	}
+	.coupon-opacity{
+		width: 102%;
+		height: 100%;
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		background-color: rgba(255,255,255,0.5);
+		z-index: 5;
+	}
+	.coupon-end{
+		position: absolute;
+		z-index: 7;
+		width: 136rpx;
+		height: 136rpx;
+		background-color: #15716E;
+		border-radius: 50%;
+		top: calc(50% - 81rpx);
+		left: calc(50% - 68rpx);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		&>view{
+			width: 126rpx;
+			height: 126rpx;
+			border: 2rpx dashed #FFFFFF;
+			border-radius: 50%;
+			font-size: 32rpx;
+			color: #FFFFFF;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			transform: rotate(-38deg);
+		}
+	}
+</style>