完善添加银行卡功能

2025-12-27 17:52:08 +08:00
parent 20455490f8
commit 3b9b142c21
44 changed files with 3434 additions and 28 deletions
--- a/pages/discover/dynamic/dynamic.vue
+++ b/pages/discover/dynamic/dynamic.vue
@@ -0,0 +1,115 @@
+<script setup>
+  import { reactive, ref } from 'vue'
+  import { onPageScroll } from '@dcloudio/uni-app'
+
+  const MAX_SCROLL = 446
+
+  const cbNavBar = ref({})
+  const topIcon = reactive({
+    leftColor: '#ffffff',
+    rightColor: '#ffffff'
+  })
+
+  onPageScroll(e => {
+    cbNavBar.value?.updateScroll(e.scrollTop)
+    if (e.scrollTop > MAX_SCROLL - 220) {
+      topIcon.leftColor = '#000'
+      topIcon.rightColor = '#000'
+    } else {
+      topIcon.leftColor = '#ffffff'
+      topIcon.rightColor = '#ffffff'
+    }
+  })
+</script>
+
+<template>
+  <view class="dynamic">
+    <nav-bar
+      ref="cbNavBar"
+      isTopBg
+      target-color="#f9f9f9"
+      :max-scroll="MAX_SCROLL"
+    >
+      <template #back>
+        <uni-icons
+          :color="topIcon.leftColor"
+          type="left"
+          size="24"
+        ></uni-icons>
+      </template>
+      <template #right>
+        <uni-icons
+          :color="topIcon.rightColor"
+          type="camera"
+          size="24"
+        ></uni-icons>
+      </template>
+    </nav-bar>
+    <view class="top-bg-img">
+      <image
+        src="https://wx4.sinaimg.cn/mw690/006i0nC8ly1hqugav3k6yj31o01o0aod.jpg"
+        mode="aspectFill"
+        class="img"
+      ></image>
+      <!-- 用户信息 -->
+      <view class="user-info">
+        <text>名字</text>
+        <image
+          src="https://img2.baidu.com/it/u=3408192385,656358498&fm=253&app=138&f=JPEG?w=760&h=760"
+          mode="aspectFill"
+          class="avatar"
+        ></image>
+      </view>
+    </view>
+
+    <!-- 动态列表 -->
+    <view class="dynamic-list">
+      <view v-for="item in 4" class="list">
+        <image
+          src="https://img1.baidu.com/it/u=2645961124,1296922095&fm=253&app=138&f=JPEG?w=800&h=1530"
+          mode="aspectFill"
+          class="avatar"
+        ></image>
+        <view class="content">
+          <text class="name">名字</text>
+          <text class="text">这是一条朋友圈的标题</text>
+          <view class="img-list">
+            <image
+              src="https://p4.itc.cn/images01/20220619/46660ed163164c14be90e605a73ee5e8.jpeg"
+              mode="aspectFill"
+              class="item-img"
+            ></image>
+          </view>
+          <!-- 地址 -->
+          <view class="address">
+            <text>19分钟前</text>
+            <text>重庆市渝北xxx寄街道</text>
+          </view>
+          <!-- 点赞评论 -->
+          <view class="like-box">
+            <view class="like">
+              <uni-icons
+                type="hand-up"
+                size="20"
+                color="#747474"
+              ></uni-icons>
+              <text>22</text>
+            </view>
+            <uni-icons type="chat" size="20" color="#747474"></uni-icons>
+          </view>
+          <!-- 评论内容 -->
+          <view class="comment">
+            <view v-for="item in 3" :key="item" class="comment-item">
+              <text>Admin:</text>
+              <text>确实的很好，值得推荐的很好</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  @import '../styles/dynamic.scss';
+</style>