feat(卡券):领取

pages/myCoupons/myCoupons.wxml

@@ -1 +1,44 @@
+<!--我的卡券-->
+<view class="coupon_outer">
+  <view class="coupon_li">
+    <view class="coupon_type">折</view>
+    <view class="coupon-title">
+      <view class="coupon-price">5</view>
+      <view class="coupon-title-type">大福系列</view>
+    </view>
+    <view class="coupon-li-line"></view>
+    <view class="coupon-detail">
+      <view class="coupon-detail-title">椰子新品5元尝鲜券</view>
+      <view class="coupon-detail-date">2021.09.07-2021.12.31</view>
+    </view>
+    <view class="use-button">去使用</view>
+  </view>
 
+  <view class="coupon_li">
+    <view class="coupon_type">折</view>
+    <view class="coupon-title">
+      <view class="coupon-price">5</view>
+      <view class="coupon-title-type">大福系列</view>
+    </view>
+    <view class="coupon-li-line"></view>
+    <view class="coupon-detail">
+      <view class="coupon-detail-title">椰子新品5元尝鲜券</view>
+      <view class="coupon-detail-date">2021.09.07-2021.12.31</view>
+    </view>
+    <view class="use-button">去使用</view>
+  </view>
+
+  <view class="coupon_li">
+    <view class="coupon_type">折</view>
+    <view class="coupon-title">
+      <view class="coupon-price">5</view>
+      <view class="coupon-title-type">大福系列</view>
+    </view>
+    <view class="coupon-li-line"></view>
+    <view class="coupon-detail">
+      <view class="coupon-detail-title">椰子新品5元尝鲜券</view>
+      <view class="coupon-detail-date">2021.09.07-2021.12.31</view>
+    </view>
+    <view class="use-button">去使用</view>
+  </view>
+</view>

pages/myCoupons/myCoupons.wxss

@@ -1 +1,77 @@
-/* pages/myCoupons/myCoupons.wxss */
+/* pages/myCoupons/myCoupons.wxss */
+.coupon_outer {
+  padding-top: 20rpx;
+  width: 100%;
+}
+.coupon_li {
+  width: 90%;
+  height: 160rpx;
+  background-image: url("https://zhoumuhao-1993-1256250683.cos.ap-chengdu.myqcloud.com/coupon_list.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto;
+  position: relative;
+  color: #b82231;
+  display: flex;
+}
+.coupon_type {
+  position: absolute;
+  top: 20rpx;
+  left: 20rpx;
+  font-weight: 400;
+  width: 40rpx;
+  height: 40rpx;
+}
+.coupon-title {
+  display: flex;
+  flex-direction: column;
+  margin-left: 30rpx;
+  width: 144rpx;
+  padding-top: 18rpx;
+}
+.coupon-title>view {
+  text-align: center;
+}
+.coupon-price {
+  font-size: 66rpx;
+  font-weight: 700;
+}
+.coupon-title-type {
+  font-size: 22rpx;
+  font-weight: 400;
+}
+.coupon-li-line {
+  width: 2rpx;
+  height: 80%;
+  border-left: 2rpx dashed gray;
+  margin-top: 2%;
+}
+.coupon-detail {
+  margin-top: 30rpx;
+  margin-left: 18rpx;
+}
+.coupon-detail-title {
+  font-weight: 600;
+  font-size: 30rpx;
+}
+.coupon-detail-date {
+  font-size:20rpx;
+  margin-top: 16rpx;
+}
+
+.use-button {
+  width: 140rpx;
+  height: 50rpx;
+  background-color:#b82231;
+  color: #fff;
+  line-height: 50rpx;
+  text-align: center;
+  border-radius: 40rpx;
+  font-size: 24rpx;
+  margin: auto 0;
+  margin-left: 30rpx;
+  cursor: pointer;
+}
+.coupon_outer > .coupon_li {
+  margin-bottom: 20rpx;
+}

project.private.config.json

@@ -23,6 +23,12 @@
           "pathName": "pages/couponReceive/couponReceive",
           "query": "id=Bg5740r78w&codeId=MYR72N738b",
           "scene": null
+        },
+        {
+          "name": "pages/myCoupons/myCoupons",
+          "pathName": "pages/myCoupons/myCoupons",
+          "query": "",
+          "scene": null
         }
       ]
     }