完善添加银行卡功能

pages/discover/punch.vue

@@ -1,4 +1,15 @@
-<script setup></script>
+<script setup>
+  import { ref } from 'vue'
+
+  const indexData = ref([1, 2, 3, 4])
+
+  const onItem = item => {
+    if (indexData.value.includes(item)) {
+      return
+    }
+    indexData.value.push(item)
+  }
+</script>
 
 <template>
   <view class="punch">
@@ -12,20 +23,130 @@
       </template>
     </nav-bar>
     <view class="public-header—box">
-      <!-- <image
-        src="/static/images/ranking-list/title-icon.png"
-        mode="aspectFit"
-        class="left-icon"
-      ></image>
+      <view class="integral-box">
+        <text>我的积分</text>
+        <text>410</text>
+      </view>
       <image
-        src="/static/images/ranking-list/hat.png"
+        src="/static/images/discover/calendar.png"
         mode="aspectFit"
         class="right-icon"
-      ></image> -->
+      ></image>
+    </view>
+
+    <view class="punch-box">
+      <view class="top-title">
+        <text class="title">每日签到领积分</text>
+        <view class="right-box">
+          <text>已连续签到</text>
+          <text>05</text>
+          <text>天</text>
+        </view>
+      </view>
+      <!-- 签到列表 -->
+      <view class="list-box">
+        <view
+          v-for="item in 30"
+          :key="item"
+          :class="{ active: indexData.includes(item) }"
+          class="item"
+          @click="onItem(item)"
+        >
+          <view class="bg-box">
+            <image
+              src="/static/images/discover/bean.png"
+              mode="heightFix"
+              class="icon"
+            ></image>
+            <text>+10</text>
+          </view>
+          <text class="bottom-name">今天</text>
+        </view>
+      </view>
     </view>
   </view>
 </template>
 
 <style lang="scss" scoped>
   @import './styles/index.scss';
+  .punch-box {
+    padding: 0 24rpx;
+    .top-title {
+      font-family: PingFang SC, PingFang SC;
+
+      font-style: normal;
+      text-transform: none;
+      display: flex;
+      align-items: center;
+      .title {
+        font-weight: bold;
+        font-size: 32rpx;
+        color: #333333;
+      }
+      .right-box {
+        margin-left: 32rpx;
+        display: flex;
+        align-items: center;
+        text {
+          font-weight: 500;
+          font-size: 28rpx;
+          color: #666666;
+          &:nth-child(2) {
+            margin: 0 4rpx;
+            color: #00d993;
+          }
+        }
+      }
+    }
+
+    .list-box {
+      margin-top: 38rpx;
+      font-family: PingFang SC, PingFang SC;
+      font-style: normal;
+      text-transform: none;
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      grid-gap: 22rpx;
+      .item {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .bg-box {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          width: 80rpx;
+          height: 100rpx;
+          background: #f4f4f4;
+          border-radius: 8rpx;
+          .icon {
+            height: 48rpx;
+          }
+          text {
+            font-weight: bold;
+            font-size: 24rpx;
+            color: #999999;
+          }
+        }
+        .bottom-name {
+          margin-top: 8rpx;
+          font-size: 24rpx;
+          color: #999999;
+        }
+      }
+      .active {
+        .bg-box {
+          background: linear-gradient(0deg, #00d993 0%, #00d9c5 100%);
+          text {
+            color: #ffffff;
+          }
+        }
+        .bottom-name {
+          color: #00d993;
+        }
+      }
+    }
+  }
 </style>